Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rnd 287 UI dark mode #1546

Merged
merged 2 commits into from
Dec 20, 2023
Merged

Rnd 287 UI dark mode #1546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0addef
UI dark mode
otabek-memphis Dec 20, 2023
aebfbb1
UI dark mode
otabek-memphis Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 18 additions & 24 deletions ui_src/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions ui_src/src/components/sideBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,15 +238,15 @@ function SideBar() {

const MenuItem = ({ icon, activeIcon, name, route, onClick, onMouseEnter, onMouseLeave, badge }) => {
return (
<div className={'item-wrapper ' + (state.route === route ? 'ms-active' : '')} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
<div className={'item-wrapper ' + (state.route === route ? 'ms-active ' : '') + (hoveredItem === route ? 'item-wrapper-hovered' : '')} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
<div className="icon">{state.route === route ? activeIcon : hoveredItem === route ? activeIcon : icon}</div>
<p className={state.route === route ? 'checked' : 'name'}>{name}</p>
{badge && <label className="badge">{badge}</label>}
</div>
);
};

const PopoverActionItem = ({ icon, name, onClick, upgrade }) => {
const PopoverActionItem = ({icon, name, onClick, upgrade}) => {
upgrade && setBannerType('upgrade');
return (
<div
Expand Down
55 changes: 39 additions & 16 deletions ui_src/src/dark-style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ html.dark-mode {

button, .upgrade-button-wrapper, .integration-name svg, .memphis-gif svg, .data-box svg,
.canvas-wrapper svg, .circle-img svg, .versions svg, .logo-wrapper svg, .schema-box-wrapper .is-used svg,
.station-meta svg, .details-wrapper svg, .item-wrapper.ms-active .icon svg, .item-wrap .icons svg, .loader-uploading svg,
.station-meta svg, .details-wrapper svg, .item-wrap .icons svg, .loader-uploading svg,
svg.lock-feature-icon, .ant-modal-content button svg, svg.icons-sidebar, .station-overview-container svg,
.header-icon svg, .header-img-container svg, .integrate-header svg, deatils downloads svg,
.git-repos-item .repo-item-icon-memphis, .ant-drawer-header-title svg {
Expand All @@ -47,10 +47,6 @@ html.dark-mode {
filter: initial;
}

//.ant-drawer-header-title svg {
// filter: $color-invert-filter-reverse;
//}

.bottom-sidebar-icons .item-wrap svg path, {
fill: $color-text-dark !important;
filter: $color-invert-filter !important;
Expand Down Expand Up @@ -115,7 +111,7 @@ html.dark-mode {
}

.station-overview-container .pubSub-list-container .header, .ant-tabs-top > .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;
}

Expand Down Expand Up @@ -180,7 +176,7 @@ html.dark-mode {
}

.ant-collapse-item {
background: transparent!important;
background: transparent !important;
}
}

Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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] {
Expand All @@ -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;
}
}

Expand All @@ -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 {
Expand All @@ -474,18 +479,36 @@ 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;
}

.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;
}

}