Merge pull request #37 from NickColley/improve-touch-sizes

Improve consistency of inputs

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);

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 {
+  li:not(:last-child) {
-    border-right: none;
+    border-right: 1px solid var(--main-border);
   }
 
   li:hover {
@@ -56,8 +52,8 @@
     background: var(--tab-bg-non-selected);
   }
 
-  li.current {
+  li:not(.current) {
-    border-bottom: none;
+    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;

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) {

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%)) {

src/routes/_components/search/Search.html

@@ -34,8 +34,8 @@
     align-items: center;
   }
   .search-input {
-    padding: 10px 15px;
+    padding: 12px 15px;
-    border-radius: 10px;
+    border-radius: var(--input-border-radius-size);
     flex: 1;
     width: 0;
     min-width: 0;

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;
+  border-radius: var(--input-border-radius-size);
-  padding: 10px 15px;
+  padding: 12px 15px;
   border: 1px solid var(--button-border);
   cursor: pointer;
   color: var(--button-text);

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};

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%)};