Fix issues #69 #72

src/components/UI/card/card.js

@@ -1,23 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types'
-import './card.css';
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./card.module.css";
 import { Link } from "gatsby";
 
-
-const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMoreColor, topicFontSize }) => (
-  <div className="card">
-    <div className="card-header">
-      <div className="img-viewport">
+const Card = ({
+  imgURL,
+  topic,
+  dateTime,
+  descriptionTitle,
+  description,
+  link,
+  readMoreColor,
+  topicFontSize,
+  viewportHeight,
+  textSpacing,
+  lineHeight,
+}) => (
+  <div className={styles.card}>
+    <div className={styles.card__header}>
+      <div className={styles.card__imgViewport} style={{ height: viewportHeight }}>
         <img src={imgURL} />
       </div>
     </div>
-    <div className="card-body">
-      <h5 className="topic" style={{fontSize: topicFontSize}}>{topic}</h5>
-      <p className="date">{date}</p>
-      <div className="description">
-        <p className="description-text">
-          <strong className="description-title">{descriptionTitle}:</strong>
-          {description} <Link to={link} className="read-more" style={{color: readMoreColor}}>Leer más</Link>
+    <div className={styles.card__body}>
+      <h5
+        className={styles.card__topic}
+        style={{
+          fontSize: topicFontSize,
+          marginBottom: textSpacing,
+          lineHeight,
+        }}>
+        {topic}
+      </h5>
+      <p className={styles.card__date} style={{ lineHeight }}>
+        {dateTime}
+      </p>
+      <div className={styles.card__description} style={{ marginTop: textSpacing }}>
+        <p className={styles.card__descriptionText}>
+          <strong className={styles.card__descriptionTitle}>{descriptionTitle}:</strong>
+          {description}{" "}
+          <Link
+            to={link}
+            className={styles.card_readmore}
+            style={{ color: readMoreColor }}>
+            Leer más
+          </Link>
         </p>
       </div>
     </div>
@@ -27,18 +54,24 @@ const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMo
 Card.propTypes = {
   imgURL: PropTypes.string,
   topic: PropTypes.string,
-  date: PropTypes.string,
+  dateTime: PropTypes.string,
   descriptionTitle: PropTypes.string,
   description: PropTypes.string,
   link: PropTypes.string,
   readMoreColor: PropTypes.string,
-}
+  viewportHeight: PropTypes.string,
+  textSpacing: PropTypes.string,
+  lineHeight: PropTypes.string,
+};
 
 Card.defaultProps = {
   date: null,
-  descriptionTitle: 'Descripción',
+  descriptionTitle: "Descripción",
   readMoreColor: "#27ae60",
-  topicFontSize: "2rem"
-}
+  topicFontSize: "2rem",
+  viewportHeight: "136.13px",
+  textSpacing: "0.5em",
+  lineHeight: "auto",
+};
 
 export default Card;

src/components/UI/card/card.css → src/components/UI/card/card.module.css

@@ -8,55 +8,57 @@
     user-select: none;
 }
 
