Page MenuHomePhabricator
Files F3398264

D8024.id27244.diff
No OneTemporary
Actions

D8024.id27244.diff
View Options

diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature-card.css
--- a/landing/competitor-feature-card.css
+++ b/landing/competitor-feature-card.css
@@ -10,46 +10,6 @@
background-color: var(--comparison-cards-hovered);
}
-.headingContainer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
-}
-
-.headingText {
- color: var(--white-100);
-}
-
-.comingSoonBadge {
- background-color: var(--badge);
- padding: 5px 10px;
- border-radius: 16px;
-}
-
-.comingSoonText {
- color: var(--white-100);
- margin-left: 8px;
-}
-
-.comingSoonIcon {
- color: var(--coming-soon-icon);
-}
-
-hr {
- margin: 24px 0;
- border-radius: 8px;
- height: 1.5px;
- background-color: var(--black-80);
- border: none;
-}
-
-.descriptionText {
- color: var(--white-80);
- height: 80px;
- margin-top: 8px;
-}
-
.readMoreText {
color: var(--violet-dark-100);
margin-top: 16px;
diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature-card.react.js
--- a/landing/competitor-feature-card.react.js
+++ b/landing/competitor-feature-card.react.js
@@ -1,14 +1,11 @@
// @flow
-import { faWrench } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as React from 'react';
-import CommLogo from './assets/comm-logo.react.js';
import type { Competitors } from './competitor-data.js';
import css from './competitor-feature-card.css';
-import CompetitorLogo from './competitor-logo.react.js';
+import CompetitorFeature from './competitor-feature.react.js';
import typography from './typography.css';
type Props = {
@@ -30,45 +27,20 @@
onClick,
} = props;
- const headingClassName = classNames([typography.heading3, css.headingText]);
- const comingSoonClassName = classNames([
- typography.paragraph3,
- css.comingSoonText,
- ]);
- const descriptionClassName = classNames([
- typography.paragraph1,
- css.descriptionText,
- ]);
const readMoreClassName = classNames([
typography.paragraph2,
css.readMoreText,
]);
- let comingSoonBadge;
- if (comingSoon) {
- comingSoonBadge = (
- <div className={css.comingSoonBadge}>
- <FontAwesomeIcon
- size="sm"
- className={css.comingSoonIcon}
- icon={faWrench}
- />
- <span className={comingSoonClassName}>Coming Soon</span>
- </div>
- );
- }
-
return (
<a className={css.container} onClick={onClick}>
- <div className={css.headingContainer}>
- <p className={headingClassName}>{title}</p>
- {comingSoonBadge}
- </div>
- <CompetitorLogo name={competitorID} size={30} />
- <p className={descriptionClassName}>{competitorDescription}</p>
- <hr />
- <CommLogo size={30} />
- <p className={descriptionClassName}>{commDescription}</p>
+ <CompetitorFeature
+ competitorID={competitorID}
+ title={title}
+ comingSoon={comingSoon}
+ competitorDescription={competitorDescription}
+ commDescription={commDescription}
+ />
<p className={readMoreClassName}>Read more</p>
</a>
);
diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature.css
copy from landing/competitor-feature-card.css
copy to landing/competitor-feature.css
--- a/landing/competitor-feature-card.css
+++ b/landing/competitor-feature.css
@@ -1,13 +1,7 @@
.container {
- max-width: 432px;
- background-color: var(--comparison-cards);
- padding: 32px;
- border-radius: 16px;
-}
-
-.container:hover {
- cursor: pointer;
- background-color: var(--comparison-cards-hovered);
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.headingContainer {
@@ -49,8 +43,3 @@
height: 80px;
margin-top: 8px;
}
-
-.readMoreText {
- color: var(--violet-dark-100);
- margin-top: 16px;
-}
diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature.react.js
copy from landing/competitor-feature-card.react.js
copy to landing/competitor-feature.react.js
--- a/landing/competitor-feature-card.react.js
+++ b/landing/competitor-feature.react.js
@@ -7,7 +7,7 @@
import CommLogo from './assets/comm-logo.react.js';
import type { Competitors } from './competitor-data.js';
-import css from './competitor-feature-card.css';
+import css from './competitor-feature.css';
import CompetitorLogo from './competitor-logo.react.js';
import typography from './typography.css';
@@ -17,17 +17,15 @@
+comingSoon: boolean,
+competitorDescription: string,
+commDescription: string,
- +onClick: () => mixed,
};
-function CompetitorFeatureCard(props: Props): React.Node {
+function CompetitorFeature(props: Props): React.Node {
const {
competitorID,
title,
comingSoon,
competitorDescription,
commDescription,
- onClick,
} = props;
const headingClassName = classNames([typography.heading3, css.headingText]);
@@ -39,10 +37,6 @@
typography.paragraph1,
css.descriptionText,
]);
- const readMoreClassName = classNames([
- typography.paragraph2,
- css.readMoreText,
- ]);
let comingSoonBadge;
if (comingSoon) {
@@ -59,7 +53,7 @@
}
return (
- <a className={css.container} onClick={onClick}>
+ <div className={css.container}>
<div className={css.headingContainer}>
<p className={headingClassName}>{title}</p>
{comingSoonBadge}
@@ -69,9 +63,8 @@
<hr />
<CommLogo size={30} />
<p className={descriptionClassName}>{commDescription}</p>
- <p className={readMoreClassName}>Read more</p>
- </a>
+ </div>
);
}
-export default CompetitorFeatureCard;
+export default CompetitorFeature;

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 2, 10:12 PM (21 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2608788
Default Alt Text
D8024.id27244.diff (5 KB)

Event Timeline