From 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:55:34 +0300
Subject: [PATCH] relative units in line-height + some cleanup

---
 src/App.scss                                     | 6 +++---
 src/components/notifications/notifications.scss  | 3 ++-
 src/components/password_reset/password_reset.vue | 7 ++++---
 src/components/react_button/react_button.vue     | 2 +-
 src/components/status/status.scss                | 4 ++--
 src/components/user_card/user_card.scss          | 2 +-
 src/components/user_profile/user_profile.vue     | 2 +-
 src/panel.scss                                   | 2 +-
 8 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 8c59c77a..3d30ec79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -457,7 +457,7 @@ textarea,
   display: inline-block;
   position: relative;
   height: 2em;
-  line-height: 16px;
+  line-height: 1.2;
   hyphens: none;
   padding: 8px 0.5em;
 
@@ -508,7 +508,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
@@ -548,7 +548,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index aa4ae346..976688d1 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -155,7 +155,8 @@
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
-      line-height:20px;
+      line-height: 1.5;
+
       small {
         font-weight: lighter;
       }
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index e0579568..90673f44 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,7 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+
     > * {
       min-width: 0;
     }
@@ -100,8 +101,8 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
-    padding: 0.3em 0.0em 0.3em;
-    line-height: 24px;
+    padding: 0.3em 0;
+    line-height: 1.85em;
   }
 
   .error {
@@ -113,7 +114,7 @@
 
   .alert {
     padding: 0.5em;
-    margin: 0.3em 0.0em 1em;
+    margin: 0.3em 0 1em;
   }
 
   .password-reset-required {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..7f35b7b5 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -101,7 +101,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 36a2cca1..b3ad3818 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -106,7 +106,7 @@
   .heading-name-row {
     display: flex;
     justify-content: space-between;
-    line-height: 18px;
+    line-height: 1.3;
 
     a {
       display: inline-block;
@@ -227,7 +227,7 @@
 
   .replies {
     margin-top: 0.25em;
-    line-height: 18px;
+    line-height: 1.3;
     font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 44657bdf..2e153120 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -55,7 +55,7 @@
   &-bio {
     text-align: center;
     display: block;
-    line-height: 18px;
+    line-height: 1.3;
     padding: 1em;
     margin: 0;
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f1e3cb72..67966ff4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -176,7 +176,7 @@
       }
 
       .user-profile-field-name, .user-profile-field-value {
-        line-height: 18px;
+        line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/panel.scss b/src/panel.scss
index 637ea17c..776ed863 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -195,7 +195,7 @@
 }
 
 .panel-body > p {
-  line-height: 18px;
+  line-height: 1.3;
   padding: 1em;
   margin: 0;
 }