diff --git a/docs/User-Experience/colours.tsx b/docs/User-Experience/colours.tsx
index 6b8d176de27..03338a999bb 100644
--- a/docs/User-Experience/colours.tsx
+++ b/docs/User-Experience/colours.tsx
@@ -52,7 +52,7 @@ export const LEGACY = [
export const CROSS_PLATFORM = [
{ colorName: 'SERVICE_NEUTRAL_CORE', colorCode: '#0071F1' },
{ colorName: 'SERVICE_NEUTRAL_LIGHT', colorCode: '#3092FF' },
- { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0064E6' },
+ { colorName: 'SERVICE_NEUTRAL_DARK', colorCode: '#0051AD' },
{ colorName: 'LIVE_CORE', colorCode: '#009E9E' },
{ colorName: 'LIVE_LIGHT', colorCode: '#00CCC7' },
{ colorName: 'LIVE_DARK', colorCode: '#006666' },
diff --git a/src/app/components/ThemeProvider/focusIndicator.ts b/src/app/components/ThemeProvider/focusIndicator.ts
index 2eb64ba0b97..fed51fb07cd 100644
--- a/src/app/components/ThemeProvider/focusIndicator.ts
+++ b/src/app/components/ThemeProvider/focusIndicator.ts
@@ -6,7 +6,8 @@ export const focusIndicatorThickness = `${pixelsToRem(3)}rem`; // 3px
const focusIndicator = ({ palette }: Theme) => css`
// Adds focus indicator styling to all a and button elements by default.
a:focus-visible,
- button:focus-visible {
+ button:focus-visible,
+ button[type='submit']:focus-visible {
outline: ${focusIndicatorThickness} solid ${palette.BLACK};
box-shadow: 0 0 0 ${focusIndicatorThickness} ${palette.WHITE};
outline-offset: ${focusIndicatorThickness};
diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts
index 075a9934568..c6afacb2cad 100644
--- a/src/app/components/ThemeProvider/palette.ts
+++ b/src/app/components/ThemeProvider/palette.ts
@@ -40,6 +40,8 @@ export const PHILIPPINE_GREY = '#8A8C8E';
export const POSTBOX = '#B80000';
export const POSTBOX_30 = '#EAB3B3';
export const RHINO = '#5A5A5A';
+export const SERVICE_NEUTRAL_CORE = '#0071F1';
+export const SERVICE_NEUTRAL_DARK = '#0051AD';
export const SHADOW = '#3F3F42';
export const SPORT_MIST = '#F7F7F5';
export const SPORT_SILVER = '#DBDBDB';
diff --git a/src/app/components/ThemeProvider/withThemeProvider.tsx b/src/app/components/ThemeProvider/withThemeProvider.tsx
index 6c960db9567..24b44d2cef3 100644
--- a/src/app/components/ThemeProvider/withThemeProvider.tsx
+++ b/src/app/components/ThemeProvider/withThemeProvider.tsx
@@ -50,6 +50,8 @@ import {
POSTBOX,
POSTBOX_30,
RHINO,
+ SERVICE_NEUTRAL_CORE,
+ SERVICE_NEUTRAL_DARK,
SHADOW,
SPORT_MIST,
SPORT_SILVER,
@@ -254,6 +256,8 @@ const withThemeProvider = ({
POSTBOX,
POSTBOX_30,
RHINO,
+ SERVICE_NEUTRAL_CORE,
+ SERVICE_NEUTRAL_DARK,
SHADOW,
SPORT_MIST,
SPORT_SILVER,
diff --git a/src/app/models/types/theming.ts b/src/app/models/types/theming.ts
index b22a85174b2..4f74b305f69 100644
--- a/src/app/models/types/theming.ts
+++ b/src/app/models/types/theming.ts
@@ -49,6 +49,8 @@ interface Palette extends BrandPalette {
POSTBOX: string;
POSTBOX_30: string;
RHINO: string;
+ SERVICE_NEUTRAL_CORE: string;
+ SERVICE_NEUTRAL_DARK: string;
SHADOW: string;
SPORT_MIST: string;
SPORT_SILVER: string;
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx
index 561ef00718b..c872ea23e62 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/Form/index.tsx
@@ -34,8 +34,6 @@ export default function Form({
{submissionError && (
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts
index 8bfd33cbc79..552fe37aa5c 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts
+++ b/ws-nextjs-app/pages/[service]/send/[id]/Form/styles.ts
@@ -13,11 +13,11 @@ export default {
privacyNotice: ({ fontVariants, fontSizes }: Theme) =>
css({
...fontVariants.sansRegular,
- ...fontSizes.bodyCopy,
+ ...fontSizes.brevier,
}),
privacyHeading: ({ fontVariants, fontSizes }: Theme) =>
css({
...fontVariants.sansBold,
- ...fontSizes.bodyCopy,
+ ...fontSizes.brevier,
}),
};
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap
index 33974bc97e0..d635529a09f 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap
+++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/__snapshots__/index.test.tsx.snap
@@ -1,8 +1,52 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SubmitButton should render a submit button with an associated label 1`] = `
-
+>
+ Submit
+
`;
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx
index e23af0782bd..0005cbb630c 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.test.tsx
@@ -12,7 +12,7 @@ describe('SubmitButton', () => {
return render(, { service: 'news' });
});
- const button = container.querySelector('input[type=submit][value=Submit]');
+ const button = container.querySelector('button[type=submit]');
expect(button).toBeInTheDocument();
expect(button).toMatchSnapshot();
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx
index 8f6cb40ae99..7050000ea26 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/index.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import styles from './styles';
const Submit = () => {
const translation = 'Submit';
- return ;
+ return (
+
+ );
};
export default Submit;
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts
new file mode 100644
index 00000000000..58ff20e3d75
--- /dev/null
+++ b/ws-nextjs-app/pages/[service]/send/[id]/SubmitButton/styles.ts
@@ -0,0 +1,27 @@
+import { Theme, css } from '@emotion/react';
+
+export default {
+ submit: ({ palette, fontSizes, fontVariants, spacings, mq }: Theme) =>
+ css({
+ backgroundColor: palette.SERVICE_NEUTRAL_CORE,
+ color: palette.WHITE,
+ width: '100%',
+ ...fontVariants.sansBold,
+ ...fontSizes.bodyCopy,
+ border: 'none',
+ padding: `${spacings.FULL + spacings.HALF}rem 0`,
+ marginBottom: `${spacings.DOUBLE}rem`,
+ cursor: 'pointer',
+ '&:hover,&:focus': {
+ textDecoration: 'underline',
+ backgroundColor: palette.SERVICE_NEUTRAL_DARK,
+ },
+ [mq.GROUP_1_MIN_WIDTH]: {
+ marginBottom: `${spacings.TRIPLE}rem`,
+ },
+ [mq.GROUP_3_MIN_WIDTH]: {
+ marginTop: `${spacings.FULL}rem`,
+ marginBottom: `${spacings.TRIPLE}rem`,
+ },
+ }),
+};
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx b/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx
index 89560b31a88..edacdab454c 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/UGCPageLayout.test.tsx
@@ -45,7 +45,7 @@ describe('UGC Page Layout', () => {
});
it('Renders a submit button within the form', () => {
- const submitButton = container.querySelector('form input[type=submit]');
+ const submitButton = container.querySelector('button[type=submit]');
expect(submitButton).toBeInTheDocument();
});
});