Refactor: Restructure Facilitated Testing landing page UI (#493)

* add timeline icon

* ref: restructure UI replicating infocard one

* ref: update landing page width

* styles: add breakpoints for bigger screens

* ref: update the order

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
                 )}
               />

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';

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 (
-    <div className="m-auto md:w-[70%] min-w-[30rem]">
-      <div className="w-full h-full border border-hex-gray dark:border-quartz text-raisin-black dark:text-bright-gray rounded-lg px-8 py-10 flex flex-col gap-8">
-        <RestrictionInfoContainer />
-        <div className="px-2">
-          <InfoCards />
-        </div>
-      </div>
+    <div className="w-full h-full text-raisin-black dark:text-bright-gray flex flex-col divide-y divide-gray-200 dark:divide-gray-500">
+      <RestrictionInfoContainer />
+      <InfoCards />
     </div>
   );
 };

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 <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/setup/web/chrome-facilitated-testing" target="_blank">this guide</a> 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 <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://b.corp.google.com/issues/new?component=1306484&template=1777152" target="_blank">here</a>. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/issues/new/choose" target="_blank">here</a>  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 <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.chrome.com/blog/announce-enrollment-privacy-sandbox/" target="_blank">documentation</a>.',
   },
+  {
+    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 <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://b.corp.google.com/issues/new?component=1306484&template=1777152" target="_blank">here</a>. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/issues/new/choose" target="_blank">here</a>  using the third-party cookie deprecation.',
+  },
 ];
 
 const InfoCards = () => {
   return (
-    <div className="grid grid-cols-2 gap-9">
+    <ul className="divide-y divide-gray-200 dark:divide-gray-500">
       {INFO_CARDS_DATA.map((card, index) => (
-        <div
-          key={index}
-          className="w-full h-full text-raisin-black dark:text-bright-gray"
-        >
-          <h3 className="text-xl font-bold break-words mb-3">{card.heading}</h3>
-          <p
-            className="text-sm break-words"
-            dangerouslySetInnerHTML={{ __html: card.content }}
-          ></p>
-        </div>
+        <li className="py-4" key={index}>
+          <div className="flex items-center">
+            <div className="flex-1 min-w-0 flex flex-col gap-2">
+              <p className="text-xl font-bold text-raisin-black dark:text-bright-gray truncate capitalize">
+                {card.heading}
+              </p>
+              <p
+                className="text-sm break-words"
+                dangerouslySetInnerHTML={{ __html: card.content }}
+              />
+            </div>
+          </div>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 };
 

packages/extension/src/view/devtools/components/facilitatedTesting/faciliatedTestingContent/link.tsx

@@ -27,7 +27,7 @@ interface LinkProps {
 const Link = ({ href, title }: LinkProps) => (
   <a
     href={href}
-    className="text-bright-navy-blue hover:opacity-80 underline"
+    className="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline"
     target="_blank"
     rel="noreferrer"
   >

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 = () => (
-  <div className="bg-[#D4E3FC] rounded-lg p-6 flex w-full text-raisin-black">
-    <div className="flex-1">
-      <h2 className="text-2xl mb-3">
-        Prepare for third-party cookie restrictions
-      </h2>
-      <p className="text-base break-words mb-6">
-        <Link href="https://privacysandbox.com/" title="Privacy Sandbox" /> is a
-        multi-year{' '}
-        <Link
-          href="https://developer.chrome.com/docs/privacy-sandbox/"
-          title="initiative"
-        />{' '}
-        for building a more private web by defining a set of building blocks
-        (i.e. proposed APIs) enabling{' '}
-        <Link
-          href="https://github.com/michaelkleber/privacy-model"
-          title="a new privacy model for the web"
-        />
-        .
-      </p>
-      <p className="text-sm mb-7">
-        To facilitate testing,{' '}
-        <Link
-          href="https://developers.google.com/privacy-sandbox/blog/cookie-countdown-2024jan"
-          title="Chrome has restricted third-party cookies by default for 1% of users."
-        />
-      </p>
-    </div>
-    <div className="w-[10rem] h-full relative">
-      <div className="absolute fill-[#A1A6B4] top-2">
-        <Cookie />
-      </div>
-      <div className="absolute top-16 left-8 fill-[#006E8C]">
-        <VisibilityOff />
-      </div>
+  <div className="flex flex-col w-full text-sm text-raisin-black dark:text-bright-gray mb-7">
+    <p className="mb-7">
+      To facilitate testing,{' '}
+      <Link
+        href="https://developers.google.com/privacy-sandbox/blog/cookie-countdown-2024jan"
+        title="Chrome has restricted third-party cookies by default for 1% of users."
+      />
+    </p>
+    <div className="w-full grid place-items-center mb-2">
+      <PSTimelineIcon />
     </div>
+    <p>
+      During this testing period, it is important for sites and services to{' '}
+      <Link
+        href="https://developers.google.com/privacy-sandbox/3pcd/prepare/audit-cookies"
+        title="start preparing"
+      />{' '}
+      for third-party cookie restrictions, including moving to more private
+      alternatives.
+    </p>
   </div>
 );
 

packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx

@@ -26,6 +26,7 @@ const FacilitatedTesting = () => (
     <LandingPage
       title="Facilitated Testing"
       contentPanel={<FacilitatedTestingContent />}
+      extraClasses="2xl:max-w-6xl xl:max-w-4xl max-w-2xl h-fit"
     />
   </div>
 );