Add floating card design for plots and database editor

architecture-building-systems · Sep 16, 2024 · dec1a39 · dec1a39
1 parent ed9614a
commit dec1a39
Showing 1 changed file with 30 additions and 4 deletions.
diff --git a/src/containers/HomePage.jsx b/src/containers/HomePage.jsx
@@ -39,15 +39,41 @@ const HomePageContent = () => {
         </Route>
         <Route path={routes.DASHBOARD}>
           <Suspense>
-            <Cardwrapper>
-              <Dashboard />
+            <Cardwrapper style={{ backgroundColor: '#D4DADC' }}>
+              <div
+                style={{
+                  height: '100%',
+                  overflow: 'auto',
+                  background: '#fff',
+                  borderRadius: 8,
+                  border: '1px solid #eee',
+
+                  padding: 12,
+                  boxSizing: 'border-box',
+                }}
+              >
+                <Dashboard />
+              </div>
             </Cardwrapper>
           </Suspense>
         </Route>
         <Route path={routes.DATABASE_EDITOR}>
           <Suspense>
-            <Cardwrapper>
-              <DatabaseEditor />
+            <Cardwrapper style={{ backgroundColor: '#D4DADC' }}>
+              <div
+                style={{
+                  height: '100%',
+                  overflow: 'auto',
+                  background: '#fff',
+                  borderRadius: 8,
+                  border: '1px solid #eee',
+
+                  padding: 24,
+                  boxSizing: 'border-box',
+                }}
+              >
+                <DatabaseEditor />
+              </div>
             </Cardwrapper>
           </Suspense>
         </Route>