🏊‍♂️ feat: update hero tile bg (#24)

pdsuwwz · Aug 20, 2024 · 792aae9 · 792aae9
1 parent 232a752
commit 792aae9
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 36 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -64,5 +64,6 @@ export default antfu({
     'style/quote-props': [ERROR, 'as-needed'],
 
     'ts/no-use-before-define': OFF,
+    'ts/ban-ts-comment': OFF,
   },
 })
diff --git a/src/components/HomepageHero/Setup.tsx b/src/components/HomepageHero/Setup.tsx
@@ -6,16 +6,14 @@ import styles from '@/components/HomepageHero/SetupHero.module.scss'
 import { MotionWrapperFlash } from '@/components/MotionWrapper/Flash'
 import { useLocale } from '@/hooks'
 
-
 interface Props {
 }
 export function SetupHero(props: Props) {
   const { t, currentLocale } = useLocale()
 
   return (
     <div className={styles.container}>
-      <div className={styles.tilesBackground}></div>
-      <div className={styles.tilesGradient}></div>
+      {/* <div className={styles.tilesBox}></div> */}
       <div className={styles.content}>
         <div className={styles.badgeContainer}>
           <a

diff --git a/src/components/HomepageHero/SetupHero.module.scss b/src/components/HomepageHero/SetupHero.module.scss
@@ -2,40 +2,10 @@
   position: relative;
 }
 
-.tilesGradient {
+.tilesBox {
   position: absolute;
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(
-    180deg,
-    rgba(229, 231, 235, 0),
-    rgba(229, 231, 235, 0.7)
-  );
-
-  :global(.dark) & {
-    background-image: linear-gradient(
-      180deg,
-      rgba(38, 38, 38, 0.1),
-      rgba(38, 38, 38, 0.7)
-    );
-  }
-}
-
-.tilesBackground {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  // background-image: url('~@/assets/images/hero-tile-light.svg');
-  background-image: url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNDIiCiAgaGVpZ2h0PSI3MSIKICB2aWV3Qm94PSIwIDAgMTQyIDcxIgogIGZpbGw9Im5vbmUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2ZmZiIgLz4KICAgIDxyZWN0IHg9IjcxLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2ZmZiIgLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjE0MiIgaGVpZ2h0PSI3MSIgZmlsbD0id2hpdGUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+');
-  background-position: calc(50% - 35.5px) bottom;
-  background-repeat: repeat;
-  background-size: 142px 71px;
-
-  :global(.dark) & {
-    // background-image: url('~@/assets/images/hero-tile-dark.svg');
-    background-image: url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNDIiCiAgaGVpZ2h0PSI3MSIKICB2aWV3Qm94PSIwIDAgMTQyIDcxIgogIGZpbGw9Im5vbmUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgo+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzExMSIgLz4KICAgIDxyZWN0IHg9IjcxLjUiIHk9IjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzExMSIgLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjE0MiIgaGVpZ2h0PSI3MSIgZmlsbD0id2hpdGUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+');
-  }
 }
 
 .content {

diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx
@@ -80,7 +80,7 @@ export default function HomepageHero() {
               autoFill
               gradient
               gradientColor={
-                resolvedTheme === 'dark' ? '#111111' : 'white'
+                resolvedTheme === 'dark' ? '#1a1a1a' : 'white'
               }
               direction="right"
               speed={60}

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -33,7 +33,7 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 0 0 10.2%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;