update add dot animation, update form inputs, badges, make typography…

… file
postgresml · chillenberger · Aug 16, 2023 · Aug 14, 2023 · Aug 14, 2023 · Aug 16, 2023
commit abdc27f308d6a8bce659f163ca8f1f117f48ed39
diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss
@@ -79,3 +79,4 @@
 // base
 @import 'scss/base/base';
 @import 'scss/base/animations';
+@import 'scss/base/typography';
diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -93,6 +93,7 @@ $bg-black: #0D0D0E;
 $hp-gradient: linear-gradient(48.19deg, #D940FF 0%, #9E02FE 24.43%, #00D1FF 100%);
 $hp-gradient-active: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(48.19deg, #FB40FF 0%, #BB02FE 24.43%, #00D1FF 100%);
 
+$gradient-text: linear-gradient(270deg, #26CBFF 0%, #808CFF 50%, #C92FFF 100%);
 $primary-gradient-main: linear-gradient(45deg, #D940FF 0%, #8F02FE 24.43%, #5162FF 52.60%, #00D1FF 100%);
 $gradient-main: linear-gradient(45deg, #FB40FF 0%, #BB02FE 25%, #00D1FF 100%);
 $gradient-light: linear-gradient(260.55deg, rgba(255, 255, 255, 0.56) 15.62%, rgba(255, 255, 255, 0.28) 67.01%);
@@ -116,8 +117,21 @@ $btn-transition: none;
 $btn-box-shadow: none;
 
 // Forms
-$input-padding-y: 20px;
-$input-padding-x: 16px;
+$input-padding-y: 16px;
+$input-padding-x: 20px;
+$input-border-width: 2px;
+$input-focus-border-color: #{$neon-shade-100};
+$input-color: #{$gray-200};
+$input-focus-color: #{$gray-200};
+$input-placeholder-color: #{$gray-400};
+$input-disabled-bg: #{$gray-700};
+$input-disabled-color: #{$gray-400};
+$input-bg: #{$gray-700};
+
+$input-group-addon-color: #{$gray-300};
+$input-group-addon-bg: #{$gray-700};
+$input-group-addon-border-color: #{$gray-700};
+
 $input-btn-focus-box-shadow: none;
 $form-label-font-weight: 500;
 $form-check-input-width: 1.4em;
@@ -144,6 +158,8 @@ $input-box-shadow: none;
 $form-switch-checked-color: #{$gray-100};
 $form-switch-focus-color: #{$gray-100};
 
+$input-color: #{$gray-400};
+
 // Badge
 $badge-font-weight: normal;
 $badge-font-size: 0.65em;

diff --git a/pgml-dashboard/static/css/scss/base/_animations.scss b/pgml-dashboard/static/css/scss/base/_animations.scss
@@ -49,3 +49,35 @@
       }
   }
 }
+
+@mixin loading-dot($delay, $initial) {
+  width: 30px;
+  height: 30px;
+  opacity: $initial;
+  border-radius: 30px;
+  background-color: #{$gray-100};
+  animation: opacity 3s infinite linear;
+  animation-delay: $delay;
+}
+
+.loading-dot-1 {
+  @include loading-dot(0s, 0.1);
+}
+.loading-dot-2 {
+  @include loading-dot(0.5s, 0.2);
+}
+.loading-dot-3 {
+  @include loading-dot(1s, 0.3);
+}
+
+@keyframes opacity {
+  0% {
+    opacity: 0.1;
+  }
+  75% {
+    opacity: 1; 
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
diff --git a/pgml-dashboard/static/css/scss/base/_base.scss b/pgml-dashboard/static/css/scss/base/_base.scss
@@ -70,27 +70,13 @@ article {
     }
 }
 
-
-.form-control {
-    border-radius: var(--bs-border-radius-pill);
-}
-
-.text-black {
-    color: #{$gray-900} !important;
-}
-
-// Override white overrides.
-.text-white {
-    color: #{$gray-100} !important;
-}
-
 .bg-white {
     background-color: #{$bg-white} !important;
 }
 
 // Our flagship gradient.
 .party-time {
-    background: linear-gradient(270deg, #26CBFF 0%, #808CFF 50%, #C92FFF 100%);
+    background: $gradient-text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -110,12 +96,6 @@ article {
     }
 }
 
-// Override text-bg-dark colors.
-.text-bg-dark {
-    color: rgba(219, 219, 220, 1);
-    background-color: rgba(38, 38, 38, 1) !important;
-}
-
 .list-group {
     --bs-list-group-bg: transparent;
     --bs-list-group-border-width: 0;
@@ -137,7 +117,7 @@ article {
 }
 
 .syntax-highlight {
-    background: linear-gradient(225deg, #3EDCFF 0%, #3E9AFF 100%);
+    background: $gradient-blue;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -152,4 +132,4 @@ article {
           -ms-user-select: none; /* Internet Explorer/Edge */
               user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
-  }
+}
diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss
@@ -0,0 +1,20 @@
+
+
+// all other displays are default bootstrap styling
+.display-2 {font-weight: 700; font-size: 4rem; line-height: 80px;}
+
+// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
+.h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
+.h2 {font-weight: 700; font-size: 48px; line-height: 54px;}
+.h3 {font-weight: 700; font-size: 40px; line-height: 46px;}
+.h4 {font-weight: 700; font-size: 32px; line-height: 40px;}
+.h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
+.h6 {font-weight: 700; font-size: 24px; line-height: 30px;}
+
+.subcopy-text {font-size: 18px; line-height: 22px}
+.body-text {font-size: 16px; line-height: 20px}
+.legal-text {font-size: 12px; line-height: 16px;}
+
+.text-black {color: #{$gray-900} !important;}
+.text-white {color: #{$gray-100} !important;}
+.text-soft-white { color: #{$gray-200} !important; }
diff --git a/pgml-dashboard/static/css/scss/components/_badges.scss b/pgml-dashboard/static/css/scss/components/_badges.scss
@@ -5,7 +5,7 @@
     align-items: center;
 }
 
-.beta-badge {
+.version-badge {
     @extend .badge;
     text-transform: uppercase;
     color: #{$pink};
@@ -35,3 +35,23 @@
         border-left: 5px solid #{$color};
     }
 }
+
+@mixin deployment-status($color) {
+    @extend .badge;
+    border-radius: calc($border-radius / 2);
+    border: 2px solid $color;
+}
+
+.deployment-status-configuring, .deployment-status-creating, .deployment-status-Deploying, 
+.deployment-status-unhealthy, .deployment-status-updating {
+    @include deployment-status(#{$teal-tint-800});
+}
+
+.deployment-status-online, .deployment-status-backingup, .deployment-status-starting {
+    @include deployment-status(#{$teal-tint-100})
+}
+
+.deployment-status-destroyed, .deployment-status-failover, .deployment-status-stopping, 
+.deployment-status-stopped, .deployment-status-restarting, .deployment-status-shuttingDown {
+    @include deployment-status(#{$peach-tint-100})
+}
diff --git a/pgml-dashboard/static/css/scss/components/_cards.scss b/pgml-dashboard/static/css/scss/components/_cards.scss
@@ -1,3 +1,4 @@
+// TODO: Use header classes and slim down card-title class. 
 .card {
     --bs-card-spacer-y: 32px;
     --bs-card-spacer-x: 32px;

diff --git a/pgml-dashboard/static/css/scss/components/_forms.scss b/pgml-dashboard/static/css/scss/components/_forms.scss
@@ -266,3 +266,24 @@
         cursor: not-allowed;
     }
 }
+
+.input-group {
+    border-radius: $input-border-radius;
+    border: 2px solid transparent;
+    &:focus-within {
+        border: 2px solid #{$input-focus-border-color};
+    }
+
+    transition: $input-transition;
+    background-color: $input-bg;
+    padding: 16px 14px;
+
+    .form-control[type=text] {
+        border: none;
+        padding: 0px 6px;
+    }
+    .input-group-text {
+        border: none;
+        padding: 0px 6px;
+    }
+}
diff --git a/pgml-dashboard/static/css/scss/layout/_containers.scss b/pgml-dashboard/static/css/scss/layout/_containers.scss
@@ -119,13 +119,6 @@
     }
 }
 
-// displays
-.display-2 {
-    font-size: 4rem;
-    font-weight: 700;
-    line-height: 80px;
-}
-
 .container>.sticky-top-nav, .container-fluid>.sticky-top-nav {
     margin-left: calc(var(--bs-gutter-x) * -0.5);
     margin-right: calc(var(--bs-gutter-x) * -0.5);

diff --git a/pgml-dashboard/static/css/scss/themes/dark.scss b/pgml-dashboard/static/css/scss/themes/dark.scss
@@ -36,31 +36,10 @@
     --form-switch-hover: #{$neon-tint-300};
     --form-switch-active: #{$neon-tint-100};
 
-    .form-control {
-        --bs-form-control-bg: #{$gray-700};
-        --bs-body-color: #{$gray-200};
-        --bs-border-color: #{$gray-700};
-
-        &:disabled {
-            --bs-form-control-disabled-bg: #{$gray-700};
-        }
-
-        &:focus {
-            border-color: var(--bs-form-control-bg);
-        }
-    }
-
     .form-label {
         color: #{$gray-100};
     }
 
-    .input-group-text {
-        --bs-border-color: #{$gray-700};
-
-        background-color: #{$gray-700};
-        color: #{$gray-200};
-    }
-
     --webapp-nav-bg: #{$gray-800};
     .navbar {
 

diff --git a/pgml-dashboard/templates/components/postgres_logo.html b/pgml-dashboard/templates/components/postgres_logo.html
@@ -2,6 +2,6 @@
     <img src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="24" width="24">
     <span class="fw-normal position-relative overflow-visible">Postgres
         <span class="fw-semibold">ML</span>
-        <span class="beta-badge position-absolute bottom-0 end-0 pe-0 mb-n3">Beta</span>
+        <span class="version-badge position-absolute bottom-0 end-0 pe-0 mb-n3">Beta</span>
     </span>
 </a>
diff --git a/pgml-dashboard/templates/components/toc.html b/pgml-dashboard/templates/components/toc.html
@@ -1,6 +1,8 @@
+<!-- TODO: Determine if this is needed, remove if it isnt.  Also look 
+ at docs.html, which impliments this. -->
 <% if !links.is_empty() { %>
-<h6 class="h6 mb-2 pb-2 d-none d-xxl-block">Table of Contents</h6>
-<a class="h6 px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-congrols="tox-nav">
+<h6 class="mb-2 pb-2 d-none d-xxl-block">Table of Contents</h6>
+<a class="px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-congrols="tox-nav">
   <span>Table of Contents</span><span class="material-symbols-outlined" >expand_more</span>
 </a>
 

diff --git a/pgml-dashboard/templates/layout/nav/toc.html b/pgml-dashboard/templates/layout/nav/toc.html
@@ -2,8 +2,8 @@
   <aside class="d-xxl-block col-xxl-2 col-xl-12 order-2 order-xl-1 order-xxl-3 pt-xxl-4 px-xxl-0 toc-container">
     <nav class="card card-dark nav toc">
       <div class="card-body py-2 py-xxl-4">
-        <h6 class="h6 mb-2 pb-2 d-none d-xxl-block">Table of Contents</h6>
-        <a class="h6 px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-controls="toc-nav">
+        <h6 class="mb-2 pb-2 d-none d-xxl-block">Table of Contents</h6>
+        <a class="px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-controls="toc-nav">
           <span>Table of Contents</span><span class="material-symbols-outlined" >expand_more</span>
         </a>