add missing hints style

Author: Filip Łukasik

scaladoc-js/common/css/searchbar.css

@@ -207,12 +207,11 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   outline: none;
 } */
 
-#scaladoc-searchbar-results {
+/* #scaladoc-searchbar-results {
   display: flex;
   flex-direction: column;
-  max-height: 500px;
   overflow: auto;
-}
+} */
 
 .scaladoc-searchbar-row {
   display: flex;
@@ -266,7 +265,7 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   margin-right: 4px;
 }
 
-.searchbar-hints {
+/* .searchbar-hints {
   padding-top: 5vh;
   padding-bottom: 5vh;
   padding-left: 5vw;
@@ -280,7 +279,7 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
 .searchbar-hints-list {
   font-size: medium;
   line-height: 2em;
-}
+} */
 
 #searchBar {
   display: inline-flex;

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -310,21 +310,20 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private def showHints() = {
     def clearResults() = while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
     val hintsDiv = div(cls := "searchbar-hints")(
-      span(cls := "fas fa-lightbulb fa-5x"),
-      h1("A bunch of hints to make your life easier"),
+      span(cls := "lightbulb"),
+      h1(cls := "body-medium")("A bunch of search hints to make your life easier"),
       ul(cls := "searchbar-hints-list")(
-        li("Type a phrase to search members ", b("by name")," and static sites ", b("by title"),""),
-        li("Type abbreviations", b("cC, caCa, camCa")," to search for ", b("camelCase")),
-        li(
-          "Type a function signature to search for members ", b("by signature")," using Inkuire",
-          ul(
-            li("Type ", b("String => Int")," to find ", b("String.size"),", ", b("String.toInt"),""),
-            li("Type ", b("String => String => String")," to find ", b("String.mkString"),", ", b("String.stripPrefix"),""),
-            li("Inkuire also finds field accessors. Type ", b("Some[A] => A")," to find ", b("Some.value"),""),
-            li("For more information about Inkuire see ", a(href := "https://docs.scala-lang.org/scala3/guides/scaladoc/search-engine.html")("the documentation")),
-            li("The availability of this function depends on configuration used to generate Scaladoc")
-          )
-        )
+        h1(cls := "h100")("Members or Static sites by any phrase"),
+        li(cls := "mono-small-inline")("Any phrase to find", b(" Name")," or ", b("Title"),""),
+        div(cls := "divider"),
+        li(cls := "mono-small-inline")("cC, caCa, camCa" , b(" to find")," camelCase"),
+        h1(cls := "h100")("Members by signature"),
+        li(cls := "mono-small-inline")("String => Int", b(" to find"), " String.size, String.toInt"),
+        div(cls := "divider"),
+        li(cls := "mono-small-inline")("String => String => String", b(" to find "), "String.mkString, String.stripPrefix"),
+        div(cls := "divider"),
+        li(cls := "mono-small-inline")("Some[A] => A", b(" to find"), " Some.value"),
+        li(cls := "link body-small")("Availability of searching by inkuire depends on the configuration of Scaladoc. For more info, ", a(href := "https://docs.scala-lang.org/scala3/guides/scaladoc/search-engine.html")("the documentation")),
       )
     )
     clearResults()

scaladoc/resources/dotty_res/images/bulb/dark/default.svg

@@ -0,0 +1,4 @@
+.divider {
+  width: 100%;
+  border-top: 1px solid var(--border-default);
+}

scaladoc/resources/dotty_res/images/bulb/light/default.svg

@@ -36,7 +36,6 @@
   -webkit-appearance: none;
   height: 1em;
   width: 1em;
-  border-radius: 50em;
   background: url("../../../images/icon-buttons/close/light/default.svg")
     no-repeat 50% 50%;
   background-size: contain;
@@ -63,3 +62,87 @@
   border-radius: 4px;
   margin-top: calc(1.5 * var(--base-spacing));
 }
+
+.searchbar-hints {
+  color: var(--text-primary);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(108.5 * var(--base-spacing));
+}
+
+.searchbar-hints h1 {
+  margin: 0;
+}
+
+.searchbar-hints .link {
+  color: var(--text-secondary);
+  margin-top: calc(4.5 * var(--base-spacing));
+  position: relative;
+}
+
+.searchbar-hints .link a {
+  color: var(--text-secondary);
+}
+
+.searchbar-hints .link::marker {
+  color: transparent;
+}
+
+.searchbar-hints .link::before {
+  content: url("../../../images/info/light/default.svg");
+  position: absolute;
+  left: calc(-4 * var(--base-spacing));
+}
+
+.text-dark .searchbar-hints .link::before {
+  content: url("../../../images/info/dark/default.svg");
+}
+
+.searchbar-hints .lightbulb {
+  margin-bottom: calc(2 * var(--base-spacing));
+}
+
+.searchbar-hints .lightbulb:after {
+  content: url("../../../images/bulb/light/default.svg");
+}
+
+.theme-dark .searchbar-hints .lightbulb:after {
+  content: url("../../../images/bulb/dark/default.svg");
+}
+
+.theme-dark .searchbar-hints .lightbulb:after {
+  content: url("../../../images/bulb/dark/default.svg");
+}
+
+.searchbar-hints-list {
+  margin-top: calc(5.5 * var(--base-spacing));
+  width: calc(61 * var(--base-spacing));
+}
+
+.searchbar-hints-list li b {
+  color: var(--text-secondary);
+}
+
+.searchbar-hints-list li {
+  margin-left: calc(4.6 * var(--base-spacing));
+}
+
+.searchbar-hints-list li::marker {
+  color: var(--text-secondary);
+}
+
+.searchbar-hints-list .h100 {
+  margin-bottom: calc(3 * var(--base-spacing));
+  margin-left: calc(2 * var(--base-spacing));
+}
+
+.searchbar-hints-list .divider {
+  margin-bottom: calc(1.5 * var(--base-spacing));
+  margin-top: calc(1.5 * var(--base-spacing));
+}
+
+.searchbar-hints-list .h100:last-of-type {
+  margin-top: calc(6 * var(--base-spacing));
+}

scaladoc/resources/dotty_res/images/info/dark/default.svg

@@ -115,6 +115,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/components/button/icon-button.css",
       "styles/theme/components/button/text-button.css",
       "styles/theme/components/dropdown-menu.css",
+      "styles/theme/components/divider.css",
 
       "styles/nord-light.css",
       "styles/dotty-icons.css",
@@ -335,6 +336,10 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       dottyRes("images/icon-buttons/arrow-right/light/default.svg"),
       dottyRes("images/icon-buttons/close/light/default.svg"),
       dottyRes("images/icon-buttons/close/dark/default.svg"),
+      dottyRes("images/bulb/dark/default.svg"),
+      dottyRes("images/bulb/light/default.svg"),
+      dottyRes("images/info/light/default.svg"),
+      dottyRes("images/info/dark/default.svg"),
       searchData(pages),
       scastieConfiguration(),
     )