From 05bf13bee6779260386c1ebe7f9fe73c83d9f306 Mon Sep 17 00:00:00 2001 From: deliciousmonster Date: Sun, 1 Dec 2024 18:14:04 -0700 Subject: [PATCH 01/21] CSS work for Akamai Event, CSS cleanup, dependencies --- package.json | 18 +- src/app.scss | 2 - .../styles/components/_empty-prompt.scss | 2 +- .../styles/components/_react-table.scss | 2 +- src/assets/styles/components/_subnav.scss | 15 +- src/assets/styles/components/_topnav.scss | 7 +- src/assets/styles/core/_base.scss | 2 +- src/assets/styles/core/_vars.scss | 3 +- src/assets/styles/overrides/_akamai.scss | 107 +- src/assets/styles/overrides/_dark.scss | 2 - src/assets/styles/overrides/_light.scss | 2 - src/assets/styles/overrides/_lumen.scss | 362 -- src/assets/styles/overrides/_verizon.scss | 359 -- src/assets/styles/pages/_auth.scss | 6 +- src/assets/styles/pages/_config.scss | 2 +- src/assets/styles/pages/_instances.scss | 2 +- src/components/TopNav.js | 14 +- .../instance/config/InstanceConfig.js | 2 +- src/components/instance/config/index.js | 2 +- src/components/instances/SubNav.js | 26 +- src/components/instances/filter/Free.js | 13 + src/components/instances/index.js | 4 +- src/components/instances/new/DetailsCloud.js | 34 +- src/components/layouts/App.js | 27 +- src/functions/app/getThemes.js | 6 +- .../instance/clustering/checkClusterStatus.js | 8 +- yarn.lock | 5277 ++++++++--------- 27 files changed, 2729 insertions(+), 3577 deletions(-) delete mode 100644 src/assets/styles/overrides/_lumen.scss delete mode 100644 src/assets/styles/overrides/_verizon.scss create mode 100644 src/components/instances/filter/Free.js diff --git a/package.json b/package.json index 01fc91399..64295703a 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "author": "harperdb", "license": "UNLICENSED", "scripts": { - "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start", - "start:local": "REACT_APP_LOCALSTUDIO=true HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start", + "start": "HTTPS=true react-scripts start", + "start:local": "REACT_APP_LOCALSTUDIO=true HTTPS=true react-scripts start", "docker": "HTTPS=false react-scripts start", "build:stage": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false PUBLIC_URL=https://dbjxbnqel2bw9.cloudfront.net react-scripts build", "build:prod": "DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false PUBLIC_URL=https://ds5zz9rfvzuta.cloudfront.net react-scripts build", @@ -18,9 +18,9 @@ }, "dependencies": { "@monaco-editor/react": "^4.2.0", - "@stripe/react-stripe-js": "^2.1.0", - "@stripe/stripe-js": "^3.0.5", - "apexcharts": "^3.27.1", + "@stripe/react-stripe-js": "^3.0.0", + "@stripe/stripe-js": "^5.2.0", + "apexcharts": "^4.1.0", "bootstrap-scss": "^5.0.1", "classnames": "^2.3.2", "deepmerge": "^4.2.2", @@ -35,8 +35,8 @@ "react-error-boundary": "^4.0.9", "react-ga4": "^2.1.0", "react-json-editor-ajrm": "^2.5.11", - "react-router": "^6.13.0", - "react-router-dom": "^6.13.0", + "react-router": "^7.0.1", + "react-router-dom": "^7.0.1", "react-scripts": "^5.0.0", "react-select": "^5.0.0", "react-table": "^7.7.0", @@ -75,13 +75,13 @@ "eslint-config-react-app": "^7.0.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-hooks": "^5.0.0", "postcss-custom-properties": "^14.0.1", "prettier": "^3.1.0", "sass": "^1.46.0", "stylelint": "^16.0.2", "stylelint-config-sass-guidelines": "^12.0.0", - "stylelint-config-standard-scss": "^13.1.0", + "stylelint-config-standard-scss": "^14.0.0", "stylelint-order": "^6.0.1", "stylelint-scss": "^6.0.0", "typescript": "^5.6.2" diff --git a/src/app.scss b/src/app.scss index f289cb4ff..00327507f 100644 --- a/src/app.scss +++ b/src/app.scss @@ -61,8 +61,6 @@ // override styles @import 'assets/styles/overrides/dark'; @import 'assets/styles/overrides/light'; -@import 'assets/styles/overrides/lumen'; -@import 'assets/styles/overrides/verizon'; @import 'assets/styles/overrides/akamai'; @import 'assets/styles/overrides/accessibility'; @import 'assets/styles/overrides/maintenance'; diff --git a/src/assets/styles/components/_empty-prompt.scss b/src/assets/styles/components/_empty-prompt.scss index 9419fcdcb..d1e3ae350 100644 --- a/src/assets/styles/components/_empty-prompt.scss +++ b/src/assets/styles/components/_empty-prompt.scss @@ -2,7 +2,7 @@ align-items: center; display: flex; flex-direction: column; - height: calc(100vh - 262px) !important; + height: calc(100vh - 282px) !important; justify-content: center; line-height: 1.5 !important; diff --git a/src/assets/styles/components/_react-table.scss b/src/assets/styles/components/_react-table.scss index fce17bd53..3ef80b007 100755 --- a/src/assets/styles/components/_react-table.scss +++ b/src/assets/styles/components/_react-table.scss @@ -2,7 +2,7 @@ .react-table-scroller { border-bottom: 1px solid $lighter-grey-overlay; font-size: 12px; - min-height: calc(100vh - 328px); + min-height: calc(100vh - 348px); overflow: auto hidden; width: 100%; diff --git a/src/assets/styles/components/_subnav.scss b/src/assets/styles/components/_subnav.scss index 0e3c9549e..37823a0c7 100644 --- a/src/assets/styles/components/_subnav.scss +++ b/src/assets/styles/components/_subnav.scss @@ -1,6 +1,6 @@ .app-subnav { align-items: center; - background: $black-overlay !important; + background: $grey-overlay !important; border-bottom: 1px solid $black-overlay; display: flex; flex-flow: row nowrap; @@ -158,4 +158,17 @@ width: 105px; } } + + .free-instances { + color: $color-white; + margin-left: 10px; + width: auto; + align-items: center; + display: inline-flex; + font-size: 13px !important; + font-weight: 300 !important; + height: 38px; + overflow: visible; + position: relative; + } } diff --git a/src/assets/styles/components/_topnav.scss b/src/assets/styles/components/_topnav.scss index 691680537..05d84d50c 100644 --- a/src/assets/styles/components/_topnav.scss +++ b/src/assets/styles/components/_topnav.scss @@ -1,5 +1,5 @@ #app-nav { - background: $color-black !important; + background: $color-pureblack !important; border-bottom: 1px solid $color-black; height: 80px; justify-content: space-between !important; @@ -25,6 +25,7 @@ margin-right: 0; padding: 0; position: relative; + width: 250px !important; #logo { background-image: url('../../images/logo/logo_harper_db_studio.png'); @@ -34,7 +35,7 @@ height: 40px; width: 400px; - @media screen and (width <= 530px) { + @media screen and (width <= 650px) { background-image: url('../../images/logo/logo_dog_only.png'); width: 30px; } @@ -118,7 +119,7 @@ border-right: 1px solid $faint-white-overlay; white-space: nowrap; - @media screen and (width <= 511px) { + @media screen and (width <= 400px) { font-size: 10px; font-weight: $font-weight-bold; max-width: 75px; diff --git a/src/assets/styles/core/_base.scss b/src/assets/styles/core/_base.scss index 5299a40c1..63ce91d32 100644 --- a/src/assets/styles/core/_base.scss +++ b/src/assets/styles/core/_base.scss @@ -8,7 +8,7 @@ body { min-width: $min-width; #app-container { - height: calc(100vh - 135px); + height: calc(100vh - 165px); margin-top: 165px; min-width: $min-width; padding: 0 2rem; diff --git a/src/assets/styles/core/_vars.scss b/src/assets/styles/core/_vars.scss index babcfb4b0..05a85be09 100644 --- a/src/assets/styles/core/_vars.scss +++ b/src/assets/styles/core/_vars.scss @@ -34,6 +34,7 @@ $lighter-grey-overlay: rgb(0 0 0 / 10%); $light-grey-overlay: rgb(0 0 0 / 30%); $grey-overlay: rgb(0 0 0 / 50%); $dark-grey-overlay: rgb(0 0 0 / 70%); +$darker-grey-overlay: rgb(0 0 0 / 80%); $black-overlay: rgb(0 0 0 / 90%); $border-radius: 4px; $border-radius-lg: 6px; @@ -78,4 +79,4 @@ $font-weight-normal: 400 !important; $font-weight-bold: 600 !important; $font-weight-bolder: 700 !important; $font-line-height: 1.2 !important; -$min-width: 314px; +$min-width: 317px; diff --git a/src/assets/styles/overrides/_akamai.scss b/src/assets/styles/overrides/_akamai.scss index 044f41f1a..9adaddb0c 100644 --- a/src/assets/styles/overrides/_akamai.scss +++ b/src/assets/styles/overrides/_akamai.scss @@ -2,8 +2,6 @@ $partner-brand-color: #017ac6; .akamai { #app-nav { - 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='); @@ -15,32 +13,6 @@ $partner-brand-color: #017ac6; width: 33px; } } - - .navbar-nav { - .active-org { - border-right-color: $color-lightgrey !important; - - &.open { - border-color: $color-lightgrey !important; - } - - .org-name { - color: $color-black !important; - } - } - - .nav-item { - .btn-link, - .nav-link, - a { - color: $grey-overlay !important; - - &.active { - color: $black-overlay !important; - } - } - } - } } #app-bg-color { @@ -142,9 +114,9 @@ $partner-brand-color: #017ac6; .loader { .card { - background: $color-white !important; - border: 1px solid $lighter-grey-overlay !important; - box-shadow: 0 0 5px $lighter-grey-overlay !important; + background: $faintest-white-overlay !important; + border: 1px solid $faint-white-overlay !important; + box-shadow: none !important; .card-body { background: $gradient-white-lightgrey !important; @@ -165,21 +137,6 @@ $partner-brand-color: #017ac6; } } - input, - select, - textarea, - .fake-input, - .form-control { - background: $lightest-grey-overlay !important; - border: 1px solid $color-lightgrey !important; - color: $color-darkgrey !important; - - &.is-invalid, - &.error { - border: 1px solid $color-danger !important; - } - } - .radio-checkbox { &.show { background-color: $partner-brand-color !important; @@ -194,14 +151,6 @@ $partner-brand-color: #017ac6; .entity-manager { .card { border: 1px solid $color-lightgrey; - - .item-row { - background: $lightest-grey-overlay !important; - - &.active { - background: $lightest-grey-overlay !important; - } - } } &-footer { @@ -313,55 +262,6 @@ $partner-brand-color: #017ac6; box-shadow: inset 0 0 5px $lighter-grey-overlay !important; } - .login-form { - .card { - background: $color-white !important; - border: 1px solid $color-lightgrey !important; - color: $color-lightgrey !important; - - .instructions { - color: $color-darkgrey; - } - } - - input { - background: $color-white !important; - color: $color-black !important; - - &::placeholder { - color: $color-grey !important; - } - } - - .disclaimer { - color: $dark-grey-overlay !important; - - a { - color: $dark-grey-overlay !important; - } - } - - .login-nav-link { - color: $grey-overlay !important; - - &:hover { - color: $grey-overlay !important; - } - - &.error { - color: $color-danger !important; - } - } - - .subdomain-label { - color: $dark-grey-overlay !important; - - .btn-link { - color: $light-grey-overlay; - } - } - } - #charts { .instructions { color: $color-darkgrey; @@ -378,6 +278,7 @@ $partner-brand-color: #017ac6; .btn-purple { background-color: $partner-brand-color !important; + color: $color-white !important; } .text-purple { diff --git a/src/assets/styles/overrides/_dark.scss b/src/assets/styles/overrides/_dark.scss index 627ff15fe..37d9cd9b7 100644 --- a/src/assets/styles/overrides/_dark.scss +++ b/src/assets/styles/overrides/_dark.scss @@ -1,7 +1,5 @@ .dark { #app-nav { - background: $color-black !important; - border-bottom: 1px solid $color-black; .navbar-nav { .active-org { diff --git a/src/assets/styles/overrides/_light.scss b/src/assets/styles/overrides/_light.scss index 0a81137eb..9b92ff143 100644 --- a/src/assets/styles/overrides/_light.scss +++ b/src/assets/styles/overrides/_light.scss @@ -1,7 +1,5 @@ .light { #app-nav { - background: $color-black !important; - border-bottom: 1px solid $color-black; .navbar-nav { .active-org { diff --git a/src/assets/styles/overrides/_lumen.scss b/src/assets/styles/overrides/_lumen.scss deleted file mode 100644 index 8999f2fdc..000000000 --- a/src/assets/styles/overrides/_lumen.scss +++ /dev/null @@ -1,362 +0,0 @@ -$partner-brand-color: #0075c9; - -.lumen { - #app-nav { - background: $color-black !important; - border-bottom: 1px solid $color-black; - - #logo { - background-image: url('../../images/logo/lumen.png'); - - @media screen and (width <= 530px) { - background-image: url('../../images/logo/lumen_e_only.png'); - width: 17px; - } - } - - .navbar-nav { - .active-org { - background: $gradient-white-lightgrey; - border-right-color: $color-grey !important; - - .org-name { - color: $color-black !important; - } - } - - .nav-item { - .btn-link, - .nav-link, - a { - color: $grey-overlay !important; - - &.active { - color: $black-overlay !important; - } - } - } - } - } - - #app-bg-color { - background: $color-white !important; - z-index: -2; - } - - .app-subnav { - background: $partner-brand-color !important; - border-bottom: 1px solid $color-lightgrey; - - .navbar-nav { - .nav-item { - .nav-link { - color: $color-white !important; - - &.active { - color: $color-white !important; - } - } - } - } - - .react-select-container { - .react-select__control, - .react-select__control:hover, - .react-select__control:focus, - .react-select__control--menu-is-open, - .react-select__control--is-focused, - .react-select__indicator-separator { - background: transparent !important; - border-color: $color-white !important; - - .react-select__single-value { - color: $color-white; - } - - .react-select__indicator-separator { - background: $lighter-grey-overlay !important; - } - } - - .react-select__option, - .react-select__option:hover, - .react-select__option:focus, - .react-select__option--is-focused { - background: $color-lightergrey !important; - color: $partner-brand-color !important; - } - - .react-select__menu { - background: $color-lightergrey !important; - } - } - - .filter-holder { - input { - border: 1px solid $lighter-grey-overlay !important; - color: $color-white !important; - } - - .clear-filter { - color: $color-white; - } - - ::placeholder { - color: $whiter-overlay !important; - } - } - - .refresh-instances { - color: $color-white; - } - } - - a { - color: $partner-brand-color !important; - - &:hover { - color: $partner-brand-color !important; - } - } - - hr, - .item-row, - .log-row, - .radio-button > div, - .modal-header, - .card.error, - .card.success, - .past-query { - border-color: $lighter-grey-overlay !important; - } - - .lolight { - background-color: $dark-grey-overlay !important; - border: 1px solid $lighter-grey-overlay !important; - } - - .loader { - .card { - background: $color-white !important; - border: 1px solid $lighter-grey-overlay !important; - box-shadow: 0 0 5px $lighter-grey-overlay !important; - - .card-body { - background: $gradient-white-lightgrey !important; - color: $color-darkgrey !important; - } - } - } - - .floating-card-header { - color: $color-black !important; - - i { - color: $color-grey !important; - } - - .btn-link { - color: $color-black !important; - } - } - - input, - select, - textarea, - .fake-input, - .form-control { - background: $lightest-grey-overlay !important; - color: $color-darkgrey !important; - - &.is-invalid, - &.error { - border: 1px solid $color-danger !important; - } - } - - .radio-checkbox { - &.show { - background-color: $partner-brand-color !important; - border-color: $partner-brand-color !important; - - .dot { - background: $partner-brand-color; - } - } - } - - .entity-manager { - .card { - border: 1px solid $lighter-grey-overlay; - - .item-row { - background: $lightest-grey-overlay !important; - - &.active { - background: $lightest-grey-overlay !important; - } - } - } - - &-footer { - color: $color-black; - } - } - - .content-container { - .header-container { - border-bottom: 1px solid $lighter-grey-overlay; - - .subheader { - color: $partner-brand-color !important; - } - } - } - - .react-select-container { - width: 100%; - - .react-select__control, - .react-select__control:hover, - .react-select__control:focus, - .react-select__control--menu-is-open, - .react-select__control--is-focused, - .react-select__indicator-separator { - background: $lightest-grey-overlay !important; - border-color: transparent !important; - - .react-select__single-value { - color: $color-grey; - } - - .react-select__indicator-separator { - background: $lighter-grey-overlay !important; - } - } - - .react-select__option, - .react-select__option:hover, - .react-select__option:focus, - .react-select__option--is-focused { - background: $color-white !important; - border-bottom: 1px solid $lighter-grey-overlay !important; - color: $color-grey !important; - - &:last-child { - border-bottom: 0 !important; - } - } - - .react-select__menu { - background: $color-white !important; - } - } - - .drop-zone { - background: radial-gradient($lighter-grey-overlay 1px, transparent 0) !important; - background-size: 3px 3px !important; - color: $color-grey !important; - } - - .modal-content { - background: $color-white !important; - color: $color-grey !important; - - .modal-header { - background: $gradient-white-lightgrey !important; - color: $black-overlay !important; - - .btn-close { - &::before { - color: $black-overlay !important; - } - } - } - } - - .structure-reloader { - button { - color: $color-darkgrey !important; - } - } - - .json-editor-holder { - background: $lightest-grey-overlay; - box-shadow: inset 0 0 5px $lighter-grey-overlay !important; - } - - .login-form { - .card { - background: $color-white !important; - border: 1px solid $lighter-grey-overlay !important; - color: $color-lightgrey !important; - - .instructions { - color: $color-darkgrey; - } - } - - input { - background: $lightest-grey-overlay !important; - color: $color-black !important; - - &::placeholder { - color: $color-grey !important; - } - } - - .disclaimer { - color: $dark-grey-overlay !important; - - a { - color: $dark-grey-overlay !important; - } - } - - .login-nav-link { - color: $grey-overlay !important; - - &:hover { - color: $grey-overlay !important; - } - - &.error { - color: $color-danger !important; - } - } - - .subdomain-label { - color: $dark-grey-overlay; - - .btn-link { - color: $light-grey-overlay; - } - } - } - - #charts { - .instructions { - color: $color-darkgrey; - } - - .dashboard-divider { - background: $lighter-grey-overlay; - } - } - - .version { - color: $color-darkgrey !important; - } - - .btn-purple { - background-color: $partner-brand-color !important; - } - - .text-purple { - color: $partner-brand-color !important; - } - - ::placeholder { - color: $light-grey-overlay !important; - } -} diff --git a/src/assets/styles/overrides/_verizon.scss b/src/assets/styles/overrides/_verizon.scss deleted file mode 100644 index dec447472..000000000 --- a/src/assets/styles/overrides/_verizon.scss +++ /dev/null @@ -1,359 +0,0 @@ -$partner-brand-color: #cd040b; - -.verizon { - #app-nav { - background: $color-white !important; - border-bottom: 1px solid $color-lightgrey; - - #logo { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMzYwMSIKICAgdmlld0JveD0iMCAwIDUwMC4wMDAwMSAxMTIuMzE1OTciCiAgIGhlaWdodD0iMTEyLjMxNTk3IgogICB3aWR0aD0iNTAwIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzYwMyIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNjA2Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMTcyNjYsLTQ1NC43OTE3NykiCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8ZwogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMi40NTk2NjUsMCwwLC0yLjQ1OTY2NSw2ODYuMTczMDQsNDU1Ljc5MTc3KSIKICAgICAgIGlkPSJnMzM0NiI+CiAgICAgIDxwYXRoCiAgICAgICAgIGlkPSJwYXRoMzM0OCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2NkMDQwYjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAwLDAgLTExLjAzNSwtMjMuNjYgLTQuMTcsOC45NzcgLTQuNTA3LDAgNi44NDcsLTE0LjY4MyAzLjY0MiwwIEwgNC40NzIsLTAuMDA0IDQuNDcyLDAgMCwwIFoiIC8+CiAgICA8L2c+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgzMzU4IgogICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIGQ9Im0gMzk3Ljc0NjMzLDQ2Ni4zMjY1MSAyMi4wNjA3NCwwIDAsMTkuNTMyMiAtMjIuMDYwNzQsMCAwLC0xOS41MzIyIHogbSAtMTczLjU1ODg4LDk3LjUzMDY0IDIzLjA0NzA2LDAgMjUuMDE0OCwtNzEuOTUyNTggLTIyLjA2MzIsMCAtMTQuMDUyMDYsNDYuMjM0MzIgLTAuMjg1MzMsMCAtMTQuMDUyMDYsLTQ2LjIzNDMyIC0yMi42MjQsMCAyNS4wMTQ3OSw3MS45NTI1OCB6IG0gODAuOTQ1MTIsLTU4LjMxNjIgYyA3LjcyODI2LDAgMTMuMDcwNjYsNS43NjA1NCAxMy45MTE4NiwxNC4xOTIyNyBsIC0yOS4zNzA4NiwwIGMgMS42ODczMywtOC41NzQ0IDYuMzIzOCwtMTQuMTkyMjcgMTUuNDU5LC0xNC4xOTIyNyBtIDEuMTI0MDYsNDQuNTQ0NTMgYyAtOS42OTYsMCAtMTUuNTk2NzMsLTYuMzIzOCAtMTYuNzIzMjYsLTE2LjAxOTggbCA1MS44NTcxMiwwIGMgMC4xNDAzLC0xNS40NTg5OSAtMy45MzMwMSwtMjcuODIzNzMgLTEyLjUwOTg2LC0zNS41NTE5OSAtNi4wNDA5NCwtNS42MjI4IC0xNC4wNTIwNiwtOC43MTQ2IC0yNC4xNjg2NywtOC43MTQ2IC0yMS42NDI1OSwwIC0zNi42ODA5OCwxNi40NDI4NiAtMzYuNjgwOTgsMzcuOTQyOCAwLDIxLjY0MjU5IDE0LjMzNzM5LDM4LjIyNTY1IDM4LjA4NTQ1LDM4LjIyNTY1IDguOTk1LDAgMTYuMTYsLTIuMzkwOCAyMi4wNjMyLC02LjQ2ODkyIDYuMzIzOCwtNC4zNTExNSAxMC44MjAwNiwtMTAuNjc3NDEgMTIuMDg2NzksLTE3LjAwMTIgbCAtMjEuMDgxNzksMCBjIC0yLjEwNTQ3LDQuNzgxNTggLTYuNDY0LDcuNTg4MDYgLTEyLjkyOCw3LjU4ODA2IG0gNDAuMzMzNTksMTMuNzcxNjcgMjEuOTIyOTksMCAwLC0zMy4wMjM0NyBjIDAsLTE1LjAzMzQ3IDguOTkyNTQsLTIxLjY0MjU5IDIyLjc2MTc0LC0xOS44MTUwNiBsIDAuNDIzMDYsMCAwLC0xOC45Njg5MyBjIC0xLjEyNDA2LC0wLjQyMzA2IC0yLjM4ODMzLC0wLjU2MzI3IC00LjQ5NjI2LC0wLjU2MzI3IC04LjU2OTQ4LDAgLTE0LjMzMjQ3LDMuOTM1NDcgLTE5LjI1MTgsMTIuMzY0NzQgbCAtMC40MjMwNiwwIDAsLTExLjk0NjU5IC0yMC45MzY2NywwIDAsNzEuOTUyNTggeiBtIDUxLjE1NjExLDAgMjIuMDYwNzQsMCAwLC03MS45NTI1OCAtMjIuMDYwNzQsMCAwLDcxLjk1MjU4IHogbSAyOC4xMDY1OSwwIDYxLjU1MzEyLDAgMCwtMTcuMjg2NTMgLTM0Ljg1NTkxLDAgMCwtMC40MTgxNCAzMy4zMTEyNCwtMzcuMzc5NTMgMCwtMTYuODY4MzggLTYwLjAwODQ1LDAgMCwxNy4yODY1MiAzMy43MjQ0NywwIDAsMC40MjMwNyAtMzMuNzI0NDcsMzcuNjY0ODQgMCwxNi41NzgxNSB6IG0gMTAwLjQ3NzMyLC0xMy45MDk0MSBjIC0xMC4zOTk0NywwIC0xNS44NzcxNCwtOC43MTQ1OSAtMTUuODc3MTQsLTIxLjkyMjk5IDAsLTEzLjM1MTA2IDUuNDc3NjcsLTIxLjkyNzkyIDE1Ljg3NzE0LC0yMS45Mjc5MiAxMC40MDE5MiwwIDE2LjE2NDkxLDguNTc2ODYgMTYuMTY0OTEsMjEuOTI3OTIgMCwxMy4yMDg0IC01Ljc2Mjk5LDIxLjkyMjk5IC0xNi4xNjQ5MSwyMS45MjI5OSBtIDAuMTQyNjYsLTYwLjAxMDkgYyAtMjIuOTA2ODYsMCAtMzguMjI1NjYsMTYuNDQ1MzIgLTM4LjIyNTY2LDM4LjA4NzkxIDAsMjEuNDk5OTMgMTUuMzE4OCwzOC4wODI5OSAzOC4yMjU2NiwzOC4wODI5OSAyMi45MDQ0LDAgMzguMjIzMTksLTE2LjU4MzA2IDM4LjIyMzE5LC0zOC4wODI5OSAwLC0yMS42NDI1OSAtMTUuMzE4NzksLTM4LjA4NzkxIC0zOC4yMjMxOSwtMzguMDg3OTEgbSA0My4wMDIzMiw3My45MjAzMSAyMS45MjI5OSwwIDAsLTQwLjA1MDczIGMgMCwtOS4xMzI3MyA1LjMzNzQ4LC0xNS41OTY3MyAxMy4yMDU5NCwtMTUuNTk2NzMgNy41OTA1MywwIDExLjUyNTk5LDUuMzM3NDcgMTEuNTI1OTksMTIuOTI4IGwgMCw0Mi43MTk0NiAyMS45MjU0NiwwIDAsLTQ2LjkzNzc5IGMgMCwtMTUuODc3MTQgLTkuNTU1OCwtMjcuMTIwMjcgLTI1LjAxNDgsLTI3LjEyMDI3IC05Ljg0MTEyLDAgLTE2LjcyMzI2LDQuMjE4MzMgLTIxLjkyMDUzLDExLjk0NjYgbCAtMC40MjMwNiwwIDAsLTkuODQxMTIgLTIxLjIyMTk5LDAgMCw3MS45NTI1OCB6IiAvPgogIDwvZz4KPC9zdmc+Cg=='); - height: 20px; - - @media screen and (width <= 530px) { - background-image: url('../../images/logo/lumen_e_only.png'); - width: 17px; - } - } - - .navbar-nav { - .active-org { - background: $gradient-white-lightgrey; - border-right-color: $color-grey !important; - - .org-name { - color: $color-black !important; - } - } - - .nav-item { - .btn-link, - .nav-link, - a { - color: $grey-overlay !important; - - &.active { - color: $black-overlay !important; - } - } - } - } - } - - #app-bg-color { - background: $color-white !important; - z-index: -2; - } - - .app-subnav { - background: $partner-brand-color !important; - border-bottom: 1px solid $color-lightgrey; - - .navbar-nav { - .nav-item { - .nav-link { - color: $color-white !important; - - &.active { - color: $color-white !important; - } - } - } - } - - .react-select-container { - .react-select__control, - .react-select__control:hover, - .react-select__control:focus, - .react-select__control--menu-is-open, - .react-select__control--is-focused, - .react-select__indicator-separator { - background: transparent !important; - border-color: $color-white !important; - - .react-select__single-value { - color: $color-white; - } - - .react-select__indicator-separator { - background: $lighter-grey-overlay !important; - } - } - - .react-select__option, - .react-select__option:hover, - .react-select__option:focus, - .react-select__option--is-focused { - background: $color-lightergrey !important; - color: $partner-brand-color !important; - } - - .react-select__menu { - background: $color-lightergrey !important; - } - } - - .filter-holder { - input { - border: 1px solid $lighter-grey-overlay !important; - color: $color-white !important; - } - - .clear-filter { - color: $color-white; - } - - ::placeholder { - color: $whiter-overlay !important; - } - } - - .refresh-instances { - color: $color-white; - } - } - - a { - color: $partner-brand-color !important; - - &:hover { - color: $partner-brand-color !important; - } - } - - hr, - .item-row, - .log-row, - .radio-button > div, - .modal-header, - .card.error, - .card.success, - .past-query { - border-color: $lighter-grey-overlay !important; - } - - .lolight { - background-color: $dark-grey-overlay !important; - border: 1px solid $lighter-grey-overlay !important; - } - - .loader { - .card { - background: $color-white !important; - border: 1px solid $lighter-grey-overlay !important; - box-shadow: 0 0 5px $lighter-grey-overlay !important; - - .card-body { - background: $gradient-white-lightgrey !important; - color: $color-darkgrey !important; - } - } - } - - .floating-card-header { - color: $color-black !important; - - i { - color: $color-grey !important; - } - - .btn-link { - color: $color-black !important; - } - } - - input, - select, - textarea, - .fake-input, - .form-control { - background: $lightest-grey-overlay !important; - color: $color-darkgrey !important; - - &.is-invalid, - &.error { - border: 1px solid $color-danger !important; - } - } - - .radio-checkbox { - &.show { - background-color: $partner-brand-color !important; - border-color: $partner-brand-color !important; - - .dot { - background: $partner-brand-color; - } - } - } - - .entity-manager { - .card { - border: 1px solid $lighter-grey-overlay; - - .item-row { - background: $lightest-grey-overlay !important; - - &.active { - background: $lightest-grey-overlay !important; - } - } - } - } - - .content-container { - .header-container { - border-bottom: 1px solid $lighter-grey-overlay; - - .subheader { - color: $partner-brand-color !important; - } - } - } - - .react-select-container { - width: 100%; - - .react-select__control, - .react-select__control:hover, - .react-select__control:focus, - .react-select__control--menu-is-open, - .react-select__control--is-focused, - .react-select__indicator-separator { - background: $lightest-grey-overlay !important; - border-color: transparent !important; - - .react-select__single-value { - color: $color-grey; - } - - .react-select__indicator-separator { - background: $lighter-grey-overlay !important; - } - } - - .react-select__option, - .react-select__option:hover, - .react-select__option:focus, - .react-select__option--is-focused { - background: $color-white !important; - border-bottom: 1px solid $lighter-grey-overlay !important; - color: $color-grey !important; - - &:last-child { - border-bottom: 0 !important; - } - } - - .react-select__menu { - background: $color-white !important; - } - } - - .drop-zone { - background: radial-gradient($lighter-grey-overlay 1px, transparent 0) !important; - background-size: 3px 3px !important; - color: $color-grey !important; - } - - .modal-content { - background: $color-white !important; - color: $color-grey !important; - - .modal-header { - background: $gradient-white-lightgrey !important; - color: $black-overlay !important; - - .btn-close { - &::before { - color: $black-overlay !important; - } - } - } - } - - .structure-reloader { - button { - color: $color-darkgrey !important; - } - } - - .json-editor-holder { - background: $lightest-grey-overlay; - box-shadow: inset 0 0 5px $lighter-grey-overlay !important; - } - - .login-form { - .card { - background: $color-white !important; - border: 1px solid $lighter-grey-overlay !important; - color: $color-lightgrey !important; - - .instructions { - color: $color-darkgrey; - } - } - - input { - background: $lightest-grey-overlay !important; - color: $color-black !important; - - &::placeholder { - color: $color-grey !important; - } - } - - .disclaimer { - color: $dark-grey-overlay !important; - - a { - color: $dark-grey-overlay !important; - } - } - - .login-nav-link { - color: $grey-overlay !important; - - &:hover { - color: $grey-overlay !important; - } - - &.error { - color: $color-danger !important; - } - } - - .subdomain-label { - color: $dark-grey-overlay; - - .btn-link { - color: $light-grey-overlay; - } - } - } - - #charts { - .instructions { - color: $color-darkgrey; - } - - .dashboard-divider { - background: $lighter-grey-overlay; - } - } - - .version { - color: $color-darkgrey !important; - } - - .btn-purple { - background-color: $partner-brand-color !important; - } - - .text-purple { - color: $partner-brand-color !important; - } - - ::placeholder { - color: $light-grey-overlay !important; - } -} diff --git a/src/assets/styles/pages/_auth.scss b/src/assets/styles/pages/_auth.scss index bcc20ff69..3da34774a 100644 --- a/src/assets/styles/pages/_auth.scss +++ b/src/assets/styles/pages/_auth.scss @@ -16,11 +16,11 @@ } .auth-title { - font-size: 3.25rem !important; + font-size: 2.25rem !important; margin-bottom: 0.5rem !important; } .auth-subtitle { - font-size: 1.65rem; + font-size: 1.2rem; font-family: $font-family-ubuntu; font-weight: 100 !important; } @@ -32,7 +32,7 @@ .item-title { font-weight: $font-weight-bold; - font-size: 1.5rem !important; + font-size: 1.2rem !important; margin-bottom: 0.5rem !important; } .item-subtitle { diff --git a/src/assets/styles/pages/_config.scss b/src/assets/styles/pages/_config.scss index 7d3ce7916..f2917f495 100644 --- a/src/assets/styles/pages/_config.scss +++ b/src/assets/styles/pages/_config.scss @@ -24,7 +24,7 @@ } .item-scroller { - height: calc(100vh - 494px); + height: calc(100vh - 434px); overflow: hidden auto; .item-row { diff --git a/src/assets/styles/pages/_instances.scss b/src/assets/styles/pages/_instances.scss index ae3cf43d4..4760c9233 100644 --- a/src/assets/styles/pages/_instances.scss +++ b/src/assets/styles/pages/_instances.scss @@ -1,6 +1,6 @@ #instances { .navbar-nav { - max-width: 400px; + max-width: 500px; } .card { diff --git a/src/components/TopNav.js b/src/components/TopNav.js index a7ee65ec0..fca3d3bef 100644 --- a/src/components/TopNav.js +++ b/src/components/TopNav.js @@ -72,7 +72,7 @@ function TopNav({ isMaintenance, loggedIn = false }) {