new type scale (#91)

* increase font size on progress bar and attempts left * increase font size * update snaps --------- Co-authored-by: Beth Shook <es66@rice.edu>
openstax · Feb 19, 2025 · df20459 · df20459
1 parent bea6052
commit df20459
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 67 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -129,7 +129,7 @@ const StepCardHeader = styled.div`
   `}
 
   ${breakpoints.mobile`
-      font-size: 1.4rem;
+      font-size: 1.6rem;
       line-height: 2rem;
       padding: 10px 8px;
 

diff --git a/src/components/ExerciseHeaderIcons.tsx b/src/components/ExerciseHeaderIcons.tsx
@@ -45,7 +45,7 @@ const Popover = styled.div`
   top: 3rem;
   width: 20rem;
   position: absolute;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   line-height: 1.8rem;
 `;
 

diff --git a/src/components/ExerciseToolbar.tsx b/src/components/ExerciseToolbar.tsx
@@ -92,7 +92,7 @@ export const StyledToolbar = styled.div<{
 
       span {
         display: block;
-        font-size: 1rem;
+        font-size: 1.4rem;
         margin-top: 0.2rem;
         color: ${colors.palette.neutral};
         text-align: center;

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -62,7 +62,7 @@ export const StyledItem = styled.button<{ variant: ProgressBarItemVariant, isAct
   border: 0;
   border-radius: 50%;
   margin: ${props => props.isActive ? '0' : '0 0.3rem'};
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   font-weight: bold;
   cursor: pointer;
   color: ${colors.palette.neutralDarker};

diff --git a/src/components/StepCardFooter.tsx b/src/components/StepCardFooter.tsx
@@ -6,7 +6,7 @@ export const StepCardFooter = styled.div`
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-size: calc(1.4rem * var(--content-text-scale));
+    font-size: calc(1.6rem * var(--content-text-scale));
     line-height: calc(2rem * var(--content-text-scale));
     background: ${colors.card.body.background};
     overflow: auto;

diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`StepCard matches snapshot 1`] = `
     className="sc-bczRLJ eAXREJ"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -55,7 +55,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
     className="sc-bczRLJ eAXREJ"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -109,7 +109,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -148,7 +148,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2
@@ -187,7 +187,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
     className="sc-bczRLJ eAXREJ exercise-step"
   >
     <div
-      className="sc-dkzDqf ihThJf"
+      className="sc-dkzDqf iertSZ"
     >
       <div>
         <h2

diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -157,7 +157,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -203,7 +203,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -342,7 +342,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -381,7 +381,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
   className="sc-breuTD uXhmp"
 >
   <div
-    className="sc-ftvSup jndYKm"
+    className="sc-ftvSup eUSUwo"
   >
     <a
       href="https://openstax.org"
@@ -442,7 +442,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -495,7 +495,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -535,7 +535,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -667,7 +667,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -706,7 +706,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
   className="sc-breuTD uXhmp"
 >
   <div
-    className="sc-ftvSup jndYKm"
+    className="sc-ftvSup eUSUwo"
   >
     <a
       href="https://openstax.org"
@@ -767,7 +767,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -820,7 +820,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -860,7 +860,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -900,7 +900,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX fBhBLm popover right"
+                  className="sc-kDDrLX cCjffY popover right"
                 >
                   <div
                     className="arrow"
@@ -1032,7 +1032,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -1078,7 +1078,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
       className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
-        className="sc-dkzDqf ihThJf"
+        className="sc-dkzDqf iertSZ"
       >
         <div>
           <h2
@@ -1217,7 +1217,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds kLYXXQ step-card-footer"
+              className="sc-iBkjds gVkNEK step-card-footer"
             >
               <div
                 className="step-card-footer-inner"

diff --git a/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap b/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"
@@ -71,7 +71,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"
@@ -111,7 +111,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf dhyzaB popover right"
+        className="sc-dkzDqf iulbST popover right"
       >
         <div
           className="arrow"

diff --git a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
@@ -106,7 +106,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -252,7 +252,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -399,7 +399,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -546,7 +546,7 @@ exports[`ExerciseQuestion renders Submit & continue button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -687,7 +687,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -840,7 +840,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -992,7 +992,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1156,7 +1156,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1302,7 +1302,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1448,7 +1448,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM IyIWE step-card-footer"
+    className="sc-hKMtZM iGTyMe step-card-footer"
   >
     <div
       className="step-card-footer-inner"

diff --git a/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap b/src/components/__snapshots__/ExerciseToolbar.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ExerciseToolbar conditionally renders icons 2`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"
@@ -34,7 +34,7 @@ exports[`ExerciseToolbar conditionally renders icons 2`] = `
 
 exports[`ExerciseToolbar conditionally renders icons 3`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"
@@ -66,7 +66,7 @@ exports[`ExerciseToolbar conditionally renders icons 3`] = `
 
 exports[`ExerciseToolbar matches snapshot 1`] = `
 <div
-  className="sc-bczRLJ hhNxoz"
+  className="sc-bczRLJ cYbzQJ"
 >
   <a
     href="https://openstax.org"