From 5eec484dc79bb56dabf9a56af0dbe6bc95227d39 Mon Sep 17 00:00:00 2001
From: Nate Sesti <33237525+sestinj@users.noreply.github.com>
Date: Tue, 22 Aug 2023 13:12:58 -0700
Subject: Config UI (#399)
* feat: :sparkles: UI for config!
* feat: :sparkles: (latent) edit models in settings
---
extension/react-app/src/components/index.ts | 50 +++++++++++++++++++++++------
1 file changed, 40 insertions(+), 10 deletions(-)
(limited to 'extension/react-app/src/components/index.ts')
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`
--
cgit v1.2.3-70-g09d2