[Docs Site] Fix styling of OneTrust cookie button (#16122)

cloudflare · Aug 14, 2024 · 09ec545 · 09ec545
1 parent 1b6cd38
commit 09ec545
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/OneTrust.astro b/src/components/OneTrust.astro
@@ -34,8 +34,23 @@
     <a
         role="button"
         id="ot-sdk-btn"
-        class="ot-sdk-show-settings !text-accent-600 !border-accent-600 hover:!bg-gray-800"
+        class="ot-sdk-show-settings"
         >Cookie Settings</a
     >
     <!-- OneTrust Cookies Settings button end -->
 </span>
+
+<style>
+    #ot-sdk-btn.ot-sdk-show-settings {
+        border: none !important;
+        color: inherit !important;
+        font-size: inherit !important;
+        line-height: inherit !important;
+        padding: inherit !important;
+        font-family: var(--sl-font-family) !important;
+    }
+
+    #ot-sdk-btn.ot-sdk-show-settings:hover {
+        background-color: inherit !important;
+    }
+</style>
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
@@ -100,7 +100,8 @@ if (import.meta.env.CF_PAGES_BRANCH === "production" || import.meta.env.GITHUB_R
               </a>
             </li>
           ))}
-          {isProduction && <OneTrust />}
+            {isProduction && <OneTrust />}
+          </li>
         </ul>
       </div>
     </>
@@ -111,12 +112,16 @@ if (import.meta.env.CF_PAGES_BRANCH === "production" || import.meta.env.GITHUB_R
         {links.map(([text, href]) => (
           <a
             href={href}
-            class="mx-2 my-2 text-black dark:text-white decoration-accent-200"
+            class="mx-2 my-2 text-xs text-black dark:text-white decoration-accent-200"
           >
             <span>{text}</span>
           </a>
         ))}
-        {isProduction && <OneTrust />}
+        {isProduction && 
+          <div class="mx-2 my-2 text-xs text-black dark:text-white underline decoration-accent-200">
+            <OneTrust />
+          </div>
+        }
       </div>
     </>
   )