Page MenuHomePhorge
Files F32161758

D8025.1765043706.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D8025.1765043706.diff
View Options

diff --git a/landing/competitor-data.js b/landing/competitor-data.js
--- a/landing/competitor-data.js
+++ b/landing/competitor-data.js
@@ -10,7 +10,7 @@
});
export type Competitors = $Values<typeof competitors>;
-type FeatureComparison = {
+export type FeatureComparison = {
+title: string,
+comingSoon: boolean,
+competitorDescriptionShort: string,
@@ -20,7 +20,7 @@
+furtherReadingLinks?: $ReadOnlyArray<string>,
};
-type Competitor = {
+export type Competitor = {
+id: Competitors,
+name: string,
+featureComparison: $ReadOnlyArray<FeatureComparison>,
diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css
--- a/landing/competitor-feature.css
+++ b/landing/competitor-feature.css
@@ -9,6 +9,8 @@
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
+ flex-wrap: wrap;
+ row-gap: 8px;
}
.headingText {
@@ -40,6 +42,6 @@
.descriptionText {
color: var(--white-80);
- height: 80px;
+ min-height: 80px;
margin-top: 8px;
}
diff --git a/landing/feature-modal.css b/landing/feature-modal.css
new file mode 100644
--- /dev/null
+++ b/landing/feature-modal.css
@@ -0,0 +1,44 @@
+.modalContainer {
+ background-color: var(--comparison-cards);
+ border-radius: 8px;
+ padding: 24px 32px;
+ width: 624px;
+ max-width: 90vw;
+ max-height: 90vh;
+ overflow-y: auto;
+}
+
+.featureContainer {
+ display: flex;
+}
+
+.closeIconContainer {
+ margin-left: 22px;
+ cursor: pointer;
+}
+
+.closeIcon {
+ color: var(--white-80);
+}
+
+.furtherReadingContainer {
+ border-top: 1px solid var(--black-80);
+ padding-top: 24px;
+ margin-top: 24px;
+}
+
+.furtherReadingsText {
+ color: var(--white-100);
+ margin-bottom: 16px;
+}
+
+.linksContainer {
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+}
+
+.linkText {
+ color: var(--violet-dark-100);
+ text-decoration: underline;
+}
diff --git a/landing/feature-modal.react.js b/landing/feature-modal.react.js
new file mode 100644
--- /dev/null
+++ b/landing/feature-modal.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import ModalOverlay from 'lib/components/modal-overlay.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import type { FeatureComparison, Competitor } from './competitor-data.js';
+import CompetitorFeature from './competitor-feature.react.js';
+import css from './feature-modal.css';
+import typography from './typography.css';
+
+type Props = {
+ +competitor: Competitor,
+ +feature: FeatureComparison,
+};
+
+function FeatureModal(props: Props): React.Node {
+ const { competitor, feature } = props;
+
+ const { popModal } = useModalContext();
+
+ const furtherReadingClassName = classNames(
+ typography.paragraph1,
+ css.furtherReadingsText,
+ );
+ const linkClassName = classNames([typography.paragraph2, css.linkText]);
+
+ const furtherReadingLinks = React.useMemo(() => {
+ if (!feature.furtherReadingLinks) {
+ return null;
+ }
+
+ const links = feature.furtherReadingLinks.map((link, index) => (
+ <a key={index} href={link} target="blank" className={linkClassName}>
+ {link}
+ </a>
+ ));
+
+ return (
+ <div className={css.furtherReadingContainer}>
+ <p className={furtherReadingClassName}>Further reading</p>
+ <div className={css.linksContainer}>{links}</div>
+ </div>
+ );
+ }, [feature.furtherReadingLinks, furtherReadingClassName, linkClassName]);
+
+ return (
+ <ModalOverlay onClose={popModal} backgroundColor="var(--modal-overlay)">
+ <div className={css.modalContainer}>
+ <div className={css.featureContainer}>
+ <CompetitorFeature
+ competitorID={competitor.id}
+ title={feature.title}
+ comingSoon={feature.comingSoon}
+ competitorDescription={feature.competitorDescriptionLong}
+ commDescription={feature.commDescriptionLong}
+ />
+ <div className={css.closeIconContainer} onClick={popModal}>
+ <FontAwesomeIcon
+ icon={faTimes}
+ className={css.closeIcon}
+ size="lg"
+ />
+ </div>
+ </div>
+ {furtherReadingLinks}
+ </div>
+ </ModalOverlay>
+ );
+}
+
+export default FeatureModal;
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -43,6 +43,7 @@
--comparison-cards-hovered: #1c1c1f;
--coming-soon-icon: #dca008;
--badge: #ebebeb14;
+ --modal-overlay: #010101bf;
}
/* ===== GENERAL PAGE STYLES ===== */

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 5:55 PM (22 h, 3 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5839942
Default Alt Text
D8025.1765043706.diff (4 KB)

Event Timeline