Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/sidebar/components/collapsed-sidebar-button.tsx

@@ -1,65 +1,22 @@
-import { createPolymorphicComponent, Flex } from '@mantine/core';
-import { forwardRef, ReactNode } from 'react';
-import styled from 'styled-components';
+import { forwardRef } from 'react';
 
-const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
-    position: relative;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    height: 65px;
-    pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
-    cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
-    user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
-    opacity: ${(props) => props.$disabled && 0.6};
+import styles from './collapsed-sidebar-button.module.css';
 
-    svg {
-        fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
-    }
+import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
 
-    &:focus-visible {
-        background-color: var(--sidebar-bg-hover);
-        outline: none;
-    }
+interface CollapsedSidebarButtonProps extends ActionIconProps {}
 
-    ${(props) =>
-        !props.$disabled &&
-        `
-      &:hover {
-          background-color: var(--sidebar-bg-hover);
-
-          div {
-            color: var(--main-fg) !important;
-          }
-
-          svg {
-            fill: var(--primary-color);
-          }
-        }
-    `}
-`;
-
-interface CollapsedSidebarButtonProps {
-    children: ReactNode;
-    onClick?: () => void;
-}
-
-const _CollapsedSidebarButton = forwardRef<HTMLDivElement, CollapsedSidebarButtonProps>(
+export const CollapsedSidebarButton = forwardRef<HTMLButtonElement, CollapsedSidebarButtonProps>(
     ({ children, ...props }: CollapsedSidebarButtonProps, ref) => {
         return (
-            <Container
-                align="center"
-                direction="column"
+            <ActionIcon
+                className={styles.button}
                 ref={ref}
+                variant="subtle"
                 {...props}
             >
                 {children}
-            </Container>
+            </ActionIcon>
         );
     },
 );
-
-export const CollapsedSidebarButton = createPolymorphicComponent<
-    'button',
-    CollapsedSidebarButtonProps
->(_CollapsedSidebarButton);