Style: Header

Author: Jnixon54

.gitignore

@@ -16,7 +16,7 @@
 .env.test.local
 .env.production.local
 .config
-.firebaseconfig
+/src/firebaseconfig.js
 
 npm-debug.log*
 yarn-debug.log*

public/index.html

@@ -10,7 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Roboto|Nixie+One|Lora|Josefin+Slab" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Roboto|Open+Sans+Condensed:300,700|Lora|Josefin+Slab" rel="stylesheet">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/components/Dashboard/Dashboard.css

@@ -1,3 +1,8 @@
+h1 {
+  font-family: 'Open Sans Condensed';
+  font-weight: 300;
+}
+
 .dashboard-container {
   width: calc(100vw - 66px);
   position: absolute;
@@ -21,15 +26,32 @@
 .create-item {
   background-color: rgba(220, 220, 220, 0.516) !important;
   box-shadow: none !important;
+  /* transition: background-color .1s ease; */
+}
+
+.create-item:hover {
+  background-color: rgba(144, 148, 159, 0.516) !important;
 }
 
 .add-circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 90px;
   width: 90px;
   background-color: rgb(220, 220, 220);
   border-radius: 50px;
 }
 
+.add-circle span {
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.541);
+}
+
 .project-card {
   display: flex;
   justify-content: center;
@@ -39,17 +61,23 @@
   width: 280px;
   background-color: rgb(144, 148, 159);
   border-radius: 5px;
-  box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 0.15);
+  /* box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 0.15); */
   cursor: pointer;
   color: rgb(255, 255, 255);
+  /* transition: background-color .1s ease; */
+}
+
+.project-card:hover {
+  background-color: rgb(118, 123, 136);
+  box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 0.15);
 }
 
 .card-header {
   position: absolute;
   top: 3px;
   left: 5px;
   height: 30px;
-  width: 90%;
+  width: 80%;
   margin: 0 auto;
 }
 
@@ -64,3 +92,10 @@
   border-radius: 10px;
   z-index: 100;
 }
+
+.personal-board-container {
+  margin-top: 10px;
+}
+.collab-board-container {
+  margin-top: 50px;
+}

src/components/Dashboard/Dashboard.js

@@ -81,21 +81,25 @@ class Dashboard extends Component {
     return (
       <div className="dashboard-container">
         <div className="container">
-          <Header />
+          <Header path={"Dashboard"} currentPath={"Boards"}/>
           <div className="projects-container">
-          <h1>Personal Boards</h1>
-            <div className="projects-container-inner">
-                <div className="project-card create-item" onClick={() => this.createProjectToolTip()}>
-                  <div className="add-circle">
-                    +
-                  </div>
+            <div className="personal-board-container">
+              <h1>Personal Boards</h1>
+                <div className="projects-container-inner">
+                    <div className="project-card create-item" onClick={() => this.createProjectToolTip()}>
+                      <div className="add-circle">
+                        <span>+</span>
+                      </div>
+                    </div>
+                    {this.state.toolTip && projectToolTip}
+                    {this.props.projects && projectBox}
                 </div>
-                {this.state.toolTip && projectToolTip}
-                {this.props.projects && projectBox}
             </div>
-            <h1>Collaborative Boards</h1>
-            <div className="projects-container-inner">
-              {this.props.teamProjects &&  teamProjects}
+            <div className="collab-board-container">
+              <h1>Collaborative Boards</h1>
+              <div className="projects-container-inner">
+                {this.props.teamProjects &&  teamProjects}
+              </div>
             </div>
           </div>
         </div>

src/components/Header/Header.css

@@ -5,4 +5,16 @@
   width: 100%;
   height: 40px;
   margin-top: 10px;
+}
+
+.header-light {
+  font-size: 18px;
+  font-weight: lighter;
+  font-family: 'Open Sans Condensed';
+}
+
+.header-bold {
+  font-size: 20px;
+  font-weight: bolder;
+  font-family: 'Open Sans Condensed';
 }

src/components/Header/Header.js

@@ -1,12 +1,22 @@
 import React from 'react';
 import './Header.css';
+import {withRouter} from 'react-router';
+import {connect} from 'react-redux';
 
-const Header = () => {
+const Header = (props) => {
   return (
     <div className="header-container">
-      <div>Path</div>
-      <div>display name</div>
+      <div>
+        <span className="header-light">{props.path}</span> - <span className="header-bold">{props.currentPath}</span>
+      </div>
+      <div className="header-bold">{props.displayName}</div>
     </div>
 )}
 
-export default Header
+function mapStateToProps(state) {
+  return {
+    displayName: state.user.displayName
+  }
+}
+
+export default withRouter(connect(mapStateToProps)(Header));

src/components/LandingPage/LoginModal/LoginModal.css

@@ -32,7 +32,7 @@
   height: 50px;
   text-align: center;
   font-size: 32px;
-  font-family: 'Josefin Slab';
+  font-family: 'Open Sans Condensed';
   letter-spacing: 0px;
   padding-top: 25px;
   background-color: rgb(18, 40, 58);
@@ -53,7 +53,7 @@
 }
 
 .login-input {
-  font-family: 'Josefin Slab';
+  font-family: 'Open Sans Condensed';
   font-weight: bolder;
   font-size: 24px;
   padding: 0;
@@ -86,13 +86,13 @@
   border-radius: 15px;
   background: rgba(0, 63, 94, 0.824);;
   color: rgb(242,242,242);
-  font-family: 'Josefin Slab';
+  font-family: 'Open Sans Condensed';
   font-weight: bolder;
   /* box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.15); */
 }
 
 .separator {
-  font-family: 'Josefin Slab';
+  font-family: 'Open Sans Condensed';
   font-size: 20px;
   line-height: 20px;
   display: flex;

src/components/SettingView/Settings/fire.js

@@ -1,4 +1,5 @@
 import firebase from 'firebase';
+import config from '../../../firebaseconfig.js';
 
 const fire = firebase.initializeApp(config);
 

src/components/Sidebar/Sidebar.css

@@ -33,10 +33,10 @@
 }
 
 .logo-text {
-  transform: rotate(90deg);
-  margin-left: 15px;
-  height: 50px;
-  padding: 5px 0 5px 0;
+  transform: rotate(-90deg);
+  position: fixed;
+  bottom: 30px;
+  left: -22px;
   color: rgb(236, 246, 255);
   font-weight: normal;
   /* color: rgb(255, 59, 88); */

src/ducks/reducers/userReducer.js

@@ -7,7 +7,7 @@ const initialState = {
   userIsLoggedIn: false,
   username: '',
   userID: '',
-  display_name: '',
+  displayName: '',
   email: '',
   profilePicture: '',
   bio: ''
@@ -33,11 +33,12 @@ function reducer(state = initialState, action) {
                         passwordInput: '',
                         username: action.payload.username,
                         userID: action.payload.id,
-                        display_name: action.payload.display_name,
+                        displayName: action.payload.display_name,
                         email: action.payload.email };
     case GET_USER_INFO + '_PENDING':
       return { ...state, loading: true };
     case GET_USER_INFO + '_FULFILLED':
+    // console.log(action.payload.display_name)
       return {...state, username: action.payload.username, displayName: action.payload.display_name, userID: action.payload.id, profilePicture: action.payload.image_url, email: action.payload.email, bio: action.payload.bio, loading: false};
      case ON_SUBMIT_LOGIN + '_PENDING':
        return { ...state };
@@ -97,7 +98,7 @@ export function getUserInfo() {
       .get('/api/getUserInfo')
       .then(response => {
         return response.data[0];
-      console.log(response.data[0]);})
+      ;})
   };
 }