diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx index 1c7cacd..ef69df8 100644 --- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx @@ -2,12 +2,30 @@ import {theme} from '@theatre/studio/css' import {darken, lighten} from 'polished' import React, {useCallback} from 'react' import styled from 'styled-components' +import {CgSelect} from 'react-icons/all' + +const Container = styled.div` + width: 100%; + position: relative; +` + +const IconContainer = styled.div` + position: absolute; + right: 0px; + top: 0; + bottom: 0; + width: 1.5em; + font-size: 14px; + display: flex; + align-items: center; + color: #6b7280; +` const Select = styled.select` background-color: transparent; box-sizing: border-box; border: 1px solid transparent; - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.85); padding: 1px 6px; font: inherit; outline: none; @@ -16,11 +34,6 @@ const Select = styled.select` height: calc(100% - 4px); border-radius: 2px; - /** Credit: https://github.com/tailwindlabs/tailwindcss-forms/blob/39946dd5d1c4cd980a3e8fd2a0c597f962fe285e/src/index.js#L86 */ - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 4px center; - background-repeat: no-repeat; - background-size: 1.5em 1.5em; color-adjust: exact; appearance: none; @@ -44,13 +57,18 @@ const BasicSelect: React.FC<{ [onChange], ) return ( - + + + + + + ) }