diff options
Diffstat (limited to 'extension/react-app/src/components')
9 files changed, 62 insertions, 24 deletions
diff --git a/extension/react-app/src/components/EditableDiv.tsx b/extension/react-app/src/components/EditableDiv.tsx index a86bd692..1c295843 100644 --- a/extension/react-app/src/components/EditableDiv.tsx +++ b/extension/react-app/src/components/EditableDiv.tsx @@ -5,12 +5,13 @@ import { secondaryDark, vscForeground, } from "."; +import { getFontSize } from "../util"; -const Div = styled.div` +const Div = styled.div<{ fontSize?: number }>` resize: none; padding: 8px; - font-size: 13px; + font-size: ${(props) => props.fontSize || getFontSize()}px; font-family: inherit; border-radius: ${defaultBorderRadius}; margin: 8px auto; @@ -45,6 +46,7 @@ interface EditableDivProps { function EditableDiv(props: EditableDivProps) { return ( <Div + fontSize={getFontSize()} suppressContentEditableWarning={true} contentEditable={true} onChange={(e) => { diff --git a/extension/react-app/src/components/ModelSettings.tsx b/extension/react-app/src/components/ModelSettings.tsx index 06516687..ac5a344b 100644 --- a/extension/react-app/src/components/ModelSettings.tsx +++ b/extension/react-app/src/components/ModelSettings.tsx @@ -10,6 +10,7 @@ import { } from "."; import { useState } from "react"; import { useFormContext } from "react-hook-form"; +import { getFontSize } from "../util"; const Div = styled.div<{ dashed: boolean }>` border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${lightGray}; @@ -56,7 +57,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) { <form> {typeof modelOptions.api_key !== undefined && ( <> - <Label>API Key</Label> + <Label fontSize={getFontSize()}>API Key</Label> <TextInput type="text" defaultValue={props.llm.api_key} @@ -67,7 +68,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) { )} {modelOptions.model && ( <> - <Label>Model</Label> + <Label fontSize={getFontSize()}>Model</Label> <TextInput type="text" defaultValue={props.llm.model} diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx index 4e13428d..fb685a82 100644 --- a/extension/react-app/src/components/PillButton.tsx +++ b/extension/react-app/src/components/PillButton.tsx @@ -17,8 +17,9 @@ import { GUIClientContext } from "../App"; import { useDispatch } from "react-redux"; import { setBottomMessage } from "../redux/slices/uiStateSlice"; import { ContextItem } from "../../../schema/FullState"; +import { getFontSize } from "../util"; -const Button = styled.button` +const Button = styled.button<{ fontSize?: number }>` border: none; color: ${vscForeground}; background-color: ${secondaryDark}; @@ -27,7 +28,7 @@ const Button = styled.button` padding-left: 8px; padding-right: 8px; overflow: hidden; - font-size: 13px; + font-size: ${(props) => props.fontSize || getFontSize()}px; cursor: pointer; `; @@ -120,6 +121,7 @@ const PillButton = (props: PillButtonProps) => { return ( <div style={{ position: "relative" }}> <StyledButton + fontSize={getFontSize()} borderColor={props.editing ? (warning ? "red" : undefined) : undefined} onMouseEnter={() => { setIsHovered(true); diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 61529227..e7264c5d 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -5,6 +5,7 @@ import { ArrowPathIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { HistoryNode } from "../../../schema/HistoryNode"; import HeaderButtonWithText from "./HeaderButtonWithText"; import StyledMarkdownPreview from "./StyledMarkdownPreview"; +import { getFontSize } from "../util"; interface StepContainerProps { historyNode: HistoryNode; @@ -41,12 +42,12 @@ const ButtonsDiv = styled.div` height: 0; `; -const ContentDiv = styled.div<{ isUserInput: boolean }>` +const ContentDiv = styled.div<{ isUserInput: boolean; fontSize?: number }>` padding: 2px; padding-right: 0px; background-color: ${(props) => props.isUserInput ? secondaryDark : vscBackground}; - font-size: 13px; + font-size: ${(props) => props.fontSize || getFontSize()}px; border-radius: ${defaultBorderRadius}; overflow: hidden; `; @@ -122,8 +123,13 @@ function StepContainer(props: StepContainerProps) { </ButtonsDiv> )} - <ContentDiv hidden={!props.open} isUserInput={isUserInput}> + <ContentDiv + hidden={!props.open} + isUserInput={isUserInput} + fontSize={getFontSize()} + > <StyledMarkdownPreview + fontSize={getFontSize()} source={props.historyNode.step.description || ""} wrapperElement={{ "data-color-mode": "dark", diff --git a/extension/react-app/src/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx index f77360b2..78d4234c 100644 --- a/extension/react-app/src/components/StyledMarkdownPreview.tsx +++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx @@ -7,8 +7,12 @@ import { vscForeground, } from "."; import MarkdownPreview from "@uiw/react-markdown-preview"; +import { getFontSize } from "../util"; -const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>` +const StyledMarkdownPreview = styled(MarkdownPreview)<{ + light?: boolean; + fontSize?: number; +}>` pre { background-color: ${(props) => props.light ? vscBackground : secondaryDark}; @@ -34,7 +38,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>` background-color: ${(props) => (props.light ? "transparent" : vscBackground)}; font-family: "Lexend", sans-serif; - font-size: 13px; + font-size: ${(props) => props.fontSize || getFontSize()}px; padding: 8px; color: ${vscForeground}; `; diff --git a/extension/react-app/src/components/Suggestions.tsx b/extension/react-app/src/components/Suggestions.tsx index c9d30de6..f0ee3bc0 100644 --- a/extension/react-app/src/components/Suggestions.tsx +++ b/extension/react-app/src/components/Suggestions.tsx @@ -15,6 +15,7 @@ import { import { useSelector } from "react-redux"; import { RootStore } from "../redux/store"; import HeaderButtonWithText from "./HeaderButtonWithText"; +import { getFontSize } from "../util"; const Div = styled.div<{ isDisabled: boolean }>` border-radius: ${defaultBorderRadius}; @@ -35,8 +36,8 @@ const Div = styled.div<{ isDisabled: boolean }>` } `; -const P = styled.p` - font-size: 13px; +const P = styled.p<{ fontSize: number }>` + font-size: ${(props) => props.fontSize}px; margin: 0; `; @@ -66,7 +67,7 @@ function SuggestionsDiv(props: SuggestionsDivProps) { onMouseLeave={() => setIsHovered(false)} isDisabled={props.disabled} > - <P>{props.description}</P> + <P fontSize={getFontSize()}>{props.description}</P> <PaperAirplaneIcon width="1.6em" height="1.6em" diff --git a/extension/react-app/src/components/TimelineItem.tsx b/extension/react-app/src/components/TimelineItem.tsx index 78568890..f54788eb 100644 --- a/extension/react-app/src/components/TimelineItem.tsx +++ b/extension/react-app/src/components/TimelineItem.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { lightGray, secondaryDark, vscBackground } from "."; +import { lightGray, vscBackground } from "."; import styled from "styled-components"; -import { ChatBubbleOvalLeftIcon, PlusIcon } from "@heroicons/react/24/outline"; +import { ChatBubbleOvalLeftIcon } from "@heroicons/react/24/outline"; +import { getFontSize } from "../util"; const CollapseButton = styled.div` background-color: ${vscBackground}; @@ -14,14 +15,14 @@ const CollapseButton = styled.div` cursor: pointer; `; -const CollapsedDiv = styled.div` +const CollapsedDiv = styled.div<{ fontSize?: number }>` margin-top: 8px; margin-bottom: 8px; margin-left: 8px; display: flex; align-items: center; gap: 4px; - font-size: 13px; + font-size: ${(props) => props.fontSize || getFontSize()}px; min-height: 16px; `; @@ -37,7 +38,7 @@ function TimelineItem(props: TimelineItemProps) { return props.open ? ( props.children ) : ( - <CollapsedDiv> + <CollapsedDiv fontSize={getFontSize()}> <CollapseButton onClick={() => { props.onToggle(); diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx index 15f1752f..11671526 100644 --- a/extension/react-app/src/components/UserInputContainer.tsx +++ b/extension/react-app/src/components/UserInputContainer.tsx @@ -24,7 +24,11 @@ import { } from "@heroicons/react/24/outline"; import { HistoryNode } from "../../../schema/HistoryNode"; import { GUIClientContext } from "../App"; -import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util"; +import { + getFontSize, + getMetaKeyLabel, + isMetaEquivalentKeyPressed, +} from "../util"; import { RootStore } from "../redux/store"; import { useSelector } from "react-redux"; @@ -91,8 +95,8 @@ const GradientBorder = styled.div<{ background-size: 200% 200%; `; -const StyledDiv = styled.div<{ editing: boolean }>` - font-size: 13px; +const StyledDiv = styled.div<{ editing: boolean; fontSize?: number }>` + font-size: ${(props) => props.fontSize || getFontSize()}px; font-family: inherit; border-radius: ${defaultBorderRadius}; height: auto; @@ -204,6 +208,7 @@ const UserInputContainer = (props: UserInputContainerProps) => { borderRadius={defaultBorderRadius} > <StyledDiv + fontSize={getFontSize()} editing={isEditing} onMouseEnter={() => { setIsHovered(true); diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts index 510740f8..1c27527c 100644 --- a/extension/react-app/src/components/index.ts +++ b/extension/react-app/src/components/index.ts @@ -1,5 +1,6 @@ import { Tooltip } from "react-tooltip"; import styled, { keyframes } from "styled-components"; +import { getFontSize } from "../util"; export const defaultBorderRadius = "5px"; export const lightGray = "#646464"; @@ -107,6 +108,21 @@ export const TextInput = styled.input.attrs({ type: "text" })` } `; +export const NumberInput = styled.input.attrs({ type: "number" })` + padding: 8px 12px; + margin: 8px 4px; + 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; @@ -118,8 +134,8 @@ export const Select = styled.select` color: ${vscForeground}; `; -export const Label = styled.label` - font-size: 13px; +export const Label = styled.label<{ fontSize?: number }>` + font-size: ${(props) => props.fontSize || getFontSize()}px; `; const spin = keyframes` |