diff --git a/package.json b/package.json index c91f3b2af..04f8851c4 100644 --- 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 index 934dcfbc4..14390e4a7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,31 @@ - - - - - - - - - - - - Studio :: HarperDB - - -
- - - - + + + + + + + + + + + + + + + + Studio :: HarperDB + + + +
+ + + + + diff --git a/src/assets/fonts/PPRadioGrotesk-Bold.woff b/src/assets/fonts/PPRadioGrotesk-Bold.woff new file mode 100644 index 000000000..199bef5d2 Binary files /dev/null and b/src/assets/fonts/PPRadioGrotesk-Bold.woff differ diff --git a/src/assets/images/logo/logo_harper_db_studio.png b/src/assets/images/logo/logo_harper_db_studio.png new file mode 100644 index 000000000..85bd08129 Binary files /dev/null and b/src/assets/images/logo/logo_harper_db_studio.png differ diff --git a/src/assets/images/svg/checkmark.svg b/src/assets/images/svg/checkmark.svg new file mode 100644 index 000000000..4bfa3adf9 --- /dev/null +++ b/src/assets/images/svg/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss index 0133da58c..6a1a7d1d3 100644 --- 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 index 12dbb8978..2598b5672 100644 --- 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 index c531ab948..0e3c9549e 100644 --- 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 index 50b92cc5d..691680537 100644 --- 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 index 3392e720e..5299a40c1 100644 --- a/src/assets/styles/core/_base.scss +++ b/src/assets/styles/core/_base.scss @@ -9,7 +9,7 @@ body { #app-container { height: calc(100vh - 135px); - margin-top: 135px; + margin-top: 165px; min-width: $min-width; padding: 0 2rem; @@ -17,5 +17,9 @@ body { 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 index 44b78e912..51464f2fe 100755 --- a/src/assets/styles/core/_typography.scss +++ b/src/assets/styles/core/_typography.scss @@ -1,6 +1,14 @@ +@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; @@ -8,6 +16,7 @@ body { 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 index 8e83987ab..babcfb4b0 100644 --- 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 index afe260347..044f41f1a 100644 --- 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 index 83b9cecf8..627ff15fe 100644 --- 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; } } - } diff --git a/src/assets/styles/overrides/_light.scss b/src/assets/styles/overrides/_light.scss index 406e5779d..ae1cfb5db 100644 --- a/src/assets/styles/overrides/_light.scss +++ b/src/assets/styles/overrides/_light.scss @@ -1,21 +1,12 @@ .light { #app-nav { - background: $color-white !important; - border-bottom: 1px solid $color-lightgrey; - - #logo { - background-image: url('../../images/logo/logo_dog_light.png'); - - @media screen and (width <= 530px) { - background-image: url('../../images/logo/logo_dog_only.png'); - } - } + background: $color-black !important; + border-bottom: 1px solid $color-black; .navbar-nav { .active-org { border-right-color: $color-lightgrey !important; - &.open { border-color: $color-lightgrey !important; } @@ -29,10 +20,10 @@ .btn-link, .nav-link, a { - color: $grey-overlay !important; + color: $color-lightgrey !important; &.active { - color: $black-overlay !important; + color: $color-white !important; } } } @@ -280,30 +271,15 @@ } } - #login-form { - .card { - background: $color-white !important; - border: 1px solid $color-lightgrey !important; - color: $color-lightgrey !important; - - .instructions { - color: $color-darkgrey; - } - } + .auth-form-container { + background-color: $color-white; + } - &.sign-up { - .sign-up-content, - .sign-up-header { - color: $color-darkgrey !important; - } + .login-form { + color: $color-black; - .sign-up-header { - border-bottom: 1px solid $color-lightgrey; - } - - hr { - background: $color-lightgrey; - } + .instructions { + color: $color-darkgrey; } input { @@ -358,8 +334,6 @@ color: $color-darkgrey !important; } - - a, button, input, diff --git a/src/assets/styles/overrides/_lumen.scss b/src/assets/styles/overrides/_lumen.scss index 819e163b9..8999f2fdc 100644 --- a/src/assets/styles/overrides/_lumen.scss +++ b/src/assets/styles/overrides/_lumen.scss @@ -2,8 +2,8 @@ $partner-brand-color: #0075c9; .lumen { #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('../../images/logo/lumen.png'); @@ -285,7 +285,7 @@ $partner-brand-color: #0075c9; box-shadow: inset 0 0 5px $lighter-grey-overlay !important; } - #login-form { + .login-form { .card { background: $color-white !important; border: 1px solid $lighter-grey-overlay !important; @@ -296,21 +296,6 @@ $partner-brand-color: #0075c9; } } - &.sign-up { - .sign-up-content, - .sign-up-header { - color: $color-darkgrey !important; - } - - .sign-up-header { - border-bottom: 1px solid $light-grey-overlay; - } - - hr { - background: $light-grey-overlay; - } - } - input { background: $lightest-grey-overlay !important; color: $color-black !important; diff --git a/src/assets/styles/overrides/_verizon.scss b/src/assets/styles/overrides/_verizon.scss index 9aec76999..dec447472 100644 --- a/src/assets/styles/overrides/_verizon.scss +++ b/src/assets/styles/overrides/_verizon.scss @@ -282,7 +282,7 @@ $partner-brand-color: #cd040b; box-shadow: inset 0 0 5px $lighter-grey-overlay !important; } - #login-form { + .login-form { .card { background: $color-white !important; border: 1px solid $lighter-grey-overlay !important; @@ -293,21 +293,6 @@ $partner-brand-color: #cd040b; } } - &.sign-up { - .sign-up-content, - .sign-up-header { - color: $color-darkgrey !important; - } - - .sign-up-header { - border-bottom: 1px solid $light-grey-overlay; - } - - hr { - background: $light-grey-overlay; - } - } - input { background: $lightest-grey-overlay !important; color: $color-black !important; diff --git a/src/assets/styles/pages/_auth.scss b/src/assets/styles/pages/_auth.scss index e4f6df490..c2b6420b9 100644 --- a/src/assets/styles/pages/_auth.scss +++ b/src/assets/styles/pages/_auth.scss @@ -1,37 +1,73 @@ -#login-form { - left: 50%; - max-width: 270px; - min-width: 270px; - position: relative; - top: 40%; - transform: translate(-50%, -50%); - width: 100%; +.auth-studio-info { + color: $color-white; + background: linear-gradient(44.5deg, $color-darkblue 39.04%, $color-pink 98.58%); +} - .card { - background: $faint-white-overlay !important; - border: 1px solid $faint-white-overlay !important; - box-shadow: none !important; - z-index: 2; +.auth-studio-info-container { + max-width: 450px; +} - .card-body { - color: $color-white; - min-height: 205px; +.btn-gradient-blue { + background: linear-gradient(90deg, $color-lightblue 0%, $color-blue 100%) !important; - .instructions { - color: $color-white; - padding-bottom: 16.5px; - text-align: center; - } + &:hover { + background: $color-blue !important; + } +} + +.auth-title { + font-size: 3.25rem !important; + margin-bottom: 0.5rem !important; +} +.auth-subtitle { + font-size: 1.65rem; + font-family: $font-family-ubuntu; + font-weight: 100 !important; +} +.auth-info-list-items { + font-family: $font-family-ubuntu; + list-style-image: url('../../images/svg/checkmark.svg'); + li { + margin-bottom: 1.5rem; + + .item-title { + font-weight: $font-weight-bold; + font-size: 1.5rem !important; + margin-bottom: 0.5rem !important; + } + .item-subtitle { + display: inline-block; + letter-spacing: 0.05em; + font-weight: $font-weight-light; + font-size: 1rem; + } + .deploy-subitem { + display: inline-block; + padding: 0.5rem; + margin-right: 0.5rem; + font-size: $font-size-medium; + border: 2px solid $color-lightblue; + border-radius: 5px; } } +} + +.auth-form-container { + background-color: $color-darkpurple; +} + +.login-form { + width: 100%; + max-width: 320px; + color: $color-white; + .instructions { + font-size: 1.5rem !important; + font-weight: $font-weight-light; + } &.sign-up { max-width: 770px; - .card-body { - padding: 2rem !important; - } - @media screen and (width <= 767px), screen and (height <= 530px) { margin-bottom: 50px; top: -50px; @@ -42,20 +78,6 @@ background: $faint-white-overlay; } - .sign-up-header { - border-bottom: 1px solid $faint-white-overlay; - font-size: 1.5rem !important; - line-height: 1 !important; - margin-bottom: 25px !important; - padding-bottom: 25px; - text-align: center; - width: 100%; - - @media screen and (width <= 767px) { - font-size: 1.1rem !important; - } - } - .sign-up-content { width: 100%; @@ -77,18 +99,21 @@ input { background: $faint-white-overlay !important; color: $color-white; - text-align: center !important; &::placeholder { color: $white-overlay !important; - font-family: $font-family-sans; + font-family: $font-family-ubuntu; font-weight: $font-weight-light; - text-align: center !important; + } + &:focus { + color: $color-white; + border-color: $color-lightblue; + outline: 0; } } .disclaimer { - color: $white-overlay !important; + color: $color-white !important; font-size: $font-size-small; a, @@ -98,10 +123,6 @@ } } - .btn { - text-transform: lowercase; - } - .login-nav-link-holder { &:last-child { text-align: right; @@ -109,9 +130,8 @@ } .login-nav-link { - color: $white-overlay !important; - display: inline-block; - font-size: 85%; + color: $color-white !important; + font-size: $font-size-root; height: 16px; text-transform: lowercase; white-space: nowrap; diff --git a/src/components/TopNav.js b/src/components/TopNav.js index f05efe8ce..a7ee65ec0 100644 --- a/src/components/TopNav.js +++ b/src/components/TopNav.js @@ -25,13 +25,13 @@ function TopNav({ isMaintenance, loggedIn = false }) { const showInviteBadge = useMemo( () => auth?.orgs?.filter((org) => org.status === 'invited').length, - + [auth.orgs], ); const showManageIcon = useMemo( () => auth?.orgs?.find((o) => o.customer_id?.toString() === customer?.customer_id?.toString())?.status === 'owner', - + [auth.orgs, customer.customer_id], ); @@ -67,9 +67,15 @@ function TopNav({ isMaintenance, loggedIn = false }) { >
- -