update colors, scroll

RegionX-Labs · Apr 19, 2024 · 5755ec1 · 5755ec1
1 parent f02c29b
commit 5755ec1
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 132 deletions.
diff --git a/src/components/Elements/FeatureCard/index.module.scss b/src/components/Elements/FeatureCard/index.module.scss
@@ -1,20 +1,23 @@
 .card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 100%;
   margin: auto;
   text-align: center;
   box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
 }
 
 .icon {
-  margin-top: .5em;
-  width: 72px;
+  width: 8rem;
   height: auto;
   color: #757575;
 }
 
 .button {
-  margin-bottom: 20px;
-  margin: 1em auto;
-  font-size: 16px;
-  padding: 0.5em 1em;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin: 1rem 0;
 }
diff --git a/src/components/Elements/FeatureCard/index.tsx b/src/components/Elements/FeatureCard/index.tsx
@@ -4,6 +4,7 @@ import {
   CardActions,
   CardContent,
   Typography,
+  useTheme,
 } from '@mui/material';
 import Image, { StaticImageData } from 'next/image';
 import { useRouter } from 'next/router';
@@ -27,13 +28,14 @@ export const FeatureCard = ({
   href,
 }: FeatureCardProps) => {
   const { push } = useRouter();
+  const theme = useTheme();
 
   return (
     <Card className={styles.card}>
       <CardContent>
         <Image className={styles.icon} src={image} alt='' />
       </CardContent>
-      <Typography variant='h5' component='h2' gutterBottom>
+      <Typography variant='h1' gutterBottom>
         {title}
       </Typography>
       <CardActions>
@@ -43,6 +45,10 @@ export const FeatureCard = ({
           variant='text'
           disabled={!enabled}
           className={styles.button}
+          sx={{
+            background: '#e8eff7',
+            color: theme.palette.text.secondary,
+          }}
         >
           {buttonText}
         </Button>

diff --git a/src/components/Elements/RegionCard/index.module.scss b/src/components/Elements/RegionCard/index.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   gap: 1.5rem;
   border-radius: 0.5rem;
-  max-width: 45rem;
+  max-width: 50rem;
   padding: 1.5rem 2rem;
 }
 

diff --git a/src/components/Layout/index.module.scss b/src/components/Layout/index.module.scss
@@ -15,8 +15,8 @@
 .main {
   display: flex;
   flex-direction: column;
-  padding-left: 4rem;
-  padding-right: 5rem;
-  padding-top: 2rem;
+  padding: 2rem 4rem;
   flex-grow: 1;
+  min-height: calc(100vh - 9rem);
+  max-height: calc(100vh - 9rem);
 }
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, Paper, useTheme } from '@mui/material';
+import { Paper } from '@mui/material';
 import React, { ReactElement } from 'react';
 
 import styles from './index.module.scss';
@@ -10,7 +10,6 @@ interface Props {
 }
 
 export const Layout = ({ children }: Props) => {
-  const theme = useTheme();
   return (
     <div className={styles.layout}>
       <Sidebar />
@@ -21,17 +20,12 @@ export const Layout = ({ children }: Props) => {
           sx={{
             display: 'flex',
             flexGrow: 1,
-            margin: '1rem 0.5rem 0 2rem',
-            borderTopLeftRadius: '1rem',
-            borderBottomLeftRadius: '1rem',
-            paddingTop: '1rem',
-            paddingBottom: '2rem',
+            margin: '1rem 2rem',
+            borderRadius: '1rem',
+            py: '1rem',
           }}
         >
-          <Divider
-            sx={{ borderWidth: '1px', borderColor: theme.palette.grey[100] }}
-          />
-          <main className={styles.main}>{children}</main>
+          <div className={styles.main}>{children}</div>
         </Paper>
       </div>
     </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -14,16 +14,16 @@ const Home = () => {
     <Box>
       <Box>
         <Typography
-          variant='subtitle2'
-          sx={{ color: theme.palette.text.secondary }}
+          variant='subtitle1'
+          sx={{ color: theme.palette.common.black }}
         >
-          Explore all the possibilities RegionX offers
+          Home
         </Typography>
         <Typography
-          variant='subtitle1'
+          variant='subtitle2'
           sx={{ color: theme.palette.text.primary }}
         >
-          Home
+          Explore all the possibilities RegionX offers
         </Typography>
       </Box>
       <Box marginTop='2em'>

diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx
@@ -195,16 +195,16 @@ const Purchase = () => {
       >
         <Box>
           <Typography
-            variant='subtitle2'
-            sx={{ color: theme.palette.text.secondary }}
+            variant='subtitle1'
+            sx={{ color: theme.palette.common.black }}
           >
-            Purchase a core directly from the Coretime chain
+            Purchase a core
           </Typography>
           <Typography
-            variant='subtitle1'
+            variant='subtitle2'
             sx={{ color: theme.palette.text.primary }}
           >
-            Purchase a core
+            Purchase a core directly from the Coretime chain
           </Typography>
         </Box>
         <Typography variant='h6' sx={{ color: theme.palette.text.primary }}>

diff --git a/src/pages/regions.tsx b/src/pages/regions.tsx
@@ -110,37 +110,50 @@ const Dashboard = () => {
     <Box
       sx={{
         display: 'flex',
-        height: '100%',
-        gap: '1rem',
-        justifyContent: 'space-between',
+        flexDirection: 'column',
+        maxHeight: 'calc(100% - 2rem)',
       }}
     >
-      <Box sx={{ maxWidth: '45rem', flexGrow: 1, overflow: 'auto' }}>
-        <Box>
-          <Typography
-            variant='subtitle2'
-            sx={{ color: theme.palette.text.secondary }}
-          >
-            Manage your cores
-          </Typography>
-          <Typography
-            variant='subtitle1'
-            sx={{ color: theme.palette.text.primary }}
-          >
-            Regions Dashboard
-          </Typography>
-        </Box>
+      <Box>
+        <Typography
+          variant='subtitle1'
+          sx={{ color: theme.palette.common.black }}
+        >
+          Regions Dashboard
+        </Typography>
+        <Typography
+          variant='subtitle2'
+          sx={{ color: theme.palette.text.primary }}
+        >
+          Manage your cores
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'space-between',
+        }}
+      >
         <Box
           sx={{
+            maxWidth: '50rem',
+            flexGrow: 1,
+            overflowY: 'auto',
             display: 'flex',
             flexDirection: 'column',
             gap: '2rem',
             mt: '1rem',
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
           }}
         >
-          <Backdrop open={loading}>
-            <CircularProgress />
-          </Backdrop>
+          {loading && (
+            <Backdrop open>
+              <CircularProgress />
+            </Backdrop>
+          )}
           {regions.length === 0 ? (
             <>
               <Typography>
@@ -163,84 +176,85 @@ const Dashboard = () => {
             </>
           )}
         </Box>
-      </Box>
-      <Box
-        sx={{
-          borderRadius: '.5rem',
-          color: theme.palette.text.secondary,
-          background: theme.palette.background.default,
-          minWidth: 280,
-          height: 500,
-          marginTop: '2rem',
-          padding: '2rem 3rem',
-        }}
-      >
-        <Typography variant='h1'>Manage</Typography>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1.5rem',
-            marginTop: '3rem',
-            alignItems: 'flex-start',
+            borderRadius: '.5rem',
+            color: theme.palette.text.secondary,
+            background: theme.palette.background.default,
+            minWidth: 280,
+            height: 500,
+            padding: '2rem 3rem',
           }}
         >
-          {management.map(({ label, icon: Icon, onClick }, index) => (
-            <Button
-              key={index}
-              sx={{
-                color: theme.palette.text.secondary,
-                textTransform: 'capitalize',
-              }}
-              startIcon={
-                <Icon
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
-                  color={theme.palette.text.secondary}
-                />
-              }
-              disabled={isDisabled(label)}
-              onClick={onClick}
-            >
-              {label}
-            </Button>
-          ))}
+          <Typography variant='h1' color={theme.palette.text.primary}>
+            Manage
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1.5rem',
+              marginTop: '3rem',
+              alignItems: 'flex-start',
+            }}
+          >
+            {management.map(({ label, icon: Icon, onClick }, index) => (
+              <Button
+                key={index}
+                sx={{
+                  color: theme.palette.text.primary,
+                  textTransform: 'capitalize',
+                }}
+                startIcon={
+                  <Icon
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    color={theme.palette.text.primary}
+                  />
+                }
+                disabled={isDisabled(label)}
+                onClick={onClick}
+              >
+                {label}
+              </Button>
+            ))}
+          </Box>
         </Box>
+        {regionSelected && (
+          <>
+            <PartitionModal
+              open={partitionModalOpen}
+              onClose={() => openPartitionModal(false)}
+              regionMetadata={selectedRegion}
+            />
+            <InterlaceModal
+              open={interlaceModalOpen}
+              onClose={() => openInterlaceModal(false)}
+              regionMetadata={selectedRegion}
+            />
+            <TaskAssignModal
+              open={assignModalOpen}
+              onClose={() => openAssignModal(false)}
+              regionMetadata={selectedRegion}
+            />
+            <TransferModal
+              open={transferModalOpen}
+              onClose={() => openTransferModal(false)}
+              regionMetadata={selectedRegion}
+            />
+            <SellModal
+              open={sellModalOpen}
+              onClose={() => openSellModal(false)}
+              regionMetadata={selectedRegion}
+            />
+            <UnlistModal
+              open={unlistModalOpen}
+              onClose={() => openUnlistModal(false)}
+              regionMetadata={selectedRegion}
+            />
+          </>
+        )}
       </Box>
-      {regionSelected && (
-        <>
-          <PartitionModal
-            open={partitionModalOpen}
-            onClose={() => openPartitionModal(false)}
-            regionMetadata={selectedRegion}
-          />
-          <InterlaceModal
-            open={interlaceModalOpen}
-            onClose={() => openInterlaceModal(false)}
-            regionMetadata={selectedRegion}
-          />
-          <TaskAssignModal
-            open={assignModalOpen}
-            onClose={() => openAssignModal(false)}
-            regionMetadata={selectedRegion}
-          />
-          <TransferModal
-            open={transferModalOpen}
-            onClose={() => openTransferModal(false)}
-            regionMetadata={selectedRegion}
-          />
-          <SellModal
-            open={sellModalOpen}
-            onClose={() => openSellModal(false)}
-            regionMetadata={selectedRegion}
-          />
-          <UnlistModal
-            open={unlistModalOpen}
-            onClose={() => openUnlistModal(false)}
-            regionMetadata={selectedRegion}
-          />
-        </>
-      )}
     </Box>
   );
 };