From e4ab07c51856312c8f85e3c2e70b27855d881cbc Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 12 Sep 2023 17:17:00 -0300
Subject: [PATCH] add a few design tweaks to some elements of the landing page

---
 docs/src/components/landing/CodeBlock.js   | 15 +++++++++++++--
 docs/src/components/landing/GithubStars.js |  2 +-
 docs/src/components/landing/Hero.js        |  4 ++--
 docs/src/components/landing/UseCases.js    |  9 +++++----
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/docs/src/components/landing/CodeBlock.js b/docs/src/components/landing/CodeBlock.js
index 3976e874e91..ffd87a895d1 100644
--- a/docs/src/components/landing/CodeBlock.js
+++ b/docs/src/components/landing/CodeBlock.js
@@ -225,6 +225,7 @@ export default function CodeBlock({ appMode, fileIndex, setFrameIndex }) {
             TabIndicatorProps={{
               sx: {
                 left: `${indicatorLeft}px!important`,
+                backgroundColor: 'primary.400',
               },
             }}
             sx={{ minHeight: 'auto' }}
@@ -236,10 +237,20 @@ export default function CodeBlock({ appMode, fileIndex, setFrameIndex }) {
                 value={index.toString()}
                 ref={tabRef}
                 key={index}
-                sx={{
+                sx={(theme) => ({
                   minHeight: 0,
                   padding: '12px 14px',
-                }}
+                  color: (theme.vars || theme).palette.grey[500],
+                  '&.Mui-selected': {
+                    color: (theme.vars || theme).palette.primary[300],
+                  },
+                  '&:hover': {
+                    color: (theme.vars || theme).palette.grey[300],
+                    '&.Mui-selected': {
+                      color: (theme.vars || theme).palette.primary[300],
+                    },
+                  },
+                })}
               />
             ))}
           </TabList>
diff --git a/docs/src/components/landing/GithubStars.js b/docs/src/components/landing/GithubStars.js
index 66b0b799044..41da91bc640 100644
--- a/docs/src/components/landing/GithubStars.js
+++ b/docs/src/components/landing/GithubStars.js
@@ -61,7 +61,7 @@ export default function GithubStars() {
           display: 'flex',
           alignItem: 'center',
           ml: 0.5,
-          color: theme.palette.primary[700],
+          color: theme.palette.primary[500],
           ...theme.applyDarkStyles({
             color: theme.palette.primary[200],
           }),
diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index d96cc31a31a..e47ffe18444 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -270,7 +270,7 @@ export default function Hero() {
                 sm: 'unset',
                 md: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
               },
-              boxShadow: `0 0 16px ${alpha(theme.palette.grey[100], 0.9)}`,
+              boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.9)}`,
             }),
             (theme) =>
               theme.applyDarkStyles({
@@ -278,7 +278,7 @@ export default function Hero() {
                   (theme.vars || theme).palette.primaryDark[500]
                 } 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
                 borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
-                boxShadow: `0 4px 8px ${alpha(theme.palette.primaryDark[600], 0.5)}`,
+                boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.8)}`,
               }),
           ]}
         >
diff --git a/docs/src/components/landing/UseCases.js b/docs/src/components/landing/UseCases.js
index 7a533694f38..dec66363762 100644
--- a/docs/src/components/landing/UseCases.js
+++ b/docs/src/components/landing/UseCases.js
@@ -29,14 +29,15 @@ const ImageContainer = styled(Link)(({ theme }) => [
     )} 150%)`,
     border: '1px solid',
     borderColor: (theme.vars || theme).palette.grey[100],
-    boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.5)}`,
+    boxShadow: `0 2px 4px ${alpha(theme.palette.grey[100], 0.8)}`,
     overflow: 'hidden',
   },
   theme.applyDarkStyles({
-    background: `linear-gradient(120deg, ${(theme.vars || theme).palette.primaryDark[500]
-      } 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
+    background: `linear-gradient(120deg, ${
+      (theme.vars || theme).palette.primaryDark[500]
+    } 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
     borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
-    boxShadow: `0 4px 8px ${alpha(theme.palette.primaryDark[600], 0.5)}`,
+    boxShadow: `0 2px 4px ${alpha(theme.palette.common.black, 0.8)}`,
   }),
 ]);