EES-5469: Update button classes and improve responsiveness.

dfe-analytical-services · Jan 10, 2025 · e553347 · e553347
1 parent b805437
commit e553347
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/src/explore-education-statistics-frontend/src/components/Feedback.module.scss b/src/explore-education-statistics-frontend/src/components/Feedback.module.scss
@@ -12,16 +12,15 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   background: govuk-colour('light-grey');
   padding: 0 govuk-spacing(3);
-
-  @include govuk-media-query($until: tablet) {
-    margin: 0;
-  }
+  gap: govuk-spacing(3);
 
   @include govuk-media-query($until: tablet) {
     flex-direction: column;
-    padding: 0 govuk-spacing(6);
+    align-items: normal;
+    padding: 0 govuk-spacing(3);
   }
 }
 
@@ -30,47 +29,50 @@
   @include govuk-font($size: 16, $weight: bold);
 
   @include govuk-media-query($until: tablet) {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-font($size: 24, $weight: bold);
   }
 }
 
-.feedbackPromptQuestions {
+.promptQuestion {
   display: flex;
   align-items: center;
   gap: govuk-spacing(3);
   padding: govuk-spacing(4) 0;
+}
+
+.reportContainer {
+  composes: promptQuestion;
 
-  &:last-child {
-    @include govuk-media-query($until: tablet) {
-      border-top: 1px govuk-colour('mid-grey') solid;
-    }
+  @include govuk-media-query($until: tablet) {
+    border-top: 1px govuk-colour('mid-grey') solid;
   }
 }
 
-%button {
+.button {
   border: 1px govuk-colour('black') solid;
   box-shadow: 0 3px 0 govuk-colour('black');
   margin: 0;
+  white-space: nowrap;
+
   @include govuk-font($size: 16);
 
   @include govuk-media-query($until: tablet) {
-    @include govuk-font($size: 19);
+    @include govuk-font($size: 24);
   }
 }
 
-.button {
-  @extend %button;
-  max-width: 80px;
+.buttonYesNo {
+  composes: button;
+  min-width: 100px;
 
   @include govuk-media-query($until: tablet) {
-    min-width: 100px;
+    min-width: 80px;
+    max-width: 80px;
   }
 }
 
 .buttonReport {
-  @extend %button;
-
-  @include govuk-media-query($until: tablet) {
-    width: 100%;
-  }
+  composes: button;
+  min-width: none;
+  max-width: none;
 }
diff --git a/src/explore-education-statistics-frontend/src/components/Feedback.tsx b/src/explore-education-statistics-frontend/src/components/Feedback.tsx
@@ -78,18 +78,18 @@ export default function Feedback() {
       <div className={styles.banner}>
         {bannerState === 'initial' && (
           <>
-            <div className={styles.feedbackPromptQuestions}>
+            <div className={styles.promptQuestion}>
               <h2 className={styles.heading}>Is this page useful?</h2>
               <Button
-                className={styles.button}
+                className={styles.buttonYesNo}
                 variant="secondary"
                 onClick={handleUsefulFeedback}
               >
                 Yes<VisuallyHidden> this page is useful</VisuallyHidden>
               </Button>
 
               <Button
-                className={styles.button}
+                className={styles.buttonYesNo}
                 variant="secondary"
                 ariaControls="feedbackForm"
                 ariaExpanded={response === 'NotUseful'}
@@ -102,7 +102,7 @@ export default function Feedback() {
               </Button>
             </div>
 
-            <div className={styles.feedbackPromptQuestions}>
+            <div className={styles.reportContainer}>
               <Button
                 className={styles.buttonReport}
                 variant="secondary"
@@ -120,7 +120,7 @@ export default function Feedback() {
         )}
 
         {bannerState === 'thanks' && (
-          <div className={styles.feedbackPromptQuestions} role="alert">
+          <div className={styles.promptQuestion} role="alert">
             <p className={styles.heading}>Thank you for your feedback</p>
           </div>
         )}