refactor: simple migrations and tweaks to cuesheet

apps/client/src/common/components/input/input/Input.module.scss

@@ -1,7 +1,6 @@
 .input {
   box-sizing: border-box;
 
-  background-color: $gray-1200;
   font-size: 1rem;
   font-weight: 400;
   color: $gray-200;
@@ -31,6 +30,15 @@
   }
 }
 
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
 .medium {
   height: 2rem;
 }

apps/client/src/common/components/input/input/Input.tsx

@@ -5,7 +5,7 @@ import { cx } from '../../../utils/styleUtils';
 import style from './Input.module.scss';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'subtle';
+  variant?: 'subtle' | 'ghosted';
   height?: 'medium' | 'large';
   fluid?: boolean;
 }
@@ -20,6 +20,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       type='text'
       autoCorrect='off'
       autoComplete='off'
+      spellCheck='false'
       className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
       {...inputProps}
     />