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

Introducing consistency in colors for deposits across pages #8382

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
+24 −8
Open

Introducing consistency in colors for deposits across pages #8382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f246955
Introducing consistency in deposits across pages
naman03malhotra Mar 14, 2024
2593bcb
removed unwanted changes
naman03malhotra Mar 14, 2024
ed43d85
added changelog
naman03malhotra Mar 14, 2024
9d8c275
Merge branch 'develop' into fix/7761-align-deposit-colors
jessy-p Mar 15, 2024
e9725aa
Merge branch 'develop' into fix/7761-align-deposit-colors
shendy-a8c Mar 17, 2024
b0825cf
Merge branch 'develop' into fix/7761-align-deposit-colors
haszari Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/fix-7761-align-deposit-colors
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fix

Introducing consistency in colors for deposits across pages
28 changes: 20 additions & 8 deletions client/deposits/details/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@
height: 0.85em;

&.is-paid {
background: $studio-green-50;
border-color: $studio-green-5;
background: $wp-green-70;
border-color: $wp-green-0;
}

&.is-pending,
Copy link
Contributor

@nagpai nagpai Mar 16, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find a canceled state showing in grey in the issue description.

There is an image shared in the issue with slightly different brighter shades ( probably studio ) . I had to recopy this image here since it had some weird private URL.

image

We may want to use the wp-admin shade equivalents, that are slightly darker / a bit dull compared to the screenshot in the issue. @rogermattic may kindly reconfirm.

Secondly, in transit and pending states are both yellow.

As per the Acceptable criteria in the issue, we need to use shades of blue for in transit.

So maybe

Suggested change
&.is-pending,
&.is-pending {
background: $wp-blue-70;
border-color: $wp-blue-0;
}
&.is-canceled {
background: $wp-gray-70;
border-color: $wp-gray-blue;
}

The gray color may end up looking almost black, though.

image

We probably need a different shade?

&.is-in_transit {
background: $studio-yellow-30;
border-color: $studio-yellow-5;
background: $wp-yellow-70;
border-color: $wp-yellow-0;
}

&.is-failed {
background: $studio-red-50;
border-color: $studio-red-5;
background: $wp-red-70;
border-color: $wp-red-0;
}
}

Expand All @@ -27,18 +29,19 @@
font-size: 14px;
line-height: 20px;
}

.woocommerce-summary__item-value {
font-size: 20px;
line-height: 28px;
}
}

.wcpay-deposit-fee {
color: $studio-red-50;
color: $wp-red-70;
}

.wcpay-deposit-net {
color: $studio-green-30;
color: $wp-green-70;
}

.wcpay-deposit-automatic ul {
Expand All @@ -50,6 +53,7 @@
border-bottom: 0;
background-color: inherit;
color: inherit;

.woocommerce-summary__item-label:hover {
color: inherit;
}
Expand All @@ -75,31 +79,39 @@
.woocommerce-summary__item-label {
margin-bottom: 12px;
}

.woocommerce-summary__item-data {
margin-top: 0;
margin-bottom: 8px;
}

.wcpay-summary__item-detail {
color: $dark-gray-500;
}

/* Hide unused SummaryNumber fields */
.woocommerce-summary__item-prev-value,
.woocommerce-summary__item-delta {
display: none;
}

.woocommerce-summary__item {
background: $studio-white;

&:hover .woocommerce-summary__item-label {
color: $gray-700;
}
}

a.woocommerce-summary__item {
&:hover {
background-color: $studio-gray-0;

&:hover .woocommerce-summary__item-label {
color: var( --wp-admin-theme-color );
}
}

&:active {
background-color: $studio-gray-5;
}
Expand Down