Refresh button

YARC-Official · Dec 9, 2024 · 24bb1a7 · 24bb1a7
1 parent ed7eadd
commit 24bb1a7
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 7 deletions.
diff --git a/src/assets/Icons/Refresh.svg b/src/assets/Icons/Refresh.svg
diff --git a/src/assets/Icons/index.ts b/src/assets/Icons/index.ts
@@ -39,6 +39,7 @@ import SidebarInQueueIcon from "./SidebarInQueue.svg?react";
 import SidebarUpdateIcon from "./SidebarUpdate.svg?react";
 import RedditIcon from "./Reddit.svg?react";
 import YoutubeIcon from "./Youtube.svg?react";
+import RefreshIcon from "./Refresh.svg?react";
 
 export {
     AddIcon,
@@ -75,4 +76,5 @@ export {
     SidebarUpdateIcon,
     RedditIcon,
     YoutubeIcon,
+    RefreshIcon,
 };
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
@@ -18,6 +18,7 @@
     margin-top: auto;
     display: flex;
     align-items: center;
+    gap: 5px;
 }
 
 .menus {
@@ -83,7 +84,7 @@
     text-transform: uppercase;
 }
 
-.settingsButton {
+.footerButton {
     width: 38px;
     height: 38px;
     padding: 10px;
@@ -93,17 +94,19 @@
     border-radius: 8px;
     transition: background 0.1s;
 
+    border: none;
+
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.settingsButton[aria-current="page"], .settingsButton:hover {
+.footerButton[aria-current="page"], .footerButton:hover {
     background: #0D0F23;
     color: #D4D9EE;
 }
 
-.settingsButton > svg {
+.footerButton > svg {
     width: 20px;
     height: 20px;
 }
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -54,7 +54,7 @@ const Sidebar: React.FC = () => {
         <ProfilesList isOffline={offlineStatus.isOffline} />
 
         <div className={styles.footer}>
-            <NavLink to="/settings" className={styles.settingsButton}>
+            <NavLink to="/settings" className={styles.footerButton}>
                 <SettingsIcon />
             </NavLink>
         </div>

diff --git a/src/components/TitleBar/TitleBar.module.css b/src/components/TitleBar/TitleBar.module.css
@@ -5,7 +5,6 @@
     display: flex;
     height: var(--titleBarHeight);
     padding-left: 10px;
-    justify-content: space-between;
     align-items: center;
     align-self: stretch;
 
@@ -21,9 +20,30 @@
     pointer-events: none;
 }
 
+.refreshButton {
+    display: flex;
+    width: var(--titleBarHeight);
+    height: var(--titleBarHeight);
+    justify-content: center;
+    align-items: center;
+
+    transition: color 0.1s;
+    color: #858BB5;
+}
+
+.refreshButton:hover {
+    color: #FFF;
+}
+
+.refreshButton > * {
+    width: 12px;
+    height: 12px;
+}
+
 .controls {
     display: flex;
     align-items: center;
+    margin: 0 0 0 auto;
 }
 
 .version {
@@ -48,6 +68,7 @@
     justify-content: center;
     align-items: center;
 
+    transition: background 0.1s, color 0.1s;
     color: #858BB5;
 }
 

diff --git a/src/components/TitleBar/index.tsx b/src/components/TitleBar/index.tsx
@@ -1,6 +1,6 @@
 import { appWindow } from "@tauri-apps/api/window";
 import styles from "./TitleBar.module.css";
-import { CloseIcon, MinimizeIcon } from "@app/assets/Icons";
+import { CloseIcon, MinimizeIcon, RefreshIcon, UpdateIcon } from "@app/assets/Icons";
 import { TryCloseDialog } from "@app/dialogs/Dialogs/TryCloseDialog";
 import { useCurrentTask } from "@app/tasks";
 import { createAndShowDialog } from "@app/dialogs";
@@ -43,11 +43,14 @@ const TitleBar: React.FC = () => {
             }
         </div>
 
+        <div onClick={() => window.location.reload()} className={styles.refreshButton}>
+            <RefreshIcon />
+        </div>
+
         <div className={styles.controls}>
             <div onClick={() => appWindow.minimize()} className={styles.control}>
                 <MinimizeIcon />
             </div>
-
             <div onClick={() => tryClose()} className={styles.control}>
                 <CloseIcon />
             </div>