Improve look and feel of quick save

caiiiycuk · Dec 22, 2023 · 5741f0f · 5741f0f
1 parent 42c3f47
commit 5741f0f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 32 deletions.
diff --git a/src/frame/quick-save-frame.tsx b/src/frame/quick-save-frame.tsx
@@ -49,22 +49,18 @@ function SaveButton(props: {
         {props.disabled !== true &&
             <div class={"text-badge " + props.textcolor + " " + props.bgcolor}>{props.label}</div>}
         {props.disabled === true && <LockBadge />}
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-            fill="currentColor" class={"absolute bottom-1 w-3 h-3 rotate-90 " +
-                props.textcolor} >
-            <path d="M12 1.5a.75.75 0 01.75.75V7.5h-1.5V2.25A.75.75 0 0112 1.5zM11.25
-                7.5v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75
-                0 10-1.06-1.06l-1.72 1.72V7.5h3.75a3 3 0 013 3v9a3 3 0 01-3 3h-9a3 3
-                0 01-3-3v-9a3 3 0 013-3h3.75z" />
-        </svg>
 
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor" class="absolute bottom-1 w-3 h-3">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+        </svg>
     </div>;
 }
 
 function LoadButton(props: {
     label: number,
     bgcolor: string,
-    textcolor: string,
     disabled?: boolean,
 }) {
     const account = useSelector((state: State) => state.auth.account);
@@ -87,19 +83,13 @@ function LoadButton(props: {
 
     return <div class={"sidebar-button flex justify-center " + (props.disabled ? " opacity-50" : "")}
         onClick={onClick}>
-        <DisketteIcon />
-        {props.disabled !== true &&
-            <div class={"text-badge " + props.textcolor + " " + props.bgcolor}>{props.label}</div>}
+        <DisketteIcon class="opacity-10"/>
         {props.disabled === true && <LockBadge />}
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-            fill="currentColor" class={"absolute bottom-1 w-3 h-3 rotate-90 " +
-                props.textcolor}>
-            <path d="M11.47 1.72a.75.75 0 011.06 0l3 3a.75.75 0 01-1.06
-                1.06l-1.72-1.72V7.5h-1.5V4.06L9.53 5.78a.75.75 0
-                01-1.06-1.06l3-3zM11.25 7.5V15a.75.75 0 001.5
-                0V7.5h3.75a3 3 0 013 3v9a3 3 0 01-3 3h-9a3 3
-                0 01-3-3v-9a3 3 0 013-3h3.75z" />
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="1.5"
+            stroke="currentColor" class="absolute bottom-1 w-6 h-6 -scale-y-100">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" />
         </svg>
-
     </div>;
 }
diff --git a/src/sidebar/diskette-icon.tsx b/src/sidebar/diskette-icon.tsx
@@ -1,14 +1,14 @@
-export function DisketteIcon() {
-    return <>
-        <svg xmlns="http://www.w3.org/2000/svg"
-            style="padding: 2px"
-            viewBox="0 0 16 16" enable-background="new 0 0 16 16"
-            fill="currentColor" class="w-full h-full rounded-lg">
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M15.71,2.29l-2-2C13.53,0.11,13.28,0,13,0h-1v6H4V0H1C0.45,0,0,0.45,0,1v14
+export function DisketteIcon(props: {
+    class?: string,
+}) {
+    return <svg xmlns="http://www.w3.org/2000/svg"
+        style="padding: 2px"
+        viewBox="0 0 16 16" enable-background="new 0 0 16 16"
+        fill="currentColor" class={ "w-full h-full rounded-lg " + props.class }>
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M15.71,2.29l-2-2C13.53,0.11,13.28,0,13,0h-1v6H4V0H1C0.45,0,0,0.45,0,1v14
                 c0,0.55,0.45,1,1,1h14c0.55,0,1-0.45,1-1V3C16,2.72,15.89,2.47,15.71,2.29z
                 M14,15H2V9c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1V15
                 z M11,1H9v4h2V1z"/>
-        </svg>
-    </>;
+    </svg>;
 }
diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -40,7 +40,9 @@ export const authSlice = createSlice({
         login: (state, action: { payload: Account }) => {
             setRefreshToken(action.payload.token.refresh_token);
             state.account = action.payload;
-            state.account.premium = state.account.premium || state.account.email === "[email protected]";
+            state.account.premium = state.account.premium ||
+                state.account.email === "[email protected]" ||
+                state.account.email === "[email protected]";
             lStorage.setItem(cachedAccount, JSON.stringify(action.payload));
             getCache(state.account.email)
                 .then((cache) => nonSerializableStore.cache = cache)