diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx index d390f7222..093f6be79 100644 --- a/packages/design-system/src/components/landingPage/index.tsx +++ b/packages/design-system/src/components/landingPage/index.tsx @@ -93,7 +93,7 @@ const LandingPage = ({ setLoading(false); }} className={classNames( - 'w-full md:w-[70%] md:m-auto rounded-xl', + 'w-full md:w-[95%] md:m-auto rounded-xl', iframeBorderClass )} /> diff --git a/packages/design-system/src/icons/index.tsx b/packages/design-system/src/icons/index.tsx index 0ab427297..bec8f18c5 100644 --- a/packages/design-system/src/icons/index.tsx +++ b/packages/design-system/src/icons/index.tsx @@ -62,3 +62,4 @@ export { default as ClearIcon } from './clear-icon.svg'; export { default as PaddedCross } from './padded-cross.svg'; export { default as Warning } from './warning-filled.svg'; export { default as VisibilityOff } from './visibility-off.svg'; +export { default as PSTimelineIcon } from './ps-timeline.svg'; diff --git a/packages/design-system/src/icons/ps-timeline.svg b/packages/design-system/src/icons/ps-timeline.svg new file mode 100644 index 000000000..6388c9cea --- /dev/null +++ b/packages/design-system/src/icons/ps-timeline.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/index.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/index.tsx index bac9b0be2..9263fe6ae 100644 --- a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/index.tsx +++ b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/index.tsx @@ -18,22 +18,18 @@ * External dependencies. */ import React from 'react'; -import RestrictionInfoContainer from './restrictionInfoContainer'; -import InfoCards from './infoCards'; /** * Internal dependencies. */ +import RestrictionInfoContainer from './restrictionInfoContainer'; +import InfoCards from './infoCards'; const FacilitatedTestingContent = () => { return ( -
-
- -
- -
-
+
+ +
); }; diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/infoCards.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/infoCards.tsx index d63e1afe5..c186e22ac 100644 --- a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/infoCards.tsx +++ b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/infoCards.tsx @@ -29,11 +29,6 @@ const INFO_CARDS_DATA = [ content: 'To prepare for third-party cookie deprecation, we will be providing Chrome-facilitated testing modes that allow sites to preview how site behavior and functionality work without third-party cookies. Check this guide to learn more.', }, - { - heading: 'Reporting Breakages', - content: - 'If your site or a service you depend on is breaking with third-party cookies disabled, you should file an issue here. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue here using the third-party cookie deprecation.', - }, { heading: 'Request Additional Migration Time', content: @@ -44,24 +39,32 @@ const INFO_CARDS_DATA = [ content: 'To access the Privacy Sandbox relevance and measurement APIs on Chrome and Android, developers need to enroll with the privacy sandbox as a mechanism to verify the entities that call these APIs, and to gather the developer-specific data needed for the proper configuration and use of the APIs. To learn more about this process and how to enroll please check this documentation.', }, + { + heading: 'Reporting Breakages', + content: + 'If your site or a service you depend on is breaking with third-party cookies disabled, you should file an issue here. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue here using the third-party cookie deprecation.', + }, ]; const InfoCards = () => { return ( -
+
+ ); }; diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/link.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/link.tsx index db57c9a60..72c8111ce 100644 --- a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/link.tsx +++ b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/link.tsx @@ -27,7 +27,7 @@ interface LinkProps { const Link = ({ href, title }: LinkProps) => ( diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/restrictionInfoContainer.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/restrictionInfoContainer.tsx index f81be14b9..822b23fb8 100644 --- a/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/restrictionInfoContainer.tsx +++ b/packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/restrictionInfoContainer.tsx @@ -15,49 +15,37 @@ */ /** - * External dependencies. + * Internal dependencies. */ -import { Cookie, VisibilityOff } from '@ps-analysis-tool/design-system'; import React from 'react'; +import { PSTimelineIcon } from '@ps-analysis-tool/design-system'; + +/** + * Internal dependencies. + */ import Link from './link'; const RestrictionInfoContainer = () => ( -
-
-

- Prepare for third-party cookie restrictions -

-

- is a - multi-year{' '} - {' '} - for building a more private web by defining a set of building blocks - (i.e. proposed APIs) enabling{' '} - - . -

-

- To facilitate testing,{' '} - -

-
-
-
- -
-
- -
+
+

+ To facilitate testing,{' '} + +

+
+
+

+ During this testing period, it is important for sites and services to{' '} + {' '} + for third-party cookie restrictions, including moving to more private + alternatives. +

); diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx index 103a63224..bf281a10c 100644 --- a/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx +++ b/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx @@ -26,6 +26,7 @@ const FacilitatedTesting = () => ( } + extraClasses="2xl:max-w-6xl xl:max-w-4xl max-w-2xl h-fit" />
);