From cf1a7f2e21b915e5e3f2603e16edb12b111cd436 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 22 May 2023 12:54:26 -0400
Subject: [PATCH] Match settings modal to design nuances better

---
 src/Modal.module.css                  |  4 ++--
 src/button/Button.module.css          |  4 ++--
 src/index.css                         |  8 +++++++-
 src/input/SelectInput.module.css      |  2 --
 src/settings/SettingsModal.module.css | 13 ++++---------
 src/settings/SettingsModal.tsx        |  2 +-
 src/tabs/Tabs.module.css              | 13 +++++++++----
 7 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/Modal.module.css b/src/Modal.module.css
index 30c8af04..5143f8b5 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -40,7 +40,7 @@ limitations under the License.
 .modalHeader {
   display: flex;
   justify-content: space-between;
-  padding: 34px 34px 0 34px;
+  padding: 34px 32px 0 32px;
 }
 
 .modalHeader h3 {
@@ -72,7 +72,7 @@ limitations under the License.
   .modalHeader {
     display: flex;
     justify-content: space-between;
-    padding: 24px 24px 0 24px;
+    padding: 32px 20px 0 20px;
   }
 
   .modal.mobileFullScreen {
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index eb8f0b1b..b19db46f 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -39,10 +39,10 @@ limitations under the License.
 .secondaryHangup,
 .button,
 .copyButton {
-  padding: 7px 15px;
+  padding: 8px 20px;
   border-radius: 8px;
   font-size: var(--font-size-body);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .button {
diff --git a/src/index.css b/src/index.css
index fbc9d1a6..f9e00ef3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,10 +180,16 @@ h2 {
 
 /* Subtitle */
 h3 {
-  font-weight: 400;
+  font-weight: 600;
   font-size: var(--font-size-subtitle);
 }
 
+/* Body Semi Bold */
+h4 {
+  font-weight: 600;
+  font-size: var(--font-size-body);
+}
+
 h1,
 h2,
 h3 {
diff --git a/src/input/SelectInput.module.css b/src/input/SelectInput.module.css
index 727ede0a..086be826 100644
--- a/src/input/SelectInput.module.css
+++ b/src/input/SelectInput.module.css
@@ -22,8 +22,6 @@ limitations under the License.
 }
 
 .label {
-  font-weight: 600;
-  font-size: var(--font-size-subtitle);
   margin-top: 0;
   margin-bottom: 12px;
 }
diff --git a/src/settings/SettingsModal.module.css b/src/settings/SettingsModal.module.css
index 1e44dad7..864d7954 100644
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -19,6 +19,10 @@ limitations under the License.
   height: 480px;
 }
 
+.settingsModal p {
+  color: var(--secondary-content);
+}
+
 .tabContainer {
   padding: 27px 20px;
 }
@@ -26,12 +30,3 @@ limitations under the License.
 .fieldRowText {
   margin-bottom: 0;
 }
-
-/*
-This style guarantees a fixed width of the tab bar in the settings window.
-The "Developer" item in the tab bar can be toggled.
-Without a defined width activating the developer tab makes the tab container jump to the right.
-*/
-.tabLabel {
-  min-width: 80px;
-}
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index b3d25a54..03dd2acf 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -195,7 +195,7 @@ export const SettingsModal = (props: Props) => {
           key="profile"
           title={
             <>
-              <UserIcon width={16} height={16} />
+              <UserIcon width={15} height={15} />
               <span>{t("Profile")}</span>
             </>
           }
diff --git a/src/tabs/Tabs.module.css b/src/tabs/Tabs.module.css
index 188747cc..9ba61048 100644
--- a/src/tabs/Tabs.module.css
+++ b/src/tabs/Tabs.module.css
@@ -25,12 +25,14 @@ limitations under the License.
   list-style: none;
   padding: 0;
   margin: 0 auto 24px auto;
+  gap: 16px;
+  overflow: scroll;
+  max-width: 100%;
 }
 
 .tab {
-  max-width: 190px;
-  min-width: fit-content;
   height: 32px;
+  box-sizing: border-box;
   border-radius: 8px;
   background-color: transparent;
   display: flex;
@@ -38,6 +40,7 @@ limitations under the License.
   padding: 0 8px;
   border: none;
   cursor: pointer;
+  font-size: var(--font-size-body);
 }
 
 .tab > * {
@@ -78,17 +81,18 @@ limitations under the License.
 
 @media (min-width: 800px) {
   .tab {
+    width: 200px;
     padding: 0 16px;
   }
 
   .tab > * {
-    margin: 0 16px 0 0;
+    margin: 0 12px 0 0;
   }
 
   .tabContainer {
     width: 100%;
     flex-direction: row;
-    padding: 27px 20px;
+    padding: 20px 18px;
     box-sizing: border-box;
     overflow: hidden;
   }
@@ -96,6 +100,7 @@ limitations under the License.
   .tabList {
     flex-direction: column;
     margin-bottom: 0;
+    gap: 0;
   }
 
   .tabPanel {