Adjust various styles

src/renderer/components/dropdown-menu/index.tsx

@@ -41,8 +41,8 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
         left: 0;
         width: 100%;
         height: 100%;
-        background-color: var(--primary-color);
-        opacity: 0.2;
+        background-color: var(--dropdown-menu-bg-hover);
+        opacity: 0.5;
         z-index: -1;
       }
 

src/renderer/components/tabs/index.tsx

@@ -22,6 +22,7 @@ const StyledTabs = styled(MantineTabs)`
   button {
     padding: 1rem;
     color: var(--btn-subtle-fg);
+    border-radius: 0;
 
     &:hover {
       color: var(--btn-subtle-fg-hover);
@@ -33,14 +34,22 @@ const StyledTabs = styled(MantineTabs)`
 
   button[data-active] {
     color: var(--btn-primary-fg);
-    background: var(--primary-color);
-    border-color: var(--primary-color);
+    background: none;
+    box-shadow: 2px 0 0 var(--primary-color) inset;
 
     &:hover {
-      background: var(--btn-primary-bg-hover);
-      border-color: var(--primary-color);
+      background: none;
     }
   }
+
+  /* button[data-active]::before {
+    content: '';
+    border-left: 2px solid var(--primary-color);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  } */
 `;
 
 export const Tabs = ({ children, ...props }: TabsProps) => {

src/renderer/components/text-title/index.tsx

@@ -28,10 +28,6 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
     color: ${(props) => props.$link && 'var(--main-fg)'};
     text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
   }
-
-  h1 {
-    font-size: 4rem;
-  }
 `;
 
 const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {