Config UI (#399)

* feat: :sparkles: UI for config!

* feat: :sparkles: (latent) edit models in settings

1 files changed, 40 insertions, 10 deletions

diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 6705ceb2..f2e154bc 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -40,21 +40,29 @@ export const StyledTooltip = styled(Tooltip)`
   padding-left: 12px;
   padding-right: 12px;
   z-index: 100;
+
+  max-width: 80vw;
 `;
 
 export const TextArea = styled.textarea`
-  width: 100%;
+  padding: 8px;
+  font-family: inherit;
   border-radius: ${defaultBorderRadius};
-  border: none;
+  margin: 16px auto;
+  height: auto;
+  width: calc(100% - 32px);
   background-color: ${secondaryDark};
-  resize: vertical;
-
-  padding: 4px;
-  caret-color: ${vscForeground};
-  color: #{vscForeground};
+  color: ${vscForeground};
+  z-index: 1;
+  border: 1px solid transparent;
 
   &:focus {
-    outline: 1px solid ${buttonColor};
+    outline: 1px solid ${lightGray};
+    border: 1px solid transparent;
+  }
+
+  &::placeholder {
+    color: ${lightGray}80;
   }
 `;
 
@@ -84,11 +92,33 @@ export const H3 = styled.h3`
 
 export const TextInput = styled.input.attrs({ type: "text" })`
   width: 100%;
-  padding: 12px 20px;
+  padding: 8px 12px;
+  margin: 8px 0;
+  box-sizing: border-box;
+  border-radius: ${defaultBorderRadius};
+  outline: 1px solid ${lightGray};
+  border: none;
+  background-color: ${vscBackground};
+  color: ${vscForeground};
+
+  &:focus {
+    background: ${secondaryDark};
+  }
+`;
+
+export const Select = styled.select`
+  padding: 8px 12px;
   margin: 8px 0;
   box-sizing: border-box;
   border-radius: ${defaultBorderRadius};
-  border: 2px solid gray;
+  outline: 1px solid ${lightGray};
+  border: none;
+  background-color: ${vscBackground};
+  color: ${vscForeground};
+`;
+
+export const Label = styled.label`
+  font-size: 13px;
 `;
 
 const spin = keyframes`