feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -1,9 +1,11 @@
-import { ListboxArrow, ListboxButton, ListboxInput, ListboxList, ListboxOption, ListboxPopover } from '@reach/listbox'
+import { ListboxArrow, ListboxInput, ListboxList, ListboxPopover } from '@reach/listbox'
 import '@reach/listbox/styles.css'
 import VisuallyHidden from '@reach/visually-hidden'
 import { FunctionComponent } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { DropdownItem } from './DropdownItem'
+import StyledListboxButton from './StyledListboxButton'
+import StyledListboxOption from './StyledListboxOption'
 
 type DropdownProps = {
   id: string
@@ -25,16 +27,16 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   iconClassName = '',
 }) => (
   <>
-    <div className="sn-dropdown-button-label">
+    <div className="flex items-center">
       {icon ? (
         <div className="flex mr-2">
-          <Icon type={icon} className={`sn-icon--small ${iconClassName}`} />
+          <Icon type={icon} className={iconClassName} size="small" />
         </div>
       ) : null}
       <div className="dropdown-selected-label">{label}</div>
     </div>
-    <ListboxArrow className={`sn-dropdown-arrow ${isExpanded ? 'sn-dropdown-arrow-flipped' : ''}`}>
-      <Icon type="menu-arrow-down" className="sn-icon--small color-passive-1" />
+    <ListboxArrow className={`flex ${isExpanded ? 'rotate-180' : ''}`}>
+      <Icon type="menu-arrow-down" className="text-passive-1" size="small" />
     </ListboxArrow>
   </>
 )
@@ -52,8 +54,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
     <>
       <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
       <ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
-        <ListboxButton
-          className="sn-dropdown-button"
+        <StyledListboxButton
           children={({ value, label, isExpanded }) => {
             const current = items.find((item) => item.value === value)
             const icon = current ? current?.icon : null
@@ -71,20 +72,14 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
           <div className="sn-component">
             <ListboxList>
               {items.map((item) => (
-                <ListboxOption
-                  key={item.value}
-                  className="sn-dropdown-item"
-                  value={item.value}
-                  label={item.label}
-                  disabled={item.disabled}
-                >
+                <StyledListboxOption key={item.value} value={item.value} label={item.label} disabled={item.disabled}>
                   {item.icon ? (
                     <div className="flex mr-3">
-                      <Icon type={item.icon} className={`sn-icon--small ${item.iconClassName ?? ''}`} />
+                      <Icon type={item.icon} className={item.iconClassName ?? ''} size="small" />
                     </div>
                   ) : null}
                   <div className="text-input">{item.label}</div>
-                </ListboxOption>
+                </StyledListboxOption>
               ))}
             </ListboxList>
           </div>

packages/web/src/javascripts/Components/Dropdown/StyledListboxButton.tsx

@@ -0,0 +1,21 @@
+import { ListboxButton } from '@reach/listbox'
+import styled from 'styled-components'
+
+const StyledListboxButton = styled(ListboxButton)`
+  &[data-reach-listbox-button] {
+    background-color: var(--sn-stylekit-background-color);
+    border-radius: 0.25rem;
+    border: 1px solid var(--sn-stylekit-border-color);
+    color: var(--sn-stylekit-contrast-foreground-color);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    min-width: 13.75rem;
+    padding-bottom: 0.375rem;
+    padding-left: 0.875rem;
+    padding-right: 0.875rem;
+    padding-top: 0.375rem;
+    width: fit-content;
+  }
+`
+
+export default StyledListboxButton

packages/web/src/javascripts/Components/Dropdown/StyledListboxOption.tsx

@@ -0,0 +1,38 @@
+import { ListboxOption } from '@reach/listbox'
+import styled from 'styled-components'
+
+const StyledListboxOption = styled(ListboxOption)`
+  &[data-reach-listbox-option] {
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    color: var(--sn-stylekit-contrast-foreground-color);
+    cursor: pointer;
+    display: flex;
+    font-size: 0.875rem;
+    padding-bottom: 0.375rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.375rem;
+    text-align: left;
+    width: 100%;
+
+    &[data-current-selected] {
+      color: var(--sn-stylekit-info-color);
+      background-color: var(--sn-stylekit-info-backdrop-color);
+    }
+
+    &:hover {
+      background-color: var(--sn-stylekit-contrast-background-color);
+      color: var(--sn-stylekit-foreground-color);
+    }
+
+    &:focus {
+      background-color: var(--sn-stylekit-info-backdrop-color);
+      box-shadow: none;
+      outline: none;
+    }
+  }
+`
+
+export default StyledListboxOption