Merge pull request #412 from HarperDB/stage

[v4.7.0] UI Update for Auth Pages
HarperDB · Nov 12, 2024 · 4511f6d · 4511f6d
2 parents 139f498 + c82bc75
commit 4511f6d
Show file tree

Hide file tree

Showing 25 changed files with 582 additions and 550 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "harperdb-studio",
-  "version": "4.6.4",
+  "version": "4.7.0",
   "description": "A UI for HarperDB",
   "deploymentUrl": "studio.harperdb.io",
   "private": true,

diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,31 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="theme-color" content="#480b8a" />
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
-    <link id="dynamic-favicon" rel="shortcut icon" href="%PUBLIC_URL%/images/favicon_purple.png">
-    <link rel="canonical" href="" />
-    <link href="%PUBLIC_URL%/fontawesome/fontawesome.css" rel="stylesheet">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <meta name="description" content="HarperDB is a full-featured data management platform that runs from edge to cloud, and anywhere in between. ">
-    <title>Studio :: HarperDB</title>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-  <script src="%PUBLIC_URL%/fontawesome/fontawesome.js" crossorigin="anonymous" defer></script>
-  <script src="%PUBLIC_URL%/js/kissmetrics.js" defer></script>
-  <script src="%PUBLIC_URL%/js/linkedin.js" defer></script>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#480b8a" />
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <link id="dynamic-favicon" rel="shortcut icon" href="%PUBLIC_URL%/images/favicon_purple.png">
+  <link rel="canonical" href="" />
+  <link href="%PUBLIC_URL%/fontawesome/fontawesome.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&display=swap"
+    rel="stylesheet">
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <meta name="description"
+    content="HarperDB is a full-featured data management platform that runs from edge to cloud, and anywhere in between. ">
+  <title>Studio :: HarperDB</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+<script src="%PUBLIC_URL%/fontawesome/fontawesome.js" crossorigin="anonymous" defer></script>
+<script src="%PUBLIC_URL%/js/kissmetrics.js" defer></script>
+<script src="%PUBLIC_URL%/js/linkedin.js" defer></script>
+
 </html>
