massgov · clairesunstudio · Mar 19, 2024 · Mar 10, 2024 · Mar 10, 2024 · Mar 10, 2024
diff --git a/changelogs/DP-32068.yml b/changelogs/DP-32068.yml
@@ -0,0 +1,6 @@
+Changed:
+  - project: Patternlab
+    component: PageHeader
+    description: Log in button style improvement for mobile devices. (#1892)
+    issue: DP-32068
+    impact: Patch
diff --git a/packages/assets/scss/00-base/mixins/_ma-button.scss b/packages/assets/scss/00-base/mixins/_ma-button.scss
@@ -108,9 +108,9 @@
       height: $fonts-small;
     }
   }
-  // small
+  // xsmall
 
-  @if ($size == "small") {
+  @if ($size == "xsmall") {
     font-size: $fonts-xsmall;
     line-height: 1.2;
 
@@ -119,6 +119,18 @@
       height: $fonts-xsmall;
     }
   }
+  // small
+
+  @if ($size == "small") {
+    font-size: $fonts-smaller;
+    line-height: 1.2;
+
+    svg {
+      width: $fonts-smaller;
+      height: $fonts-smaller;
+    }
+  }
+
   // large
 
   @if ($size == "large") {

diff --git a/packages/assets/scss/02-molecules/_back-button.scss b/packages/assets/scss/02-molecules/_back-button.scss
@@ -22,7 +22,7 @@
 
   a:not(.ma__button) {
 
-    @include ma-button-size("small");
+    @include ma-button-size("xsmall");
 
     @include ma-chevron("left");
 

diff --git a/packages/assets/scss/02-molecules/_event-filters.scss b/packages/assets/scss/02-molecules/_event-filters.scss
@@ -2,7 +2,7 @@
 
 .ma__event-filters {
   padding-top: 30px;
-  
+
   form {
 
     @include ma-container;
@@ -33,7 +33,7 @@
 
   &__submit {
 
-    @include ma-button-size('small');
+    @include ma-button-size('xsmall');
   }
 }
 

diff --git a/packages/assets/scss/02-molecules/_location-filters.scss b/packages/assets/scss/02-molecules/_location-filters.scss
@@ -2,7 +2,7 @@
 
 .ma__location-filters {
   padding-top: 30px;
-  
+
   form {
 
     @include ma-container;
@@ -51,7 +51,7 @@
   }
 
   &__by-activity + &__by-keyword {
-    
+
     @media ($bp-medium-min) {
 
       @include span-columns(4 of 8);
@@ -118,7 +118,7 @@
 
   &__submit {
 
-    @include ma-button-size('small');
+    @include ma-button-size('xsmall');
   }
 }
 

diff --git a/packages/assets/scss/03-organisms/_footer-with-columns.scss b/packages/assets/scss/03-organisms/_footer-with-columns.scss
@@ -10,7 +10,7 @@
 
   &__back2top {
 
-    @include ma-button-size("small");
+    @include ma-button-size("xsmall");
     font-size: $fonts-xsmall;
     letter-spacing: $letter-spacing-large;
     opacity: 1;
@@ -62,7 +62,7 @@
     @media ($bp-large-max) {
       display: flex;
       flex-direction: column;
-    } 
+    }
   }
 
   &__nav {

diff --git a/packages/assets/scss/03-organisms/_page-header.scss b/packages/assets/scss/03-organisms/_page-header.scss
@@ -69,7 +69,7 @@ $page-header-widget-width: 350px;
       }
     }
   }
-  
+
   &--has-optional-content &__content {
     padding-bottom: 0
   }
@@ -192,7 +192,7 @@ $page-header-widget-width: 350px;
       display: flex;
       width: 100%;
       margin-top: 1.5rem;
-  
+
       @media ($bp-medium-max) {
         flex-direction: column;
         align-items: flex-start;
@@ -214,6 +214,10 @@ $page-header-widget-width: 350px;
     text-shadow: none;
     margin-top: 0.5rem;
     margin-right: 0.5rem;
+
+    a.ma__button {
+      text-transform: none;
+    }
   }
 
 // links

diff --git a/...s/reference/regression_page_service-flexible-link-groups_0_document_0_phone.png b/...s/reference/regression_page_service-flexible-link-groups_0_document_0_phone.png
diff --git a/.../reference/regression_page_service-flexible-link-groups_0_document_1_tablet.png b/.../reference/regression_page_service-flexible-link-groups_0_document_1_tablet.png
diff --git a/..._template_01-content-types-services-flexible-link-groups_0_document_0_phone.png b/..._template_01-content-types-services-flexible-link-groups_0_document_0_phone.png
diff --git a/...template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png b/...template_01-content-types-services-flexible-link-groups_0_document_1_tablet.png