From 4da306b9f79b0bb7a64bb197fb246258cf435b8d Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Wed, 31 Jan 2024 19:54:11 +0100
Subject: [PATCH] Normalize and improve font sizes

This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.

- Introduce variables for standard font sizes, enhancing
  maintainability.
- Remove explicit pixel values, replaced with scalable units based on
  root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.
---
 src/presentation/assets/styles/_fonts.scss    |  7 ++++++
 src/presentation/assets/styles/_globals.scss  |  1 +
 src/presentation/assets/styles/_mixins.scss   |  2 ++
 .../Code/CodeButtons/IconButton.vue           |  5 ++--
 .../RunInstructions/Steps/CopyableCommand.vue |  4 ++--
 .../components/Code/TheCodeArea.vue           |  1 +
 .../Selector/SelectionTypeDocumentation.vue   |  3 ---
 .../Scripts/View/Cards/CardList.vue           |  2 +-
 .../Scripts/View/Cards/CardListItem.vue       |  5 ++--
 .../View/Cards/CardSelectionIndicator.vue     |  9 +++++++-
 .../Scripts/View/TheScriptsView.vue           |  4 ++--
 .../Documentation/DocumentationText.vue       |  8 +++++--
 .../ToggleDocumentationButton.vue             |  3 +--
 .../NodeContent/Markdown/MarkdownText.vue     |  1 -
 .../View/Tree/NodeContent/NodeTitle.vue       | 13 +----------
 .../View/Tree/NodeContent/ToggleSwitch.vue    |  7 +++---
 .../View/Tree/TreeView/Node/NodeCheckbox.vue  | 23 +++++++++++--------
 .../components/Shared/Modal/ModalDialog.vue   |  2 +-
 .../components/Shared/TooltipWrapper.vue      |  1 +
 .../components/TheFooter/DownloadUrlList.vue  | 13 ++++-------
 .../TheFooter/DownloadUrlListItem.vue         | 11 ++++-----
 .../components/TheFooter/TheFooter.vue        |  1 -
 src/presentation/components/TheHeader.vue     |  6 ++---
 src/presentation/components/TheSearchBar.vue  |  4 ++--
 src/presentation/index.html                   |  4 +---
 25 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/src/presentation/assets/styles/_fonts.scss b/src/presentation/assets/styles/_fonts.scss
index 671b8aa8..27a4f2bf 100644
--- a/src/presentation/assets/styles/_fonts.scss
+++ b/src/presentation/assets/styles/_fonts.scss
@@ -33,3 +33,10 @@
 $font-normal    : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
 $font-artistic  : 'Yesteryear', cursive;
 $font-main      : 'Slabo 27px';
