Styling tweaks

tristanhollman · Feb 23, 2024 · c33d9af · c33d9af
1 parent 826f349
commit c33d9af
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 36 deletions.
diff --git a/src/components/StreakView/StreakView.module.less b/src/components/StreakView/StreakView.module.less
@@ -6,10 +6,26 @@
   gap: 1rem;
   overflow-y: auto;
 
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
   .streak-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
+
+    & > * {
+      flex: 1;
+    }
   }
 
   .pointer {

diff --git a/src/components/StreakView/User/FireBorder/FireBorder.module.less b/src/components/StreakView/User/FireBorder/FireBorder.module.less
@@ -1,6 +1,6 @@
 .fire-border {
   --borderWidth: 0.5em;
-  --borderSize: 1.5em;
+  --borderSize: 1em;
 
   position: relative;
   display: flex;

diff --git a/src/components/StreakView/User/FireBorder/FireBorder.tsx b/src/components/StreakView/User/FireBorder/FireBorder.tsx
@@ -12,27 +12,27 @@ export const FireBorder = (props: FireBorderProps) => {
         className={`${styles.fireBorder} ${props.enabled && styles.enabled}`}
       >
         <div className={styles.content}>{props.children}</div>
+        <svg className={styles.filterSvg}>
+          <filter id="wavy">
+            <feTurbulence
+              type="turbulence"
+              x="0"
+              y="0"
+              baseFrequency="0.009"
+              numOctaves="5"
+              speed="2"
+            >
+              <animate
+                attributeName="baseFrequency"
+                dur="60s"
+                values="0.02; 0.005; 0.02"
+                repeatCount="indefinite"
+              />
+            </feTurbulence>
+            <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" />
+          </filter>
+        </svg>
       </div>
-      <svg className={styles.filterSvg}>
-        <filter id="wavy">
-          <feTurbulence
-            type="turbulence"
-            x="0"
-            y="0"
-            baseFrequency="0.009"
-            numOctaves="5"
-            speed="2"
-          >
-            <animate
-              attributeName="baseFrequency"
-              dur="60s"
-              values="0.02; 0.005; 0.02"
-              repeatCount="indefinite"
-            />
-          </feTurbulence>
-          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" />
-        </filter>
-      </svg>
     </>
   );
 };
diff --git a/src/components/StreakView/User/StreakBlock/StreakBlock.module.less b/src/components/StreakView/User/StreakBlock/StreakBlock.module.less
@@ -16,10 +16,6 @@
     border-color: rgb(255, 200, 0);
     border-style: solid solid none;
 
-    &.inactive {
-      filter: grayscale(100%);
-    }
-
     .icon {
       border-style: none;
     }
@@ -54,4 +50,8 @@
       text-align: left;
     }
   }
+
+  .inactive {
+    filter: grayscale(100%);
+  }
 }
diff --git a/src/components/StreakView/User/StreakBlock/StreakBlock.tsx b/src/components/StreakView/User/StreakBlock/StreakBlock.tsx
@@ -4,20 +4,22 @@ import flameSvg from "../../../../assets/streak-block-flame.svg";
 
 type StreakBlockProps = {
   days: number;
+  didALessonToday: boolean;
 };
 export const StreakBlock = (props: StreakBlockProps) => {
-  const isActive = props.days > 0;
+  const hasStreak = props.days > 0;
+  const didALessonToday = hasStreak && props.didALessonToday;
 
   return (
     <div className={styles.streakBlock}>
-      <div className={`${styles.container} ${!isActive && styles.inactive}`}>
-        {isActive && (
+      <div className={`${styles.container} ${!hasStreak && styles.inactive}`}>
+        {didALessonToday && (
           <>
             <Star positionClass={styles.starPositionA} />
             <Star positionClass={styles.starPositionB} />
           </>
         )}
-        <Flame positionClass={styles.flamePosition} />
+        <Flame positionClass={styles.flamePosition} active={didALessonToday} />
         <div className={styles.streakNumberWrapper}>
           <h1>{props.days}</h1>
           <span>Day streak</span>
@@ -33,8 +35,11 @@ const Star = (props: { positionClass: string }) => {
   );
 };
 
-const Flame = (props: { positionClass: string }) => {
+const Flame = (props: { positionClass: string; active: boolean }) => {
   return (
-    <img className={`${styles.icon} ${props.positionClass}`} src={flameSvg} />
+    <img
+      className={`${styles.icon} ${props.positionClass} ${!props.active && styles.inactive}`}
+      src={flameSvg}
+    />
   );
 };
diff --git a/src/components/StreakView/User/User.tsx b/src/components/StreakView/User/User.tsx
@@ -26,7 +26,10 @@ export const User = (props: UserProps) => {
         <i>{user.currentCourse?.title}</i>
         <CountryFlag countryCode={user.currentCourse?.languageCode} />
         <Avatar url={user.pictureUrl} name={user.name} />
-        <StreakBlock days={user.streak.days} />
+        <StreakBlock
+          days={user.streak.days}
+          didALessonToday={user.streak.didALessonToday()}
+        />
       </div>
     </FireBorder>
   );

diff --git a/src/hooks/useMuiThemeSelection.ts b/src/hooks/useMuiThemeSelection.ts
@@ -62,7 +62,7 @@ const fancyTheme = (): NamedTheme => {
         styleOverrides: {
           ":root": {
             "--hotpinkGradient":
-              "radial-gradient(circle at 10% 20%, rgb(255, 105, 180) 0%, rgb(235, 130, 160) 32.2%, rgb(253, 160, 200) 90%)",
+              "linear-gradient(135deg, rgb(255, 105, 180) 0%, rgb(246, 165, 254) 50%, rgb(255, 105, 180) 100%)",
             "@keyframes movingBackground": {
               "0%": {
                 backgroundPosition: "0% 50%",
@@ -77,7 +77,7 @@ const fancyTheme = (): NamedTheme => {
           },
           body: {
             background: "var(--hotpinkGradient)",
-            backgroundSize: "400% 400%",
+            backgroundSize: "200%",
             animation: "movingBackground 15s ease infinite",
           },
         },
@@ -86,7 +86,7 @@ const fancyTheme = (): NamedTheme => {
         styleOverrides: {
           root: {
             background: "var(--hotpinkGradient)",
-            backgroundSize: "400% 400%",
+            backgroundSize: "200%",
             animation: "movingBackground 15s ease infinite",
           },
         },

diff --git a/src/styles.less b/src/styles.less
@@ -8,6 +8,6 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 2rem;
+  padding: 1rem;
   text-align: center;
 }