fix: apply styles

new-lamassu-admin/src/components/inputs/base/Select.styles.js

@@ -1,30 +1,36 @@
-import { zircon, comet, white } from '../../../styling/variables'
+import { subheaderColor, offColor, white } from '../../../styling/variables'
 import typographyStyles from '../../typography/styles'
 
-const { select, regularLabel } = typographyStyles
+const { p, label1 } = typographyStyles
 
 const WIDTH = 152
 
 export default {
+  selectedItem: {
+    width: WIDTH - 41,
+    display: 'block',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  },
   select: {
     width: WIDTH,
     zIndex: 1000,
     '& label': {
-      extend: regularLabel,
-      color: comet,
+      extend: label1,
+      color: offColor,
       paddingLeft: 10
     },
     '& button': {
-      extend: select,
+      extend: p,
       position: 'relative',
       border: 0,
-      backgroundColor: zircon,
+      backgroundColor: subheaderColor,
       width: WIDTH,
-      padding: '6px 0 6px 12px',
+      padding: [[6, 0, 6, 12]],
       borderRadius: 20,
       lineHeight: '1.14',
       textAlign: 'left',
-      color: comet,
+      color: offColor,
       cursor: 'pointer',
       outline: '0 none'
     },
@@ -36,16 +42,23 @@ export default {
       margin: 0,
       borderTop: 0,
       padding: 0,
-      borderRadius: '0 0 16px 16px',
-      backgroundColor: zircon,
+      borderRadius: [[0, 0, 16, 16]],
+      backgroundColor: subheaderColor,
       outline: '0 none',
       '& li': {
+        extend: p,
         listStyleType: 'none',
-        padding: '6px 0 6px 12px',
-        cursor: 'pointer'
+        padding: [[6, 12]],
+        cursor: 'pointer',
+        '& span': {
+          width: '100%',
+          display: 'block',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap'
+        }
       },
       '& li:hover': {
-        backgroundColor: comet,
+        backgroundColor: offColor,
         color: white
       }
     },
@@ -53,31 +66,31 @@ export default {
       position: 'absolute',
       top: 12,
       right: 14,
-      fill: comet
+      fill: offColor
     }
   },
   selectFiltered: {
     '& button': {
-      backgroundColor: comet,
+      backgroundColor: offColor,
       color: white
     },
     '& ul': {
       '& li': {
-        backgroundColor: comet,
+        backgroundColor: offColor,
         color: white
       },
       '& li:hover': {
-        backgroundColor: zircon,
-        color: comet
+        backgroundColor: subheaderColor,
+        color: offColor
       }
     },
     '& svg': {
-      fill: `${white} !important`
+      fill: [[white], '!important']
     }
   },
   open: {
     '& button': {
-      borderRadius: '16px 16px 0 0'
+      borderRadius: [[16, 16, 0, 0]]
     }
   }
 }