Improve MultiSelect

alephium · Jan 24, 2025 · 9dca070 · 9dca070
1 parent 4157426
commit 9dca070
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx b/apps/desktop-wallet/src/components/Inputs/MultiSelect.tsx
@@ -4,7 +4,7 @@ import styled, { useTheme } from 'styled-components'
 
 import Button from '@/components/Button'
 import CheckMark from '@/components/CheckMark'
-import { inputDefaultStyle, InputLabel } from '@/components/Inputs'
+import { inputDefaultStyle, SelectLabel } from '@/components/Inputs'
 import InputArea from '@/components/Inputs/InputArea'
 import { OptionItem, OptionSelect } from '@/components/Inputs/Select'
 import Popup from '@/components/Popup'
@@ -45,7 +45,7 @@ function MultiSelect<T>({ selectedOptions, label, renderSelectedValue, className
         onMouseDown={openOptionsModal}
         onKeyDown={(e) => onEnterOrSpace(e, openOptionsModal)}
       >
-        <InputLabel isElevated={selectedOptions.length > 0}>{label}</InputLabel>
+        <SelectLabel>{label}</SelectLabel>
         <SelectedValue>
           <Truncate>{renderSelectedValue()}</Truncate>
         </SelectedValue>
@@ -136,7 +136,8 @@ export function MultiSelectOptionsModal<T>({
 export default MultiSelect
 
 const MultiSelectInputArea = styled(InputArea)`
-  ${inputDefaultStyle(true, true, true, 'big')};
+  ${inputDefaultStyle(true, true, false)};
+  gap: 10px;
 `
 
 const SelectedValue = styled.div`

diff --git a/apps/desktop-wallet/src/components/Inputs/Select.tsx b/apps/desktop-wallet/src/components/Inputs/Select.tsx
@@ -387,7 +387,7 @@ const SelectContainer = styled.div<InputProps>`
 
   padding-right: 35px;
   font-weight: var(--fontWeight-medium);
-  gap: 20px;
+  gap: 10px;
 
   cursor: ${({ showPointer }) => showPointer && 'pointer'};
 

diff --git a/apps/desktop-wallet/src/components/Inputs/index.tsx b/apps/desktop-wallet/src/components/Inputs/index.tsx
@@ -44,7 +44,7 @@ export const inputStyling = {
 
 export const inputDefaultStyle = (
   hasIcon?: boolean,
-  hasValue?: boolean,
+  topPadding?: boolean,
   hasLabel?: boolean,
   heightSize?: InputHeight,
   largeText?: boolean
@@ -67,7 +67,7 @@ export const inputDefaultStyle = (
 
   transition: all 0.1s;
 
-  ${hasValue &&
+  ${topPadding &&
   hasLabel &&
   css`
     padding-top: 13px;

diff --git a/apps/desktop-wallet/src/components/NavItem.tsx b/apps/desktop-wallet/src/components/NavItem.tsx
@@ -54,6 +54,7 @@ const ButtonStyled = styled(Button)<{ isActive: boolean }>`
   opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
   font-weight: ${({ isActive }) => (isActive ? 'var(--fontWeight-semiBold)' : 'var(--fontWeight-medium)')};
   border-radius: var(--radius-medium);
+  font-size: 14px;
 
   @media (max-width: ${sidebarExpandThresholdPx}px) {
     gap: 0;