From a4584ecd5cff1bb36655207e492520dada7f2097 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 22 Dec 2022 01:59:02 -0800
Subject: [PATCH] Adjust base component styles

---
 src/renderer/components/button/index.tsx        | 2 +-
 src/renderer/components/dropdown-menu/index.tsx | 7 ++++---
 src/renderer/components/popover/index.tsx       | 1 +
 src/renderer/components/search-input/index.tsx  | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx
index 58b73534..389ca465 100644
--- a/src/renderer/components/button/index.tsx
+++ b/src/renderer/components/button/index.tsx
@@ -162,7 +162,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
   }
 
   &:active {
-    transform: scale(0.98);
+    transform: none;
   }
 
   & .mantine-Button-centerLoader {
diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx
index 640d55ae..85f5fa46 100644
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/src/renderer/components/dropdown-menu/index.tsx
@@ -6,7 +6,7 @@ import type {
   MenuDropdownProps as MantineMenuDropdownProps,
 } from '@mantine/core';
 import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
-import { RiArrowLeftLine } from 'react-icons/ri';
+import { RiArrowLeftSFill } from 'react-icons/ri';
 import styled from 'styled-components';
 
 type MenuProps = MantineMenuProps;
@@ -42,7 +42,7 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   }
 
   & .mantine-Menu-itemLabel {
-    color: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--dropdown-menu-fg)')};
+    color: var(--dropdown-menu-fg);
     font-weight: 500;
     font-size: 1em;
   }
@@ -68,6 +68,7 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {
   return (
     <StyledMenu
+      withArrow
       withinPortal
       radius="sm"
       styles={{
@@ -91,7 +92,7 @@ const pMenuItem = ({ $isActive, children, ...props }: MenuItemProps) => {
   return (
     <StyledMenuItem
       $isActive={$isActive}
-      rightSection={$isActive && <RiArrowLeftLine />}
+      rightSection={$isActive && <RiArrowLeftSFill size={20} />}
       {...props}
     >
       {children}
diff --git a/src/renderer/components/popover/index.tsx b/src/renderer/components/popover/index.tsx
index c2f9a404..e0ac75f0 100644
--- a/src/renderer/components/popover/index.tsx
+++ b/src/renderer/components/popover/index.tsx
@@ -27,6 +27,7 @@ export const Popover = ({ children, ...props }: PopoverProps) => {
           filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
         },
       }}
+      transition="scale"
       {...props}
     >
       {children}
diff --git a/src/renderer/components/search-input/index.tsx b/src/renderer/components/search-input/index.tsx
index 3153e069..027792b2 100644
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@@ -47,10 +47,11 @@ export const SearchInput = ({
         input: {
           backgroundColor: isOpened ? 'inherit' : 'transparent !important',
           border: 'none !important',
+          cursor: isOpened ? 'text' : 'pointer',
           padding: isOpened ? '10px' : 0,
         },
       }}
-      width={isOpened ? openedWidth || 200 : initialWidth || 50}
+      width={isOpened ? openedWidth || 150 : initialWidth || 50}
       onChange={onChange}
       onKeyDown={handleEscape}
     />