Merge pull request #1440 from guardian/fix-source-update-visual-bugs

fix source update design bugs
guardian · Jan 16, 2025 · 8ba0f28 · 8ba0f28
2 parents 486b71c + f949c5e
commit 8ba0f28
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 54 deletions.
diff --git a/client/components/mma/holiday/HolidaysOverview.tsx b/client/components/mma/holiday/HolidaysOverview.tsx
@@ -40,6 +40,7 @@ import { SummaryTable } from './SummaryTable';
 
 interface OverviewRowProps {
 	heading: string;
+	fullWidth?: boolean;
 	children: React.ReactNode;
 }
 
@@ -69,7 +70,7 @@ const OverviewRow = (props: OverviewRowProps) => (
 		</div>
 		<div
 			css={css`
-				flex: 0 1 450px;
+				flex: 0 1 ${props.fullWidth ? '100%' : '450px'};
 			`}
 		>
 			{props.children}
@@ -285,7 +286,7 @@ export const HolidaysOverview = () => {
 							/>
 						</OverviewRow>
 					)}
-					<OverviewRow heading="Details">
+					<OverviewRow heading="Details" fullWidth>
 						{holidayStopResponse.existing.length > 0 ? (
 							<SummaryTable
 								data={holidayStopResponse.existing}

diff --git a/client/components/mma/holiday/SummaryTable.tsx b/client/components/mma/holiday/SummaryTable.tsx
@@ -208,14 +208,20 @@ export const SummaryTable = (props: SummaryTableProps) => {
 					<tr>
 						<th
 							css={css`
-								min-width: 225px;
+								min-width: 39%;
+								${from.wide} {
+									min-width: 34%;
+								}
 							`}
 						>
 							Duration
 						</th>
 						<th
 							css={css`
-								min-width: 225px;
+								min-width: 39%;
+								${from.wide} {
+									min-width: 34%;
+								}
 							`}
 						>
 							{props.alternateSuspendedColumnHeading ||
@@ -226,7 +232,7 @@ export const SummaryTable = (props: SummaryTableProps) => {
 						) : (
 							<th
 								css={css`
-									min-width: 205px;
+									min-width: 61%;
 								`}
 							>
 								Actions

diff --git a/client/components/mma/identity/form/FormField.tsx b/client/components/mma/identity/form/FormField.tsx
@@ -11,6 +11,8 @@ interface FormFieldProps<T> {
 	children: ReactElement<FormInputProps<T>>;
 }
 
+type InputFieldTypes = 'text' | 'number' | 'email' | 'tel';
+
 // Use Omit<T, K> when TS @ >= 3.5
 type FormInputProps<T> = Pick<
 	FormFieldProps<T>,
@@ -83,7 +85,7 @@ export const FormSelectField = <T,>(props: FormSelectProps<T>) => {
 	);
 };
 
-const getInputFieldOfType = (type: string) => {
+const getInputFieldOfType = (type: InputFieldTypes) => {
 	return <T,>(props: FormInputProps<T>) => (
 		<FormField
 			name={props.name}

diff --git a/client/components/mma/identity/publicProfile/AvatarSection.tsx b/client/components/mma/identity/publicProfile/AvatarSection.tsx
@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 import { palette, textSans14 } from '@guardian/source/foundations';
+import { Button } from '@guardian/source/react-components';
 import * as Sentry from '@sentry/browser';
 import { Form, Formik } from 'formik';
 import { useEffect } from 'react';
 import type { ChangeEvent, FC } from 'react';
 import { trackEvent } from '../../../../utilities/analytics';
 import { Spinner } from '../../../shared/Spinner';
-import { Button } from '../../shared/Buttons';
 import * as AvatarAPI from '../idapi/avatar';
 import { IdentityLocations } from '../IdentityLocations';
 import { ErrorTypes } from '../models';
@@ -26,7 +26,7 @@ interface AvatarSectionProps {
 
 const imgCss = css`
 	border: 0;
-	borderradius: 50%;
+	border-radius: 50%;
 	height: 60px;
 	width: 60px;
 `;
@@ -109,9 +109,10 @@ export const AvatarSection: FC<AvatarSectionProps> = (props) => {
 					</label>
 					<Button
 						disabled={formikBag.isSubmitting}
-						text="Upload image"
 						onClick={() => formikBag.submitForm()}
-					/>
+					>
+						Upload image
+					</Button>
 				</Form>
 			)}
 		</Formik>

diff --git a/client/components/mma/identity/publicProfile/ProfileFormSection.tsx b/client/components/mma/identity/publicProfile/ProfileFormSection.tsx
@@ -1,8 +1,9 @@
+import { css } from '@emotion/react';
+import { Button } from '@guardian/source/react-components';
 import type { FormikProps } from 'formik';
 import { Form, withFormik } from 'formik';
 import * as Yup from 'yup';
 import { WithStandardTopMargin } from '../../../shared/WithStandardTopMargin';
-import { Button } from '../../shared/Buttons';
 import { FormTextField } from '../form/FormField';
 import type { User } from '../models';
 import { ErrorTypes } from '../models';
@@ -38,11 +39,11 @@ const usernameInput = (formikProps: FormikProps<User>) => (
 	</>
 );
 
-const fieldSetCss = {
-	border: '0',
-	margin: '0',
-	padding: '0',
-};
+const fieldSetCss = css`
+	border: 0;
+	margin: 0;
+	padding: 0;
+`;
 
 const ProfileForm = (props: FormikProps<User> & ProfileFormSectionProps) => (
 	<Form>
@@ -53,11 +54,11 @@ const ProfileForm = (props: FormikProps<User> & ProfileFormSectionProps) => (
 		>
 			{usernameInput(props)}
 			<Button
-				disabled={props.isSubmitting}
-				text="Save changes"
-				type="button"
 				onClick={() => props.submitForm()}
-			/>
+				disabled={props.isSubmitting}
+			>
+				Save changes
+			</Button>
 		</fieldset>
 	</Form>
 );

diff --git a/client/components/mma/identity/settings/SettingsFormSection.tsx b/client/components/mma/identity/settings/SettingsFormSection.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 import { from, palette } from '@guardian/source/foundations';
+import { Button } from '@guardian/source/react-components';
 import type { FormikProps, FormikState } from 'formik';
 import { Form, withFormik } from 'formik';
 import type { FC } from 'react';
-import { Button } from '../../shared/Buttons';
 import {
 	FormEmailField,
 	FormSelectField,
@@ -122,13 +122,13 @@ const BaseForm = (props: FormikProps<User> & SettingsFormProps) => {
 	);
 	const deletePhoneNumberButton = (
 		<Button
-			text="Delete Phone Number"
-			type="button"
 			onClick={async () => {
 				const response = await deletePhoneNumber();
 				props.resetForm({ values: response });
 			}}
-		/>
+		>
+			Delete Phone Number
+		</Button>
 	);
 	return (
 		<Form>
@@ -258,10 +258,10 @@ const BaseForm = (props: FormikProps<User> & SettingsFormProps) => {
 			<PageSection>
 				<Button
 					disabled={props.isSubmitting}
-					text="Save changes"
-					type="button"
 					onClick={() => props.submitForm()}
-				/>
+				>
+					Save changes
+				</Button>
 			</PageSection>
 		</Form>
 	);

diff --git a/client/components/mma/identity/sharedStyles.ts b/client/components/mma/identity/sharedStyles.ts
@@ -44,7 +44,7 @@ const inputCss = css`
 	color: ${palette.neutral[7]};
 	display: inline-block;
 	padding: ${space[2]}px ${space[2]}px 7px;
-	lineheight: 1.4;
+	line-height: 1.4;
 	outline: none;
 	border-radius: 0;
 	width: 100%;
@@ -69,10 +69,19 @@ export const labelCss = css`
 	margin: 5px 0 24px 0;
 	display: block;
 	width: 100%;
-	& input:not([type='file']), & textarea: ${[inputCss, lightBorder]};
-	& input[type='file']: ${inputCss};
-	& textarea: ${textareaCss};
-	& select: ${selectCss};
+	& input:not([type='file']),
+	& textarea {
+		${[inputCss, lightBorder]}
+	}
+	& input[type='file'] {
+		${inputCss}
+	}
+	& textarea {
+		${textareaCss}
+	}
+	& select {
+		${selectCss}
+	}
 `;
 
 export const errorMessageCss = css`

diff --git a/yarn.lock b/yarn.lock
@@ -3219,14 +3219,14 @@
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
 "@eslint-community/regexpp@^4.6.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.1.tgz#8c4bb756cc2aa7eaf13cfa5e69c83afb3260c20c"
-  integrity sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
 
 "@eslint/eslintrc@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
-  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -3363,23 +3363,23 @@
   integrity sha512-5GMp2tBMaIxxInmWGDZI9O3v76hbW2CV/3hnWhDDvtXZvgOFs3K41plkAoc+GpPNLZTrtJlAaHHhbZcDDGI9/w==
 
 "@humanwhocodes/config-array@^0.11.11":
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
-  integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
 "@inquirer/confirm@^3.0.0":
   version "3.1.12"
@@ -6119,11 +6119,16 @@ acorn@^8.0.4, acorn@^8.7.1, acorn@^8.8.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.9.0.tgz#78a16e3b2bcc198c10822786fa6679e245db5b59"
   integrity sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==
 
-acorn@^8.1.0, acorn@^8.10.0, acorn@^8.8.1, acorn@^8.9.0:
+acorn@^8.1.0, acorn@^8.10.0, acorn@^8.8.1:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
+acorn@^8.9.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 address@^1.0.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -9128,9 +9133,9 @@ esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -9971,9 +9976,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0:
-  version "13.20.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
-  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"