From 171028781f67b51ed1286a0aac71a90be09bdb0e Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Tue, 30 Apr 2024 20:33:13 -0400
Subject: [PATCH 1/2] CSS changes for settings

---
 app/components/Button/button.css  | 8 +++++++-
 app/components/Chatbot/widgit.css | 9 +++++----
 app/routes/chat.tsx               | 6 +++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index 9625c09f..b2d30543 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -33,9 +33,15 @@
   color: var(--colors-teal-800, #146560);
 }
 
+.primary-selected {
+  background: var(--colors-white, #ffffff);
+  color: var(--colors-teal-500, #1d9089);
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
+}
+
 .secondary {
   color: var(--colors-cool-grey-600, #788492) !important;
-  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
+  border: 1px solid var(--colors-teal-500, #1D9089);
   background: var(--colors-white, #fff);
 }
 
diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
index a54b8512..fa6b8cd9 100644
--- a/app/components/Chatbot/widgit.css
+++ b/app/components/Chatbot/widgit.css
@@ -23,13 +23,14 @@
 
 .settings-container {
   position: absolute;
-  bottom: var(--spacing-16);
-  left: var(--spacing-16);
+  bottom: var(--spacing-32);
+  left: var(--spacing-32);
 }
 
 .settings {
   padding: var(--spacing-32);
-  margin-bottom: var(--spacing-24);
+  margin-bottom: var(--spacing-8);
   flex-direction: column;
-  gap: var(--spacing-24);
+  gap: var(--spacing-16);
+  width: 384px
 }
diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx
index c69aee2a..45d4318b 100644
--- a/app/routes/chat.tsx
+++ b/app/routes/chat.tsx
@@ -16,7 +16,7 @@ export default function App() {
 
   const ModeButton = ({name, mode}: {name: string; mode: Mode}) => (
     <Button
-      className={chatSettings.mode === mode ? 'primary-alt' : ''}
+      className={chatSettings.mode === mode ? 'primary-selected' : ''}
       action={() => setChatSettings({...chatSettings, mode})}
     >
       {name}
@@ -51,8 +51,8 @@ export default function App() {
             </div>
           )}
           <SettingsIcon
-            width="32"
-            height="32"
+            width="24"
+            height="24"
             className="pointer"
             onClick={() => setShowSettings((current) => !current)}
           />

From fbe06043b457974249731a217a938e6e6f1030ca Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Wed, 1 May 2024 11:40:01 +0200
Subject: [PATCH 2/2] lint fix

---
 app/components/Button/button.css  | 2 +-
 app/components/Chatbot/widgit.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Button/button.css b/app/components/Button/button.css
index b2d30543..b9b8693f 100644
--- a/app/components/Button/button.css
+++ b/app/components/Button/button.css
@@ -41,7 +41,7 @@
 
 .secondary {
   color: var(--colors-cool-grey-600, #788492) !important;
-  border: 1px solid var(--colors-teal-500, #1D9089);
+  border: 1px solid var(--colors-teal-500, #1d9089);
   background: var(--colors-white, #fff);
 }
 
diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
index fa6b8cd9..117cf214 100644
--- a/app/components/Chatbot/widgit.css
+++ b/app/components/Chatbot/widgit.css
@@ -32,5 +32,5 @@
   margin-bottom: var(--spacing-8);
   flex-direction: column;
   gap: var(--spacing-16);
-  width: 384px
+  width: 384px;
 }