update search icon, gihub icon

postgresml · chillenberger · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 91666b54c804f3c2e622e835d52c50af1a180b2c
diff --git a/pgml-dashboard/src/components/github_icon/github_icon.scss b/pgml-dashboard/src/components/github_icon/github_icon.scss
@@ -0,0 +1,31 @@
+.btn-github {
+  background-color: #{$gray-700};
+  border-radius: $border-radius;
+  padding: 10px 20px;
+
+}
+
+.github-badge {
+  $color: $neon-shade-100;
+  padding: 4px;
+
+  p {
+      margin: 0px;
+      background: #{$color};
+      border-radius: calc($border-radius / 2);
+      padding: 4px;
+      font-size: 0.8rem;
+      font-weight: 500;
+  }
+
+  // Add right pointing arrow 
+  &::after {
+      content: "";
+      width: 0; 
+      height: 0; 
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+
+      border-left: 5px solid #{$color};
+  }
+}
diff --git a/pgml-dashboard/src/components/github_icon/template.html b/pgml-dashboard/src/components/github_icon/template.html
@@ -1,10 +1,18 @@
-<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
-    <% if show_stars {%>
-    <% if let Ok(stars) = crate::utils::config::github_stars() { %>
-        <span class="badge github-badge"><p>Stars | <%= stars %></p></span>
-    <% } %>
-    <% } %>
-    <svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
-    </svg>
-</a>
+
+
+<% if show_stars { %>
+    <a class="d-flex align-items-center btn-github nav-link gap-2 border-0" href="https://github.com/postgresml/postgresml">
+        <svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
+        </svg>
+        <% if let Ok(stars) = crate::utils::config::github_stars() { %>
+            <span class=""><%= stars %></span>
+        <% } %>
+    </a>
+<% } else { %>
+    <a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
+        <svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
+        </svg>
+    </a>
+<% } %>
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html
@@ -5,7 +5,7 @@
   use crate::components::static_nav_link::StaticNavLink;
 
   let solutions_links = vec![
-    StaticNavLink::new("ChatBot".to_string(), "/test".to_string()).icon("smart_toy"),
+    StaticNavLink::new("ChatBot".to_string(), "/chatbot".to_string()).icon("smart_toy"),
     StaticNavLink::new("Site Search".to_string(), "/test2".to_string()).icon("manage_search").disabled(true),
     StaticNavLink::new("Forcasting".to_string(), "/test2".to_string()).icon("avg_pace").disabled(true),
     StaticNavLink::new("Frad Detection".to_string(), "/test2".to_string()).icon("e911_emergency").disabled(true),
@@ -17,9 +17,18 @@
       <div class="container column-gap-4">
         <div class="controls">
           <%+ PostgresLogo::new("/") %>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
+
+          <div class="d-flex flex-row gap-1">
+            <li class="nav-item d-flex align-items-center d-block d-lg-none">
+              <button type="text" class="btn nav-link btn-search-alt border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                <span class="material-symbols-outlined">search</span>
+              </button>
+            </li>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+          </div>
         </div>
 
         <div class="navbarSupportedContent underline collapse"></div>
@@ -30,39 +39,41 @@
             <ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-lg-0">
 
               <% if !standalone_dashboard { %>
-                <div class="d-none d-lg-block">
+                <div class="d-none d-lg-flex">
                   <%+ MarketingLink::new()
                       .name("Solutions")
                       .links(solutions_links.clone()) %>
                 </div>
                 <li class="nav-item d-flex align-items-center d-flex d-lg-none">
-                  <a class="nav-link p-0" href="#" data-bs-toggle="collapse" data-bs-target=".solutions-collapse">Solutions</a>
+                  <a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".solutions-collapse">Solutions</a>
                 </li>
 
                 <%+ MarketingLink::new().link(StaticNavLink::new("Pricing".to_string(), "/pricing".to_string())) %>
               <% } %>
 
               <%+ MarketingLink::new().link(StaticNavLink::new("docs".to_string(), "/docs/guides/".to_string())) %>
               <%+ MarketingLink::new().link(StaticNavLink::new("Blog".to_string(), "/blog/speeding-up-vector-recall-by-5x-with-hnsw".to_string())) %>
+
+              <li class="nav-item d-none d-lg-flex align-items-center">
+                <button type="text" class="btn nav-link btn-search-alt border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                  <span class="material-symbols-outlined">search</span>
+                </button>
+              </li>
             </ul>
 
-            <ul class="navbar-nav gap-4 gap-lg-3 mb-2 mb-lg-0">
+            <ul class="navbar-nav gap-4 mb-2 mb-lg-0">
               <li class="align-items-center d-none d-lg-flex">
                 <%+ GithubIcon {show_stars: true} %>
               </li>
-              <li class="d-flex align-items-center d-block d-lg-none">
-                <a class="nav-link p-0" href="https://github.com/postgresml/postgresml">GitHub</a>
-              </li>
-              <li class="nav-item d-flex align-items-center">
-                <button type="text" class="btn nav-link btn-search-alt p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
-                  Search
-                </button>
-              </li>
+
+              <div class="d-block d-lg-none">
+                <%+ MarketingLink::new().link(StaticNavLink::new("GitHub".to_string(), "https://github.com/postgresml/postgresml".to_string())) %>
+              </div>
+
 
               <% if !standalone_dashboard { %>
               <div class="mb-5 mt-4 my-lg-0 d-flex flex-column flex-lg-row gap-4">
 
-                <div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>
                   <% if current_user.as_ref().is_none() || current_user.as_ref().unwrap().id == -1 { %>
                 <li class="nav-item d-flex align-items-center">
                   <a class="btn btn-secondary w-100" data-controller="btn-secondary" data-btn-secondary-target="btnSecondary" href="/login">Sign In</a>

diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss b/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss
@@ -1,5 +1,10 @@
 li[data-controller="navigation-navbar-marketing-link"] {
+
     .nav-item-container {
+        .nav-link {
+            font-weight: 600;
+        }
+
         &:hover {
             .nav-link {
                 border-bottom: 1px solid #{$slate-shade-100};
@@ -10,6 +15,14 @@ li[data-controller="navigation-navbar-marketing-link"] {
                 display: flex;
             }
         }
+
+        &:active {
+            .nav-link {
+                @include bold_by_shadow(#{$slate-shade-100});
+                color: #{$slate-tint-500};
+                border-bottom: 1px solid transparent;
+            }
+        }
     }
 
 
@@ -35,22 +48,23 @@ li[data-controller="navigation-navbar-marketing-link"] {
                 scale: .8;
             }
 
-            a {
+            .submenu-link {
                 display: inline-block;
                 border-bottom: 1px solid transparent;
                 --bs-link-color: #{$gray-900};
             }
         }
 
-        li.disabled, li.disabled:hover {
+        li.disabled, li.disabled:hover, li.disabled:active {
             span {
                 color: #{$gray-400};
             }
 
-            a {
+            .submenu-link {
                 display: inline-block;
                 border-bottom: 1px solid transparent;
                 --bs-link-color: #{$gray-400};
+                color: #{$gray-400};
                 pointer-events: none;
                 cursor: default;
                 &::after {
@@ -68,11 +82,23 @@ li[data-controller="navigation-navbar-marketing-link"] {
                 color: #{$slate-shade-400};
             }
 
-            a {
+            .submenu-link {
                 color: #{$slate-shade-400};
                 border-bottom: 1px solid #{$slate-shade-400};
             }
         }
+
+        li:active {
+            span {
+                color: #{$slate-shade-400};
+            }
+
+            .submenu-link {
+                @include bold_by_shadow(#{$slate-shade-400});
+                color: #{$slate-shade-400};
+                border-bottom: 1px solid transparent;
+            }
+        }
     }
 
     .dropdown-list::before {

diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs b/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs
@@ -1,6 +1,6 @@
-use sailfish::TemplateOnce;
-use pgml_components::component;
 use crate::components::static_nav_link::StaticNavLink as NavLink;
+use pgml_components::component;
+use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "navigation/navbar/marketing_link/template.html")]
@@ -36,4 +36,4 @@ impl MarketingLink {
     }
 }
 
-component!(MarketingLink);
+component!(MarketingLink);
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html
@@ -9,7 +9,7 @@
         <% for link in links { %>
         <li class="d-flex gap-3 <% if link.disabled { %>disabled<% } %>">
           <span class="material-symbols-outlined" style="width: 16px; height: 16px;"><%- link.icon.unwrap() %></span>
-          <a href="<%- link.href %>"><%- link.name %></a>
+          <a class="submenu-link" href="<%- link.href %>"><%- link.name %></a>
         </li>
         <% } %>
       </ul>

diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -4,6 +4,7 @@
 @import "../../src/components/accordian/accordian.scss";
 @import "../../src/components/chatbot/chatbot.scss";
 @import "../../src/components/dropdown/dropdown.scss";
+@import "../../src/components/github_icon/github_icon.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
 @import "../../src/components/inputs/select/select.scss";
 @import "../../src/components/inputs/switch/switch.scss";

diff --git a/pgml-dashboard/static/css/scss/base/_base.scss b/pgml-dashboard/static/css/scss/base/_base.scss
@@ -47,7 +47,6 @@ a {
 
     &:not(.btn, .nav .nav-link, .breadcrumb-item a, .list-group-item, .a-reset, .navbar .nav-link, .navbar .navbar-brand, .menu-item a) {
         color: var(--bs-link-color);
-        background-color: transparent;
     }
 }
 

diff --git a/pgml-dashboard/static/css/scss/components/_badges.scss b/pgml-dashboard/static/css/scss/components/_badges.scss
@@ -10,31 +10,6 @@
     color: #{$pink};
 }
 
-.github-badge {
-    $color: $neon-shade-100;
-    padding: 4px;
-
-    p {
-        margin: 0px;
-        background: #{$color};
-        border-radius: calc($border-radius / 2);
-        padding: 4px;
-        font-size: 0.8rem;
-        font-weight: 500;
-    }
-
-    // Add right pointing arrow 
-    &::after {
-        content: "";
-        width: 0; 
-        height: 0; 
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-
-        border-left: 5px solid #{$color};
-    }
-}
-
 @mixin deployment-status($color) {
     @extend .badge;
     border-radius: calc($border-radius / 2);

diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -245,9 +245,21 @@
 }
 
 .btn-search-alt {
-    border-radius: 0px;
-    border-left: none;
-    border-top: none;
-    border-right: none;
-    font-weight: $font-weight-medium;
+    gap: 0.1rem;
+    font-weight: 600;
+
+    &::before {
+        content: "/";
+        color: #{$slate-tint-100};
+        display: inline;
+        font-size: 1.5rem;
+        text-shadow: none;
+    }
+
+    &:active::before {
+        color: #{$slate-tint-400};
+        text-shadow: none;
+    }
+
 }
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,6 @@ a { @@
         &:not(.btn, .nav .nav-link, .breadcrumb-item a, .list-group-item, .a-reset, .navbar .nav-link, .navbar .navbar-brand, .menu-item a) {
             color: var(--bs-link-color);
-            background-color: transparent;
         }
     }
@@ Expand Down @@