fix: updated styles for tiles on homepage

newrelic · Jul 28, 2020 · 4501d76 · 4501d76
1 parent 471e104
commit 4501d76
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 119 deletions.
diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
@@ -6,8 +6,6 @@ import FeatherIcon from '../FeatherIcon';
 import NewRelicIcon from '../NewRelicIcon';
 import Button from './Button';
 
-import styles from './GuideTile.module.scss';
-
 const GuideTile = ({
   as: Component = 'div',
   icon,
@@ -17,6 +15,7 @@ const GuideTile = ({
   className,
   children,
   alignment,
+  featured,
   ...props
 }) => (
   <Surface
@@ -37,55 +36,110 @@ const GuideTile = ({
         border-color: var(--border-hover-color);
       }
 
-      ${
-        icon &&
-        `
+      ${icon &&
+      `
         h2 {
           margin-top: 1rem;
         }
-      `
-      }
+      `}
 
-      ${
-        alignment === GuideTile.ALIGNMENT.LEFT &&
-        `
-        .title, .desicription {
-          text-align: left;
-        }
-        .description {
-          padding: 0;
-        }
+      ${featured &&
       `
-      }
+          border-color: var(--color-white);
 
-      ${
-        alignment === GuideTile.ALIGNMENT.LEFT &&
-        `
-        .title, .desicription {
-          text-align: center;
-        }
-        .description {
-          padding: 0 0.5rem;
-        }
-      `
-      }
+          .dark-mode & {
+            border-color: var(--color-dark-100);
+            background-color: var(--color-dark-100);
+          }
+
+          &:hover {
+            transform: unset;
+            border-color: inherit;
+          }
+        `}
     `}
   >
     {icon && (
-      <div className={styles.iconContainer}>
+      <div
+        css={css`
+          position: absolute;
+          top: -2.75rem;
+          left: 50%;
+          margin-left: -2.75rem;
+          width: 5.5rem;
+          height: 5.5rem;
+          border: 4px solid var(--color-white);
+          background-color: var(--color-neutrals-200);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .dark-mode & {
+            background-color: var(--color-dark-050);
+            ${featured && `border-color: var(--color-dark-100);`}
+          }
+        `}
+      >
         <NewRelicIcon name={icon} size="2.5rem" />
       </div>
     )}
-    <div className={styles.timeEstimate}>
+    <div
+      css={css`
+        font-size: 0.75rem;
+        display: flex;
+        align-items: center;
+        text-align: right;
+        color: var(--accent-text-color);
+        padding: 0.3rem 0 0.2rem 1.2rem;
+        justify-self: end;
+      `}
+    >
       {duration ? (
-        <FeatherIcon className={styles.timeIcon} name="clock" />
+        <FeatherIcon
+          css={css`
+            margin-right: 0.25rem;
+          `}
+          name="clock"
+        />
       ) : (
         <span>&nbsp;</span>
       )}
       {duration}
     </div>
-    <h3 className={styles.title}>{title}</h3>
-    <p className={styles.description}>{description}</p>
+    <h3
+      css={css`
+        ${alignment === GuideTile.ALIGNMENT.LEFT && `text-align: left;`}
+        ${alignment === GuideTile.ALIGNMENT.CENTER && `text-align: center;`}
+      `}
+    >
+      {title}
+    </h3>
+    <p
+      css={css`
+        font-size: 0.9rem;
+        margin-bottom: 1.5rem;
+        color: var(--secondary-text-color);
+        flex: 1;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        ${alignment === GuideTile.ALIGNMENT.LEFT &&
+        `
+          text-align: left;
+          padding: 0;
+        `}
+        ${alignment === GuideTile.ALIGNMENT.CENTER &&
+        `
+          text-align: center;
+          padding: 0 0.5rem;
+        `}
+      `}
+    >
+      {description}
+    </p>
     {children}
   </Surface>
 );
@@ -106,10 +160,12 @@ GuideTile.propTypes = {
   children: PropTypes.node,
   as: PropTypes.elementType,
   alignment: PropTypes.oneOf(Object.values(GuideTile.ALIGNMENT)),
+  featured: PropTypes.bool,
 };
 
 GuideTile.defaultProps = {
   alignment: GuideTile.ALIGNMENT.CENTER,
+  featured: false,
 };
 
 export default GuideTile;
diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -114,11 +114,7 @@ const IndexPage = ({ data, pageContext }) => {
             </header>
             <GuideListing.List>
               {getStartedGuides.map((guide, index) => (
-                <GuideTile
-                  key={index}
-                  className={styles.featuredGuide}
-                  {...guide}
-                >
+                <GuideTile key={index} featured {...guide}>
                   <GuideTile.Button to={guide.path}>
                     Start the guide
                   </GuideTile.Button>