From b17bcdd71865e3325901accd732a0390d261ff7b Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@hippodigital.co.uk>
Date: Mon, 30 Jan 2023 16:43:20 +0000
Subject: [PATCH] Improve consistency of inputs

- Improve touch areas of tabs and buttons so more of them are 44px height
- Improve border radius of inputs so they're aligned.
---
 src/routes/_components/Select.html                 |  2 +-
 src/routes/_components/TabSet.html                 | 14 +++++---------
 .../_components/dialog/components/EmojiDialog.html |  1 +
 src/routes/_components/profile/AccountProfile.html |  1 +
 src/routes/_components/search/Search.html          |  4 ++--
 src/scss/global.scss                               | 10 ++++++++--
 src/scss/themes/_base.scss                         |  2 ++
 src/scss/themes/_dark.scss                         |  2 ++
 8 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/routes/_components/Select.html b/src/routes/_components/Select.html
index 22d90066..61bffcb1 100644
--- a/src/routes/_components/Select.html
+++ b/src/routes/_components/Select.html
@@ -39,7 +39,7 @@
     line-height: 1.1;
     box-sizing: border-box;
     border: 1px solid var(--main-border);
-    border-radius: 10px;
+    border-radius: var(--input-border-radius-size);
     -moz-appearance: none;
     -webkit-appearance: none;
     background-color: var(--input-bg);
diff --git a/src/routes/_components/TabSet.html b/src/routes/_components/TabSet.html
index a9db0dac..8fd7c012 100644
--- a/src/routes/_components/TabSet.html
+++ b/src/routes/_components/TabSet.html
@@ -33,19 +33,15 @@
   }
 
   li {
-    border: 1px solid var(--main-border);
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
     background: var(--tab-bg);
-    border-left: none;
   }
 
-  li:last-child {
-    border-right: none;
+  li:not(:last-child) {
+    border-right: 1px solid var(--main-border);
   }
 
   li:hover {
@@ -56,8 +52,8 @@
     background: var(--tab-bg-non-selected);
   }
 
-  li.current {
-    border-bottom: none;
+  li:not(.current) {
+    border-bottom: 1px solid var(--main-border);
   }
 
   li.current:hover {
@@ -73,7 +69,7 @@
   }
 
   a {
-    padding: 7px 10px;
+    padding: .75em;
     color: var(--body-text-color);
     font-size: 1.1em;
     flex: 1;
diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index d4ae3e93..54ede0f9 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -20,6 +20,7 @@
   emoji-picker {
     --indicator-color: var(--main-theme-color);
     --outline-color: var(--focus-outline);
+    --input-border-radius: var(--input-border-radius-size);
   }
 
   @media (max-width: 479px) {
diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index 19323172..a2b53e9e 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -45,6 +45,7 @@
     grid-row-gap: 5px;
     padding: 20px;
     justify-content: center;
+    border-bottom: var(--main-border-size) solid var(--main-border);
   }
 
   @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
diff --git a/src/routes/_components/search/Search.html b/src/routes/_components/search/Search.html
index 3c4ad7ff..c6ffc3e1 100644
--- a/src/routes/_components/search/Search.html
+++ b/src/routes/_components/search/Search.html
@@ -34,8 +34,8 @@
     align-items: center;
   }
   .search-input {
-    padding: 10px 15px;
-    border-radius: 10px;
+    padding: 12px 15px;
+    border-radius: var(--input-border-radius-size);
     flex: 1;
     width: 0;
     min-width: 0;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 168734f1..30201484 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -96,13 +96,19 @@ input[type=search] {
 input, textarea {
   background: inherit;
   color: inherit;
+  border-radius: var(--input-border-radius-size);
+  padding: 5px 8px;
+}
+
+::placeholder {
+  color: var(--input-placeholder-color);
 }
 
 button, .button {
   font-size: 1.2em;
   background: var(--button-bg);
-  border-radius: 2px;
-  padding: 10px 15px;
+  border-radius: var(--input-border-radius-size);
+  padding: 12px 15px;
   border: 1px solid var(--button-border);
   cursor: pointer;
   color: var(--button-text);
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index ff91c302..b0ece97f 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -14,7 +14,9 @@
   --button-bg-hover: #{darken($main-bg-color, 5%)};
 
   --input-border: #{$border-color};
+  --input-border-radius-size: 4px;
   --input-bg: #{$main-bg-color};
+  --input-placeholder-color: #{$deemphasized-color};
   --anchor-text: #{$anchor-color};
   --main-bg: #{$main-bg-color};
   --body-bg: #{$body-bg-color};
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index ad606126..bfd88c63 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -1,6 +1,8 @@
 :root {
   $deemphasized-color: lighten($main-bg-color, 54%);
 
+  --input-placeholder-color: #{$deemphasized-color};
+
   --action-button-deemphasized-fill-color: #{$deemphasized-color};
   --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
   --action-button-deemphasized-fill-color-active: #{lighten($deemphasized-color, 5%)};