Define content and details styles

Automattic · Oct 8, 2024 · 27272ec · 27272ec
1 parent 3f595ce
commit 27272ec
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 8 deletions.
diff --git a/...w/internals/steps-repository/hundred-year-plan-diy-or-difm/schedule-appointment-modal.tsx b/...w/internals/steps-repository/hundred-year-plan-diy-or-difm/schedule-appointment-modal.tsx
@@ -2,8 +2,10 @@ import config from '@automattic/calypso-config';
 import { UserSelect } from '@automattic/data-stores';
 import { Modal } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { Icon, captureVideo, scheduled } from '@wordpress/icons';
 import { USER_STORE } from 'calypso/landing/stepper/stores';
 import CalendlyWidget from '../components/calendy-widget';
+import HunderYearPlanLogo from '../hundred-year-plan-step-wrapper/hundred-year-plan-logo';
 
 interface Props {
 	onClose: () => void;
@@ -22,16 +24,34 @@ const ScheduleAppointmentModal = ( props: Props ) => {
 			size="large"
 			className="hundred-year-plan-schedule-appointment-modal"
 			shouldCloseOnClickOutside={ false }
+			__experimentalHideHeader
 			onRequestClose={ () => onClose?.() }
 		>
 			<div className="calendly-container">
 				<div className="calendly-details">
-					<h2>TODO: title</h2>
-					<p>
-						TODO: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
-						architecto at consequuntur dolorem doloremque eaque expedita fugiat ipsum labore minus,
-						nisi porro quos recusandae reprehenderit, tenetur, unde velit voluptatibus.
-					</p>
+					<div className="calendly-details__header">
+						<HunderYearPlanLogo />
+					</div>
+					<div className="calendly-details__content">
+						<h3>WordPress.com 100-Year plan</h3>
+						<h2>30 Minute Meeting</h2>
+						<div className="calendly-details__item">
+							<span className="icon">
+								<Icon icon={ scheduled } size={ 28 } />
+							</span>
+							<strong>30 min</strong>
+						</div>
+						<div className="calendly-details__item">
+							<span className="icon">
+								<Icon icon={ captureVideo } size={ 28 } />
+							</span>
+							<strong>Web conferencing details provided upon confirmation.</strong>
+						</div>
+						<p>
+							Join us for an exclusive strategy session where we’ll chart a visionary course for
+							your digital evolution.
+						</p>
+					</div>
 				</div>
 				<CalendlyWidget
 					url={ config( '100_year_plan_calendly_id' ) }

diff --git a/...per/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss b/...per/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
@@ -49,6 +49,21 @@
 }
 
 .hundred-year-plan-schedule-appointment-modal {
+	.components-modal__content {
+		padding: 0;
+
+		h2 {
+			font-weight: bold;
+			font-size: 1.75rem;
+			margin-bottom: 1rem;
+		}
+
+		h3 {
+			font-weight: bold;
+			color: var(--studio-gray-60);
+			margin-bottom: -5px;
+		}
+	}
 
 	.calendly-container {
 		display: flex;
@@ -64,11 +79,45 @@
 
 	.calendly-details {
 		border-inline-end: solid 1px var(--studio-gray-5);
-		padding-inline-end: 1rem;
+	}
+
+	.calendly-details__header {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 2.5rem 1rem;
+		border-bottom: solid 1px var(--studio-gray-5);
+	}
+
+	.calendly-details__content {
+		padding: 2rem;
+	}
+
+	.calendly-details__item {
+		display: flex;
+		align-items: center;
+		color: var(--studio-gray-60);
+		margin-bottom: 0.5rem;
+
+		&:last-of-type {
+			margin-bottom: 1.5rem;
+		}
+
+		.icon {
+			display: flex;
+			align-items: center;
+			margin-right: 5px;
+
+			svg {
+				fill: var(--studio-gray-60);
+			}
+		}
+
 	}
 
 	.calendly-widget {
-		max-width: 376px;
+		max-width: 415px;
 		height: 500px;
+		margin: 1px;
 	}
 }