feat: app page restyling

src/components/AppButtons.tsx

@@ -75,12 +75,12 @@ export default function ({
 
       {enabled && externalUrl && (
         <IconButton component={RLink} to={{ pathname: externalUrl }} target='_blank' onClick={handleClickModal}>
-          <Iconify icon='ri:share-forward-fill' sx={{ color: theme.palette.text.secondary }} />
+          <Iconify icon='ri:share-forward-line' sx={{ color: '#3682db' }} />
         </IconButton>
       )}
 
       <IconButton component={RLink} to={`/apps/${teamId}/${id}`} title={t('Click to edit settings')}>
-        <Iconify icon='material-symbols:settings' sx={{ color: theme.palette.text.secondary }} />
+        <Iconify icon='iconamoon:settings' sx={{ color: '#3682db' }} />
       </IconButton>
     </ButtonGroup>
   )

src/components/AppCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Chip, Typography } from '@mui/material'
+import { Box, Chip, Typography, useTheme } from '@mui/material'
 import React, { CSSProperties } from 'react'
 import { Link } from 'react-router-dom'
 import { makeStyles } from 'tss-react/mui'
@@ -16,7 +16,8 @@ const useStyles = makeStyles()((theme) => {
       paddingRight: theme.spacing(1),
       paddingBottom: theme.spacing(2),
       paddingTop: theme.spacing(2),
-      backgroundColor: theme.palette.divider,
+      backgroundColor: theme.palette.background.default,
+      border: `1px solid ${theme.palette.divider}`,
       margin: '5px',
       maxHeight: '200px',
       height: '58px',
@@ -29,14 +30,8 @@ const useStyles = makeStyles()((theme) => {
       '&:hover .hidden-button': {
         visibility: 'visible',
       },
-      '& .beta-label': {
-        visibility: 'visible',
-        position: 'relative',
-        transform: 'translateX(0) translateY(0)',
-        width: 'auto',
-      },
-      '&:hover .beta-label': {
-        visibility: 'hidden',
+      '&:hover': {
+        border: '1px solid #c2c2ca',
       },
     },
     disabled: {
@@ -48,6 +43,20 @@ const useStyles = makeStyles()((theme) => {
       height: '32px',
       width: '32px',
     },
+    chip: {
+      height: '20px',
+      fontSize: '0.65rem',
+      border: 'none',
+      borderRadius: '5px',
+    },
+    chipDark: {
+      color: 'rgb(174, 192, 245)',
+      backgroundColor: 'lch(77.7 28.7 275 / 0.12)',
+    },
+    chipLight: {
+      color: '#696970',
+      backgroundColor: 'rgba(0, 0, 0, 0.08)',
+    },
     contrast: {
       filter: 'drop-shadow(0 0 2px white)',
     },
@@ -95,6 +104,8 @@ export default function ({
   openModal,
 }: any): React.ReactElement {
   const { classes, cx } = useStyles()
+  const theme = useTheme()
+  const isLight = theme.palette.mode === 'light'
   const image = (
     <img
       draggable={false}
@@ -135,12 +146,16 @@ export default function ({
         <Typography className={cx(classes.title)} variant='h6'>
           {title}
         </Typography>
+        {isBeta && (
+          <Box>
+            <Chip
+              className={cx(classes.chip, isLight ? classes.chipLight : classes.chipDark)}
+              label='BETA'
+              variant='outlined'
+            />
+          </Box>
+        )}
       </Link>
-      {isBeta && (
-        <Box className='beta-label'>
-          <Chip label='BETA' variant='outlined' />
-        </Box>
-      )}
       <Box className='hidden-button'>
         <AppButtons
           id={id}

src/components/CatalogCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Chip, Tooltip, Typography } from '@mui/material'
+import { Box, Chip, Tooltip, Typography, useTheme } from '@mui/material'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { makeStyles } from 'tss-react/mui'
@@ -14,24 +14,30 @@ const useStyles = makeStyles()((theme) => {
       paddingRight: theme.spacing(1),
       paddingBottom: theme.spacing(2),
       paddingTop: theme.spacing(2),
-      backgroundColor: theme.palette.divider,
+      backgroundColor: theme.palette.background.default,
+      border: `1px solid ${theme.palette.divider}`,
       margin: '5px',
       maxHeight: '200px',
       height: '58px',
-      '& .beta-label': {
-        visibility: 'visible',
-        position: 'relative',
-        transform: 'translateX(0) translateY(0)',
-        width: 'auto',
-      },
-      '&:hover .beta-label': {
-        visibility: 'hidden',
-      },
     },
     img: {
       height: '32px',
       width: '32px',
     },
+    chip: {
+      height: '20px',
+      fontSize: '0.65rem',
+      border: 'none',
+      borderRadius: '5px',
+    },
+    chipDark: {
+      color: 'rgb(174, 192, 245)',
+      backgroundColor: 'lch(77.7 28.7 275 / 0.12)',
+    },
+    chipLight: {
+      color: '#696970',
+      backgroundColor: 'rgba(0, 0, 0, 0.08)',
+    },
     link: {
       display: 'flex',
       marginLeft: '5px',
@@ -58,7 +64,9 @@ interface Props {
 }
 
 export default function ({ img, teamId, name, isBeta }: Props): React.ReactElement {
-  const { classes } = useStyles()
+  const { classes, cx } = useStyles()
+  const theme = useTheme()
+  const isLight = theme.palette.mode === 'light'
   const image = (
     <img
       draggable={false}
@@ -83,8 +91,12 @@ export default function ({ img, teamId, name, isBeta }: Props): React.ReactEleme
             {name.replace('otomi-quickstart-', '')}
           </Typography>
           {isBeta && (
-            <Box className='beta-label'>
-              <Chip label='BETA' variant='outlined' />
+            <Box>
+              <Chip
+                className={cx(classes.chip, isLight ? classes.chipLight : classes.chipDark)}
+                label='BETA'
+                variant='outlined'
+              />
             </Box>
           )}
         </Link>

src/components/EnhancedTable.tsx

@@ -51,14 +51,17 @@ function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
 
 // ---------------- styles ----------------------
 
-const StyledTableHeaderCell = styled(TableCell)({
-  borderWidth: '2px 2px',
-  borderStyle: 'solid',
-  borderColor: 'background.contrastAlt',
+const StyledTableHeaderCell = styled(TableCell)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.contrastAlt,
   color: 'rgb(136, 143, 145)',
   fontFamily: 'LatoWebBold, sans-serif',
   padding: '10px 15px',
-})
+}))
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+}))
 
 // --------------------------------------------
 
@@ -131,7 +134,6 @@ export function EnhancedTableHead(props: EnhancedTableHeadProps) {
         )}
         {headCells.map((headCell) => (
           <StyledTableHeaderCell
-            sx={{ backgroundColor: 'background.contrastAlt', borderColor: 'background.default' }}
             key={headCell.id}
             align={headCell.numeric ? 'right' : 'left'}
             padding={headCell.disablePadding ? 'none' : 'normal'}
@@ -260,7 +262,7 @@ export default function EnhancedTable({
                 const labelId = `enhanced-table-checkbox-${index}`
                 const key = `row-${typeof idKey === 'function' ? idKey(row) : row[idKey]}`
                 return (
-                  <TableRow
+                  <StyledTableRow
                     hover
                     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
                     onClick={(event) => handleClick(event, row.name as string)}
@@ -269,7 +271,6 @@ export default function EnhancedTable({
                     tabIndex={-1}
                     key={key}
                     selected={isItemSelected}
-                    sx={{ border: '1px solid', borderColor: 'background.default' }}
                   >
                     {!disableSelect && (
                       <TableCell padding='checkbox' key='header-checkbox'>
@@ -286,7 +287,7 @@ export default function EnhancedTable({
                         {c.renderer ? c.renderer(row) : row[c.id]}
                       </TableCell>
                     ))}
-                  </TableRow>
+                  </StyledTableRow>
                 )
               })}
               {emptyRows > 0 && (

src/components/Header.tsx

@@ -118,7 +118,7 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
 
   return (
     <RootStyle
-      sx={{ backgroundColor: 'background.contrast' }}
+      sx={{ backgroundColor: 'background.header' }}
       isCollapse={isCollapse}
       isOffset={isOffset}
       verticalLayout={verticalLayout}

src/theme/overrides/Table.ts

@@ -30,9 +30,6 @@ export default function Table(theme: Theme) {
           backgroundImage: `linear-gradient(to bottom, ${theme.palette.background.neutral} 0%, ${theme.palette.background.neutral} 100%)`,
         },
         body: {
-          '&:first-of-type': {
-            paddingLeft: theme.spacing(3),
-          },
           '&:last-of-type': {
             paddingRight: theme.spacing(3),
           },

src/theme/palette.ts

@@ -27,6 +27,11 @@ interface ChartPaletteOptions {
 
 declare module '@mui/material/styles/createPalette' {
   interface TypeBackground {
+    paper: string
+    default: string
+    contrast: string
+    contrastAlt: string
+    sidebar: string
     neutral: string
   }
   interface SimplePaletteColorOptions {
@@ -121,9 +126,11 @@ const GREY = {
   300: '#DFE3E8',
   400: '#C4CDD5',
   500: '#919EAB',
-  600: '#3A3F46',
+  520: '#515157',
+  550: '#3d3d42',
+  600: '#343438',
   700: '#33373e',
-  800: '#2E3238',
+  800: '#222222',
   900: '#161C24',
   500_8: alpha('#919EAB', 0.08),
   500_12: alpha('#919EAB', 0.12),
@@ -134,7 +141,6 @@ const GREY = {
   500_56: alpha('#919EAB', 0.56),
   500_80: alpha('#919EAB', 0.8),
 }
-
 const GRADIENTS = {
   primary: createGradient(PRIMARY.light, PRIMARY.main),
   cyan: createGradient(CYAN.light, CYAN.main),
@@ -164,7 +170,6 @@ const COMMON = {
   grey: GREY,
   gradients: GRADIENTS,
   chart: CHART_COLORS,
-  divider: GREY[500_24],
   action: {
     hover: GREY[500_8],
     selected: GREY[500_16],
@@ -181,11 +186,13 @@ const palette = {
     ...COMMON,
     mode: 'light',
     text: { primary: GREY[800], secondary: GREY[600], disabled: GREY[500] },
+    divider: GREY[500_24],
     background: {
-      paper: '#fff',
+      paper: GREY[0],
       default: GREY[100],
-      contrast: '#fff',
+      contrast: GREY[0],
       contrastAlt: GREY[50],
+      header: GREY[0],
       sidebar: GREY[600],
       neutral: GREY[200],
     },
@@ -195,11 +202,13 @@ const palette = {
     ...COMMON,
     mode: 'dark',
     text: { primary: '#fff', secondary: GREY[500], disabled: GREY[300] },
+    divider: GREY[520],
     background: {
-      paper: GREY[800],
+      paper: GREY[550],
       default: GREY[600],
-      contrast: GREY[800],
-      contrastAlt: GREY[700],
+      contrast: GREY[550],
+      contrastAlt: GREY[600],
+      header: GREY[800],
       sidebar: GREY[800],
       neutral: GREY[500],
     },