style tweaks

mui · Sep 5, 2023 · d29b716 · d29b716
1 parent 5c420d8
commit d29b716
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/docs/src/components/about/AboutHero.tsx b/docs/src/components/about/AboutHero.tsx
@@ -82,7 +82,7 @@ function PhotoGallery() {
     <Box
       sx={(theme) => ({
         borderRadius: 1,
-        overflow: 'auto',
+        overflow: 'hidden',
         position: 'relative',
         minWidth: '100%',
         display: 'flex',
@@ -100,12 +100,12 @@ function PhotoGallery() {
           zIndex: 2,
         },
         '&::before': {
-          right: -20,
+          right: { xs: -64, sm: -20 },
           top: 0,
           transform: 'rotateZ(180deg)',
         },
         '&::after': {
-          left: -20,
+          left: { xs: -64, sm: -20 },
           top: 0,
         },
         ...theme.applyDarkStyles({

diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
@@ -107,10 +107,22 @@ export default function OurValues() {
               <Typography
                 fontWeight="bold"
                 component="h3"
-                color="text.primary"
                 variant="body2"
-                mt={2}
-                mb={0.5}
+                sx={(theme) => ({
+                  mt: 2,
+                  mb: 0.5,
+                  color: (theme.vars || theme).palette.text.primary,
+                  '&::first-letter': {
+                    mr: 0.1,
+                    fontSize: theme.typography.pxToRem(18),
+                    color: (theme.vars || theme).palette.primary.main,
+                  },
+                  ...theme.applyDarkStyles({
+                    '&::first-letter': {
+                      color: (theme.vars || theme).palette.primary[400],
+                    },
+                  }),
+                })}
               >
                 {title}
               </Typography>

diff --git a/docs/src/components/about/TeamStatistics.tsx b/docs/src/components/about/TeamStatistics.tsx
@@ -12,7 +12,7 @@ export default function TeamStatistics() {
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
       {data.map((item) => (
-        <Box key={item.title} sx={{ height: '100%', minWidth: { xs: 'auto', sm: 200 } }}>
+        <Box key={item.title} sx={{ height: '100%', width: { xs: '100%', sm: 200 } }}>
           <Typography
             component="p"
             variant="h4"