add list item to take color, small refactors (#1126)

Author: chillenberger

pgml-dashboard/src/components/lists/item/mod.rs

@@ -1,23 +1,53 @@
 use pgml_components::component;
 use sailfish::TemplateOnce;
+use std::fmt;
+
+#[derive(PartialEq, Eq, Default, Clone)]
+pub enum Color {
+    #[default]
+    Green,
+    Blue,
+    Orange,
+    Pink,
+    Purple,
+}
+
+impl fmt::Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Color::Green => write!(f, "green"),
+            Color::Blue => write!(f, "blue"),
+            Color::Orange => write!(f, "orange"),
+            Color::Pink => write!(f, "pink"),
+            Color::Purple => write!(f, "purple"),
+        }
+    }
+}
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "lists/item/template.html")]
 pub struct Item {
     value: String,
+    color: Color,
 }
 
 impl Item {
     pub fn new() -> Item {
         Item {
             value: String::from("Your list item"),
+            color: Color::Green,
         }
     }
 
     pub fn value(mut self, value: &str) -> Item {
         self.value = value.into();
         self
     }
+
+    pub fn color(mut self, color: Color) -> Item {
+        self.color = color;
+        self
+    }
 }
 
 component!(Item);

pgml-dashboard/src/components/lists/item/template.html

@@ -1,4 +1,6 @@
 <div class="list-group-item d-flex align-items-center gap-2">
-  <img loading="lazy" src="/dashboard/static/images/icons/checkmark.svg" width="15" height="11" alt="Checkmark">
+  <span class="material-symbols-outlined text-gradient-<%- color.to_string() %> align-self-start">
+    check
+    </span>
   <%- value %>
 </div>

pgml-dashboard/src/components/navigation/navbar/marketing/template.html

@@ -13,14 +13,14 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav flex-grow-1 gap-4 me-auto mb-4 mb-lg-0">
+            <% if !standalone_dashboard { %>
+              <li class="nav-item d-flex align-items-center">
+                <a class="nav-link p-0" href="/plans">Pricing</a>
+              </li>
+            <% } %>
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-0" href="/docs/guides/">Docs</a>
             </li>
-            <% if !standalone_dashboard { %>
-            <!-- <li class="nav-item d-flex align-items-center">
-              <a class="nav-link p-0" href="/plan_comparison">Pricing</a>
-            </li> -->
-            <% } %>
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-0" href="/blog/speeding-up-vector-recall-by-5x-with-hnsw">Blog</a>
             </li>

pgml-dashboard/static/css/scss/base/_base.scss

@@ -74,15 +74,6 @@ article {
     background-color: #{$bg-white} !important;
 }
 
-// Our flagship gradient.
-.party-time {
-    background: $gradient-text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
-}
-
 // Remove padding from large screens.
 @include media-breakpoint-up(lg) {
     body {
@@ -116,14 +107,6 @@ article {
     background: #{$purple};
 }
 
-.syntax-highlight {
-    background: $gradient-blue;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-fill-color: transparent;
-}
-
 .noselect {
     -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */

pgml-dashboard/static/css/scss/base/_typography.scss

@@ -90,7 +90,7 @@ h6, .h6 {
     background-clip: text;
     text-fill-color: transparent;
 }
-.text-gradient-blue {
+.text-gradient-blue, .syntax-highlight {
     @include text-gradient($gradient-blue);
 }
 .text-gradient-green {
@@ -105,6 +105,9 @@ h6, .h6 {
 .text-gradient-purple {
     @include text-gradient($gradient-purple);
 }
+.text-gradient-party, .party-time {
+    @include text-gradient($gradient-text);
+}
 
 
 .marketing-body-large {