-.card-header {
+.card__header {
     width: 100%;
     padding: 24px 24px 15px;
 }
 
-.card .img-viewport {
+.card__img--viewport {
     width: 100%;
     height: 136.13px;
     overflow: hidden;
     border-radius: 15px;
 }
 
-.card img {
+.card__img {
     width: 100%;
     display: block;
 }
 
-.card-body {
+.card__body {
     padding: 0 24px 24px 24px;
 }
 
-.card-body .topic {
+.card__topic {
     font-weight: bold;
-    margin-bottom: .5em;
     font-family: "Roboto", sans-serif;
 }
 
-.card-body .date {
+.card__date {
     color: #666363;
+    font-weight: bold;
 }
 
-.description-title {
+.card__description--title {
     margin-right: .5em;
 }
 
-.description {
+.card__description {
     overflow: hidden;
     max-height: 140px;
-    margin-top: .5em;
 }
 
-.description-text {
+.card__description--text {
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.1;
     font-family: "Roboto", sans-serif;
 }
 
-.read-more {
-    font-weight: bold;
+.card__readmore {
     margin-left: .3em;
 }
+
+.card__description--text a {
+    font-weight: bold;
+}

src/components/cities-section/cities-section.js

@@ -1,74 +1,18 @@
 import React from 'react';
-import './cities-section.css';
 import Card from '../UI/card/card';
-import ambatoImg from '../../images/cities/ambato.jpg';
-import cuencaImg from '../../images/cities/cuenca.jpg';
-import guayaquilImg from '../../images/cities/guayaquil.jpg';
-import latacungaImg from '../../images/cities/latacunga.jpg';
-import lojaImg from '../../images/cities/loja.jpg';
-import quitoImg from '../../images/cities/quito.jpg';
-import riobambaImg from '../../images/cities/riobamba.jpg';
 import Carousel from '../UI/carousel/carousel';
 import bracketsWidget from '../../images/widgets/brackets.svg'
 import timesYellowWidget from '../../images/widgets/times-yellow.svg'
 import timesPurpleWidget from '../../images/widgets/times-purple.svg'
+import styles from './cities-section.module.css'
+import cities from '../../constants/cities';
 
 const CitiesSection = () => {
-  const cities = [
-    {
-      imgURL: quitoImg,
-      topic: 'Quito.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: guayaquilImg,
-      topic: 'Guayaquil.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: cuencaImg,
-      topic: 'Cuenca.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: lojaImg,
-      topic: 'Loja.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: riobambaImg,
-      topic: 'Riobamba.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: ambatoImg,
-      topic: 'Ambato.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-    {
-      imgURL: latacungaImg,
-      topic: 'Latacunga.js',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.',
-      link: '#',
-    },
-  ];
+
   return (
-    <section className="cities-section ec-container">
-      <img className="small-widget times-yellow" src={timesYellowWidget} />
-      <h2 className="section-title">Ciudades</h2>
+    <section className={`ec-container ${styles.cities}`}>
+      <img className={`small-widget ${styles.widget__timesYellow}`} src={timesYellowWidget} />
+      <h2 className={`section-title ${styles.cities__title}`}>Ciudades</h2>
       <Carousel>
         {cities.map(({ imgURL, topic, description, link }) => (
           <Card
@@ -80,8 +24,8 @@ const CitiesSection = () => {
           />
         ))}
       </Carousel>
-      <img className="small-widget bracket" src={bracketsWidget} />
-      <img className="small-widget times-purple" src={timesPurpleWidget} />
+      <img className={`small-widget ${styles.widget__bracket}`} src={bracketsWidget} />
+      <img className={`small-widget ${styles.widget__timesPurple}`} src={timesPurpleWidget} />
     </section>
   );
 };

src/components/cities-section/cities-section.css → src/components/cities-section/cities-section.module.css

@@ -1,27 +1,29 @@
-.cities-section {
+.cities {
     background: #fff;
     height: 840px;
     padding-top: 10em;
     position: relative;
 }
 
-.cities-section .section-title {
+.cities__title {
     margin-bottom: 1em;
 }
 
+
 /* Widgets */
-.bracket {
+
+.widget__bracket {
     bottom: 38.5em;
     right: 13em;
 }
 
-.times-yellow {
+.widget__times--yellow {
     bottom: 25em;
     left: 22.4em;
     z-index: 0;
 }
 
-.times-purple {
+.widget__times--purple {
     bottom: 2em;
     right: 31em;
-}
+}

src/components/community-section/community-section.css

@@ -66,7 +66,7 @@
   justify-content: space-between;
 }
 
-.call-to-action .community-button {
+.call-to-action button {
   margin-bottom: 1em;
 }
 
@@ -75,7 +75,7 @@
     flex-direction: row;
   }
 
-  .call-to-action .community-button {
+  .call-to-action button {
     margin-bottom: 0;
   }
 }