feat: :lipstick: setting to change font size

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`