From ae78bf2d8432f765d3f310c84618f990f06c2609 Mon Sep 17 00:00:00 2001
From: berezinant <berezinant@gmail.com>
Date: Mon, 25 Dec 2023 18:10:39 +0100
Subject: [PATCH] refactor: improved navigation controls style

---
 .../src/main/components/search/search.scss    |  4 --
 .../main/resources/dokka/images/homepage.svg  |  6 +-
 .../src/main/resources/dokka/styles/style.css | 56 ++++++-------------
 .../dokka/templates/includes/header.ftl       |  2 +-
 4 files changed, 19 insertions(+), 49 deletions(-)

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
index 6dd07d5b68..5af9c59484 100644
--- a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
+++ b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss
@@ -13,10 +13,6 @@ $secondary-font-color: hsla(0, 0%, 100%, 0.6);
   fill: #fff;
   fill: var(--dark-mode-and-search-icon-color);
 
-  &:focus {
-    outline: none;
-  }
-
   &:hover {
     background: var(--white-10);
   }
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg b/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg
index a3d7602bb8..e3c83b1ce3 100644
--- a/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg
+++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/images/homepage.svg
@@ -1,5 +1,3 @@
-<!-- SOURCE: https://www.svgrepo.com/svg/416627/home-house-ui -->
-<svg fill="#ffffff" width="64px" height="64px" viewBox="0 0 512.00 512.00" xmlns="http://www.w3.org/2000/svg">
-    <path d="M256,0C114.615,0,0,114.615,0,256s114.615,256,256,256s256-114.615,256-256S397.385,0,256,0z M404.861,263.236 L404.861,263.236c-7.297,7.297-18.066,8.993-26.986,5.104v97.098c0,20.193-16.37,36.562-36.562,36.562H170.688 c-20.193,0-36.562-16.37-36.562-36.562v-97.098c-8.919,3.89-19.689,2.193-26.986-5.104c-9.519-9.519-9.519-24.952,0-34.471 L238.764,97.139h0c9.519-9.519,24.952-9.519,34.471,0l131.625,131.625C414.38,238.283,414.38,253.717,404.861,263.236z"/>
-    <path d="M286.469,267.938h-60.938c-6.731,0-12.188,5.457-12.188,12.188v73.125c0,6.731,5.457,12.188,12.188,12.188h60.938 c6.731,0,12.188-5.457,12.188-12.188v-73.125C298.656,273.394,293.2,267.938,286.469,267.938z"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 20V7L12 3L4 7V20H10V13H14V20H20Z" fill="white"/>
 </svg>
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css
index 62b0ddbd2c..99539b6bfd 100644
--- a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css
+++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css
@@ -355,36 +355,31 @@ td:first-child {
     display: none;
 }
 
-/* --- Navigation THEME --- */
-.navigation-controls--search {
+.navigation-controls--btn {
     display: inline-flex;
-    font-size: 0;
-    line-height: 0;
-}
-
-.navigation-controls--theme {
-    display: block;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     background-color: inherit;
+    background-position: 50% 50%;
     padding: 0;
     border: none;
     cursor: pointer;
     font-size: 0;
     line-height: 0;
+    transition: background-color 200ms ease-in-out;
+    will-change: background-color;
 }
 
-.navigation-controls--theme::before {
-    height: 40px;
-    width: 40px;
-}
-
-.navigation-controls--theme:hover {
-    background: var(--white-10);
+.navigation-controls--btn:hover {
+    background-color: var(--white-10);
 }
 
-.navigation-controls--theme::before {
-    display: block;
-    content: url("../images/theme-toggle.svg");
+.navigation-controls--theme {
+    background-image: url("../images/theme-toggle.svg");
+    background-repeat: no-repeat;
 }
 
 @media (max-width: 759px) {
@@ -392,29 +387,11 @@ td:first-child {
         display: none;
     }
 }
-/* /--- Navigation THEME --- */
 
-/* --- Navigation HOMEPAGE --- */
 .navigation-controls--homepage {
-    height: 40px;
-    width: 40px;
-    display: block;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-.navigation-controls--homepage a::before {
-    height: 100%;
-    width: 20px;
-    margin-left: 10px;
-    display: block;
-    content: "";
-    background: url("../images/homepage.svg");
-    background-size: 100% 100%;
-}
-
-.navigation-controls--homepage:hover {
-    background: var(--white-10);
+    background-image: url("../images/homepage.svg");
+    background-repeat: no-repeat;
+    background-size:  24px 24px;
 }
 
 @media (max-width: 759px) {
@@ -422,7 +399,6 @@ td:first-child {
         display: none;
     }
 }
-/* /--- Navigation HOMEPAGE --- */
 
 .navigation .platform-selector:not([data-active]) {
     color: #fff;
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl
index d399e63354..b55ecf8143 100644
--- a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl
+++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl
@@ -22,7 +22,7 @@
     </div>
     <div class="navigation-controls">
         <#if homepageLink?has_content>
-            <div class="navigation-controls--btn navigation-controls--homepage" id="homepage-link" role="button"><a href="${homepageLink}"></a></div>
+            <a class="navigation-controls--btn navigation-controls--homepage" id="homepage-link" href="${homepageLink}"></a>
         </#if>
         <button class="navigation-controls--btn navigation-controls--theme" id="theme-toggle-button" type="button">switch theme</button>
         <div class="navigation-controls--btn navigation-controls--search" id="searchBar" role="button">search in API</div>