Merge pull request #29 from ResilientApp/SRUM-99x

SRUM-99x
ResilientApp · May 1, 2024 · bd1d8a8 · bd1d8a8
2 parents 251a250 + cd3fdf0
commit bd1d8a8
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-axios": "^2.0.6",
     "react-chartjs-2": "^5.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",

diff --git a/src/App.js b/src/App.js
@@ -7,11 +7,13 @@ import Footer from './Components/Shared/Footer';
 import Loader from './Components/Shared/Loader';
 import Navbar from './Components/Shared/Navbar';
 import NotFound from './Components/Shared/NotFound';
+import OnlyDesktop from './Components/Shared/OnlyDesktop';
+import ParticleWrapper from './Components/Shared/ParticleWrapper';
 import { AllProviders } from './Context';
 import { NavbarToggleContext } from './Context/navbarToggle';
 import { ThemeContext } from './Context/theme';
 import './Styles/App.css';
-import ParticleWrapper from './Components/Shared/ParticleWrapper';
+import { isMobile } from 'react-device-detect';
 
 const BorderToggleRef = () => {
   const { bToggleElement } = useContext(NavbarToggleContext);
@@ -46,19 +48,25 @@ const PreSynthApp = () => {
       {isLoading ? (
         <Loader />
       ) : (
-          <Router>
-            <ParticleWrapper />
-            <Navbar borderToggle={borderToggle} />
-            <BorderToggleRef />
-            <Routes>
-              <Route path='/pages/team' element={<Team />} />
-              <Route path='/pages/home' element={<Home />} />
-              <Route path='/pages/visualizer' element={<Visualizer />} />
-              <Route path='*' element={<NotFound  />} />
-              <Route index element={<Navigate to="/pages/home" />} />
-            </Routes>
-            <Footer />
-          </Router>
+          <>
+            {isMobile ? (
+              <OnlyDesktop />
+            ) : (
+              <Router>
+                <ParticleWrapper />
+                <Navbar borderToggle={borderToggle} />
+                <BorderToggleRef />
+                <Routes>
+                  <Route path='/pages/team' element={<Team />} />
+                  <Route path='/pages/home' element={<Home />} />
+                  <Route path='/pages/visualizer' element={<Visualizer />} />
+                  <Route path='*' element={<NotFound />} />
+                  <Route index element={<Navigate to="/pages/home" />} />
+                </Routes>
+                <Footer />
+              </Router >
+            )}
+          </>
       )}
     </>
   );

diff --git a/src/Components/Shared/OnlyDesktop.js b/src/Components/Shared/OnlyDesktop.js
@@ -0,0 +1,29 @@
+import React, { useContext } from 'react'
+import { ThemeContext } from '../../Context/theme';
+
+const OnlyDesktop = () => {
+
+    const { theme } = useContext(ThemeContext);
+
+    const logo = theme ? 'https://i.postimg.cc/jd6PkhDs/Res-View-Logo-Dark.png' : 'https://i.postimg.cc/Y0dMy9mf/Copy-of-Untitled-Design-removebg-preview.png';
+
+  return (
+      <div className='flex items-center justify-center flex-col m-4 p-2 h-[95vh]'>
+          <div className="m-2">
+              <img
+                  src={logo}
+                  alt='ResDb View Logo'
+                  className='h-100p w-100p'
+              />
+          </div>
+          <div className='dark:text-white text-gray-700 text-18p text-bold flex items-center justify-center text-center'>
+              ResView is available only on desktops, Macs and PCs
+          </div>
+          <div className='mt-2 dark:text-white text-gray-700 flex items-center justify-center text-16p'>
+              Please check it out using a laptop!
+          </div>
+      </div>
+  )
+}
+
+export default OnlyDesktop
diff --git a/src/Styles/App.css b/src/Styles/App.css
@@ -539,6 +539,9 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
+.m-4 {
+  margin: 1rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -617,6 +620,9 @@ video {
 .me-3 {
   margin-inline-end: 0.75rem;
 }
+.ml-8 {
+  margin-left: 2rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -692,6 +698,9 @@ video {
 .h-10 {
   height: 2.5rem;
 }
+.h-100p {
+  height: 100px;
+}
 .h-11 {
   height: 2.75rem;
 }
@@ -731,6 +740,9 @@ video {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[95vh\] {
+  height: 95vh;
+}
 .h-auto {
   height: auto;
 }
@@ -752,6 +764,9 @@ video {
 .w-150p {
   width: 150px;
 }
+.w-180p {
+  width: 180px;
+}
 .w-2 {
   width: 0.5rem;
 }
@@ -827,6 +842,12 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+.basis-1\/4 {
+  flex-basis: 25%;
+}
 .rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -864,6 +885,9 @@ video {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.flex-row {
+  flex-direction: row;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -989,6 +1013,10 @@ video {
 .border-dashed {
   border-style: dashed;
 }
+.border-amber-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(217 119 6 / var(--tw-border-opacity));
+}
 .border-blue-190 {
   --tw-border-opacity: 1;
   border-color: rgb(24 151 136 / var(--tw-border-opacity));
@@ -1111,6 +1139,9 @@ video {
 .object-fill {
   object-fit: fill;
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1297,6 +1328,10 @@ video {
 .leading-none {
   line-height: 1;
 }
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity));
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));