feat: updating play label on hero panel

src/renderer/components/header/header.tsx

@@ -15,7 +15,8 @@ export interface HeaderProps {
 }
 
 const pathTitle: Record<string, string> = {
-  "/": "catalogue",
+  "/": "home",
+  "/catalogue": "catalogue",
   "/downloads": "downloads",
   "/settings": "settings",
 };

src/renderer/components/hero/hero.css.ts

@@ -30,7 +30,7 @@ export const heroMedia = style({
   transition: "all ease 0.2s",
   selectors: {
     [`${hero}:hover &`]: {
-      transform: "scale(1.05)",
+      transform: "scale(1.02)",
     },
   },
 });

src/renderer/components/sidebar/download-icon.css.ts

@@ -1,14 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const downloadIconWrapper = style({
-  width: "16px",
-  height: "12px",
-  position: "relative",
-});
-
-export const downloadIcon = style({
-  width: "24px",
-  position: "absolute",
-  left: "-4px",
-  top: "-9px",
-});

src/renderer/components/sidebar/download-icon.tsx

@@ -2,7 +2,6 @@ import { useRef } from "react";
 import Lottie from "lottie-react";
 
 import downloadingAnimation from "@renderer/assets/lottie/downloading.json";
-import * as styles from "./download-icon.css";
 
 export interface DownloadIconProps {
   isDownloading: boolean;
@@ -12,15 +11,12 @@ export function DownloadIcon({ isDownloading }: DownloadIconProps) {
   const lottieRef = useRef(null);
 
   return (
-    <div className={styles.downloadIconWrapper}>
-      <Lottie
-        lottieRef={lottieRef}
-        animationData={downloadingAnimation}
-        loop={isDownloading}
-        autoplay={isDownloading}
-        className={styles.downloadIcon}
-        onDOMLoaded={() => lottieRef.current?.setSpeed(1.7)}
-      />
-    </div>
+    <Lottie
+      lottieRef={lottieRef}
+      animationData={downloadingAnimation}
+      loop={isDownloading}
+      autoplay={isDownloading}
+      style={{ width: 16 }}
+    />
   );
 }

src/renderer/components/sidebar/routes.tsx

@@ -1,11 +1,16 @@
-import { GearIcon, ListUnorderedIcon } from "@primer/octicons-react";
+import { AppsIcon, GearIcon, HomeIcon } from "@primer/octicons-react";
 import { DownloadIcon } from "./download-icon";
 
 export const routes = [
   {
     path: "/",
+    nameKey: "home",
+    render: () => <HomeIcon />,
+  },
+  {
+    path: "/catalogue",
     nameKey: "catalogue",
-    render: () => <ListUnorderedIcon />,
+    render: () => <AppsIcon />,
   },
   {
     path: "/downloads",