fix: small css fixes + footer copy update (#269)

* fix: remove redundant Typography component variant * fix: remove vendor-prefixed css property * refactor: use a CSS global variable for `transition-duration` value * fix: change copy on Developers footer section
safe-global · Feb 8, 2024 · 6e83e90 · 6e83e90
1 parent d6555a1
commit 6e83e90
Show file tree

Hide file tree

Showing 21 changed files with 40 additions and 53 deletions.
diff --git a/src/components/Campaign/TextBlockCentered/styles.module.css b/src/components/Campaign/TextBlockCentered/styles.module.css
@@ -19,6 +19,5 @@
 .cta {
   background: linear-gradient(260.13deg, #12ff80 1.24%, #5fddff 102.14%);
   background-clip: text;
-  -webkit-background-clip: text;
   color: transparent;
 }
diff --git a/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css b/src/components/Campaign/TitleSpaceBetweenGrid/styles.module.css
@@ -25,11 +25,9 @@
   text-align: center;
   font-size: 88px;
   line-height: 88px;
-  color: var(--mui-palette-primary-main);
   background: linear-gradient(90deg, rgba(15, 255, 128, 1) 0%, rgba(94, 221, 255, 1) 60%);
   background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
 
 @media (min-width: 900px) {

diff --git a/src/components/Campaign/Tweets/styles.module.css b/src/components/Campaign/Tweets/styles.module.css
@@ -22,7 +22,6 @@
   margin-bottom: 40px;
   background: linear-gradient(260.13deg, #12ff80 1.24%, #5fddff 102.14%);
   background-clip: text;
-  -webkit-background-clip: text;
   color: transparent;
 }
 

diff --git a/src/components/Careers/Cards/styles.module.css b/src/components/Careers/Cards/styles.module.css
@@ -9,7 +9,7 @@
   align-items: flex-start;
   height: 100%;
   position: relative;
-  transition: 0.3s;
+  transition: var(--transition-duration);
   min-height: 272px;
 }
 
@@ -29,7 +29,7 @@
   position: absolute;
   top: 24px;
   right: 24px;
-  transition: transform 0.3s;
+  transition: transform var(--transition-duration);
 }
 
 /* Highlight */

diff --git a/src/components/Core/LinkedCardGrid/styles.module.css b/src/components/Core/LinkedCardGrid/styles.module.css
@@ -1,6 +1,6 @@
 .card {
   border: 1px solid var(--mui-palette-border-light);
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 .card:first-of-type {
@@ -52,11 +52,11 @@
   position: absolute;
   top: 32px;
   right: 32px;
-  transition: transform 0.3s;
+  transition: transform var(--transition-duration);
 }
 
 .icon path {
-  transition: fill 0.3s;
+  transition: fill var(--transition-duration);
 }
 
 @media (min-width: 600px) {

diff --git a/src/components/Ecosystem/Cards/styles.module.css b/src/components/Ecosystem/Cards/styles.module.css
@@ -8,7 +8,7 @@
   align-items: flex-start;
   height: 100%;
   position: relative;
-  transition: border 0.3s;
+  transition: border var(--transition-duration);
 }
 
 .card:first-of-type {
@@ -42,11 +42,8 @@
   color: var(--mui-palette-secondary-light);
 }
 
-.cardImage {
-}
-
 .cardLink:after {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -73,4 +70,4 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
-}
+}
diff --git a/src/components/Ecosystem/Projects/styles.module.css b/src/components/Ecosystem/Projects/styles.module.css
@@ -20,7 +20,7 @@
   flex-direction: column;
   align-items: flex-start;
   position: relative;
-  transition: 0.3s;
+  transition: var(--transition-duration);
   height: 300px;
 }
 

