history: windows fonts (#1542)

* history: windows fonts

* header styling

Author: shakyShane

special-pages/pages/history/app/components/App.module.css

@@ -19,7 +19,7 @@ body {
     &[data-layout-mode="reduced"] {
         --sidebar-width: 230px;
         --main-padding-left: 28px;
-        --main-padding-right: 56px;
+        --main-padding-right: 36px;
     }
 
     [data-platform="windows"] & {

special-pages/pages/history/app/components/Header.js

@@ -17,7 +17,9 @@ export function Header() {
     const domain = useComputed(() => search.value.domain);
     return (
         <div class={styles.root}>
-            <Controls term={term} range={range} domain={domain} />
+            <div class={styles.controls}>
+                <Controls term={term} range={range} domain={domain} />
+            </div>
             <div class={styles.search}>
                 <SearchForm term={term} domain={domain} />
             </div>
@@ -83,11 +85,9 @@ function Controls({ term, range, domain }) {
     }
 
     return (
-        <div class={styles.controls}>
-            <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title} tabindex={0}>
-                <Trash />
-                <span>{buttonTxt}</span>
-            </button>
-        </div>
+        <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title} tabindex={0}>
+            <Trash />
+            <span>{buttonTxt}</span>
+        </button>
     );
 }

special-pages/pages/history/app/components/Header.module.css

@@ -1,5 +1,6 @@
 .root {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     gap: 8px;
     color: var(--history-text-normal);
@@ -10,6 +11,7 @@
 .controls {
     display: flex;
     gap: 8px;
+    flex-shrink: 0;
 }
 
 .largeButton {
@@ -49,7 +51,13 @@
 }
 
 .search {
-    margin-left: auto;
+    max-width: 238px;
+    width: 100%;
+    flex-shrink: 1;
+    display: flex;
+}
+.form {
+    width: 100%;
 }
 .label {
     color: inherit;
@@ -70,7 +78,7 @@
     }
 }
 .searchInput {
-    width: 238px;
+    width: 100%;
     height: 28px;
     border-radius: 6px;
     border: 0.5px solid var(--history-surface-border-color);

special-pages/pages/history/app/components/Item.module.css

@@ -97,15 +97,16 @@
 }
 
 .entryLink {
+    font-size: var(--label-font-size);
+    font-weight: var(--label-font-weight);
+    line-height: var(--row-height);
     white-space: nowrap;
-    font-weight: 510;
     flex-shrink: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     text-decoration: none;
     color: inherit;
-    line-height: var(--row-height);
     pointer-events: none;
 }
 

special-pages/pages/history/app/components/SearchForm.js

@@ -43,7 +43,7 @@ export function SearchForm({ term, domain }) {
     }
 
     return (
-        <form role="search" onSubmit={submit}>
+        <form role="search" class={styles.form} onSubmit={submit}>
             <label class={styles.label}>
                 <span class="sr-only">{t('search_your_history')}</span>
                 <span class={styles.searchIcon}>

special-pages/pages/history/app/components/Sidebar.module.css

@@ -51,14 +51,17 @@
 
 
 .link {
+    font-size: var(--label-font-size);
+    font-weight: var(--label-font-weight);
+    line-height: var(--label-line-height);
+    color: var(--history-text-normal);
+
     height: 40px;
     display: flex;
     align-items: center;
     border-radius: 8px;
     padding-left: 16px;
     text-decoration: none;
-    font-weight: 510;
-    color: var(--history-text-normal);
     gap: 6px;
     border: 0;
     box-shadow: none;

special-pages/pages/history/styles/history-theme.css

@@ -12,14 +12,24 @@
     --body-font-weight: 400;
     --body-line-height: 16px;
 
+    /* Mac/System/Label */
+    --label-font-size: 13px;
+    --label-font-weight: 510;
+    --label-line-height: 13px;
+
     /* title 3 em */
     --title-3-em-font-size: 15px;
     --title-3-em-font-weight: 590;
     --title-3-em-line-height: 20px;
 }
 
 /* This comes from the application settings */
-:root:has(body[data-platform-name="windows"]) {
+:root:has([data-platform="windows"]) {
+    /* H1 title */
+    --title-font-size: 24px;
+    --title-font-weight: 600;
+    --title-line-height: 32px;
+
     /* Windows/System/Body */
     --body-font-size: 14px;
     --body-font-weight: 400;
@@ -29,6 +39,11 @@
     --title-3-em-font-size: 16px;
     --title-3-em-font-weight: 600;
     --title-3-em-line-height: 20px;
+
+    /* Windows/System/Label */
+    --label-font-size: 14px;
+    --label-font-weight: 400;
+    --label-line-height: normal;
 }
 
 [data-theme=light] {