MVP Styled

Le-Cache · Jan 3, 2020 · b58c47f · b58c47f
1 parent 6004564
commit b58c47f
Show file tree

Hide file tree

Showing 10 changed files with 321 additions and 31 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/client/src/App.js b/client/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import axios from 'axios';
 import CardsContainer from './components/main/cardsContainer';
 import Sidebar from './components/sidebar/sidebar';
+import './styles/index.css';
 
 /*
 App
@@ -51,7 +52,7 @@ class App extends React.Component {
     render() {
         if (this.state.users !== '') {
             return (
-                <div className="App">
+                <div className="app">
                     <Sidebar
                         filters={this.state.filters}
                         handlesChanges={this.handlesChanges}

diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/assets/pin.svg b/client/src/assets/pin.svg
diff --git a/client/src/assets/placeholder.png b/client/src/assets/placeholder.png
diff --git a/client/src/assets/twitter.png b/client/src/assets/twitter.png
diff --git a/client/src/components/main/cardsContainer.js b/client/src/components/main/cardsContainer.js
@@ -4,11 +4,16 @@ import UserCard from './userCard';
 const CardsContainer = props => {
     if (props.users.length) {
         return (
-            <div>
+            <main>
+                <div className="top">
+                    <p><span>&#x2717; Dummy Tag</span></p>
+                </div>
+                <div className="cards">
                 {props.users.map((user, index) => (
                     <UserCard key={index} data={user.fields} />
                 ))}
-            </div>
+                </div>
+            </main>
         );
     } else {
         return <div>Loading...</div>;

diff --git a/client/src/components/main/userCard.js b/client/src/components/main/userCard.js
@@ -1,4 +1,7 @@
 import React from 'react';
+import placeholder from '../../assets/placeholder.png';
+import pin from '../../assets/pin.svg';
+import twitterIcon from '../../assets/twitter.png';
 
 const UserCard = props => {
     /*Field Names*/
@@ -14,25 +17,49 @@ const UserCard = props => {
     const profilePic = 'Profile Picture';
 
     return (
-        <div>
+        <div className="card">
             {props.data[profilePic] ? (
-                <img
-                    src={props.data[profilePic][0].url}
-                    alt={`${props.data[firstName]} ${props.data[lastName]}`}
-                />
+                <div className="frame">
+                    <div className="avatar-image"style={{ backgroundImage:`url(${props.data[profilePic][0].url})`}}>
+
+                    </div>
+                </div>
             ) : (
-                <></>
+                <div className="frame">
+                    <div className="avatar-image" style={{ backgroundImage:`url(${placeholder})`}}>
+
+                    </div>
+                </div>
             )}
-            <p>
-                {props.data[firstName]} {props.data[lastName]}
-            </p>
-            <p>{props.data[program]}</p>
-            <p>{props.data[location]}</p>
-            <p>{props.data[bio]}</p>
-            <p>{props.data[linkedIn]}</p>
-            {props.data[twitter] ? <p>{props.data[twitter]}</p> : <></>}
-            {props.data[github] ? <p>{props.data[github]}</p> : <></>}
-            {props.data[portfolio] ? <p>{props.data[portfolio]}</p> : <></>}
+            <div className="card-content">
+                <div className="row">
+                    <div className="col">
+                        <h2>
+                            {props.data[firstName]} {props.data[lastName]}
+                        </h2>
+                    </div>
+                    <div className="col">
+                        {props.data[twitter] ? <a className="icon" href={props.data[twitter]}  rel="noopener noreferrer" target="_blank"><img className="icon" src={`${twitterIcon}`} /></a> : <></>}
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col">
+                        <p>{props.data[program]}</p>
+                    </div>
+                    <div className="col">
+                        <p><img className="pin" src={`${pin}`} width="12px" height="auto" />{props.data[location]}</p>
+                    </div>
+                </div>
+                <div className="row">
+                    <p className="bio">{props.data[bio]}</p>
+                </div>
+
+            </div>
+            <div className="row last">
+                <a className="btn" href={props.data[linkedIn]} rel="noopener noreferrer" target="_blank">Linkedin</a>
+                {props.data[portfolio] ? <a className="btn" href={props.data[portfolio]} rel="noopener noreferrer" target="_blank">Site</a> : <></>}
+                {props.data[github] ? <a className="btn" href={props.data[github]} rel="noopener noreferrer" target="_blank">GitHub</a> : <></>}
+            </div>
         </div>
     );
 };

diff --git a/client/src/components/sidebar/sidebar.js b/client/src/components/sidebar/sidebar.js
@@ -1,57 +1,61 @@
 import React from 'react';
 import Navigation from './navigation';
+import logo from '../../assets/logo.png';
 
 const Sidebar = props => (
-    <div>
+    <aside>
+        <div className="logo">
+            <img src={`${logo}`} />
+        </div>
         <form>
-            <label htmlFor="Android Development">
+            <label htmlFor="Android Development" className="check">
                 <input
                     type="checkbox"
                     name="Android Development"
                     id="Android Development"
                     onChange={props.handlesChanges}
                 />
-                Android Developer
+                <span>Android Developer</span>
             </label>
-            <label htmlFor="Data Science">
+            <label htmlFor="Data Science" className="check">
                 <input
                     type="checkbox"
                     name="Data Science"
                     id="Data Science"
                     onChange={props.handlesChanges}
                 />
-                Data Science
+                <span>Data Science</span>
             </label>
-            <label htmlFor="iOS Development">
+            <label htmlFor="iOS Development" className="check">
                 <input
                     type="checkbox"
                     name="iOS Development"
                     id="iOS Development"
                     onChange={props.handlesChanges}
                 />
-                iOS Developer
+                <span>iOS Developer</span>
             </label>
-            <label htmlFor="Web Development">
+            <label htmlFor="Web Development" className="check">
                 <input
                     type="checkbox"
                     name="Web Development"
                     id="Web Development"
                     onChange={props.handlesChanges}
                 />
-                Web Developer
+                <span>Web Developer</span>
             </label>
-            <label htmlFor="UX Design">
+            <label htmlFor="UX Design" className="check">
                 <input
                     type="checkbox"
                     name="UX Design"
                     id="UX Design"
                     onChange={props.handlesChanges}
                 />
-                UX Design
+                <span>UX Design</span>
             </label>
         </form>
         <Navigation />
-    </div>
+    </aside>
 );
 
 export default Sidebar;