fancy select

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal2/elements.ts

@@ -105,7 +105,6 @@ export const Input = styled.input<{ code?: boolean }>(({ code }) =>
     width: '100%',
     boxSizing: 'border-box', // probably not right
     height: 32,
-    lineHeight: '32px',
 
     fontFamily: code ? 'code' : 'body',
 
@@ -136,6 +135,22 @@ export const TextArea = styled(Input).attrs({ as: 'textarea' })(
   StyledComponentInnerOtherProps<typeof Input>
 >;
 
+const caret =
+  'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTAgMjQiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjNzU3NTc1Ij48cGF0aCBkPSJtNS4wMDAwNiAxNy0zLjAwMDA2LTRoNnoiLz48cGF0aCBkPSJtNC45OTk5NCA3IDMuMDAwMDYgNGgtNnoiLz48L2c+PC9zdmc+';
+
+export const Select = styled(Input).attrs({ as: 'select' })(
+  css({
+    appearance: 'none',
+    backgroundImage: `url(${caret})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '96% 50%',
+  })
+) as StyledComponent<
+  'select',
+  any,
+  StyledComponentInnerOtherProps<typeof Input>
+>;
+
 export const Button = styled.button(
   css({
     width: '100%',

packages/app/src/app/pages/common/Modals/ShareModal2/index.tsx

@@ -32,6 +32,7 @@ import {
   Description,
   Option,
   Input,
+  Select,
   TextArea,
   Button,
   Preview,
@@ -194,9 +195,7 @@ function ShareModal() {
               or documentation
             </Description>
             <Option>
-              <Input
-                as="select"
-                placeholder="Select an preset"
+              <Select
                 onChange={event => applyPreset(event.target.value)}
                 value={settings.preset}
               >
@@ -205,7 +204,7 @@ function ShareModal() {
                 <option value="code-only">Code only</option>
                 <option value="code-with-tests">Code with tests</option>
                 <option value="custom">Custom</option>
-              </Input>
+              </Select>
             </Option>
             <Option>
               Dark theme