fix: styles for manual consent opt out

Author: Gamille7

packages/component-header-footer/src/footer/components/Legal/index.js

@@ -89,11 +89,7 @@ const Legal = () => {
               >
                 Privacy
               </a>
-              <button
-                type="button"
-                id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
-              >
+              <button type="button" id="manualConsentoptout">
                 Manage my privacy settings
               </button>
             </nav>

packages/component-header-footer/src/footer/index.styles.js

@@ -32,7 +32,8 @@ const StyledFooter = styled.footer`
     a:focus,
     button:focus {
       outline: none;
-      box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
+      box-shadow: 0 0 0 2px var(--color-base-white),
+        0 0 0 4px var(--color-base-grey-7) !important;
       -webkit-tap-highlight-color: transparent;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }

packages/unity-bootstrap-theme/src/scss/extends/_globalfooter.scss

@@ -350,3 +350,24 @@ footer {
     @include nav-to-grid;
   }
 }
+
+/*------------------------------------------------------------------
+8. Footer Colophon - Cookie Consent
+--------------------------------------------------------------------*/
+.footer-legal-links,
+.footer-menu,
+.nav {
+  &.colophon #manualConsentoptout, #manualConsentoptout {
+    color: $uds-color-base-gray-5;
+    border: none;
+    background-color: transparent;
+    width: auto;
+    cursor: pointer;
+    padding: 0;
+    text-align: right;
+    justify-self: end;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.templates.js

@@ -137,8 +137,8 @@ export const GlobalElementsOnly = () => (
                 Privacy
               </a>
               <button
+                type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -373,8 +373,8 @@ export const ZeroColumns = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -629,8 +629,8 @@ export const OneColumn = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -796,8 +796,8 @@ export const OneColumnNoLogoOrSocial = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -1097,8 +1097,8 @@ export const TwoColumns = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -1446,8 +1446,8 @@ export const ThreeColumns = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -1843,8 +1843,8 @@ export const FourColumns = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -2288,8 +2288,8 @@ export const FiveColumns = () => (
                 Privacy
               </a>
               <button
+              type="button"
                 id="manualConsentoptout"
-                className="nav-link text-gray-5 text-align-right"
               >
                 Manage my privacy settings
               </button>
@@ -2776,8 +2776,8 @@ export const SixColumns = () => (
                   Privacy
                 </a>
                 <button
+                  type="button"
                   id="manualConsentoptout"
-                  className="nav-link text-gray-5 text-align-right"
                 >
                   Manage my privacy settings
                 </button>