fix: Address design feedback on TextField and TextAreas (#42)

homebound-team · Apr 1, 2021 · 867297a · 867297a
1 parent d87bc05
commit 867297a
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/src/components/TextFieldBase.tsx b/src/components/TextFieldBase.tsx
@@ -9,7 +9,9 @@ interface TextFieldBaseProps extends Pick<BeamTextFieldProps, "label" | "errorMs
   inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
   inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
   multiline?: boolean;
+  /** TextField specific */
   compact?: boolean;
+  /** TextArea specific */
   wide?: boolean;
 }
 
@@ -18,7 +20,8 @@ export function TextFieldBase(props: TextFieldBaseProps) {
   const errorMessageId = `${inputProps.id}-error`;
 
   const ElementType: React.ElementType = multiline ? "textarea" : "input";
-  const width = wide ? 550 : 320;
+  // Default the widths, though eventually these should be responsive. Note: there is no "compact" view for "wide" fields at the moment
+  const width = wide ? 550 : compact ? 248 : 320;
 
   return (
     <div css={Css.df.flexColumn.wPx(width).$}>
@@ -31,18 +34,21 @@ export function TextFieldBase(props: TextFieldBaseProps) {
         ref={inputRef as any}
         rows={multiline ? 1 : undefined}
         css={{
-          ...Css.add("resize", "none").wPx(width).sm.px1.pyPx(10).gray800.br4.outline0.ba.bGray300.if(compact).pyPx(6)
-            .$,
-          ...Css.if(multiline).mh(px(120)).$,
+          ...Css.add("resize", "none")
+            .bgWhite.wPx(width)
+            .sm.px1.hPx(40)
+            .gray900.br4.outline0.ba.bGray300.if(compact)
+            .hPx(32).$,
+          ...Css.if(multiline).mh(px(96)).py1.px2.$,
           "&:focus": Css.bLightBlue700.$,
           "&:disabled": Css.gray400.bgGray100.cursorNotAllowed.$,
-          ...(errorMsg ? Css.bRed500.$ : {}),
+          ...(errorMsg ? Css.bRed600.$ : {}),
         }}
       />
       {errorMsg && (
         <div id={errorMessageId} css={Css.red600.sm.df.mtPx(4).$}>
           <span css={Css.fs0.$}>
-            <Icon icon="error" color={Palette.Red500} />
+            <Icon icon="error" color={Palette.Red600} />
           </span>
           <span css={Css.ml1.mtPx(2).$}>{errorMsg}</span>
         </div>