Merge pull request #316 from rachelfranklin1/task/I-294/update-card-s…

…tyles Task/i 294/update card styles
Coding-Coach · Apr 23, 2019 · 462e919 · 462e919
2 parents 31d8811 + 2d36907
commit 462e919
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 51 deletions.
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
@@ -4,20 +4,38 @@
   display: flex;
   flex-direction: column;
   width: 280px;
-  padding: 0 32px;
+  padding: 0 20px;
   border-radius: 5px;
   text-align: center;
   position: relative;
-  border: 1px solid #ccc;
   margin-top: calc(var(--avatar-offset) + 20px);
   margin-right: 5px;
   margin-left: 5px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  display: grid;
+  grid-auto-rows: 80px minmax(140px, auto) minmax(60px, auto) 80px;
+}
+.card .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 17px;
+}
+
+.card .location i {
+  margin-right: 5px;
+}
+
+.card .location p {
+  margin: 0;
+  margin-top: 2px;
 }
 
 .card .country {
-  position: absolute;
-  top: 10px;
-  left: 10px;
+  color: hsl(0, 0%, 29%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .card .avatar {
@@ -31,7 +49,7 @@
   font-size: var(--avatar-dim);
   width: var(--avatar-dim);
   height: var(--avatar-dim);
-  background: #fff;
+  background: hsl(0, 0%, 100%);
   color: rgb(155, 155, 155);
   border-radius: 50%;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -49,32 +67,34 @@
 }
 
 .card .name {
-  color: #4a4a4a;
+  color: hsl(0, 0%, 29%);
   font-size: 20px;
   margin: 0 0 5px;
 }
 
 .card .title {
-  color: #999;
+  color: hsl(0, 0%, 29%);
   margin: 0 0 5px;
+  font-weight: 400;
 }
 
 .card .description {
   font-style: italic;
-  background: rgba(21, 21, 21, 0.01);
-  margin-bottom: 5px;
+
+  color: #16385c;
+  font-weight: 600;
+  margin-top: 0;
   padding: 5px 2.5px;
   border-radius: 10px;
 }
 
 .card .tags {
-  margin-bottom: 10px;
-  margin: 10px -10px;
+  z-index: 2;
 }
 
 .card .tag {
-  color: #fff;
-  background: var(--tag-color);
+  color: hsl(0, 0%, 100%);
+  background: #16385c;
   border: 0;
   border-radius: 20px;
   display: inline-block;
@@ -83,6 +103,7 @@
   line-height: 1;
   user-select: none;
   text-transform: lowercase;
+  font-family: monospace;
 }
 
 .card .tag:hover {
@@ -98,14 +119,26 @@
 
 .card .channels .channel-inner {
   display: flex;
-  justify-content: space-between;
-  border-top: 1px solid #ccc;
+  justify-content: space-around;
+
+  background-color: #d0f8ef;
   align-items: center;
-  padding: 10px;
+  padding: 20px 10px 5px 10px;
+  margin-right: -20px;
+  margin-left: -20px;
+}
+.card .wave {
+  position: absolute;
+  bottom: 60px;
+  left: 0;
+  background-color: hsl(0, 0%, 100%);
+  height: 30px;
+  width: 100%;
+  border-radius: 0% 0% 50% 50%;
 }
 
 .card .channels a {
-  color: #9b9b9b;
+  color: #16385c;
   text-decoration: none;
 }
 
@@ -137,17 +170,14 @@
 }
 
 .card .like-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
   background: none;
   border: none;
   cursor: pointer;
 }
 
 .card .liked,
 .card .like-button:hover i {
-  color: #db2828;
+  color: hsl(0, 71%, 51%);
 }
 
 @media all and (max-width: 575.98px) {

diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -4,7 +4,6 @@ import { orderBy } from 'lodash';
 import './Card.css';
 import { getChannelInfo } from '../../channelProvider';
 import classNames from 'classnames';
-import countries from 'svg-country-flags/countries.json';
 
 const generateMentorId = name => {
   return name.replace(/\s/g, '-');
@@ -100,45 +99,67 @@ const LikeButton = ({ onClick, liked }) => (
   </button>
 );
 
-const Info = ({ mentor, handleTagClick }) => {
-  // Don't show the description if it's not provided.
+const Card = ({ mentor, onFavMentor, isFav, handleTagClick }) => {
+  const toggleFav = () => {
+    isFav = !isFav;
+    onFavMentor(mentor);
+  };
+
+  // don't show the description if it's not provided
   const description = mentor.description ? (
     <p className="description">"{mentor.description}"</p>
   ) : (
     <React.Fragment />
   );
 
-  return (
-    <React.Fragment>
-      <h1 className="name" id={`${generateMentorId(mentor.name)}-name`}>
-        {mentor.name}
-      </h1>
-      <h4 className="title">{mentor.title}</h4>
-      {description}
-      <div className="tags">{tagsList(mentor.tags, handleTagClick)}</div>
-      <div className="channels">
-        <div className="channel-inner">{channelsList(mentor.channels)}</div>
-      </div>
-    </React.Fragment>
-  );
-};
+  const MentorInfo = () => {
+    return (
+      <>
+        <div>
+          <h1 className="name" id={`${generateMentorId(mentor.name)}-name`}>
+            {mentor.name}
+          </h1>
+          <h4 className="title">{mentor.title}</h4>
+          {description}
+        </div>
+      </>
+    );
+  };
 
-const Card = ({ mentor, onFavMentor, isFav, handleTagClick }) => {
-  const toggleFav = () => {
-    isFav = !isFav;
-    onFavMentor(mentor);
+  const SkillsTags = () => {
+    return <div className="tags">{tagsList(mentor.tags, handleTagClick)}</div>;
+  };
+
+  const CardFooter = () => {
+    return (
+      <>
+        <div className="wave" />
+        <div className="channels">
+          <div className="channel-inner">{channelsList(mentor.channels)}</div>
+        </div>
+      </>
+    );
   };
 
+  const CardHeader = () => {
+    return (
+      <div className="header">
+        <div className="country location">
+          <i className={'fa fa-map-marker'} />
+          <p>{mentor.country}</p>
+        </div>
+
+        <Avatar mentor={mentor} />
+        <LikeButton onClick={toggleFav} liked={isFav} />
+      </div>
+    );
+  };
   return (
     <div className="card" aria-label="Mentor card">
-      <LikeButton onClick={toggleFav} liked={isFav} />
-      <img
-        className="country"
-        src={`https://www.countryflags.io/${mentor.country}/flat/32.png`}
-        alt={countries[mentor.country]}
-      />
-      <Avatar mentor={mentor} />
-      <Info mentor={mentor} handleTagClick={handleTagClick} />
+      <CardHeader />
+      <MentorInfo />
+      <SkillsTags />
+      <CardFooter />
     </div>
   );
 };