refactor: migrate achievement panel styles from VE to SCSS + BEM

src/renderer/src/pages/achievements/achievement-panel.css.ts

@@ -1,71 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const panel = style({
-  width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-  backgroundColor: vars.color.background,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "start",
-  justifyContent: "space-between",
-  borderBottom: `solid 1px ${vars.color.border}`,
-});
-
-export const content = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-  justifyContent: "center",
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  color: vars.color.body,
-  alignItems: "center",
-});
-
-export const downloadsLink = style({
-  color: vars.color.body,
-  textDecoration: "underline",
-});
-
-export const progressBar = recipe({
-  base: {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    width: "100%",
-    height: "3px",
-    transition: "all ease 0.2s",
-    "::-webkit-progress-bar": {
-      backgroundColor: "transparent",
-    },
-    "::-webkit-progress-value": {
-      backgroundColor: vars.color.muted,
-    },
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
-
-export const link = style({
-  textAlign: "start",
-  color: vars.color.body,
-  ":hover": {
-    textDecoration: "underline",
-    cursor: "pointer",
-  },
-});

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

@@ -0,0 +1,70 @@
+@use "../../scss/globals.scss";
+
+.achievement-panel {
+  width: 100%;
+  padding: globals.$spacing-unit * 2 globals.$spacing-unit * 3;
+  background-color: var(--color-background);
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+  border-bottom: solid 1px var(--color-border);
+
+  &__content {
+    display: flex;
+    gap: globals.$spacing-unit;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
+  &__download-details-row {
+    gap: globals.$spacing-unit;
+    display: flex;
+    color: var(--color-body);
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: var(--color-body);
+    text-decoration: underline;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--color-muted);
+    }
+
+    &--disabled {
+      opacity: var(--opacity-disabled);
+    }
+  }
+
+  &__link {
+    text-align: start;
+    color: var(--color-body);
+    background: none;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@ import { UserAchievement } from "@types";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { useUserDetails } from "@renderer/hooks";
 import { vars } from "@renderer/theme.css";
-import * as styles from "./achievement-panel.css";
+import "./achievement-panel.scss";
 
 export interface AchievementPanelProps {
   achievements: UserAchievement[];
@@ -28,15 +28,15 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
 
   if (!hasActiveSubscription) {
     return (
-      <div className={styles.panel}>
+      <div className="achievement-panel">
-        <div className={styles.content}>
+        <div className="achievement-panel__content">
           {t("earned_points")} <HydraIcon width={20} height={20} />
           ??? / ???
         </div>
         <button
           type="button"
           onClick={() => showHydraCloudModal("achievements-points")}
-          className={styles.link}
+          className="achievement-panel__link"
         >
           <small style={{ color: vars.color.warning }}>
             {t("how_to_earn_achievements_points")}
@@ -47,8 +47,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
   }
 
   return (
-    <div className={styles.panel}>
+    <div className="achievement-panel">
-      <div className={styles.content}>
+      <div className="achievement-panel__content">
         {t("earned_points")} <HydraIcon width={20} height={20} />
         {achievementsPointsEarnedSum} / {achievementsPointsTotal}
       </div>

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

@@ -1,6 +1,4 @@
 import { useTranslation } from "react-i18next";
-import * as styles from "./achievement-panel.css";
-
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { ComparedAchievements } from "@types";
 import { SPACING_UNIT } from "@renderer/theme.css";
@@ -18,7 +16,7 @@ export function ComparedAchievementPanel({
 
   return (
     <div
-      className={styles.panel}
+      className="achievement-panel"
       style={{
         display: "grid",
         gridTemplateColumns: hasActiveSubscription ? "3fr 1fr 1fr" : "3fr 2fr",
@@ -30,12 +28,12 @@ export function ComparedAchievementPanel({
         {achievements.achievementsPointsTotal}
       </div>
       {hasActiveSubscription && (
-        <div className={styles.content}>
+        <div className="achievement-panel__content">
           <HydraIcon width={20} height={20} />
           {achievements.owner.achievementsPointsEarnedSum ?? 0}
         </div>
       )}
-      <div className={styles.content}>
+      <div className="achievement-panel__content">
         <HydraIcon width={20} height={20} />
         {achievements.target.achievementsPointsEarnedSum}
       </div>