From 09ec545a69d5eafeac4b71bfa991255bae67cdcc Mon Sep 17 00:00:00 2001
From: Kian <kian@kian.org.uk>
Date: Wed, 14 Aug 2024 13:41:42 +0100
Subject: [PATCH] [Docs Site] Fix styling of OneTrust cookie button (#16122)

---
 src/components/OneTrust.astro         | 17 ++++++++++++++++-
 src/components/overrides/Footer.astro | 11 ++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/OneTrust.astro b/src/components/OneTrust.astro
index b80787bd940971..1024f16dd5107e 100644
--- 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>
\ No newline at end of file
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
index 0d5bed629b038a..6fa60a0f64231b 100644
--- 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>
     </>
   )