restyle TopBar

src/renderer/components/TopBar.tsx

@@ -194,15 +194,22 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
         top: 0,
         left: 0,
         right: 0,
-        height: '9vh',
+        height: '8vh',
         zIndex: 1000,
         width: '100%',
         WebkitAppRegion: 'drag',
         overflow: 'hidden',
         justifyContent: 'space-between',
         alignItems: 'center',
-        // marginLeft: '1em',
+
-        // marginRight: '1em',
+        // убрать если не оч
+
+        // стиль как в Registration
+        background:
+          'linear-gradient(71deg, rgba(242,113,33,0.18) 0%, rgba(233,64,205,0.14) 70%, rgba(138,35,135,0.16) 100%)',
+        backdropFilter: 'blur(10px)',
+        borderBottom: '1px solid rgba(255,255,255,0.08)',
+        boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
       }}
     >
       {/* Левая часть */}
@@ -240,11 +247,28 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
           <Box
             ref={tabsWrapperRef}
             onWheel={handleTabsWheel}
+            // старый вариант
+            // sx={{
+            //   borderBottom: 1,
+            //   borderColor: 'transparent',
+            //   '& .MuiTabs-indicator': {
+            //     backgroundColor: 'rgba(255, 77, 77, 1)',
+            //   },
+            // }}
             sx={{
-              borderBottom: 1,
+              borderBottom: 'none',
-              borderColor: 'transparent',
+              borderRadius: '2vw',
+              px: '0.6vw',
+              py: '0.4vw',
+              background: 'rgba(0,0,0,0.35)',
+              border: '1px solid rgba(255,255,255,0.08)',
+              boxShadow: '0 8px 20px rgba(0,0,0,0.25)',
               '& .MuiTabs-indicator': {
-                backgroundColor: 'rgba(255, 77, 77, 1)',
+                height: '100%',
+                borderRadius: '1.6vw',
+                background:
+                  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
+                opacity: 0.18,
               },
             }}
           >
@@ -449,10 +473,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
             mt: '0.5vw',
             borderRadius: '1vw',
             minWidth: '16vw',
-            bgcolor: 'rgba(0,0,0,0.92)',
             color: 'white',
-            boxShadow: '0 0 20px rgba(0,0,0,0.6)',
+            bgcolor: 'rgba(0,0,0,0.82)',
-            border: '1px solid rgba(255,77,77,0.35)',
+            backdropFilter: 'blur(10px)',
+            border: '1px solid rgba(233,64,205,0.25)',
+            boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
           },
         }}
       >