Skip to content

Commit

Permalink
fix: ENG-3436 update widget colour (#667)
Browse files Browse the repository at this point in the history 
* fix: use new Donate blue in widget

* Update snaps
  • Loading branch information
@AndyEPhipps
AndyEPhipps authored Aug 7, 2024
1 parent a721911 commit 3e97285
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 34 deletions.
38 changes: 19 additions & 19 deletions src/components/Organisms/Donate/Donate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand All @@ -36,7 +36,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
desktopOverlayColor="blue_dark"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
Expand Down Expand Up @@ -64,7 +64,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
desktopOverlayColor="blue_dark"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
Expand All @@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
desktopOverlayColor="blue_dark"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
Expand Down Expand Up @@ -217,7 +217,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
<Donate
alt="Background image"
mobileBackgroundColor="transparent"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
desktopOverlayColor="transparent"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
Expand Down Expand Up @@ -247,7 +247,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="transparent"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand All @@ -272,7 +272,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand All @@ -297,7 +297,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;

<Donate
mobileBackgroundColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={false}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand All @@ -321,7 +321,7 @@ import data from './dev-data/data-single';

<Donate
desktopOverlayColor="blue_dark"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
mobileBackgroundColor="blue_dark"
formAlignRight={false}
data={data}
Expand All @@ -346,7 +346,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
<Donate
alt="Background image"
mobileBackgroundColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
desktopOverlayColor="red"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
Expand Down Expand Up @@ -375,7 +375,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -404,7 +404,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -432,7 +432,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -460,7 +460,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -488,7 +488,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand All @@ -515,7 +515,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -543,7 +543,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -574,7 +574,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down Expand Up @@ -605,7 +605,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
alt="Background image"
mobileBackgroundColor="deep_violet_dark"
desktopOverlayColor="red"
submitButtonColor="blue_dark"
submitButtonColor="blue_donate"
formAlignRight={true}
imageLow={desktopPictures.imageLow}
images={desktopPictures.images}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Switch = styled.span`
display: block;
position: absolute;
transition: left 0.15s ease-out;
background-color: ${({ theme }) => theme.color('blue')};
background-color: ${({ theme }) => theme.color('blue_donate')};
left: 2px;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
`;
Expand Down Expand Up @@ -42,7 +42,7 @@ const MoneyBox = styled.div`
${hideVisually}
}
input:focus:not(:checked) + label {
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
}
`;

Expand All @@ -68,7 +68,7 @@ const Label = styled.label`
&:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
}
`;

Expand Down
4 changes: 2 additions & 2 deletions src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ const MoneyBuyButton = styled(Input)`
&:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
}
&:active:focus {
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
}
${({ isSelected }) => isSelected
&& css`
background-color: ${({ theme }) => theme.color('blue')};
background-color: ${({ theme }) => theme.color('blue_donate')};
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
color: ${({ theme }) => theme.color('white')};
&:focus {
Expand Down
20 changes: 10 additions & 10 deletions src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
position: absolute;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
background-color: #0565D1;
background-color: #2042AD;
left: 2px;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
}
Expand Down Expand Up @@ -327,7 +327,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
}
.c8 input:focus:not(:checked) + label {
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
.c10 {
Expand Down Expand Up @@ -366,7 +366,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
.c10:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
.c9 {
Expand Down Expand Up @@ -405,7 +405,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
.c9:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
@media (min-width:740px) {
Expand Down Expand Up @@ -958,7 +958,7 @@ exports[`Monthly donation renders correctly 1`] = `
position: absolute;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
background-color: #0565D1;
background-color: #2042AD;
left: 2px;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
}
Expand Down Expand Up @@ -1007,7 +1007,7 @@ exports[`Monthly donation renders correctly 1`] = `
}
.c8 input:focus:not(:checked) + label {
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
.c9 {
Expand Down Expand Up @@ -1046,7 +1046,7 @@ exports[`Monthly donation renders correctly 1`] = `
.c9:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
@media (min-width:740px) {
Expand Down Expand Up @@ -1426,7 +1426,7 @@ exports[`Single donation renders correctly 1`] = `
.c13 input:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
.c13 input:active:focus {
Expand All @@ -1447,15 +1447,15 @@ exports[`Single donation renders correctly 1`] = `
border-radius: 10px;
box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
height: auto;
background-color: #0565D1;
background-color: #2042AD;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
color: #FFFFFF;
}
.c18 input:focus {
border: none;
outline: none;
box-shadow: inset 0 0 0 4px #0565D1;
box-shadow: inset 0 0 0 4px #2042AD;
}
.c18 input:active:focus {
Expand Down

0 comments on commit 3e97285

Please sign in to comment.