From 617ec96ed8434149d869a0c8410c847d01bb1391 Mon Sep 17 00:00:00 2001
From: Matas Lauzadis <lauzmata@amazon.com>
Date: Mon, 16 Oct 2023 11:01:56 -0400
Subject: [PATCH] Fix Dokka style

---
 docs/dokka-presets/css/aws-styles.css         | 38 ++++++++---------
 docs/dokka-presets/css/logo-styles.css        | 19 ++++++++-
 .../templates/includes/header.ftl             | 41 +++++++++----------
 3 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/docs/dokka-presets/css/aws-styles.css b/docs/dokka-presets/css/aws-styles.css
index 45fabb782..5aabb27d8 100644
--- a/docs/dokka-presets/css/aws-styles.css
+++ b/docs/dokka-presets/css/aws-styles.css
@@ -3,26 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-:root {
-    --color-dark: #232f3e;
-}
-
-#leftToggler {
-    background: none;
-    border: none;
-    padding: 0;
-}
-
-#pages-search {
-    margin: 0;
-    padding-top: 10px;
-}
-
-#pages-search:focus {
-    outline: revert;
+#searchBar {
+    height: 40px;
 }
 
-#pages-search-label {
-    display: none;
-}
+/* copied from Dokka except for `width` attribute */
+.sideMenuPart > .overview:before {
+    box-sizing: border-box;
+    content: '';
+    top: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: -1;
+    /*width: var(--sidebar-width); */
+    /* the var --sidebar-width was not properly sized. changing it broke other formatting,
+       so just changing it here for the specific element
+    */
+    width: 1000px;
+}
\ No newline at end of file
diff --git a/docs/dokka-presets/css/logo-styles.css b/docs/dokka-presets/css/logo-styles.css
index 60d45fc1d..e53d3a536 100644
--- a/docs/dokka-presets/css/logo-styles.css
+++ b/docs/dokka-presets/css/logo-styles.css
@@ -7,6 +7,12 @@
     position: relative;
     --logo-width: 72px;
     margin-left: calc(var(--logo-width) + 5px);
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-weight: 700;
+    margin-top: 10px;
+    margin-right: 8px;
 }
 
 .library-name a::before {
@@ -17,6 +23,17 @@
     position: absolute;
     width: 59px;
     height: 35px;
-    top: -10px;
     left: calc(-1 * var(--logo-width) - 5px);
+    margin-right: 5px;
+}
+
+/* Copied from Dokka except `top` replaced with `margin-top` attribute */
+.library-version {
+    position: relative;
+    margin-left: 3px;
+    color: rgba(255,255,255,.7);
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 16px;
+    margin-top: 19px;
 }
diff --git a/docs/dokka-presets/templates/includes/header.ftl b/docs/dokka-presets/templates/includes/header.ftl
index 6ec0f8b26..a3ab37281 100644
--- a/docs/dokka-presets/templates/includes/header.ftl
+++ b/docs/dokka-presets/templates/includes/header.ftl
@@ -1,25 +1,24 @@
 <#import "source_set_selector.ftl" as source_set_selector>
 <#macro display>
-<div class="navigation-wrapper" id="navigation-wrapper">
-    <button id="leftToggler" aria-label="Open navigation menu"><span class="icon-toggler"></span></button>
-    <div class="library-name">
-        <@template_cmd name="pathToRoot">
-            <a href="${pathToRoot}index.html">
-                <@template_cmd name="projectName">
-                    <span>${projectName}</span>
-                </@template_cmd>
-            </a>
-        </@template_cmd>
+    <div class="navigation" id="navigation">
+        <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu"></button>
+        <div class="library-name">
+            <@template_cmd name="pathToRoot">
+                <a href="${pathToRoot}index.html">
+                    <@template_cmd name="projectName">
+                        <span>${projectName}</span>
+                    </@template_cmd>
+                </a>
+            </@template_cmd>
+        </div>
+        <div class="library-version">
+            <#-- This can be handled by the versioning plugin -->
+            <@version/>
+        </div>
+        <div class="pull-right d-flex">
+            <@source_set_selector.display/>
+            <button id="theme-toggle-button" class="navigation-controls--theme"><span id="theme-toggle"></span></button>
+            <div id="searchBar"></div>
+        </div>
     </div>
-    <div>
-        <#-- This can be handled by the versioning plugin -->
-        <@version/>
-    </div>
-    <div class="pull-right d-flex">
-        <@source_set_selector.display/>
-        <button id="theme-toggle-button"><span id="theme-toggle"></span></button>
-        <label for="pages-search" id="pages-search-label">Search</label>
-        <div id="searchBar"></div>
-    </div>
-</div>
 </#macro>