diff --git a/src/assets/fonts/PPRadioGrotesk-Bold.woff b/src/assets/fonts/PPRadioGrotesk-Bold.woff
diff --git a/src/assets/images/logo/logo_harper_db_studio.png b/src/assets/images/logo/logo_harper_db_studio.png
diff --git a/src/assets/images/svg/checkmark.svg b/src/assets/images/svg/checkmark.svg
diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss
@@ -1,12 +1,9 @@
 .btn {
   align-items: center;
   background: linear-gradient(to bottom, rgb(255 255 255 / 5%) 31%, rgb(0 0 0 / 5%) 100%);
-  border: 1px solid $faintest-white-overlay !important;
   border-radius: $border-radius;
-
-  // box-shadow: 0 0 3px $grey-overlay !important;
   display: inline-flex;
-  font-family: $font-family-sans;
+  font-family: $font-family-ubuntu;
   font-size: $font-size-root;
   font-weight: $font-weight-light;
   height: 38px;

diff --git a/src/assets/styles/components/_forms.scss b/src/assets/styles/components/_forms.scss
@@ -7,7 +7,7 @@ textarea,
   border-radius: $border-radius;
   box-shadow: none !important;
   color: $color-black;
-  font-family: $font-family-sans;
+  font-family: $font-family-ubuntu;
   font-size: $font-size-root;
   font-weight: $font-weight-light;
   height: 38px;
@@ -54,7 +54,7 @@ textarea {
 
 ::placeholder {
   color: $color-grey !important;
-  font-family: $font-family-sans;
+  font-family: $font-family-ubuntu;
   font-weight: $font-weight-light;
 }
 
@@ -95,10 +95,17 @@ textarea {
 
 .subdomain-label {
   color: $color-white;
-  font-size: 0.7rem !important;
+  font-size: 1.1rem !important;
   padding-left: 0;
-  padding-top: 14px;
+  padding-right: 0;
   white-space: nowrap;
+  padding-top: 0.5rem;
+
+  p {
+    vertical-align: middle;
+    margin-bottom: 0 !important;
+    height: 100%;
+  }
 
   .btn-link {
     color: $color-white;

diff --git a/src/assets/styles/components/_subnav.scss b/src/assets/styles/components/_subnav.scss
@@ -11,7 +11,7 @@
   padding: 0 1rem;
   position: fixed;
   right: 0;
-  top: 60px !important;
+  top: 80px !important;
   width: 100%;
   z-index: 98 !important;
 

diff --git a/src/assets/styles/components/_topnav.scss b/src/assets/styles/components/_topnav.scss
@@ -1,7 +1,7 @@
 #app-nav {
-  background: $gradient-purple-magenta !important;
-  border-bottom: 1px solid $black-overlay;
-  height: 60px;
+  background: $color-black !important;
+  border-bottom: 1px solid $color-black;
+  height: 80px;
   justify-content: space-between !important;
   left: 0;
   min-width: $min-width;
@@ -27,12 +27,12 @@
     position: relative;
 
     #logo {
-      background-image: url('../../images/logo/logo_dog.png');
+      background-image: url('../../images/logo/logo_harper_db_studio.png');
       background-position: center left;
       background-repeat: no-repeat;
       background-size: contain;
-      height: 30px;
-      width: 120px;
+      height: 40px;
+      width: 400px;
 
       @media screen and (width <= 530px) {
         background-image: url('../../images/logo/logo_dog_only.png');
@@ -69,6 +69,9 @@
         &:hover {
           color: $color-white !important;
         }
+        span {
+          padding-left: 0.25rem;
+        }
       }
     }
 

diff --git a/src/assets/styles/core/_base.scss b/src/assets/styles/core/_base.scss
@@ -9,13 +9,17 @@ body {
 
     #app-container {
       height: calc(100vh - 135px);
-      margin-top: 135px;
+      margin-top: 165px;
       min-width: $min-width;
       padding: 0 2rem;
 
       @media screen and (width <= 991px) {
         padding: 0 1rem;
       }
     }
+    .auth-container {
+      height: calc(100vh - 80px);
+      margin-top: 80px;
+    }
   }
 }
diff --git a/src/assets/styles/core/_typography.scss b/src/assets/styles/core/_typography.scss
@@ -1,13 +1,22 @@
+@font-face {
+  font-family: 'RadioGroteskBold';
+  src:
+    local('RadioGroteskBold'),
+    url('../../fonts/PPRadioGrotesk-Bold.woff') format('woff');
+  font-weight: bolder;
+}
+
 body {
   color: $color-black;
-  font-family: $font-family-sans;
+  font-family: $font-family-ubuntu;
   font-size: $font-size-root;
   letter-spacing: 0.02rem;
   line-height: $font-line-height;
 }
 
 h1 {
   font-size: $font-size-h1;
+  font-family: $font-family-sans;
   font-weight: $font-weight-light;
   margin: 0 !important;
 
@@ -18,7 +27,6 @@ h1 {
 
 h2 {
   font-size: $font-size-h2;
-  font-weight: $font-weight-light;
   margin: 0 !important;
 
   @media (width >= 1100px) {

diff --git a/src/assets/styles/core/_vars.scss b/src/assets/styles/core/_vars.scss
@@ -14,8 +14,12 @@ $color-success: #55c58f;
 $color-warning: #ffa500;
 $color-danger: #ea4c89;
 $color-info: #8f8dff;
+$color-blue: #4b5eec;
+$color-lightblue: #30cbfd;
+$color-darkblue: #3100d3;
 $color-darkpurple: #312556;
 $color-purple: #403b8a;
+$color-pink: #d52bff;
 $color-lightpurple: #7a3a87;
 $gradient-purple-magenta: linear-gradient(45deg, $color-darkpurple, $color-purple, $color-lightpurple);
 $gradient-white-lightgrey: linear-gradient(to bottom, rgb(255 255 255 / 1%) 31%, rgb(0 0 0 / 5%) 100%);
@@ -34,7 +38,26 @@ $black-overlay: rgb(0 0 0 / 90%);
 $border-radius: 4px;
 $border-radius-lg: 6px;
 $border-radius-sm: 2px;
-$font-family-sans: -apple-system,blinkmacsystemfont,'Segoe UI','Noto Sans', arial, helvetica, verdana, sans-serif !important;
+$font-family-ubuntu:
+  'Ubuntu',
+  -apple-system,
+  blinkmacsystemfont,
+  'Segoe UI',
+  'Noto Sans',
+  arial,
+  helvetica,
+  verdana,
+  sans-serif !important;
+$font-family-sans:
+  'RadioGroteskBold',
+  -apple-system,
+  blinkmacsystemfont,
+  'Segoe UI',
+  'Noto Sans',
+  arial,
+  helvetica,
+  verdana,
+  sans-serif !important;
 $font-size-root: 13px !important;
 $font-size-h1: calc(3vw + 3vh) !important;
 $font-size-h1-max: 65px !important;
@@ -48,8 +71,11 @@ $font-size-h5: 1.5rem !important;
 $font-size-h5-max: 1.5rem !important;
 $font-size-h6: 1.25rem !important;
 $font-size-h6-max: 1.25rem !important;
+$font-size-medium: 1rem !important;
 $font-size-small: 85% !important;
 $font-weight-light: 300 !important;
+$font-weight-normal: 400 !important;
 $font-weight-bold: 600 !important;
+$font-weight-bolder: 700 !important;
 $font-line-height: 1.2 !important;
 $min-width: 314px;
diff --git a/src/assets/styles/overrides/_akamai.scss b/src/assets/styles/overrides/_akamai.scss
@@ -2,8 +2,8 @@ $partner-brand-color: #017ac6;
 
 .akamai {
   #app-nav {
-    background: $color-white !important;
-    border-bottom: 1px solid $color-lightgrey;
+    background: $color-black !important;
+    border-bottom: 1px solid $color-black;
 
     #logo {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MjMuNXB4IiBoZWlnaHQ9IjE4NnB4IiB2aWV3Qm94PSIwIDAgNDIzLjUgMTg2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MjMuNSAxODY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRjM4QjAwO30KCS5zdDF7ZmlsbDojMDA5QkRFO30KPC9zdHlsZT4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTEzMS42LDEzMS44aC0xNi44bDE0LjUtMjkuM2gwLjJMMTMxLjYsMTMxLjhMMTMxLjYsMTMxLjh6IE0xMzIuNCwxNDVsMSwxMS42aDE4LjRsLTYuMS02Ny43aC0yNy40CgkJCQlsLTM0LjcsNjcuN2gxOC44bDUuOC0xMS42TDEzMi40LDE0NUwxMzIuNCwxNDV6Ii8+CgkJCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTc3LjYsMTI3IDE4MC4zLDEyNyAxOTMuNSwxMDkuMiAyMTAuNSwxMDkuMiAxOTIuMywxMzIgMjAzLjUsMTU2LjYgMTg1LjQsMTU2LjYgMTc4LjEsMTM3LjQgCgkJCQkxNzUuNCwxMzcuNCAxNzEuMywxNTYuNiAxNTUuOCwxNTYuNiAxNzAuMSw4OC45IDE4NS43LDg4LjkgCQkJIi8+CgkJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMzAuNCwxMzdjNS4xLDAsOC40LDAuNCw3LjYsNC4zYy0xLjEsNS0zLjIsNS44LTkuNyw1LjhjLTIuNCwwLTYuOCwwLTUuNy01LjEKCQkJCUMyMjMuNSwxMzcuNywyMjYuNiwxMzcsMjMwLjQsMTM3TDIzMC40LDEzN3ogTTIzNC43LDE1Ni42aDE1LjVsNi4zLTI5LjZjMy41LTE2LjMtMi44LTE4LjMtMTguNy0xOC4zYy0xMS4xLDAtMjEuOC0wLjEtMjUsMTQuNgoJCQkJaDE1LjVjMC45LTQuMywzLjUtNS4xLDcuNC01LjFjNi44LDAsNi41LDIuOCw1LjUsNy4ybC0xLjYsNy41aC0wLjdjLTAuNi01LjQtNy40LTUuMy0xMS44LTUuM2MtMTEuMiwwLTE3LjksMy41LTIwLjMsMTQuOQoJCQkJYy0yLjYsMTIuMSwzLjIsMTQuNywxNCwxNC43YzUuNCwwLDEyLjctMS4xLDE1LjItNy42aDAuNUwyMzQuNywxNTYuNkwyMzQuNywxNTYuNnoiLz4KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4MS42LDEwOS4ybC0xLjQsNi43aDAuNmMzLjEtNS42LDkuMi03LjIsMTQuNS03LjJjNi43LDAsMTMuMywxLjIsMTIuNCw5LjNoMC43YzIuMy02LjgsOS4yLTkuMywxNS4yLTkuMwoJCQkJYzEwLjksMCwxNS42LDQuNSwxMy4yLDE1LjVsLTYuOSwzMi40aC0xNS41bDUuOC0yNy40YzAuOC01LDEuNi04LjYtNC40LTguNnMtOC4xLDQtOS4xLDkuMWwtNS43LDI2LjloLTE1LjVsNi4xLTI4LjcKCQkJCWMwLjctNC4zLDEuMS03LjMtNC4zLTcuM2MtNi40LDAtOC4zLDMuNC05LjUsOS4xbC01LjcsMjYuOWgtMTUuNWwxMC4xLTQ3LjRMMjgxLjYsMTA5LjJMMjgxLjYsMTA5LjJ6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNjEuMiwxMzdjNSwwLDguNCwwLjQsNy42LDQuM2MtMSw1LTMuMiw1LjgtOS43LDUuOGMtMi4zLDAtNi44LDAtNS43LTUuMUMzNTQuMywxMzcuNywzNTcuNCwxMzcsMzYxLjIsMTM3CgkJCQlMMzYxLjIsMTM3eiBNMzY1LjUsMTU2LjZIMzgxbDYuMy0yOS42YzMuNS0xNi4zLTIuOC0xOC4zLTE4LjctMTguM2MtMTEuMSwwLTIxLjktMC4xLTI1LDE0LjZoMTUuNWMwLjktNC4zLDMuNS01LjEsNy40LTUuMQoJCQkJYzYuOCwwLDYuNSwyLjgsNS41LDcuMmwtMS40LDcuNWgtMC43Yy0wLjYtNS40LTcuNC01LjMtMTEuOC01LjNjLTExLjIsMC0xNy45LDMuNS0yMC4zLDE0LjljLTIuNiwxMi4xLDMuMiwxNC43LDE0LDE0LjcKCQkJCWM1LjQsMCwxMi43LTEuMSwxNS4zLTcuNmgwLjVMMzY1LjUsMTU2LjZMMzY1LjUsMTU2LjZ6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MDMuNCwxNTYuNmgtMTUuNWwxMC00Ny40aDE1LjVMNDAzLjQsMTU2LjZMNDAzLjQsMTU2LjZ6Ii8+CgkJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik05MS41LDE3M0M1Ny4xLDE2Mi41LDMyLDEzMC43LDMyLDkzLjFDMzIsNTUsNTcuNiwyMi45LDkyLjYsMTIuOGMzLjYtMSwyLjYtMy40LTEuNy0zLjQKCQkJQzQ0LjQsOS40LDYuNiw0Ni45LDYuNiw5My4xczM3LjcsODMuNiw4NC4zLDgzLjZDOTUuMiwxNzYuNyw5NS40LDE3NC4yLDkxLjUsMTczeiIvPgoJCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00OCwxMTIuNmMtMC4yLTIuMi0wLjQtNC41LTAuNC02LjhjMC0zNi43LDI5LjctNjYuNCw2Ni40LTY2LjRjMzQuNywwLDQ1LjEsMTUuNSw0Ni40LDE0LjUKCQkJYzEuNC0xLjEtMTIuNi0zMS44LTUzLjMtMzEuOGMtMzYuNywwLTY2LjQsMjkuNy02Ni40LDY2LjRjMCw4LjUsMS42LDE2LjYsNC41LDI0QzQ2LjQsMTE1LjcsNDguMywxMTUuNyw0OCwxMTIuNnoiLz4KCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNzUuOCw2NC44YzE3LjItNy41LDM4LjktNy43LDYwLjItMC4zYzE0LjMsNSwyMi42LDEyLjEsMjMuMywxMS44YzEuMS0wLjUtOC4zLTE1LjUtMjUuNC0yMS45CgkJCWMtMjAuNy03LjgtNDIuOS0zLjctNTkuMSw5QzczLDY0LjgsNzMuNyw2NS43LDc1LjgsNjQuOHoiLz4KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDE2LjksOTYuMWMwLDQuOC0zLjksOC43LTguNyw4LjdjLTQuOCwwLTguNy0zLjktOC43LTguN2MwLTQuOCwzLjktOC43LDguNy04LjdTNDE2LjksOTEuMyw0MTYuOSw5Ni4xeiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=');
@@ -20,7 +20,6 @@ $partner-brand-color: #017ac6;
       .active-org {
         border-right-color: $color-lightgrey !important;
 
-
         &.open {
           border-color: $color-lightgrey !important;
         }
@@ -314,7 +313,7 @@ $partner-brand-color: #017ac6;
     box-shadow: inset 0 0 5px $lighter-grey-overlay !important;
   }
 
-  #login-form {
+  .login-form {
     .card {
       background: $color-white !important;
       border: 1px solid $color-lightgrey !important;
@@ -325,21 +324,6 @@ $partner-brand-color: #017ac6;
       }
     }
 
-    &.sign-up {
-      .sign-up-content,
-      .sign-up-header {
-        color: $color-darkgrey !important;
-      }
-
-      .sign-up-header {
-        border-bottom: 1px solid $color-lightgrey;
-      }
-
-      hr {
-        background: $color-lightgrey;
-      }
-    }
-
     input {
       background: $color-white !important;
       color: $color-black !important;

diff --git a/src/assets/styles/overrides/_dark.scss b/src/assets/styles/overrides/_dark.scss
@@ -1,7 +1,7 @@
 .dark {
   #app-nav {
-    background: $color-pureblack !important;
-    border-bottom: 1px solid $color-darkestgrey;
+    background: $color-black !important;
+    border-bottom: 1px solid $color-black;
 
     .navbar-nav {
       .active-org {
@@ -69,7 +69,7 @@
   .form-control {
     background: $faintest-white-overlay !important;
     border: 1px solid $faint-white-overlay !important;
-    color: $color-lightgrey !important;
+    color: $color-white !important;
   }
 
   .entity-manager {
@@ -106,7 +106,6 @@
           &.asc {
             box-shadow: inset 0 2px 0 0 $faint-white-overlay;
           }
-
         }
       }
     }
@@ -206,13 +205,25 @@
     }
   }
 
-  #login-form {
-    .card {
-      background: $color-pureblack !important;
-    }
+  .auth-form-container {
+    background-color: $color-pureblack;
+  }
 
+  .login-form {
     input {
-      background: $faintest-white-overlay !important;
+      background: $faint-white-overlay !important;
+      color: $color-white;
+
+      &::placeholder {
+        color: $white-overlay !important;
+        font-family: $font-family-ubuntu;
+        font-weight: $font-weight-light;
+      }
+      &:focus {
+        color: $color-white;
+        border-color: $color-lightblue;
+        outline: 0;
+      }
     }
   }
 
@@ -275,5 +286,4 @@
       background: $faintest-white-overlay !important;
     }
   }
-
 }