Base font size change (#853)

change base font size from 10px to 16px, move spectre.scss into wow src & remove from dependencies, find/replace all rem units with calculation to reflect the new base size.
JustFixNYC · Mar 4, 2024 · aa253ec · aa253ec
1 parent f081287
commit aa253ec
Show file tree

Hide file tree

Showing 94 changed files with 5,227 additions and 492 deletions.
diff --git a/client/package.json b/client/package.json
@@ -75,7 +75,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollbar": "^2.14.4",
     "sass": "^1.49.9",
-    "spectre.scss": "0.0.2",
     "typescript": "^4.9.3",
     "widont": "^0.3.3",
     "xstate": "^4.11.0"
@@ -88,8 +87,8 @@
     "contentful": "node pull-contentful-data.js",
     "contentful-common-strings": "contentful-common-strings fetch -o src/data/common-strings.json",
     "typecheck": "tsc",
-    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/",
-    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --load-path node_modules/spectre.scss/src/ --watch",
+    "build-css": "sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/",
+    "watch-css": "yarn build-css && sass src/:src/ --no-source-map --load-path src/ --load-path node_modules/ --watch",
     "start-js": "lingui compile && react-scripts start",
     "start": "yarn contentful-common-strings --dev && npm-run-all -p watch-css start-js",
     "build": "yarn contentful-common-strings && node write-version.js && yarn build-css && lingui compile && react-scripts build",

diff --git a/client/src/components/CloseButton.tsx b/client/src/components/CloseButton.tsx
@@ -7,15 +7,15 @@ import classNames from "classnames";
 type CloseButtonProps = withI18nProps & {
   onClick: () => void;
   /**
-   * Stroke width for the X svg (Default: "0.1rem")
+   * Stroke width for the X svg (Default: "1px")
    */
   strokeWidth?: number | string;
   /**
-   * Width for the X svg (Default: "1.6rem")
+   * Width for the X svg (Default: "1rem")
    */
   width?: number | string;
   /**
-   * Height for the X svg (Default: "1.6rem")
+   * Height for the X svg (Default: "1rem")
    */
   height?: number | string;
   className?: string;
@@ -29,9 +29,9 @@ export const CloseButton = withI18n()(
   ({
     i18n,
     onClick,
-    strokeWidth = "0.1rem",
-    height = "1.6rem",
-    width = "1.6rem",
+    strokeWidth = "1px",
+    height = "1rem",
+    width = "1rem",
     className,
   }: CloseButtonProps) => (
     <button

diff --git a/client/src/containers/PrivacyPolicyPage.tsx b/client/src/containers/PrivacyPolicyPage.tsx
@@ -10,7 +10,7 @@ const PrivacyPolicyPage = withI18n()((props: withI18nProps) => {
     <Page title={i18n._(t`Privacy policy`)}>
       <div className="PrivacyPolicy Page">
         <div className="Page__content">
-          <h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
+          <h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Privacy Policy</h4>
           <p>Effective Date: October 18th, 2018 </p>
           <h4> Introduction </h4>
           <p>

diff --git a/client/src/containers/TermsOfUsePage.tsx b/client/src/containers/TermsOfUsePage.tsx
@@ -10,7 +10,7 @@ const TermsOfUsePage = withI18n()((props: withI18nProps) => {
     <Page title={i18n._(t`Terms of use`)}>
       <div className="TermsOfUse Page">
         <div className="Page__content">
-          <h4 style={{ fontSize: "3.2rem" }}>WhoOwnsWhat — Terms of Use</h4>
+          <h4 style={{ fontSize: "2rem" }}>WhoOwnsWhat — Terms of Use</h4>
           <p> Effective Date: October 18th, 2018 </p>
           <p>
             <b>

diff --git a/client/src/styles/AboutPage.scss b/client/src/styles/AboutPage.scss
@@ -5,7 +5,7 @@
     max-width: 60%;
     margin-left: 0;
     margin-right: 0;
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.78rem;
 
     @include for-phone-only() {
       max-width: 100%;

diff --git a/client/src/styles/Accordion.scss b/client/src/styles/Accordion.scss
@@ -1,7 +1,7 @@
 @import "_vars.scss";
 
 details.accordion {
-  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+  padding: 1rem 1rem 1rem 0.5rem;
   @include for-phone-only() {
     padding-left: 0;
     padding-right: 0;
@@ -35,7 +35,7 @@ details.accordion {
   }
 
   > div {
-    margin-top: 1.8rem;
+    margin-top: 1.13rem;
   }
 
   summary {

diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
@@ -6,8 +6,8 @@
     text-decoration: none;
     text-align: left !important;
     font-weight: 700;
-    padding-top: 0.6rem;
-    margin: 5.6rem 1.6rem 2.6rem;
+    padding-top: 0.37rem;
+    margin: 3.5rem 1rem 1.63rem;
   }
 
   h4.settings-section {
@@ -16,36 +16,36 @@
   }
 
   label {
-    font-size: 1.3rem;
+    font-size: 0.81rem;
     font-weight: 600;
   }
 
   p {
-    font-size: 1.3rem;
+    font-size: 0.81rem;
     font-weight: 500;
   }
 
   .settings-contact {
-    margin: 6rem 2rem 5rem;
+    margin: 3.75rem 1.25rem 3.13rem;
     text-align: center;
   }
 
   .settings-no-subscriptions {
-    padding: 1.6rem;
+    padding: 1rem;
     background-color: $justfix-grey-50;
     border-radius: 4px;
-    margin: auto 1.6rem;
+    margin: auto 1rem;
   }
 }
 
 .UserSetting {
   form {
     display: flex;
     flex-direction: column;
-    margin: 3.2rem 1.6rem;
+    margin: 2rem 1rem;
 
     p {
-      margin: -1rem 0 0.6rem 0;
+      margin: -0.63rem 0 0.37rem 0;
     }
   }
 
@@ -60,14 +60,14 @@
   .user-setting-actions {
     display: flex;
     justify-content: right;
-    margin-top: 1.6rem;
+    margin-top: 1rem;
 
     @include for-phone-only() {
       justify-content: center;
     }
 
     input[type="submit"] {
-      margin: 0 1.6rem 0 0 !important;
+      margin: 0 1rem 0 0 !important;
     }
   }
 
@@ -76,22 +76,22 @@
     // vars marked !important bc typography mixin is not available for inconsolata
     font-weight: 600 !important;
     font-family: $wow-font !important;
-    font-size: 1.3rem !important;
+    font-size: 0.81rem !important;
 
     text-align: left;
-    margin-bottom: 1.6rem;
+    margin-bottom: 1rem;
   }
 
   .password-input-label {
-    margin-bottom: -1rem !important;
+    margin-bottom: -0.63rem !important;
   }
 
   .password-input-rules {
     display: flex;
     flex-direction: column;
 
     span:last-child {
-      margin-bottom: 0.6rem !important;
+      margin-bottom: 0.37rem !important;
     }
   }
 }
diff --git a/client/src/styles/AddressPage.scss b/client/src/styles/AddressPage.scss
@@ -21,14 +21,14 @@
 
     h1 {
       margin-bottom: 0;
-      font-size: 2rem;
+      font-size: 1.25rem;
 
       &.primary {
         line-height: 20px;
         margin-bottom: 20px;
 
         @include for-phone-only() {
-          font-size: 1.8rem;
+          font-size: 1.13rem;
         }
 
         a {

diff --git a/client/src/styles/AddressSearch.scss b/client/src/styles/AddressSearch.scss
@@ -45,7 +45,7 @@
 
         .geosuggest__item {
           margin-top: 0;
-          padding: 0.75rem 1rem;
+          padding: 0.47rem 0.63rem;
           list-style-type: none;
 
           &:hover {

diff --git a/client/src/styles/AddressToolbar.scss b/client/src/styles/AddressToolbar.scss
@@ -7,14 +7,14 @@
 
   .btn-group {
     flex-wrap: nowrap;
-    min-width: 19rem;
-    padding-left: 0.8rem;
+    min-width: 11.88rem;
+    padding-left: 0.5rem;
   }
 
   ul.menu {
     border: 1px solid $gray-dark;
     padding: 0;
-    width: 24rem;
+    width: 15rem;
     right: 0;
     left: inherit;
     list-style: disc inside none;

diff --git a/client/src/styles/App.scss b/client/src/styles/App.scss
@@ -32,17 +32,17 @@
 }
 
 .App__banner {
-  padding: 0.5rem 1.5rem;
+  padding: 0.31rem 0.94rem;
   color: $wowza-dark;
   position: relative;
 
   .close-button {
     color: $wowza-dark;
     position: absolute;
-    right: 0.5rem;
+    right: 0.31rem;
     top: 0rem;
-    padding: 0 1rem;
-    font-size: 2rem;
+    padding: 0 0.63rem;
+    font-size: 1.25rem;
     height: 100%;
     cursor: pointer;
     &:hover {
@@ -123,7 +123,7 @@
     margin-top: 0rem;
     height: min-content;
     @include for-phone-only {
-      font-size: 1rem;
+      font-size: 0.63rem;
       width: min-content;
     }
   }
@@ -133,10 +133,10 @@
     color: $justfix-white;
     line-height: 1.2;
     font-weight: bold;
-    font-size: 1.8rem;
+    font-size: 1.13rem;
 
     @include for-tablet-portrait-up() {
-      font-size: 2.4rem;
+      font-size: 1.5rem;
     }
   }
 
@@ -155,7 +155,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    margin: 0 -1rem 0;
+    margin: 0 -0.63rem 0;
   }
 
   nav {
@@ -190,8 +190,8 @@
       text-decoration: none;
       color: inherit;
       display: inline;
-      margin: 0 -0.8rem;
-      padding: 0.6rem 0.8rem;
+      margin: 0 -0.5rem;
+      padding: 0.37rem 0.5rem;
     }
 
     .language-toggle a {
@@ -232,7 +232,7 @@ div.Page {
   }
   p {
     // line-height: 1.6;
-    margin-bottom: 1.25rem;
+    margin-bottom: 0.78rem;
   }
 
   .page-container {
@@ -241,9 +241,9 @@ div.Page {
       text-align: center;
     }
 
-    width: min(calc(100vw - 4rem), 60rem);
-    max-width: 60rem;
-    margin: 4rem auto;
+    width: min(calc(100vw - 2.5rem), 37.5rem);
+    max-width: 37.5rem;
+    margin: 2.5rem auto;
 
     form {
       display: flex;
@@ -254,7 +254,7 @@ div.Page {
       }
 
       input[type="submit"] {
-        margin: 1rem auto;
+        margin: 0.63rem auto;
       }
     }
   }
@@ -272,7 +272,7 @@ div.Page {
   // mobile
   @include for-tablet-landscape-down() {
     h5 {
-      margin-top: 4rem;
+      margin-top: 2.5rem;
     }
     aside {
       margin-top: 48px;
@@ -299,8 +299,8 @@ div.Page {
       }
       figcaption {
         max-width: 300px;
-        margin: 1rem auto;
-        font-size: 1.25rem;
+        margin: 0.63rem auto;
+        font-size: 0.78rem;
         line-height: 1.1;
       }
     }