@comicrelief/component-library 8.1.0 → 8.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Organisms/Donate/Donate.md +19 -19
  2. package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.style.js +3 -3
  3. package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +2 -2
  4. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +10 -10
  5. package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +10 -5
  6. package/package.json +1 -1
  7. package/src/components/Organisms/Donate/Donate.md +19 -19
  8. package/src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js +3 -3
  9. package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js +2 -2
  10. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +10 -10
  11. package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +1 -0
package/dist/components/Organisms/Donate/Donate.md CHANGED
@@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
11
11
  alt="Background image"
12
12
  mobileBackgroundColor="deep_violet_dark"
13
13
  desktopOverlayColor="red"
14
- submitButtonColor="blue_dark"
14
+ submitButtonColor="blue_donate"
15
15
  formAlignRight={true}
16
16
  imageLow={desktopPictures.imageLow}
17
17
  images={desktopPictures.images}
@@ -36,7 +36,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
36
36
 
37
37
  <Donate
38
38
  mobileBackgroundColor="blue_dark"
39
- submitButtonColor="blue_dark"
39
+ submitButtonColor="blue_donate"
40
40
  desktopOverlayColor="blue_dark"
41
41
  formAlignRight={false}
42
42
  imageLow={desktopPictures.imageLow}
@@ -64,7 +64,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
64
64
 
65
65
  <Donate
66
66
  mobileBackgroundColor="blue_dark"
67
- submitButtonColor="blue_dark"
67
+ submitButtonColor="blue_donate"
68
68
  desktopOverlayColor="blue_dark"
69
69
  formAlignRight={false}
70
70
  imageLow={desktopPictures.imageLow}
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
91
91
 
92
92
  <Donate
93
93
  mobileBackgroundColor="blue_dark"
94
- submitButtonColor="blue_dark"
94
+ submitButtonColor="blue_donate"
95
95
  desktopOverlayColor="blue_dark"
96
96
  formAlignRight={false}
97
97
  imageLow={desktopPictures.imageLow}
@@ -217,7 +217,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
217
217
  <Donate
218
218
  alt="Background image"
219
219
  mobileBackgroundColor="transparent"
220
- submitButtonColor="blue_dark"
220
+ submitButtonColor="blue_donate"
221
221
  desktopOverlayColor="transparent"
222
222
  formAlignRight={true}
223
223
  imageLow={desktopPictures.imageLow}
@@ -247,7 +247,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
247
247
 
248
248
  <Donate
249
249
  mobileBackgroundColor="transparent"
250
- submitButtonColor="blue_dark"
250
+ submitButtonColor="blue_donate"
251
251
  formAlignRight={false}
252
252
  imageLow={desktopPictures.imageLow}
253
253
  images={desktopPictures.images}
@@ -272,7 +272,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
272
272
 
273
273
  <Donate
274
274
  mobileBackgroundColor="blue_dark"
275
- submitButtonColor="blue_dark"
275
+ submitButtonColor="blue_donate"
276
276
  formAlignRight={false}
277
277
  imageLow={desktopPictures.imageLow}
278
278
  images={desktopPictures.images}
@@ -297,7 +297,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
297
297
 
298
298
  <Donate
299
299
  mobileBackgroundColor="blue_dark"
300
- submitButtonColor="blue_dark"
300
+ submitButtonColor="blue_donate"
301
301
  formAlignRight={false}
302
302
  imageLow={desktopPictures.imageLow}
303
303
  images={desktopPictures.images}
@@ -321,7 +321,7 @@ import data from './dev-data/data-single';
321
321
 
322
322
  <Donate
323
323
  desktopOverlayColor="blue_dark"
324
- submitButtonColor="blue_dark"
324
+ submitButtonColor="blue_donate"
325
325
  mobileBackgroundColor="blue_dark"
326
326
  formAlignRight={false}
327
327
  data={data}
@@ -346,7 +346,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
346
346
  <Donate
347
347
  alt="Background image"
348
348
  mobileBackgroundColor="red"
