style: update chat UI colors and input styling

catalog/app/components/Assistant/UI/Chat/Chat.tsx

@@ -43,7 +43,7 @@ const useMessageContainerStyles = M.makeStyles((t) => ({
     borderRadius: `${t.spacing(1)}px`,
     '$color_intense &': {
       background: BG.intense,
-      color: t.palette.common.white,
+      color: M.fade(t.palette.common.white, 0.8),
     },
     '$color_bright &': {
       background: BG.bright,

catalog/app/components/Assistant/UI/Chat/Input.tsx

@@ -2,6 +2,8 @@ import cx from 'classnames'
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
+import { createCustomAppTheme } from 'constants/style'
+
 const useStyles = M.makeStyles((t) => ({
   input: {
     alignItems: 'center',
@@ -12,8 +14,49 @@ const useStyles = M.makeStyles((t) => ({
   textField: {
     marginTop: 0,
   },
+  hint: {
+    color: t.palette.text.hint,
+  },
 }))
 
+const backgroundColor = M.colors.indigo[900]
+const backgroundColorLt = M.lighten(backgroundColor, 0.1)
+
+const useInputStyles = M.makeStyles({
+  focused: {},
+  disabled: {},
+  root: {
+    backgroundColor,
+    borderRadius: '8px',
+    color: M.fade(M.colors.common.white, 0.8),
+    '&:hover': {
+      backgroundColor: backgroundColorLt,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor,
+      },
+    },
+    '&$focused': {
+      backgroundColor,
+    },
+    '&$disabled': {
+      backgroundColor: backgroundColorLt,
+    },
+  },
+})
+
+const useLabelStyles = M.makeStyles({
+  focused: {},
+  root: {
+    color: M.fade(M.colors.common.white, 0.6),
+    '&$focused': {
+      color: M.fade(M.colors.common.white, 0.6),
+    },
+  },
+})
+
+const darkTheme = createCustomAppTheme({ palette: { type: 'dark' } } as any)
+
 interface ChatInputProps {
   className?: string
   disabled?: boolean
@@ -35,36 +78,39 @@ export default function ChatInput({ className, disabled, onSubmit }: ChatInputPr
     [disabled, onSubmit, value],
   )
 
-  // TODO: customize colors
   return (
     <form className={cx(classes.input, className)} onSubmit={handleSubmit}>
-      <M.TextField
-        className={classes.textField}
-        onChange={(e) => setValue(e.target.value)}
-        value={value}
-        variant="filled"
-        autoFocus
-        fullWidth
-        margin="normal"
-        label="Ask Qurator"
-        helperText="Qurator may make errors. Verify important information."
-        InputProps={{
-          endAdornment: (
-            <M.InputAdornment position="end" variant="filled">
-              <M.IconButton
-                disabled={disabled || !value}
-                onClick={handleSubmit}
-                type="submit"
-                color="primary"
-                edge="end"
-              >
-                <M.Icon>send</M.Icon>
-              </M.IconButton>
-            </M.InputAdornment>
-          ),
-        }}
-        InputLabelProps={{}}
-      />
+      <M.ThemeProvider theme={darkTheme}>
+        <M.TextField
+          className={classes.textField}
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+          variant="filled"
+          autoFocus
+          fullWidth
+          margin="normal"
+          label="Ask Qurator"
+          helperText="Qurator may make errors. Verify important information."
+          InputProps={{
+            disableUnderline: true,
+            classes: useInputStyles(),
+            endAdornment: (
+              <M.InputAdornment position="end">
+                <M.IconButton
+                  disabled={disabled || !value}
+                  onClick={handleSubmit}
+                  type="submit"
+                  edge="end"
+                >
+                  <M.Icon style={{ opacity: 0.7 }}>send</M.Icon>
+                </M.IconButton>
+              </M.InputAdornment>
+            ),
+          }}
+          InputLabelProps={{ classes: useLabelStyles() }}
+          FormHelperTextProps={{ classes: { root: classes.hint } }}
+        />
+      </M.ThemeProvider>
     </form>
   )
 }