From e97b932cf50727d54b91522ef1e207a2f7fbf397 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 28 Oct 2024 17:50:26 +0800
Subject: [PATCH] Fix(StyleSheet): Fix wrong styles

---
 .../css/components/common/flex-box.style.ts   | 15 ++++++++-----
 .../components/common/sidebar/footer.style.ts | 22 +++++++++++++++----
 .../components/common/sidebar/item.style.ts   |  1 +
 .../src/assets/css/pages/user/index.style.ts  |  4 ++--
 .../src/components/common/Sidebar/Footer.tsx  |  2 +-
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/assets/css/components/common/flex-box.style.ts b/src/renderer/src/assets/css/components/common/flex-box.style.ts
index 6d143dc..3e82782 100644
--- a/src/renderer/src/assets/css/components/common/flex-box.style.ts
+++ b/src/renderer/src/assets/css/components/common/flex-box.style.ts
@@ -1,9 +1,12 @@
 import { createStyles } from 'antd-style'
 
-export default createStyles(() => ({
-    flexBox: {
-        '> *': {
-            flex: 1
+export default createStyles(
+    () => ({
+        flexBox: {
+            '> *': {
+                flex: 1
+            }
         }
-    }
-}))
+    }),
+    { hashPriority: 'low' }
+)
diff --git a/src/renderer/src/assets/css/components/common/sidebar/footer.style.ts b/src/renderer/src/assets/css/components/common/sidebar/footer.style.ts
index 5315a80..136e8a7 100644
--- a/src/renderer/src/assets/css/components/common/sidebar/footer.style.ts
+++ b/src/renderer/src/assets/css/components/common/sidebar/footer.style.ts
@@ -11,14 +11,26 @@ const slideIn = keyframes`
     }
 `
 
+const slideOut = keyframes`
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(-10px);
+        opacity: 0;
+    }
+`
+
 export default createStyles(({ cx, css, token }) => {
     const collapsedExit = cx(css`
-        display: none;
+        opacity: 0;
         position: absolute;
         padding-left: ${token.paddingXS}px;
         left: 100%;
         z-index: 1000;
-        box-shadow: 5px 5px 15px 0 ${token.colorBorder};
+        animation: ${slideOut} 0.1s ease;
+        transform: translateX(-100%);
     `)
 
     return {
@@ -31,8 +43,9 @@ export default createStyles(({ cx, css, token }) => {
             color: ${token.colorPrimary};
 
             &:hover .${collapsedExit} {
-                display: block;
+                opacity: 1;
                 animation: ${slideIn} 0.3s ease;
+                transform: unset;
             }
         `,
 
@@ -88,7 +101,8 @@ export default createStyles(({ cx, css, token }) => {
 
         collapsedExitContent: {
             padding: token.paddingXS,
-            borderRadius: token.borderRadiusLG
+            borderRadius: token.borderRadiusLG,
+            boxShadow: token.boxShadow
         },
 
         exitIcon: {
diff --git a/src/renderer/src/assets/css/components/common/sidebar/item.style.ts b/src/renderer/src/assets/css/components/common/sidebar/item.style.ts
index 6dc6ee2..0ce8f25 100644
--- a/src/renderer/src/assets/css/components/common/sidebar/item.style.ts
+++ b/src/renderer/src/assets/css/components/common/sidebar/item.style.ts
@@ -56,6 +56,7 @@ export default createStyles(({ cx, css, token }) => {
             padding: `0 ${token.paddingXS}px`,
             width: 40,
             height: 40,
+            flex: '0 0 auto',
             fontSize: token.sizeMD,
             cursor: 'pointer',
 
diff --git a/src/renderer/src/assets/css/pages/user/index.style.ts b/src/renderer/src/assets/css/pages/user/index.style.ts
index f39ed7e..0185f82 100644
--- a/src/renderer/src/assets/css/pages/user/index.style.ts
+++ b/src/renderer/src/assets/css/pages/user/index.style.ts
@@ -8,7 +8,7 @@ export default createStyles(({ token }) => ({
     content: {
         width: '100%',
         height: '100%',
-        overflow: 'visible',
+        overflow: 'visible !important',
         alignItems: 'center',
         minWidth: 900,
         paddingBottom: 20,
@@ -23,7 +23,7 @@ export default createStyles(({ token }) => ({
         transform: 'translateY(-40px)',
 
         '> *': {
-            flex: '0 0 auto !important'
+            flex: '0 0 auto'
         }
     },
 
diff --git a/src/renderer/src/components/common/Sidebar/Footer.tsx b/src/renderer/src/components/common/Sidebar/Footer.tsx
index f0dd000..18cf537 100644
--- a/src/renderer/src/components/common/Sidebar/Footer.tsx
+++ b/src/renderer/src/components/common/Sidebar/Footer.tsx
@@ -79,7 +79,7 @@ const Footer = () => {
             </span>
             <span
                 hidden={!getLoginStatus()}
-                className={cx(styles.text, isCollapse ? styles.collapsedExit : '')}
+                className={cx(styles.text, isCollapse ? styles.collapsedText : '')}
                 title={nickname}
             >
                 {nickname}