Polishing Select component: text color and spacing (#105)

Altalogy · Apr 28, 2022 · ba541fe · ba541fe
1 parent 3291915
commit ba541fe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/applications/launchpad_v2/src/components/Select/index.tsx b/applications/launchpad_v2/src/components/Select/index.tsx
@@ -1,6 +1,8 @@
 import { Fragment } from 'react'
 import { Listbox } from '@headlessui/react'
 
+import Text from '../Text'
+
 import ArrowBottom from '../../styles/Icons/ArrowBottom1'
 
 import {
@@ -55,7 +57,9 @@ const Select = ({
         <>
           <Label inverted={inverted}>{label}</Label>
           <SelectButton open={open} inverted={inverted} disabled={disabled}>
-            <span>{(value || {}).label || ''}</span>
+            <Text as='span' type='smallMedium' color='inherit'>
+              {(value || {}).label || ''}
+            </Text>
             {!disabled && (
               <SelectorIcon inverted={inverted}>
                 <ArrowBottom />
@@ -71,7 +75,9 @@ const Select = ({
                     active={active}
                     inverted={inverted}
                   >
-                    {option.label}
+                    <Text as='span' type='smallMedium' color='inherit'>
+                      {option.label}
+                    </Text>
                   </Option>
                 )}
               </Listbox.Option>

diff --git a/applications/launchpad_v2/src/components/Select/styles.tsx b/applications/launchpad_v2/src/components/Select/styles.tsx
@@ -22,15 +22,14 @@ export const SelectButton = styled(Listbox.Button)<SelectInternalProps>`
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   color: ${({ theme, inverted }) =>
-    inverted ? theme.inverted.primary : theme.primary};
+    inverted ? theme.inverted.primary : theme.secondary};
   position: relative;
   width: 100%;
   appearance: none;
   background-color: ${({ theme, inverted }) =>
     inverted ? theme.inverted.controlBackground : theme.controlBackground};
-  padding: 0;
   padding: ${({ theme }) =>
-    `${theme.spacingVertical()} ${theme.spacingHorizontal()}`};
+    `${theme.spacingVertical(0.78)} ${theme.spacingHorizontal(0.67)}`};
   padding-right: ${({ theme }) => theme.spacingHorizontal()};
   margin: 0;
   outline: none;
@@ -47,11 +46,13 @@ export const SelectButton = styled(Listbox.Button)<SelectInternalProps>`
 `
 
 const FloatingOptions = styled.ul<SelectInternalProps>`
-  color: ${({ theme }) => theme.primary};
+  color: ${({ theme }) => theme.secondary};
   position: absolute;
   margin: 0;
-  margin-top: ${({ theme }) => theme.spacingVertical()};
+  margin-top: ${({ theme }) => theme.spacingVertical(0.5)};
   padding: 0;
+  padding-top: ${({ theme }) => theme.spacingVertical(0.4)};
+  padding-bottom: ${({ theme }) => theme.spacingVertical(0.4)};
   width: 100%;
   border: 1px solid;
   border-radius: ${({ theme }) => theme.tightBorderRadius()};
@@ -81,14 +82,14 @@ export const Option = styled.li<
   list-style-type: none;
   position: relative;
   padding: ${({ theme }) =>
-    `${theme.spacingVertical(0.5)} ${theme.spacingHorizontal(0.5)}`};
+    `${theme.spacingVertical(0.4)} ${theme.spacingHorizontal(0.4)}`};
   margin: ${({ theme }) =>
-    `${theme.spacingVertical(0.5)} ${theme.spacingHorizontal(0.5)}`};
+    `${theme.spacingVertical(0.4)} ${theme.spacingHorizontal(0.4)}`};
   border-radius: ${({ theme }) => theme.borderRadius(0.5)};
   background-color: ${({ theme, selected, active }) =>
     selected || active ? theme.backgroundImage : 'transparent'};
   outline: none;
-  cursor: default;
+  cursor: pointer;
 
   &:hover {
     background-color: ${({ theme }) => theme.backgroundImage};