fix: POS background color optimized in dark mode (#36287)

fix: POS dark theme compatability

Co-authored-by: Ritvik Sardana <ritviksardana@Ritviks-MacBook-Air.local>
This commit is contained in:
RitvikSardana 2023-07-25 13:01:10 +05:30 committed by GitHub
parent 30554301c9
commit 62ca89b10f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -34,7 +34,7 @@
} }
.abbr { .abbr {
background-color: var(--gray-50); background-color: var(--control-bg);
font-size: var(--text-3xl); font-size: var(--text-3xl);
} }
@ -72,7 +72,7 @@
.highlighted-numpad-btn { .highlighted-numpad-btn {
box-shadow: inset 0 0px 4px 0px rgba(0, 0, 0, 0.15) !important; box-shadow: inset 0 0px 4px 0px rgba(0, 0, 0, 0.15) !important;
font-weight: 700; font-weight: 700;
background-color: var(--gray-50); background-color: var(--control-bg);
} }
> .items-selector { > .items-selector {
@ -152,7 +152,6 @@
margin-bottom: 0px; margin-bottom: 0px;
min-height: 8rem; min-height: 8rem;
height: 8rem; height: 8rem;
color: var(--gray-500);
> img { > img {
@extend .image; @extend .image;
@ -242,7 +241,7 @@
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 50%; border-radius: 50%;
color: var(--gray-500); color: var(--text-light);
margin-right: var(--margin-md); margin-right: var(--margin-md);
> img { > img {
@ -268,7 +267,6 @@
} }
>.customer-desc { >.customer-desc {
color: var(--gray-600);
font-weight: 500; font-weight: 500;
font-size: var(--text-sm); font-size: var(--text-sm);
} }
@ -363,7 +361,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--gray-50); background-color: var(--control-bg);
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
font-size: var(--text-md); font-size: var(--text-md);
font-weight: 500; font-weight: 500;
@ -385,7 +383,7 @@
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
&:hover { &:hover {
background-color: var(--gray-50); background-color: var(--control-bg);
} }
> .item-image { > .item-image {
@ -395,7 +393,7 @@
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
color: var(--gray-500); color: var(--text-light);
margin-right: var(--margin-md); margin-right: var(--margin-md);
> img { > img {
@ -537,13 +535,13 @@
> .edit-cart-btn { > .edit-cart-btn {
@extend .primary-action; @extend .primary-action;
display: none; display: none;
background-color: var(--gray-300); background-color: var(--control-bg);
font-weight: 500; font-weight: 500;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: var(--gray-600); background-color: var(--control-bg);
color: white; color: var(--text-light);
font-weight: 700; font-weight: 700;
} }
} }
@ -832,13 +830,13 @@
> .shortcut { > .shortcut {
@extend .pointer-no-select; @extend .pointer-no-select;
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
background-color: var(--gray-100); background-color: var(--control-bg);
font-weight: 500; font-weight: 500;
padding: var(--padding-xs) var(--padding-sm); padding: var(--padding-xs) var(--padding-sm);
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
&:hover { &:hover {
background-color: var(--gray-300); background-color: var(--control-bg);
} }
} }
} }
@ -912,7 +910,7 @@
> .totals { > .totals {
display: flex; display: flex;
background-color: var(--gray-100); background-color: var(--control-bg);
justify-content: center; justify-content: center;
padding: var(--padding-md); padding: var(--padding-md);
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
@ -924,7 +922,6 @@
> .total-label { > .total-label {
font-size: var(--text-md); font-size: var(--text-md);
font-weight: 500; font-weight: 500;
color: var(--gray-600);
} }
> .value { > .value {
@ -1036,7 +1033,6 @@
> .customer-email { > .customer-email {
font-size: var(--text-md); font-size: var(--text-md);
font-weight: 500; font-weight: 500;
color: var(--gray-600);
} }
> .cashier { > .cashier {
@ -1071,7 +1067,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
background-color: var(--gray-50); background-color: var(--control-bg);
margin: var(--margin-md) 0px; margin: var(--margin-md) 0px;
> .summary-row-wrapper { > .summary-row-wrapper {