349
- submitButtonColor="blue_dark"
349
+ submitButtonColor="blue_donate"
350
350
  desktopOverlayColor="red"
351
351
  formAlignRight={true}
352
352
  imageLow={desktopPictures.imageLow}
@@ -375,7 +375,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
375
375
  alt="Background image"
376
376
  mobileBackgroundColor="deep_violet_dark"
377
377
  desktopOverlayColor="red"
378
- submitButtonColor="blue_dark"
378
+ submitButtonColor="blue_donate"
379
379
  formAlignRight={true}
380
380
  imageLow={desktopPictures.imageLow}
381
381
  images={desktopPictures.images}
@@ -404,7 +404,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
404
404
  alt="Background image"
405
405
  mobileBackgroundColor="deep_violet_dark"
406
406
  desktopOverlayColor="red"
407
- submitButtonColor="blue_dark"
407
+ submitButtonColor="blue_donate"
408
408
  formAlignRight={true}
409
409
  imageLow={desktopPictures.imageLow}
410
410
  images={desktopPictures.images}
@@ -432,7 +432,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
432
432
  alt="Background image"
433
433
  mobileBackgroundColor="deep_violet_dark"
434
434
  desktopOverlayColor="red"
435
- submitButtonColor="blue_dark"
435
+ submitButtonColor="blue_donate"
436
436
  formAlignRight={true}
437
437
  imageLow={desktopPictures.imageLow}
438
438
  images={desktopPictures.images}
@@ -460,7 +460,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
460
460
  alt="Background image"
461
461
  mobileBackgroundColor="deep_violet_dark"
462
462
  desktopOverlayColor="red"
463
- submitButtonColor="blue_dark"
463
+ submitButtonColor="blue_donate"
464
464
  formAlignRight={true}
465
465
  imageLow={desktopPictures.imageLow}
466
466
  images={desktopPictures.images}
@@ -488,7 +488,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
488
488
  alt="Background image"
489
489
  mobileBackgroundColor="deep_violet_dark"
490
490
  desktopOverlayColor="red"
491
- submitButtonColor="blue_dark"
491
+ submitButtonColor="blue_donate"
492
492
  formAlignRight={true}
493
493
  imageLow={desktopPictures.imageLow}
494
494
  images={desktopPictures.images}
@@ -515,7 +515,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
515
515
  alt="Background image"
516
516
  mobileBackgroundColor="deep_violet_dark"
517
517
  desktopOverlayColor="red"
518
- submitButtonColor="blue_dark"
518
+ submitButtonColor="blue_donate"
519
519
  formAlignRight={true}
520
520
  imageLow={desktopPictures.imageLow}
521
521
  images={desktopPictures.images}
@@ -543,7 +543,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
543
543
  alt="Background image"
544
544
  mobileBackgroundColor="deep_violet_dark"
545
545
  desktopOverlayColor="red"
546
- submitButtonColor="blue_dark"
546
+ submitButtonColor="blue_donate"
547
547
  formAlignRight={true}
548
548
  imageLow={desktopPictures.imageLow}
549
549
  images={desktopPictures.images}
@@ -574,7 +574,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
574
574
  alt="Background image"
575
575
  mobileBackgroundColor="deep_violet_dark"
576
576
  desktopOverlayColor="red"
577
- submitButtonColor="blue_dark"
577
+ submitButtonColor="blue_donate"
578
578
  formAlignRight={true}
579
579
  imageLow={desktopPictures.imageLow}
580
580
  images={desktopPictures.images}
@@ -605,7 +605,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
605
605
  alt="Background image"
606
606
  mobileBackgroundColor="deep_violet_dark"
607
607
  desktopOverlayColor="red"
608
- submitButtonColor="blue_dark"
608
+ submitButtonColor="blue_donate"
609
609
  formAlignRight={true}
610
610
  imageLow={desktopPictures.imageLow}
611
611
  images={desktopPictures.images}
