From a0addef88ee1f9bcfaa6522b8ba28faab1ebeb86 Mon Sep 17 00:00:00 2001 From: otabekgh Date: Wed, 20 Dec 2023 18:14:42 +0300 Subject: [PATCH 1/2] UI dark mode --- ui_src/src/components/sideBar/index.js | 4 +- ui_src/src/dark-style.scss | 55 ++++++++++++++++++-------- 2 files changed, 41 insertions(+), 18 deletions(-) diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js index bc03833bb..e177072a7 100644 --- a/ui_src/src/components/sideBar/index.js +++ b/ui_src/src/components/sideBar/index.js @@ -238,7 +238,7 @@ function SideBar() { const MenuItem = ({ icon, activeIcon, name, route, onClick, onMouseEnter, onMouseLeave, badge }) => { return ( -
+
{state.route === route ? activeIcon : hoveredItem === route ? activeIcon : icon}

{name}

{badge && } @@ -246,7 +246,7 @@ function SideBar() { ); }; - const PopoverActionItem = ({ icon, name, onClick, upgrade }) => { + const PopoverActionItem = ({icon, name, onClick, upgrade}) => { upgrade && setBannerType('upgrade'); return (
.ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before, - .pubSub-list-container .coulmns-table, .station-overview-header .details .info-buttons .audit, { + .pubSub-list-container .coulmns-table, .station-overview-header .details .info-buttons .audit, { border-color: $color-border-medium !important; } @@ -180,7 +176,7 @@ html.dark-mode { } .ant-collapse-item { - background: transparent!important; + background: transparent !important; } } @@ -271,16 +267,19 @@ html.dark-mode { } .function-box-wrapper { - background: $color-background-medium!important; + background: $color-background-medium !important; border-color: transparent; + .button-container.uninstall-btn { filter: $color-invert-filter-reverse; } + footer { border-color: $color-border-medium; } + .function-name > * { - color: $color-text-dark!important; + color: $color-text-dark !important; } } @@ -387,38 +386,44 @@ html.dark-mode { .badgeGreen { background: #86e1ac; } + .badgeOrange { background: #f5cfab; } .function-drawer-container { .ant-tree { - background: transparent!important; + background: transparent !important; } + .drawer-header svg { filter: $color-invert-filter-reverse; } + .action-section-btn .header-flex:nth-child(1), .action-section-btn .button-container:nth-child(2) button { filter: none; } } + .users-container .user-action .button-container button { filter: initial; } + .ant-table-cell.ant-table-cell-row-hover { - background: darken(#E6EAE8, 3%)!important; + background: darken(#E6EAE8, 3%) !important; } .requests-container .usage-details .segment-data .tab-container, .stigg-customer-portal-subscriptions-overview, .stigg-payment-details-section-layout, .stigg-invoices-section-layout { - background: darken(#E6EAE8, 2%)!important; + background: darken(#E6EAE8, 2%) !important; } .stigg-plan-offering-container, .stigg-period-picker-container { background: darken(#E6EAE8, 2%); } + .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-plan-entitlements-container .stigg-plan-entitlements-title { - background: transparent!important; + background: transparent !important; } .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-header-wrapper .stigg-paywall-plan-button-layout button[disabled] { @@ -435,12 +440,12 @@ html.dark-mode { } .ms-function-card-inner, .tab-functions-inner-add { - border-color: $color-border-light!important; + border-color: $color-border-light !important; } .ant-form-item { .ant-select-selector, input { - background-color: transparent!important; + background-color: transparent !important; } } @@ -462,7 +467,7 @@ html.dark-mode { } .log-content-wrapper log-header, .log-content-wrapper log-content { - border-color: $color-border-light!important; + border-color: $color-border-light !important; } .logs-wrapper logs, .log-content-wrapper { @@ -474,6 +479,10 @@ html.dark-mode { filter: none; } + .ant-form-item-control-input-content .button-container { + display: none; + } + .logs-wrapper logs .logsl .even .log-payload { background: $color-background-light; } @@ -481,11 +490,25 @@ html.dark-mode { .log-badge-container .badge.warn { background-color: rgb(160 128 22); } + .log-badge-container .badge.info { background-color: #939595; } + .log-badge-container .error { background-color: rgb(228 128 102); } + input[type="text"], .ant-input-password, .ant-select.select, .install-copy { + border-color: $color-border-medium !important; + } + + .ant-form-item-control-input-content .button-container:first-child button { + filter: none; + } + + .item-wrapper.ms-active .icon svg, .item-wrapper.item-wrapper-hovered .icon svg, { + filter: $color-invert-filter-reverse !important; + } + } \ No newline at end of file From aebfbb15ecd865ce83e4c4034360de844af02c91 Mon Sep 17 00:00:00 2001 From: otabekgh Date: Wed, 20 Dec 2023 18:15:26 +0300 Subject: [PATCH 2/2] UI dark mode --- ui_src/package-lock.json | 42 +++++++++++++++++----------------------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/ui_src/package-lock.json b/ui_src/package-lock.json index 44fa2cc85..aee69dfe0 100644 --- a/ui_src/package-lock.json +++ b/ui_src/package-lock.json @@ -110,7 +110,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==", - "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -1526,7 +1525,6 @@ "version": "7.23.2", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.2.tgz", "integrity": "sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -1535,7 +1533,6 @@ "version": "7.23.2", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz", "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==", - "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.22.13", @@ -1629,7 +1626,6 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz", "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==", - "dev": true, "dependencies": { "@babel/compat-data": "^7.22.9", "@babel/helper-validator-option": "^7.22.15", @@ -1755,7 +1751,6 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz", "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==", - "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-module-imports": "^7.22.15", @@ -1828,7 +1823,6 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz", "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==", - "dev": true, "dependencies": { "@babel/types": "^7.22.5" }, @@ -1879,7 +1873,6 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz", "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -1902,7 +1895,6 @@ "version": "7.23.2", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz", "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==", - "dev": true, "dependencies": { "@babel/template": "^7.22.15", "@babel/traverse": "^7.23.2", @@ -9473,7 +9465,6 @@ "version": "4.22.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", - "dev": true, "funding": [ { "type": "opencollective", @@ -9654,7 +9645,6 @@ "version": "1.0.30001549", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz", "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==", - "dev": true, "funding": [ { "type": "opencollective", @@ -10242,8 +10232,7 @@ "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", - "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", - "dev": true + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" }, "node_modules/cookie": { "version": "0.5.0", @@ -11646,8 +11635,7 @@ "node_modules/electron-to-chromium": { "version": "1.4.556", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.556.tgz", - "integrity": "sha512-6RPN0hHfzDU8D56E72YkDvnLw5Cj2NMXZGg3UkgyoHxjVhG99KZpsKgBWMmTy0Ei89xwan+rbRsVB9yzATmYzQ==", - "dev": true + "integrity": "sha512-6RPN0hHfzDU8D56E72YkDvnLw5Cj2NMXZGg3UkgyoHxjVhG99KZpsKgBWMmTy0Ei89xwan+rbRsVB9yzATmYzQ==" }, "node_modules/element-resize-event": { "version": "3.0.6", @@ -11987,7 +11975,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, "engines": { "node": ">=6" } @@ -13815,7 +13802,6 @@ "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -19032,7 +19018,6 @@ "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true, "bin": { "json5": "lib/cli.js" }, @@ -19745,7 +19730,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", - "dev": true, "dependencies": { "yallist": "^3.0.2" } @@ -21249,8 +21233,7 @@ "node_modules/node-releases": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", - "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", - "dev": true + "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==" }, "node_modules/normalize-path": { "version": "3.0.0", @@ -27535,7 +27518,6 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, "bin": { "semver": "bin/semver.js" } @@ -29495,6 +29477,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/typewise": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz", @@ -29815,7 +29811,6 @@ "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -31072,8 +31067,7 @@ "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" }, "node_modules/yaml": { "version": "1.10.2",