+
+$font-size-smaller  : 14px;
+$font-size-small    : 16px;
+$font-size-normal   : 18px;
+$font-size-large    : 22px;
+$font-size-larger   : 26px;
+$font-size-largest  : 40px;
diff --git a/src/presentation/assets/styles/_globals.scss b/src/presentation/assets/styles/_globals.scss
index f88ea946..fdc10d52 100644
--- a/src/presentation/assets/styles/_globals.scss
+++ b/src/presentation/assets/styles/_globals.scss
@@ -20,4 +20,5 @@ a {
 body {
     background: $color-background;
     font-family: $font-main;
+    font-size: $font-size-normal;
 }
diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index 135e6768..eb201285 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -1,4 +1,5 @@
 @use "@/presentation/assets/styles/colors" as *;
+@use "@/presentation/assets/styles/fonts" as *;
 
 @mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
   @media (hover: hover) {
@@ -92,6 +93,7 @@
 
 @mixin flat-button($disabled: false) {
   @include reset-button;
+  $font-size: $font-size-normal;
 
   @if $disabled {
     color: $color-primary-light;
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index d0978312..d1e28b8e 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -81,7 +81,7 @@ export default defineComponent({
   border-radius: 4px;
 
   .button__icon {
-    font-size: 2em;
+    font-size: $font-size-larger;
   }
 
   @include clickable;
@@ -99,10 +99,9 @@ export default defineComponent({
   .button__text {
     display: none;
     font-family: $font-artistic;
-    font-size: 1.5em;
+    font-size: $font-size-large;
     color: $color-primary;
     font-weight: 500;
-    line-height: 1.1;
     @include hover-or-touch {
       display: block;
     }
diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
index 9377b35b..03ff0fad 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
@@ -63,14 +63,14 @@ export default defineComponent({
   padding: 0.2rem;
   .dollar {
     margin-right: 0.5rem;
-    font-size: 0.8rem;
+    font-size: $font-size-smaller;
     user-select: none;
   }
   .copy-action-container {
     margin-left: 1rem;
   }
   code {
-    font-size: 1rem;
+    font-size: $font-size-small;
   }
 }
 </style>
diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index c7949c8e..5968231f 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -203,6 +203,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
     width: 100%;
     height: 100%;
     overflow: auto;
+    font-size: $font-size-small;
     &__highlight {
       background-color: $color-secondary-light;
       position: absolute;
diff --git a/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue b/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue
index 02fa22a1..04a69d17 100644
--- a/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue
@@ -101,9 +101,6 @@ ul {
   padding-left: 0em;
   margin-top: 0.25em;
   list-style: disc;
-  li {
-    line-height: 1.2em;
-  }
 }
 .sections {
   display: flex;
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index 2400bcf4..e112ba56 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -142,7 +142,7 @@ function isClickable(element: Element) {
 .error {
   width: 100%;
   text-align: center;
-  font-size: 3.5em;
+  font-size: $font-size-largest;
   font-family: $font-normal;
 }
 
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index b74984aa..616c7d6e 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -145,7 +145,6 @@ $card-horizontal-gap    : $card-gap;
     @include clickable;
     background-color: $color-primary;
     color: $color-on-primary;
-    font-size: 1.5em;
     height: 100%;
     width: 100%;
     text-transform: uppercase;
@@ -169,6 +168,7 @@ $card-horizontal-gap    : $card-gap;
       flex-direction: column;
       flex: 1;
       justify-content: center;
+      font-size: $font-size-large;
     }
     .card__inner__selection_indicator {
       height: $card-inner-padding;
@@ -181,6 +181,7 @@ $card-horizontal-gap    : $card-gap;
       width: 100%;
       margin-top: .25em;
       vertical-align: middle;
+      font-size: $font-size-normal;
     }
   }
   .card__expander {
@@ -202,7 +203,7 @@ $card-horizontal-gap    : $card-gap;
     }
 
     .card__expander__close-button {
-      font-size: 1.5em;
+      font-size: $font-size-large;
       align-self: flex-end;
       margin-right: 0.25em;
       @include clickable;
diff --git a/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue b/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
index 42b1493e..80837b88 100644
--- a/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="icon">
     <AppIcon
       v-if="isAnyChildSelected && !areAllChildrenSelected"
       icon="battery-half"
@@ -53,3 +53,10 @@ export default defineComponent({
 });
 
 </script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+.icon {
+  font-size: $font-size-normal;
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index 10d303da..59d34852 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -151,7 +151,7 @@ $margin-inner: 4px;
     margin-top: 1em;
     color: $color-primary-light;
     .search__query__close-button {
-      font-size: 1.25em;
+      font-size: $font-size-large;
       margin-left: 0.25rem;
     }
   }
@@ -160,7 +160,7 @@ $margin-inner: 4px;
     flex-direction: column;
     word-break:break-word;
     color: $color-on-primary;
-    font-size: 1.5em;
+    font-size: $font-size-large;
     padding:10px;
     text-align:center;
     > div {
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
index a6fb842a..06580d37 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -1,5 +1,9 @@
 <template>
-  <MarkdownText :text="renderedMarkdown" class="documentation-text" />
+  <MarkdownText
+    class="documentation-text"
+    :text="renderedMarkdown"
+    @click.stop
+  />
 </template>
 
 <script lang="ts">
@@ -55,7 +59,7 @@ function formatAsMarkdownListItem(content: string): string {
   flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
   max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
 
-  font-size: calc(24px * 75/100);
+  font-size: $font-size-normal;
   font-family: $font-main;
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue
index 6ee5ade9..ebb0860a 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue
@@ -49,8 +49,7 @@ export default defineComponent({
 .documentation-button {
   vertical-align: middle;
   color: $color-primary;
-  font-size: 24px;
-
+  font-size: $font-size-large;
   :deep() { // This override leads to inconsistent highlight color, it should be re-styled.
     @include hover-or-touch {
       color: $color-primary-darker;
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
index 26fe11f0..b7ebaf48 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     class="markdown-text"
-    @click.stop
     v-html="htmlOutput"
   />
 </template>
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
index a0373553..2af18961 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
@@ -24,17 +24,6 @@ export default defineComponent({
 
 .node-title {
   font-family: $font-main;
-  font-size: 1.5em;
-  line-height: 24px;
-  /*
-    Following is a workaround fixing overflow-y caused by line height being smaller than font.
-    It should be removed once a proper line-height matching the font-size (not smaller than) is used.
-  */
-  $line-height-compensation: calc((1.5em - 24px) / 4);
-  padding-top: $line-height-compensation;
-  padding-bottom: $line-height-compensation;
-  margin-top: calc(-1 * $line-height-compensation);
-  margin-bottom: calc(-1 * $line-height-compensation);
-  overflow-y: none;
+  font-size: $font-size-large;
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
index 65f5df1f..4aff760c 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -68,13 +68,15 @@ export default defineComponent({
 @use 'sass:math';
 @use "@/presentation/assets/styles/main" as *;
 
+$font-size              : $font-size-small;
+
 $color-toggle-unchecked : $color-primary-darker;
 $color-toggle-checked   : $color-on-secondary;
 $color-text-unchecked   : $color-on-primary;
 $color-text-checked     : $color-on-secondary;
 $color-bg-unchecked     : $color-primary;
 $color-bg-checked       : $color-secondary;
-$size-height            : 30px;
+$size-height            : $font-size + 8px;
 $size-circle            : math.div($size-height * 2, 3);
 $padding-horizontal     : 0.40em;
 $gap                    : 0.25em;
@@ -106,8 +108,7 @@ $gap                    : 0.25em;
   width: auto;
   height: $size-height;
   border-radius: $size-height;
-  line-height: $size-height;
-  font-size: math.div($size-height, 2);
+  font-size: $font-size;
 
   input.toggle-input {
     position: absolute;
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
index 4a110fc2..5a883c68 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
@@ -53,13 +53,13 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 @use "./../tree-colors" as *;
 
-$sideSizeInPx: 30px;
+$side-size-in-px: $font-size-larger;
 
 .checkbox {
   position: relative;
 
-  width: $sideSizeInPx;
-  height: $sideSizeInPx;
+  width: $side-size-in-px;
+  height: $side-size-in-px;
 
   box-sizing: border-box;
   border: 1px solid $color-node-checkbox-border-unchecked;
@@ -76,12 +76,12 @@ $sideSizeInPx: 30px;
   &.indeterminate {
     border-color: $color-node-checkbox-border-unchecked;
 
-    &:after {
+    &:after { // Draw line (─)
       background-color: $color-node-checkbox-border-indeterminate;
       top: 50%;
       left: 20%;
       right: 20%;
-      height: 2px;
+      height: 1.5px;
     }
   }
 
@@ -89,15 +89,18 @@ $sideSizeInPx: 30px;
     background: $color-node-checkbox-bg-checked;
     border-color: $color-node-checkbox-border-checked;
 
-    &:after {
+    &:after { // Draw checkmark tick (✔️)
+
       box-sizing: content-box;
       border: 1.5px solid $color-node-checkbox-tick-checked;
       border-left: 0;
       border-top: 0;
-      left: 9px;
-      top: 3px;
-      height: 15px;
-      width: 8px;
+
+      left: $side-size-in-px * 0.33;
+      top: $side-size-in-px * 0.11;
+      height: $side-size-in-px * 0.50;
+      width: $side-size-in-px * 0.25;
+
       transform: rotate(45deg) scaleY(1);
       transition: transform .25s;
       transform-origin: center;
diff --git a/src/presentation/components/Shared/Modal/ModalDialog.vue b/src/presentation/components/Shared/Modal/ModalDialog.vue
index c3b33e1d..e94c6bb7 100644
--- a/src/presentation/components/Shared/Modal/ModalDialog.vue
+++ b/src/presentation/components/Shared/Modal/ModalDialog.vue
@@ -74,7 +74,7 @@ export default defineComponent({
   .dialog__close-button {
     color: $color-primary-dark;
     width: auto;
-    font-size: 1.5em;
+    font-size: $font-size-large;
     margin-right: 0.25em;
     align-self: flex-start;
   }
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index eaa3e8a6..e9bf09f6 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -225,6 +225,7 @@ $color-tooltip-background: $color-primary-darkest;
   color: $color-on-primary;
   border-radius: 16px;
   padding: 5px 10px 4px;
+  font-size: $font-size-normal;
 
   /*
     This margin creates a visual buffer between the tooltip and the edges of the document.
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 1f318274..aec0b90d 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -2,8 +2,8 @@
   <span
     class="container"
     :class="{
-      'container-unsupported': !hasCurrentOsDesktopVersion,
-      'container-supported': hasCurrentOsDesktopVersion,
+      unsupported: !hasCurrentOsDesktopVersion,
+      supported: hasCurrentOsDesktopVersion,
     }"
   >
     <span class="description">
@@ -62,11 +62,8 @@ export default defineComponent({
   display:flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  &-unsupported {
-    opacity: $color-primary-light;
-  }
-  &-supported {
-    font-size: 1em;
+  .unsupported {
+    color: $color-primary-light;
   }
   .description {
     &__icon {
@@ -81,7 +78,7 @@ export default defineComponent({
   &__url {
     &:not(:first-child)::before {
       content: "|";
-      font-size: 0.6rem;
+      font-size: $font-size-smaller;
       padding: 0 5px;
     }
   }
diff --git a/src/presentation/components/TheFooter/DownloadUrlListItem.vue b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
index 131c7e2c..46d76049 100644
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
@@ -3,8 +3,8 @@
     <a
       :href="downloadUrl"
       :class="{
-        url__active: hasCurrentOsDesktopVersion && isCurrentOs,
-        url__inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
+        active: hasCurrentOsDesktopVersion && isCurrentOs,
+        inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
       }"
     >{{ operatingSystemName }}</a>
   </span>
@@ -64,11 +64,8 @@ function hasDesktopVersion(os: OperatingSystem): boolean {
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 .url {
-  &__active {
-    font-size: 1em;
-  }
-  &__inactive {
-    font-size: 0.70em;
+  .inactive {
+    font-size: $font-size-smaller;
   }
 }
 </style>
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index feb43453..899cba4c 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -124,7 +124,6 @@ export default defineComponent({
       }
     }
     flex-wrap: wrap;
-    font-size: 1rem;
     font-family: $font-normal;
     &__item:not(:first-child) {
       &::before {
diff --git a/src/presentation/components/TheHeader.vue b/src/presentation/components/TheHeader.vue
index 731c5f66..8e26802d 100644
--- a/src/presentation/components/TheHeader.vue
+++ b/src/presentation/components/TheHeader.vue
@@ -46,16 +46,14 @@ export default defineComponent({
     margin: 0;
     text-transform: uppercase;
     font-family: $font-main;
-    font-size: 2.5em;
-    line-height: 1.1;
+    font-size: $font-size-largest;
   }
   .subtitle {
     margin: 0;
-    font-size: 1.5em;
+    font-size: $font-size-larger;
     color: $color-primary;
     font-family: $font-artistic;
     font-weight: 500;
-    line-height: 1.2;
   }
 }
 </style>
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index b78b9852..f8516229 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -113,7 +113,7 @@ export default defineComponent({
   outline: none;
   color: $color-primary;
   font-family: $font-normal;
-  font-size:1em;
+  font-size: $font-size-normal;
   &:focus {
     color: $color-primary-darker;
   }
@@ -127,7 +127,7 @@ export default defineComponent({
   text-align: center;
   color: $color-on-primary;
   border-radius: 0 5px 5px 0;
-  font-size: 20px;
+  font-size: $font-size-large;
   padding:5px;
 }
 </style>
diff --git a/src/presentation/index.html b/src/presentation/index.html
index ba11cf19..86c7b138 100644
--- a/src/presentation/index.html
+++ b/src/presentation/index.html
@@ -41,11 +41,9 @@
         background: #eceef1;
         margin: 5rem auto;
         max-width: 800px;
-        font-size: 7px;
         padding: 3rem;
         border: 1px solid#333a45;
-        font-size: 1.5rem;
-        line-height: 150%;
+        font-size: 18px;
         font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
       }
     </style>