feat(ui): convert TextField to a styled component

packages/ui/src/atoms/TextField.js

 import React from 'react'
-import classes from './TextField.local.scss'
+import styled from 'styled-components'
+
+const Root = styled.label`
+  --font-local: var(--font-reviewer);
+
+  align-items: center;
+  display: flex;
+  font-size: 1em;
+  line-height: 1.8;
+`
+
+const Label = styled.span`
+  margin-right: 10px;
+`
+
+const Input = styled.input`
+  --color-back: darkgray;
+
+  background: linear-gradient(
+      to right,
+      transparent 0%,
+      transparent 2px,
+      white 2px,
+      white 4px
+    ),
+    linear-gradient(white 0%, white 90%, var(--color-back) 95%, white 100%);
+  background-position: 0 0, 0.2em 0;
+  background-repeat: repeat-X, repeat-Y;
+  background-size: 7px 100%, 100% 1.3em;
+  border: none;
+  border-left: 1px solid darkgrey;
+  caret-color: var(--color-primary);
+  flex: 1;
+  font-family: var(--font-local), serif;
+  font-size: inherit;
+  max-width: 100%;
+  padding: 0 0.5em;
+
+  &:hover,
+  &:focus {
+    border-color: transparent;
+    box-shadow: none;
+    outline-style: none;
+  }
+
+  &:hover {
+    --color-back: var(--color-primary);
+  }
+
+  &:focus {
+    --color-back: #aaa;
+  }
+
+  &::placeholder {
+    color: #999;
+    font-family: var(--font-interface);
+    font-size: 1em;
+    font-style: italic;
+  }
+`
 
 const TextField = ({
   label,
@@ -12,9 +71,9 @@ const TextField = ({
   onChange,
   readonly,
 }) => (
-  <label className={classes.root}>
-    {label && <span className={classes.text}>{label}</span>}
-    <input
+  <Root>
+    {label && <Label>{label}</Label>}
+    <Input
       name={name}
       onBlur={onBlur}
       onChange={onChange}
@@ -24,7 +83,7 @@ const TextField = ({
       type={type}
       value={value}
     />
-  </label>
+  </Root>
 )
 
 export default TextField

packages/ui/src/atoms/TextField.local.scss

-.root {
-  --font-local: var(--font-reviewer);
-
-  align-items: center;
-  display: flex;
-  font-size: 1em;
-  line-height: 1.8;
-}
-
-.root .text {
-  margin-right: 10px;
-}
-
-.root input {
-  --color-back: darkgray;
-
-  background: linear-gradient(
-      to right,
-      transparent 0%,
-      transparent 2px,
-      white 2px,
-      white 4px
-    ),
-    linear-gradient(white 0%, white 90%, var(--color-back) 95%, white 100%);
-  background-position: 0 0, 0.2em 0;
-  background-repeat: repeat-X, repeat-Y;
-  background-size: 7px 100%, 100% 1.3em;
-  border: none;
-  border-left: 1px solid darkgrey;
-  caret-color: var(--color-primary);
-  flex: 1;
-  font-family: var(--font-local), serif;
-  font-size: inherit;
-  max-width: 100%;
-  padding: 0 0.5em;
-
-  &:hover,
-  &:focus {
-    border-color: transparent;
-    box-shadow: none;
-    outline-style: none;
-  }
-
-  &:hover {
-    --color-back: var(--color-primary);
-  }
-
-  &:focus {
-    --color-back: #aaa;
-  }
-}
-
-.author {
-  --font-local: var(--font-author);
-
-  font-size: 1.1em;
-  line-height: 1.8;
-}
-
-.root input::placeholder {
-  color: #999;
-  font-family: var(--font-interface);
-  font-size: 1em;
-  font-style: italic;
-}
-
-.root .author::placeholder {
-  font-size: 0.9em;
-}