refactor: update achievement panel styles

src/renderer/src/pages/achievements/achievement-panel.scss

@@ -3,12 +3,12 @@
 .achievement-panel {
   width: 100%;
   padding: globals.$spacing-unit * 2 globals.$spacing-unit * 3;
-  background-color: var(--color-background);
+  background-color: globals.$dark-background-color;
   display: flex;
   flex-direction: column;
   align-items: start;
   justify-content: space-between;
-  border-bottom: solid 1px var(--color-border);
+  border-bottom: solid 1px globals.$border-color;
 
   &__content {
     display: flex;
@@ -25,12 +25,12 @@
   &__download-details-row {
     gap: globals.$spacing-unit;
     display: flex;
-    color: var(--color-body);
+    color: globals.$body-color;
     align-items: center;
   }
 
   &__downloads-link {
-    color: var(--color-body);
+    color: globals.$body-color;
     text-decoration: underline;
   }
 
@@ -47,17 +47,17 @@
     }
 
     &::-webkit-progress-value {
-      background-color: var(--color-muted);
+      background-color: globals.$muted-color;
     }
 
     &--disabled {
-      opacity: var(--opacity-disabled);
+      opacity: globals.$disabled-opacity;
     }
   }
 
   &__link {
     text-align: start;
-    color: var(--color-body);
+    color: globals.$body-color;
     background: none;
     border: none;
     padding: 0;
@@ -66,5 +66,32 @@
       text-decoration: underline;
       cursor: pointer;
     }
+
+    &--warning {
+      color: globals.$warning-color;
+    }
+  }
+
+  &__grid {
+    display: grid;
+    gap: globals.$spacing-unit * 2;
+  }
+
+  &__grid--with-subscription {
+    grid-template-columns: 3fr 1fr 1fr;
+  }
+
+  &__grid--without-subscription {
+    grid-template-columns: 3fr 2fr;
+  }
+
+  &__points-container {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
+  &__content-icon {
+    width: 18px;
+    height: 18px;
   }
 }

src/renderer/src/pages/achievements/achievement-panel.tsx

@@ -3,7 +3,6 @@ import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { UserAchievement } from "@types";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { useUserDetails } from "@renderer/hooks";
-import { vars } from "@renderer/theme.css";
 import "./achievement-panel.scss";
 
 export interface AchievementPanelProps {
@@ -30,7 +29,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
     return (
       <div className="achievement-panel">
         <div className="achievement-panel__content">
-          {t("earned_points")} <HydraIcon width={20} height={20} />
+          {t("earned_points")}{" "}
+          <HydraIcon className="achievement-panel__content-icon" />
           ??? / ???
         </div>
         <button
@@ -38,7 +38,7 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
           onClick={() => showHydraCloudModal("achievements-points")}
           className="achievement-panel__link"
         >
-          <small style={{ color: vars.color.warning }}>
+          <small className="achievement-panel__link--warning">
             {t("how_to_earn_achievements_points")}
           </small>
         </button>
@@ -49,7 +49,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
   return (
     <div className="achievement-panel">
       <div className="achievement-panel__content">
-        {t("earned_points")} <HydraIcon width={20} height={20} />
+        {t("earned_points")}{" "}
+        <HydraIcon className="achievement-panel__content-icon" />
         {achievementsPointsEarnedSum} / {achievementsPointsTotal}
       </div>
     </div>

src/renderer/src/pages/achievements/compared-achievement-panel.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { ComparedAchievements } from "@types";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useUserDetails } from "@renderer/hooks";
+import "./achievement-panel.scss";
 
 export interface ComparedAchievementPanelProps {
   achievements: ComparedAchievements;
@@ -16,25 +16,25 @@ export function ComparedAchievementPanel({
 
   return (
     <div
-      className="achievement-panel"
+      className={`achievement-panel achievement-panel__grid ${
-      style={{
+        hasActiveSubscription
-        display: "grid",
+          ? "achievement-panel__grid--with-subscription"
-        gridTemplateColumns: hasActiveSubscription ? "3fr 1fr 1fr" : "3fr 2fr",
+          : "achievement-panel__grid--without-subscription"
-        gap: `${SPACING_UNIT * 2}px`,
+      }`}
-      }}
     >
-      <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+      <div className="achievement-panel__points-container">
-        {t("available_points")} <HydraIcon width={20} height={20} />{" "}
+        {t("available_points")}{" "}
+        <HydraIcon className="achievement-panel__content-icon" />{" "}
         {achievements.achievementsPointsTotal}
       </div>
       {hasActiveSubscription && (
         <div className="achievement-panel__content">
-          <HydraIcon width={20} height={20} />
+          <HydraIcon className="achievement-panel__content-icon" />
           {achievements.owner.achievementsPointsEarnedSum ?? 0}
         </div>
       )}
       <div className="achievement-panel__content">
-        <HydraIcon width={20} height={20} />
+        <HydraIcon className="achievement-panel__content-icon" />
         {achievements.target.achievementsPointsEarnedSum}
       </div>
     </div>