package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.style.js CHANGED
@@ -16,7 +16,7 @@ const Switch = exports.Switch = _styledComponents.default.span.withConfig({
16
16
  let {
17
17
  theme
18
18
  } = _ref;
19
- return theme.color('blue');
19
+ return theme.color('blue_donate');
20
20
  });
21
21
  const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
22
22
  displayName: "GivingSelectorstyle__Wrapper",
@@ -39,7 +39,7 @@ const MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
39
39
  let {
40
40
  theme
41
41
  } = _ref4;
42
- return theme.color('blue');
42
+ return theme.color('blue_donate');
43
43
  });
44
44
  const Label = exports.Label = _styledComponents.default.label.withConfig({
45
45
  displayName: "GivingSelectorstyle__Label",
@@ -69,5 +69,5 @@ const Label = exports.Label = _styledComponents.default.label.withConfig({
69
69
  let {
70
70
  theme
71
71
  } = _ref9;
72
- return theme.color('blue');
72
+ return theme.color('blue_donate');
73
73
  });
package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js CHANGED
@@ -47,7 +47,7 @@ const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig
47
47
  let {
48
48
  theme
49
49
  } = _ref7;
50
- return theme.color('blue');
50
+ return theme.color('blue_donate');
51
51
  }, _ref8 => {
52
52
  let {
53
53
  isSelected
@@ -56,7 +56,7 @@ const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig
56
56
  let {
57
57
  theme
58
58
  } = _ref9;
59
- return theme.color('blue');
59
+ return theme.color('blue_donate');
60
60
  }, _ref10 => {
61
61
  let {
62
62
  theme
package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap CHANGED
@@ -278,7 +278,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
278
278
  position: absolute;
279
279
  -webkit-transition: left 0.15s ease-out;
280
280
  transition: left 0.15s ease-out;
281
- background-color: #0565D1;
281
+ background-color: #2042AD;
282
282
  left: 2px;
283
283
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
284
284
  }
@@ -327,7 +327,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
327
327
  }
328
328
 
329
329
  .c8 input:focus:not(:checked) + label {
330
- box-shadow: inset 0 0 0 4px #0565D1;
330
+ box-shadow: inset 0 0 0 4px #2042AD;
331
331
  }
332
332
 
333
333
  .c10 {
@@ -366,7 +366,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
366
366
  .c10:focus {
367
367
  border: none;
368
368
  outline: none;
369
- box-shadow: inset 0 0 0 4px #0565D1;
369
+ box-shadow: inset 0 0 0 4px #2042AD;
370
370
  }
371
371
 
372
372
  .c9 {
@@ -405,7 +405,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
405
405
  .c9:focus {
406
406
  border: none;
407
407
  outline: none;
408
- box-shadow: inset 0 0 0 4px #0565D1;
408
+ box-shadow: inset 0 0 0 4px #2042AD;
409
409
  }
410
410
 
411
411
  @media (min-width:740px) {
@@ -958,7 +958,7 @@ exports[`Monthly donation renders correctly 1`] = `
958
958
  position: absolute;
959
959
  -webkit-transition: left 0.15s ease-out;
960
960
  transition: left 0.15s ease-out;
961
- background-color: #0565D1;
961
+ background-color: #2042AD;
962
962
  left: 2px;
963
963
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
964
964
  }
@@ -1007,7 +1007,7 @@ exports[`Monthly donation renders correctly 1`] = `
1007
1007
  }
1008
1008
 
1009
1009
  .c8 input:focus:not(:checked) + label {
1010
- box-shadow: inset 0 0 0 4px #0565D1;
1010
+ box-shadow: inset 0 0 0 4px #2042AD;
1011
1011
  }
1012
1012
 
1013
1013
  .c9 {
@@ -1046,7 +1046,7 @@ exports[`Monthly donation renders correctly 1`] = `
1046
1046
  .c9:focus {
1047
1047
  border: none;
1048
1048
  outline: none;
1049
- box-shadow: inset 0 0 0 4px #0565D1;
1049
+ box-shadow: inset 0 0 0 4px #2042AD;
1050
1050
  }
1051
1051
 
1052
1052
  @media (min-width:740px) {
@@ -1426,7 +1426,7 @@ exports[`Single donation renders correctly 1`] = `
1426
1426
  .c13 input:focus {
1427
1427
  border: none;
1428
1428
  outline: none;
1429
- box-shadow: inset 0 0 0 4px #0565D1;
1429
+ box-shadow: inset 0 0 0 4px #2042AD;
1430
1430
  }
1431
1431
 
1432
1432
  .c13 input:active:focus {
@@ -1447,7 +1447,7 @@ exports[`Single donation renders correctly 1`] = `
1447
1447
  border-radius: 10px;
1448
1448
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1449
1449
  height: auto;
1450
- background-color: #0565D1;
1450
+ background-color: #2042AD;
1451
1451
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
1452
1452
  color: #FFFFFF;
1453
1453
  }
@@ -1455,7 +1455,7 @@ exports[`Single donation renders correctly 1`] = `
1455
1455
  .c18 input:focus {
1456
1456
  border: none;
1457
1457
  outline: none;
1458
- box-shadow: inset 0 0 0 4px #0565D1;
1458
+ box-shadow: inset 0 0 0 4px #2042AD;
1459
1459
  }
1460
1460
 
1461
1461
  .c18 input:active:focus {
package/dist/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js CHANGED
@@ -109,18 +109,23 @@ const ShowHideInputWrapper = exports.ShowHideInputWrapper = _styledComponents.de
109
109
  const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig({
110
110
  displayName: "MarketingPreferencesDSstyle__ExtraInfo",
111
111
  componentId: "sc-68n85q-9"
112
- })(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"]);
112
+ })(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;color:", ";+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref13 => {
113
+ let {
114
+ theme
115
+ } = _ref13;
116
+ return theme.color('grey_dark');
117
+ });
113
118
  const MPTextInput = exports.MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
114
119
  displayName: "MarketingPreferencesDSstyle__MPTextInput",
115
120
  componentId: "sc-68n85q-10"
116
- })(["input{border:1px solid ", ";;@media ", "{max-width:none;}}"], _ref13 => {
121
+ })(["input{border:1px solid ", ";;@media ", "{max-width:none;}}"], _ref14 => {
117
122
  let {
118
123
  theme
119
- } = _ref13;
124
+ } = _ref14;
120
125
  return theme.color('black');
121
- }, _ref14 => {
126
+ }, _ref15 => {
122
127
  let {
123
128
  theme
124
- } = _ref14;
129
+ } = _ref15;
125
130
  return theme.allBreakpoints('M');
126
131
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.1.0",
4
+ "version": "8.1.2",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/Donate/Donate.md CHANGED
@@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
11
11
  alt="Background image"
12
12
  mobileBackgroundColor="deep_violet_dark"
13
13
  desktopOverlayColor="red"
14
- submitButtonColor="blue_dark"
14
+ submitButtonColor="blue_donate"
15
15
  formAlignRight={true}
16
16
  imageLow={desktopPictures.imageLow}
17
17
  images={desktopPictures.images}
@@ -36,7 +36,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
36
36
 
37
37
  <Donate
38
38
  mobileBackgroundColor="blue_dark"
39
- submitButtonColor="blue_dark"
39
+ submitButtonColor="blue_donate"
40
40
  desktopOverlayColor="blue_dark"
41
41
  formAlignRight={false}
42
42
  imageLow={desktopPictures.imageLow}
@@ -64,7 +64,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
64
64
 
65
65
  <Donate
66
66
  mobileBackgroundColor="blue_dark"
67
- submitButtonColor="blue_dark"
67
+ submitButtonColor="blue_donate"
68
68
  desktopOverlayColor="blue_dark"
69
69
  formAlignRight={false}
70
70
  imageLow={desktopPictures.imageLow}
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
91
91
 
92
92
  <Donate
93
93
  mobileBackgroundColor="blue_dark"
94
- submitButtonColor="blue_dark"
94
+ submitButtonColor="blue_donate"
95
95
  desktopOverlayColor="blue_dark"
96
96
  formAlignRight={false}
97
97
  imageLow={desktopPictures.imageLow}
@@ -217,7 +217,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
217
217
  <Donate
218
218
  alt="Background image"
219
219
  mobileBackgroundColor="transparent"
220
- submitButtonColor="blue_dark"
220
+ submitButtonColor="blue_donate"
221
221
  desktopOverlayColor="transparent"
222
222
  formAlignRight={true}
223
223
  imageLow={desktopPictures.imageLow}
@@ -247,7 +247,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
247
247
 
248
248
  <Donate
249
249
  mobileBackgroundColor="transparent"
250
- submitButtonColor="blue_dark"
250
+ submitButtonColor="blue_donate"
251
251
  formAlignRight={false}
252
252
  imageLow={desktopPictures.imageLow}
253
253
  images={desktopPictures.images}
@@ -272,7 +272,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
272
272
 
273
273
  <Donate
274
274
  mobileBackgroundColor="blue_dark"
275
- submitButtonColor="blue_dark"
275
+ submitButtonColor="blue_donate"
276
276
  formAlignRight={false}
277
277
  imageLow={desktopPictures.imageLow}
278
278
  images={desktopPictures.images}
@@ -297,7 +297,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
297
297
 
298
298
  <Donate
299
299
  mobileBackgroundColor="blue_dark"
300
- submitButtonColor="blue_dark"
300
+ submitButtonColor="blue_donate"
301
301
  formAlignRight={false}
302
302
  imageLow={desktopPictures.imageLow}
303
303
  images={desktopPictures.images}
@@ -321,7 +321,7 @@ import data from './dev-data/data-single';
321
321
 
322
322
  <Donate
323
323
  desktopOverlayColor="blue_dark"
324
- submitButtonColor="blue_dark"
324
+ submitButtonColor="blue_donate"
325
325
  mobileBackgroundColor="blue_dark"
326
326
  formAlignRight={false}
327
327
  data={data}
@@ -346,7 +346,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
346
346
  <Donate
347
347
  alt="Background image"
348
348
  mobileBackgroundColor="red"
349
- submitButtonColor="blue_dark"
349
+ submitButtonColor="blue_donate"
350
350
  desktopOverlayColor="red"
351
351
  formAlignRight={true}
352
352
  imageLow={desktopPictures.imageLow}
@@ -375,7 +375,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
375
375
  alt="Background image"
376
376
  mobileBackgroundColor="deep_violet_dark"
377
377
  desktopOverlayColor="red"
378
- submitButtonColor="blue_dark"
378
+ submitButtonColor="blue_donate"
379
379
  formAlignRight={true}
380
380
  imageLow={desktopPictures.imageLow}
381
381
  images={desktopPictures.images}
@@ -404,7 +404,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
404
404
  alt="Background image"
405
405
  mobileBackgroundColor="deep_violet_dark"
406
406
  desktopOverlayColor="red"
407
- submitButtonColor="blue_dark"
407
+ submitButtonColor="blue_donate"
408
408
  formAlignRight={true}
409
409
  imageLow={desktopPictures.imageLow}
410
410
  images={desktopPictures.images}
@@ -432,7 +432,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
432
432
  alt="Background image"
433
433
  mobileBackgroundColor="deep_violet_dark"
434
434
  desktopOverlayColor="red"
435
- submitButtonColor="blue_dark"
435
+ submitButtonColor="blue_donate"
436
436
  formAlignRight={true}
437
437
  imageLow={desktopPictures.imageLow}
438
438
  images={desktopPictures.images}
@@ -460,7 +460,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
460
460
  alt="Background image"
461
461
  mobileBackgroundColor="deep_violet_dark"
462
462
  desktopOverlayColor="red"
463
- submitButtonColor="blue_dark"
463
+ submitButtonColor="blue_donate"
464
464
  formAlignRight={true}
465
465
  imageLow={desktopPictures.imageLow}
466
466
  images={desktopPictures.images}
@@ -488,7 +488,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
488
488
  alt="Background image"
489
489
  mobileBackgroundColor="deep_violet_dark"
490
490
  desktopOverlayColor="red"
491
- submitButtonColor="blue_dark"
491
+ submitButtonColor="blue_donate"
492
492
  formAlignRight={true}
493
493
  imageLow={desktopPictures.imageLow}
494
494
  images={desktopPictures.images}
@@ -515,7 +515,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
515
515
  alt="Background image"
516
516
  mobileBackgroundColor="deep_violet_dark"
517
517
  desktopOverlayColor="red"
518
- submitButtonColor="blue_dark"
518
+ submitButtonColor="blue_donate"
519
519
  formAlignRight={true}
520
520
  imageLow={desktopPictures.imageLow}
521
521
  images={desktopPictures.images}
@@ -543,7 +543,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
543
543
  alt="Background image"
544
544
  mobileBackgroundColor="deep_violet_dark"
545
545
  desktopOverlayColor="red"
546
- submitButtonColor="blue_dark"
546
+ submitButtonColor="blue_donate"
547
547
  formAlignRight={true}
548
548
  imageLow={desktopPictures.imageLow}
549
549
  images={desktopPictures.images}
@@ -574,7 +574,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
574
574
  alt="Background image"
575
575
  mobileBackgroundColor="deep_violet_dark"
576
576
  desktopOverlayColor="red"
577
- submitButtonColor="blue_dark"
577
+ submitButtonColor="blue_donate"
578
578
  formAlignRight={true}
579
579
  imageLow={desktopPictures.imageLow}
580
580
  images={desktopPictures.images}
@@ -605,7 +605,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
605
605
  alt="Background image"
606
606
  mobileBackgroundColor="deep_violet_dark"
607
607
  desktopOverlayColor="red"
608
- submitButtonColor="blue_dark"
608
+ submitButtonColor="blue_donate"
609
609
  formAlignRight={true}
610
610
  imageLow={desktopPictures.imageLow}
611
611
  images={desktopPictures.images}
package/src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js CHANGED
@@ -12,7 +12,7 @@ const Switch = styled.span`
12
12
  display: block;
13
13
  position: absolute;
14
14
  transition: left 0.15s ease-out;
15
- background-color: ${({ theme }) => theme.color('blue')};
15
+ background-color: ${({ theme }) => theme.color('blue_donate')};
16
16
  left: 2px;
17
17
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
18
18
  `;
@@ -42,7 +42,7 @@ const MoneyBox = styled.div`
42
42
  ${hideVisually}
43
43
  }
44
44
  input:focus:not(:checked) + label {
45
- box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
45
+ box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
46
46
  }
47
47
  `;
48
48
 
@@ -68,7 +68,7 @@ const Label = styled.label`
68
68
  &:focus {
69
69
  border: none;
70
70
  outline: none;
71
- box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
71
+ box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
72
72
  }
73
73
  `;
74
74
 
package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js CHANGED
@@ -25,7 +25,7 @@ const MoneyBuyButton = styled(Input)`
25
25
  &:focus {
26
26
  border: none;
27
27
  outline: none;
28
- box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
28
+ box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
29
29
  }
30
30
  &:active:focus {
31
31
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
@@ -33,7 +33,7 @@ const MoneyBuyButton = styled(Input)`
33
33
 
34
34
  ${({ isSelected }) => isSelected
35
35
  && css`
36
- background-color: ${({ theme }) => theme.color('blue')};
36
+ background-color: ${({ theme }) => theme.color('blue_donate')};
37
37
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
38
38
  color: ${({ theme }) => theme.color('white')};
39
39
  &:focus {
package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap CHANGED
@@ -278,7 +278,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
278
278
  position: absolute;
279
279
  -webkit-transition: left 0.15s ease-out;
280
280
  transition: left 0.15s ease-out;
281
- background-color: #0565D1;
281
+ background-color: #2042AD;
282
282
  left: 2px;
283
283
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
284
284
  }
@@ -327,7 +327,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
327
327
  }
328
328
 
329
329
  .c8 input:focus:not(:checked) + label {
330
- box-shadow: inset 0 0 0 4px #0565D1;
330
+ box-shadow: inset 0 0 0 4px #2042AD;
331
331
  }
332
332
 
333
333
  .c10 {
@@ -366,7 +366,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
366
366
  .c10:focus {
367
367
  border: none;
368
368
  outline: none;
369
- box-shadow: inset 0 0 0 4px #0565D1;
369
+ box-shadow: inset 0 0 0 4px #2042AD;
370
370
  }
371
371
 
372
372
  .c9 {
@@ -405,7 +405,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
405
405
  .c9:focus {
406
406
  border: none;
407
407
  outline: none;
408
- box-shadow: inset 0 0 0 4px #0565D1;
408
+ box-shadow: inset 0 0 0 4px #2042AD;
409
409
  }
410
410
 
411
411
  @media (min-width:740px) {
@@ -958,7 +958,7 @@ exports[`Monthly donation renders correctly 1`] = `
958
958
  position: absolute;
959
959
  -webkit-transition: left 0.15s ease-out;
960
960
  transition: left 0.15s ease-out;
961
- background-color: #0565D1;
961
+ background-color: #2042AD;
962
962
  left: 2px;
963
963
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
964
964
  }
@@ -1007,7 +1007,7 @@ exports[`Monthly donation renders correctly 1`] = `
1007
1007
  }
1008
1008
 
1009
1009
  .c8 input:focus:not(:checked) + label {
1010
- box-shadow: inset 0 0 0 4px #0565D1;
1010
+ box-shadow: inset 0 0 0 4px #2042AD;
1011
1011
  }
1012
1012
 
1013
1013
  .c9 {
@@ -1046,7 +1046,7 @@ exports[`Monthly donation renders correctly 1`] = `
1046
1046
  .c9:focus {
1047
1047
  border: none;
1048
1048
  outline: none;
1049
- box-shadow: inset 0 0 0 4px #0565D1;
1049
+ box-shadow: inset 0 0 0 4px #2042AD;
1050
1050
  }
1051
1051
 
1052
1052
  @media (min-width:740px) {
@@ -1426,7 +1426,7 @@ exports[`Single donation renders correctly 1`] = `
1426
1426
  .c13 input:focus {
1427
1427
  border: none;
1428
1428
  outline: none;
1429
- box-shadow: inset 0 0 0 4px #0565D1;
1429
+ box-shadow: inset 0 0 0 4px #2042AD;
1430
1430
  }
1431
1431
 
1432
1432
  .c13 input:active:focus {
@@ -1447,7 +1447,7 @@ exports[`Single donation renders correctly 1`] = `
1447
1447
  border-radius: 10px;
1448
1448
  box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
1449
1449
  height: auto;
1450
- background-color: #0565D1;
1450
+ background-color: #2042AD;
1451
1451
  box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
1452
1452
  color: #FFFFFF;
1453
1453
  }
@@ -1455,7 +1455,7 @@ exports[`Single donation renders correctly 1`] = `
1455
1455
  .c18 input:focus {
1456
1456
  border: none;
1457
1457
  outline: none;
1458
- box-shadow: inset 0 0 0 4px #0565D1;
1458
+ box-shadow: inset 0 0 0 4px #2042AD;
1459
1459
  }
1460
1460
 
1461
1461
  .c18 input:active:focus {
package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js CHANGED
@@ -138,6 +138,7 @@ const ExtraInfo = styled.span`
138
138
  line-height: normal;
139
139
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
140
140
  margin-bottom: 0.5rem;
141
+ color: ${({ theme }) => theme.color('grey_dark')};
141
142
 
142
143
  + label {
143
144
  margin-top: 20px;