feedback implemented

my-app/src/components/Input/Input.css

@@ -0,0 +1,3 @@
+input {
+  font-size: 1.6rem;
+}

my-app/src/components/avatar/avatar.css

@@ -1,5 +1,5 @@
 .avatar-img {
   border-radius: 50%;
-  height: 3.75rem;
-  width: 3.75rem;
+  height: 6rem;
+  width: 6rem;
 }

my-app/src/components/link/link.css

@@ -1,6 +1,6 @@
 .contact-link {
   font-style: normal;
-  font-size: 1rem;
+  font-size: 1.6rem;
   font-weight: 500;
   text-decoration-line: underline;
 }

my-app/src/components/sampleButton/button.css

@@ -0,0 +1,3 @@
+button {
+  font-size: 1.6rem;
+}

my-app/src/components/sampleButton/sample-button.component.js

@@ -3,6 +3,7 @@
 
 // Import react, css and other files if needed
 import React from "react";
+import "./button.css";
 
 const SampleButton = () => {
   return <button>Sample button</button>;

my-app/src/components/userCard/user-card.component.js

@@ -1,38 +1,67 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "./user-card.css";
-import Name from "../name/name.component";
 import Avatar from "../avatar/avatar.component";
-import Role from "../role/role.component";
 import UserCardSection from "../userCardSection/user-card-section.component";
 
-const UserCard = ({ name, mentor, mentee, sections }) => {
+const Name = ({ name }) => {
   return (
-    <div
-      className={
-        mentor && mentee
-          ? "mentor-mentee card"
-          : mentee
-          ? "mentee card"
-          : "card"
-      }
-    >
+    <div className="name">
+      <h5>{name}</h5>
+    </div>
+  );
+};
+
+const Role = ({ mentor, mentee }) => {
+  return (
+    <div className="role">
+      <h6>
+        {mentor && mentee ? (
+          <>
+            <span>Mentor</span> /<span> Mentee</span>
+          </>
+        ) : mentee ? (
+          <span>Mentee</span>
+        ) : (
+          <span>Mentor</span>
+        )}
+      </h6>
+    </div>
+  );
+};
+
+function getClassName(user) {
+  const classes = ["card"];
+  user.mentor && classes.push("mentor");
+  user.mentee && classes.push("mentee");
+  return classes.join(" ");
+}
+
+const UserCard = ({ user, sections }) => {
+  const { name, mentor, mentee } = user;
+  return (
+    <div className={getClassName(user)}>
       <div className={sections.length > 1 ? "extended content" : "content"}>
+        {}
         <Avatar />
         <Name name={name} />
         <Role mentor={mentor} mentee={mentee} />
         {sections.length > 0 &&
           sections.map((article, index) => (
-            <UserCardSection key={index} sections={article} />
+            <UserCardSection
+              key={index}
+              title={article.title}
+              text={article.text}
+            />
           ))}
       </div>
     </div>
   );
 };
 
 UserCard.propTypes = {
-  mentor: PropTypes.bool.isRequired,
-  mentee: PropTypes.bool.isRequired
+  user: PropTypes.object.isRequired,
+  sections: PropTypes.array.isRequired
 };
 
 export default UserCard;

my-app/src/components/userCard/user-card.css

@@ -4,10 +4,10 @@
   color: #3b4349;
   display: flex;
   flex-direction: column;
-  margin: 4rem;
-  padding: 0.8rem;
+  margin: 6rem;
+  padding: 1.3rem;
   text-align: left;
-  width: 20rem;
+  width: 32rem;
 }
 
 .card.mentee {
@@ -24,10 +24,10 @@
 
 .card .content {
   background-color: #fff;
-  margin: 0 1rem;
-  padding: 0.8rem 1.5rem 0.2rem;
+  margin: 0 1.6rem;
+  padding: 1.2rem 2.4rem 0.4rem;
   position: relative;
-  width: 18.5rem;
+  width: 29.2rem;
 }
 
 .card .avatar {
@@ -46,3 +46,19 @@
 .card .extended .role + .card-section {
   border-top: none;
 }
+
+.card .name h5 {
+  padding: 1.2rem 0 0;
+}
+
+.card .role h6 {
+  color: #fd4927;
+  font-size: 1.6rem;
+  font-weight: 300;
+  margin: 0.8rem 0;
+  text-transform: uppercase;
+}
+
+.card .role h6 span {
+  font-size: 1.6rem;
+}

my-app/src/components/userCardSection/user-card-section.component.js

@@ -1,11 +1,11 @@
 import React from "react";
 import "./user-card-section.css";
 
-const UserCardSection = ({ sections }) => {
+const UserCardSection = ({ title, text }) => {
   return (
     <section className="user-card">
-      <h6>{sections.title}</h6>
-      <p>{sections.text}</p>
+      <h6>{title}</h6>
+      <p>{text}</p>
     </section>
   );
 };

my-app/src/components/userCardSection/user-card-section.css

@@ -1,9 +1,9 @@
 .user-card {
   border-top: 1px solid rgba(253, 73, 39, 0.5);
-  margin: 0.8rem 0;
-  padding-top: 0.8rem;
+  margin: 1.2rem 0;
+  padding-top: 1.2rem;
 }
 
 .user-card h6 {
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.3rem;
 }

my-app/src/index.css

@@ -3,7 +3,7 @@
 * {
   box-sizing: border-box;
   font-family: "DM Mono", monospace, Arial, Helvetica, sans-serif;
-  font-size: 16px;
+  font-size: 62.5%;
   margin: 0;
   padding: 0;
 }
@@ -20,40 +20,40 @@ code {
 }
 
 h1 {
-  font-size: 3.75em;
+  font-size: 6rem;
   font-weight: 500;
 }
 
 h2 {
-  font-size: 3.125em;
+  font-size: 5rem;
   font-weight: 500;
 }
 
 h3 {
-  font-size: 2.5em;
+  font-size: 4rem;
   font-weight: 500;
 }
 
 h4 {
-  font-size: 1.875em;
+  font-size: 3rem;
   font-weight: 500;
 }
 
 h5 {
-  font-size: 1.5em;
+  font-size: 2.5rem;
   font-weight: 500;
 }
 
 h6 {
-  font-size: 1.25em;
+  font-size: 2rem;
   font-weight: 500;
 }
 
 p {
-  font-size: 1em;
+  font-size: 1.6rem;
   font-weight: 300;
 }
 
 label {
-  font-size: 0.75em;
+  font-size: 1.2rem;
 }

my-app/src/stories/stories.js

@@ -5,10 +5,7 @@ import Avatar from "../components/avatar/avatar.component";
 import Input from "../components/input/input.component";
 import SampleButton from "../components/sampleButton/sample-button.component";
 import Link from "../components/link/link.component";
-import Name from "../components/name/name.component";
 import UserCard from "../components/userCard/user-card.component";
-import Skill from "../components/userSkill/user-skill.component";
-import Role from "../components/role/role.component";
 
 // Add the stories of your components here
 storiesOf("Avatar", module).add("avatar", () => <Avatar />);
@@ -25,45 +22,37 @@ storiesOf("Link Component", module).add("link contact", () => (
 storiesOf("Link Component", module).add("link more", () => (
   <Link link="/username" text="More" />
 ));
-storiesOf("Name", module).add("first name", () => (
-  <Name name="MaryAnn Salvato" />
-));
-storiesOf("Name", module).add("surname", () => <Name name="Johnson" />);
-storiesOf("Skill", module).add("skill", () => <Skill skills="JavaScript" />);
-storiesOf("Role", module).add("mentor", () => (
-  <Role role="" mentor={false} mentee={true} />
-));
-storiesOf("Role", module).add("mentor/mentee", () => (
-  <Role role="" mentor={true} mentee={true} />
-));
-
 storiesOf("User Card", module).add("card mentor", () => (
   <UserCard
-    name="MaryAnn Salvato"
-    mentor={true}
-    mentee={false}
+    user={{
+      name: "MaryAnn Salvato",
+      mentor: true,
+      mentee: false
+    }}
     sections={[
       { title: "Looking to", text: "Help other women to get into tech" }
     ]}
   />
 ));
-
 storiesOf("User Card", module).add("card mentee", () => (
   <UserCard
-    name="MaryAnn Salvato"
-    mentor={false}
-    mentee={true}
+    user={{
+      name: "MaryAnn Salvato",
+      mentor: false,
+      mentee: true
+    }}
     sections={[
       { title: "Looking for", text: "Sparring and helping with React code" }
     ]}
   />
 ));
-
 storiesOf("User Card", module).add("card extended", () => (
   <UserCard
-    name="MaryAnn Salvato"
-    mentor={true}
-    mentee={true}
+    user={{
+      name: "MaryAnn Salvato",
+      mentor: true,
+      mentee: true
+    }}
     sections={[
       { title: "Looking to", text: "Help other women to get into tech" },
       {