Fix(StyleSheet): Fix wrong styles

src/renderer/src/assets/css/components/common/flex-box.style.ts

@@ -1,9 +1,12 @@
 import { createStyles } from 'antd-style'
 
-export default createStyles(() => ({
+export default createStyles(
-    flexBox: {
+    () => ({
-        '> *': {
+        flexBox: {
-            flex: 1
+            '> *': {
+                flex: 1
+            }
         }
-    }
+    }),
-}))
+    { hashPriority: 'low' }
+)

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: {

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',
 

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'
         }
     },
 

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}