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

Introducing consistency in colors for deposits across pages #8382

Merged
merged 12 commits into from
Oct 30, 2024
Merged

Introducing consistency in colors for deposits across pages #8382

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 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
b44de0e
Merge branch 'develop' into fix/7761-align-deposit-colors
Jinksi Oct 29, 2024
a472872
Remove whitespace changes to keep PR changes focused
Jinksi Oct 29, 2024
cf2d289
Update colors to match design
Jinksi Oct 29, 2024
c8352f4
Update deposit status chip colors to match design
Jinksi Oct 29, 2024
c15d738
Merge branch 'develop' into fix/7761-align-deposit-colors
Oct 30, 2024
997e6c3
Merge branch 'develop' into fix/7761-align-deposit-colors
Jinksi Oct 30, 2024
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
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
Loading

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
Loading