diff --git a/src/components/Governance/Delegates/index.tsx b/src/components/Governance/Delegates/index.tsx
@@ -35,15 +35,11 @@ const DelegateCard = (props: Delegate) => (
           {props.name}
         </Typography>
 
-        <Typography variant="body1" color="primary.light">
-          {props.ens || shortenAddress(props.address)}
-        </Typography>
+        <Typography color="primary.light">{props.ens || shortenAddress(props.address)}</Typography>
       </div>
     </div>
 
-    <Typography variant="body1" className={css.description}>
-      {props.reason}
-    </Typography>
+    <Typography className={css.description}>{props.reason}</Typography>
 
     <div className={css.socials}>
       {props.twitter && (
@@ -75,7 +71,7 @@ const Delegates = (props: BaseBlock & { footer: { text: string; highlight: strin
       </Grid>
 
       <div className={css.footer}>
-        <Typography variant="body1" color="primary.light" textAlign="center">
+        <Typography color="primary.light" textAlign="center">
           {props.footer.text}
           <span>{props.footer.highlight}</span>
         </Typography>

diff --git a/src/components/Governance/Delegates/styles.module.css b/src/components/Governance/Delegates/styles.module.css
@@ -6,7 +6,7 @@
   flex-direction: column;
   align-items: flex-start;
   position: relative;
-  transition: 0.3s;
+  transition: var(--transition-duration);
   height: 206px;
 }
 

diff --git a/src/components/Governance/OurMission/styles.module.css b/src/components/Governance/OurMission/styles.module.css
@@ -1,12 +1,12 @@
 .gradientEmphasis b {
   background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
-  -webkit-background-clip: text;
+  background-clip: text;
   color: transparent;
 }
 
 .card {
   border: 1px solid var(--mui-palette-border-light);
-  transition: 0.3s;
+  transition: var(--transition-duration);
   padding: 24px;
   display: flex;
   flex-direction: column;

diff --git a/src/components/Governance/Proposals/styles.module.css b/src/components/Governance/Proposals/styles.module.css
@@ -7,7 +7,7 @@
   flex-direction: column;
   gap: 8px;
 
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 .proposalRow:hover {

diff --git a/src/components/Home/BigIconsCardGrid/styles.module.css b/src/components/Home/BigIconsCardGrid/styles.module.css
@@ -10,7 +10,7 @@
   text-align: center;
   height: 100%;
   position: relative;
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 .card:hover {
@@ -48,7 +48,7 @@
   position: absolute;
   top: 32px;
   right: 32px;
-  transition: transform 0.3s;
+  transition: transform var(--transition-duration);
 }
 
 @media (min-width: 600px) {

diff --git a/src/components/Home/Stats/styles.module.css b/src/components/Home/Stats/styles.module.css
@@ -9,7 +9,7 @@
 }
 
 .metric span {
-  transition: color 0.3s ease;
+  transition: color var(--transition-duration) ease;
 }
 
 .metric:hover span {
@@ -20,10 +20,9 @@
   margin: 0;
   font-size: 64px;
   line-height: 64px;
-  color: var(--mui-palette-primary-main);
   background: linear-gradient(90deg, rgba(15, 255, 128, 1) 0%, rgba(94, 221, 255, 1) 60%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
 }
 
 @media (min-width: 600px) {

diff --git a/src/components/Home/TitleTextLinkedCardGrid/styles.module.css b/src/components/Home/TitleTextLinkedCardGrid/styles.module.css
@@ -2,7 +2,7 @@
   border-radius: 16px;
   outline: 1px solid var(--mui-palette-border-light);
   height: 100%;
-  transition: 0.3s;
+  transition: var(--transition-duration);
   margin: 2px;
 }
 
@@ -37,11 +37,11 @@
   position: absolute;
   top: 32px;
   right: 32px;
-  transition: transform 0.3s;
+  transition: transform var(--transition-duration);
 }
 
 .icon path {
-  transition: fill 0.3s;
+  transition: fill var(--transition-duration);
 }
 
 .gradient {
@@ -65,7 +65,7 @@
   width: 100%;
   height: 100%;
   z-index: 0;
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 @media (min-width: 600px) {

diff --git a/src/components/Wallet/NetworkChip/index.tsx b/src/components/Wallet/NetworkChip/index.tsx
@@ -16,7 +16,7 @@ const NetworkChip = ({ name, icon, textColor, backgroundColor, isNew }: NetworkC
     <div className={css.icon}>
       <img {...icon} width={40} height={40} />
     </div>
-    <Typography className={css.name} variant="body1" color={textColor}>
+    <Typography className={css.name} color={textColor}>
       {name}
     </Typography>
     {isNew && <div className={css.newBadge}>New!</div>}

diff --git a/src/components/Wallet/Stepper/index.tsx b/src/components/Wallet/Stepper/index.tsx
@@ -31,7 +31,7 @@ const CustomStepper = ({ steps }: { steps: StepsType }) => (
           <ul className={css.list}>
             {description?.map((item, index) => (
               <li className={css.listItem} key={index}>
-                <Typography key={index} variant="body1" color="primary.light" marginTop="18px" display="inline">
+                <Typography key={index} color="primary.light" marginTop="18px" display="inline">
                   {item}
                 </Typography>
               </li>

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -40,7 +40,7 @@ const safeProtocolItems = [
     rel: 'noreferrer',
   },
   {
-    label: 'Developer Docs',
+    label: 'Docs',
     href: DOCS_LINK,
     target: '_blank',
     rel: 'noreferrer',
@@ -154,7 +154,7 @@ const Footer = () => {
 
         <Grid item sm={6} md={2}>
           <Typography variant="caption" color="text.primary">
-            Safe Core Protocol
+            Developers
           </Typography>
           <ul className={css.list}>
             {safeProtocolItems.map((item) => (

diff --git a/src/components/common/HeaderCTA/index.tsx b/src/components/common/HeaderCTA/index.tsx
@@ -16,9 +16,7 @@ const HeaderCTA = (props: HeaderCTAProps) => {
         <Typography variant="h2" mb={3} className={`${props.bigTitle ? css.bigTitle : null}`}>
           {props.title}
         </Typography>
-        <Typography variant="body1" color="primary.light">
-          {props.text}
-        </Typography>
+        <Typography color="primary.light">{props.text}</Typography>
       </Grid>
       {props.link && (
         <Grid item xs={12} md={4} className={`${css.linkButton} ${!props.bigTitle && css.alignEnd}`}>

diff --git a/src/components/common/LinkButton/styles.module.css b/src/components/common/LinkButton/styles.module.css
@@ -3,7 +3,7 @@
   line-height: 26px;
   letter-spacing: 0.46px;
   font-weight: 500;
-  transition: 0.3s;
+  transition: var(--transition-duration);
   position: static;
 }
 
@@ -43,7 +43,7 @@
 
 .arrow {
   margin-left: 4px;
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 .arrow:after {
@@ -56,7 +56,7 @@
   transform: translateX(-2px) translateY(-50%);
   right: 0;
   opacity: 0;
-  transition: 0.3s;
+  transition: var(--transition-duration);
 }
 
 .arrow svg {

diff --git a/src/components/common/Networks/index.tsx b/src/components/common/Networks/index.tsx
@@ -66,9 +66,7 @@ const Networks = ({ title, text, networks }: NetworksProps) => {
         </div>
         <div className={clsx(css.gradientBase, css.gradientFlipped)} />
       </div>
-      <Typography className={css.secondaryText} variant="body1">
-        {text}
-      </Typography>
+      <Typography className={css.secondaryText}>{text}</Typography>
     </div>
   )
 }

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,7 @@
+:root {
+  --transition-duration: 0.3s;
+}
+
 @font-face {
   font-family: 'Citerne';
   font-display: swap;
@@ -20,7 +24,6 @@
   src: url('/fonts/Citerne-Italic.woff2') format('woff2');
 }
 
-
 html,
 body {
   padding: 0;
@@ -72,7 +75,7 @@ u {
 
 u:before,
 u:after {
-  content: "{";
+  content: '{';
   display: inline-block;
   mask-repeat: no-repeat;
   mask-position: bottom;