From bbdb29e21da70ce51f329b7e25e86774b5e0a7cd Mon Sep 17 00:00:00 2001
From: Svetlana Stosic Milosavljevic <cecastosic@gmail.com>
Date: Sun, 13 Sep 2020 00:06:30 +0200
Subject: [PATCH] feedback implemented

---
 my-app/src/components/Input/Input.css         |  3 +
 my-app/src/components/avatar/avatar.css       |  4 +-
 my-app/src/components/link/link.css           |  2 +-
 my-app/src/components/name/Name.css           |  3 -
 my-app/src/components/name/name.component.js  | 12 ----
 my-app/src/components/role/role.component.js  | 29 ---------
 my-app/src/components/role/role.css           |  7 ---
 my-app/src/components/sampleButton/button.css |  3 +
 .../sampleButton/sample-button.component.js   |  1 +
 .../userCard/user-card.component.js           | 59 ++++++++++++++-----
 my-app/src/components/userCard/user-card.css  | 28 +++++++--
 .../user-card-section.component.js            |  6 +-
 .../userCardSection/user-card-section.css     |  6 +-
 .../userSkill/user-skill.component.js         |  8 ---
 .../src/components/userSkill/user-skill.css   | 14 -----
 my-app/src/index.css                          | 18 +++---
 my-app/src/stories/stories.js                 | 41 +++++--------
 17 files changed, 106 insertions(+), 138 deletions(-)
 delete mode 100644 my-app/src/components/name/Name.css
 delete mode 100644 my-app/src/components/name/name.component.js
 delete mode 100644 my-app/src/components/role/role.component.js
 delete mode 100644 my-app/src/components/role/role.css
 create mode 100644 my-app/src/components/sampleButton/button.css
 delete mode 100644 my-app/src/components/userSkill/user-skill.component.js
 delete mode 100644 my-app/src/components/userSkill/user-skill.css

diff --git a/my-app/src/components/Input/Input.css b/my-app/src/components/Input/Input.css
index e69de29b..be4d62bf 100644
--- a/my-app/src/components/Input/Input.css
+++ b/my-app/src/components/Input/Input.css
@@ -0,0 +1,3 @@
+input {
+  font-size: 1.6rem;
+}
diff --git a/my-app/src/components/avatar/avatar.css b/my-app/src/components/avatar/avatar.css
index 823e3b3d..4be22d9d 100644
--- a/my-app/src/components/avatar/avatar.css
+++ b/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;
 }
diff --git a/my-app/src/components/link/link.css b/my-app/src/components/link/link.css
index 8c07cbe1..34b693c6 100644
--- a/my-app/src/components/link/link.css
+++ b/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;
 }
diff --git a/my-app/src/components/name/Name.css b/my-app/src/components/name/Name.css
deleted file mode 100644
index cc5a4bdb..00000000
--- a/my-app/src/components/name/Name.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.name h5 {
-  padding: 0.8rem 0 0;
-}
diff --git a/my-app/src/components/name/name.component.js b/my-app/src/components/name/name.component.js
deleted file mode 100644
index 5fbfbdd6..00000000
--- a/my-app/src/components/name/name.component.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import "./name.css";
-
-const Name = ({ name }) => {
-  return (
-    <div className="name">
-      <h5>{name}</h5>
-    </div>
-  );
-};
-
-export default Name;
diff --git a/my-app/src/components/role/role.component.js b/my-app/src/components/role/role.component.js
deleted file mode 100644
index 08d31156..00000000
--- a/my-app/src/components/role/role.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import "./role.css";
-
-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>
-  );
-};
-
-Role.propTypes = {
-  mentor: PropTypes.bool.isRequired,
-  mentee: PropTypes.bool.isRequired
-};
-
-export default Role;
diff --git a/my-app/src/components/role/role.css b/my-app/src/components/role/role.css
deleted file mode 100644
index 9be07cd3..00000000
--- a/my-app/src/components/role/role.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.role h6 {
-  color: #fd4927;
-  font-size: 1rem;
-  font-weight: 300;
-  margin: 0.5rem 0;
-  text-transform: uppercase;
-}
diff --git a/my-app/src/components/sampleButton/button.css b/my-app/src/components/sampleButton/button.css
new file mode 100644
index 00000000..92a99dac
--- /dev/null
+++ b/my-app/src/components/sampleButton/button.css
@@ -0,0 +1,3 @@
+button {
+  font-size: 1.6rem;
+}
diff --git a/my-app/src/components/sampleButton/sample-button.component.js b/my-app/src/components/sampleButton/sample-button.component.js
index 561ba26e..8a478baf 100644
--- a/my-app/src/components/sampleButton/sample-button.component.js
+++ b/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>;
diff --git a/my-app/src/components/userCard/user-card.component.js b/my-app/src/components/userCard/user-card.component.js
index 32dadb4b..e3ccf08c 100644
--- a/my-app/src/components/userCard/user-card.component.js
+++ b/my-app/src/components/userCard/user-card.component.js
@@ -1,29 +1,58 @@
 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>
@@ -31,8 +60,8 @@ const UserCard = ({ name, mentor, mentee, sections }) => {
 };
 
 UserCard.propTypes = {
-  mentor: PropTypes.bool.isRequired,
-  mentee: PropTypes.bool.isRequired
+  user: PropTypes.object.isRequired,
+  sections: PropTypes.array.isRequired
 };
 
 export default UserCard;
diff --git a/my-app/src/components/userCard/user-card.css b/my-app/src/components/userCard/user-card.css
index c95cadad..694f869d 100644
--- a/my-app/src/components/userCard/user-card.css
+++ b/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;
+}
diff --git a/my-app/src/components/userCardSection/user-card-section.component.js b/my-app/src/components/userCardSection/user-card-section.component.js
index d5a1b9bd..8d0933ca 100644
--- a/my-app/src/components/userCardSection/user-card-section.component.js
+++ b/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>
   );
 };
diff --git a/my-app/src/components/userCardSection/user-card-section.css b/my-app/src/components/userCardSection/user-card-section.css
index 23db027b..8f0906d9 100644
--- a/my-app/src/components/userCardSection/user-card-section.css
+++ b/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;
 }
diff --git a/my-app/src/components/userSkill/user-skill.component.js b/my-app/src/components/userSkill/user-skill.component.js
deleted file mode 100644
index f415409a..00000000
--- a/my-app/src/components/userSkill/user-skill.component.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import "./user-skill.css";
-
-const Skill = ({ skills }) => {
-  return <span>{skills}</span>;
-};
-
-export default Skill;
diff --git a/my-app/src/components/userSkill/user-skill.css b/my-app/src/components/userSkill/user-skill.css
deleted file mode 100644
index 016a9d2b..00000000
--- a/my-app/src/components/userSkill/user-skill.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.skills-block {
-  margin: 0 auto 0.3rem;
-  width: 90%;
-}
-
-.skills-block span {
-  display: inline-block;
-  padding: 0.2rem;
-}
-
-.skills-block span::before {
-  content: "#";
-  color: #3b4349;
-}
diff --git a/my-app/src/index.css b/my-app/src/index.css
index 57c9b6a9..b2a23ed0 100644
--- a/my-app/src/index.css
+++ b/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;
 }
diff --git a/my-app/src/stories/stories.js b/my-app/src/stories/stories.js
index 4a933eaa..67b02ef8 100644
--- a/my-app/src/stories/stories.js
+++ b/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" },
       {