rewired .scss files | corrected profilepic icon of photographer

Fairshots · Feb 19, 2019 · 828e5a2 · 828e5a2
1 parent a3a709d
commit 828e5a2
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/UI/navbar.js b/src/components/UI/navbar.js
@@ -13,6 +13,7 @@ import {
 } from "mdbreact";
 import { Link } from "react-router-dom";
 import LoginHandler from "../../containers/loginHandler";
+import "./navbar.scss";
 
 class NavbarPage extends Component {
     state = {
@@ -42,20 +43,25 @@ class NavbarPage extends Component {
                                 <MDBDropdownToggle nav color="#444444" caret>
                                     ORGANIZATIONS
                                 </MDBDropdownToggle>
-                                <MDBDropdownMenu right>
+                                <MDBDropdownMenu className="n-dropdown-menu" right>
                                     <MDBDropdownItem
+                                        className="n-dropdown-link"
                                         onClick={this.redirect("/register#organization")}
                                     >
                                         REGISTER AN ORGANIZATION
                                     </MDBDropdownItem>
                                     {isAuthenticated && userType !== "photographer" && (
                                         <MDBDropdownItem
+                                            className="n-dropdown-link"
                                             onClick={this.redirect("/create-a-project")}
                                         >
                                             CREATE A NEW PROJECT
                                         </MDBDropdownItem>
                                     )}
-                                    <MDBDropdownItem onClick={this.redirect("/photographers")}>
+                                    <MDBDropdownItem
+                                        className="n-dropdown-link"
+                                        onClick={this.redirect("/photographers")}
+                                    >
                                         FIND A PHOTOGRAPHER
                                     </MDBDropdownItem>
                                 </MDBDropdownMenu>
@@ -66,16 +72,23 @@ class NavbarPage extends Component {
                                 <MDBDropdownToggle nav color="#444444" caret>
                                     PHOTOGRAPHERS
                                 </MDBDropdownToggle>
-                                <MDBDropdownMenu right>
+                                <MDBDropdownMenu className="n-dropdown-menu" right>
                                     <MDBDropdownItem
+                                        className="n-dropdown-link"
                                         onClick={this.redirect("/register#photographer")}
                                     >
                                         REGISTER AS A PHOTOGRAPHER
                                     </MDBDropdownItem>
-                                    <MDBDropdownItem onClick={this.redirect("/organizations")}>
+                                    <MDBDropdownItem
+                                        className="n-dropdown-link"
+                                        onClick={this.redirect("/organizations")}
+                                    >
                                         FIND AN NGO
                                     </MDBDropdownItem>
-                                    <MDBDropdownItem onClick={this.redirect("/projectss")}>
+                                    <MDBDropdownItem
+                                        className="n-dropdown-link"
+                                        onClick={this.redirect("/projectss")}
+                                    >
                                         CURRENT PROJECTS
                                     </MDBDropdownItem>
                                 </MDBDropdownMenu>
@@ -88,7 +101,7 @@ class NavbarPage extends Component {
                             <MDBNavLink to="/contact-us">CONTACT</MDBNavLink>
                         </MDBNavItem>
                     </MDBNavbarNav>
-                    <MDBNavbarNav right>
+                    <MDBNavbarNav className="login-handler" right>
                         <LoginHandler />
                     </MDBNavbarNav>
                 </MDBCollapse>

diff --git a/src/components/UI/navbar.scss b/src/components/UI/navbar.scss
@@ -0,0 +1,28 @@
+.navbar {
+    a {
+        color: white;
+    }
+
+    .n-dropdown-link {
+        font-family: Lato, sans-serif;
+        font-size: 15px;
+        font-weight: 100;
+        text-transform: uppercase;
+        text-align: left;
+        margin-left: auto;
+        margin-right: auto;
+        white-space: nowrap;
+        padding: 10px 20px;
+        display: block;
+        -webkit-transition: background-color 200ms ease;
+        transition: background-color 200ms ease;
+        color: #fff;
+        background-color: #444;
+    }
+    .n-dropdown-link:hover {
+        background-color: #00a651;
+    }
+    .n-dropdown-menu {
+        background-color: #444;
+    }
+}
diff --git a/src/containers/loginHandler/index.js b/src/containers/loginHandler/index.js
@@ -65,7 +65,7 @@ class LoginHandler extends Component {
             <>
                 {!isAuthenticated && (
                     <>
-                        <MDBNavItem>
+                        <MDBNavItem className="loglog">
                             <MDBNavLink to="#!" onClick={() => this.toggleOpenCloses("loginModal")}>
                                 <MDBIcon icon="user" className="mr-2" /> LOGIN
                             </MDBNavLink>
@@ -78,17 +78,18 @@ class LoginHandler extends Component {
                     </>
                 )}
                 {isAuthenticated && (
-                    <MDBDropdown>
-                        <MDBDropdownToggle nav className="text-white">
+                    <MDBDropdown className="profileNav">
+                        <MDBDropdownToggle nav className="loglog" caret>
                             <img
-                                src={profile.Logo}
+                                src={profile.Logo || profile.ProfilePic}
                                 className="rounded-circle z-depth-0 mr-2"
                                 alt=""
                             />
                             {userInfo.userName}
                         </MDBDropdownToggle>
-                        <MDBDropdownMenu>
+                        <MDBDropdownMenu className="f-dropdown-menu">
                             <MDBDropdownItem
+                                className="f-dropdown-link"
                                 onClick={() =>
                                     history.push(
                                         `/${this.props.userInfo.userType}/${
@@ -99,7 +100,10 @@ class LoginHandler extends Component {
                             >
                                 <MDBIcon className="mr-2" icon="cog" /> PROFILE
                             </MDBDropdownItem>
-                            <MDBDropdownItem onClick={() => handleLogout(history)}>
+                            <MDBDropdownItem
+                                className="f-dropdown-link"
+                                onClick={() => handleLogout(history)}
+                            >
                                 <MDBIcon className="mr-2" icon="sign-in-alt" /> LOGOUT
                             </MDBDropdownItem>
                         </MDBDropdownMenu>

diff --git a/src/containers/loginHandler/login-handler.scss b/src/containers/loginHandler/login-handler.scss
@@ -1,12 +1,7 @@
+
 .login-handler {
     .loglog {
-        font-family: Lato, sans-serif;
-        font-weight: 100;
-        font-size: 15px;
-        background-color: transparent;
-        border-color: transparent;
-        border-radius: 0;
-        height: 62.4px;
+        color: white !important;
     }
     .profileNav.loglog:hover {
         background-color: #00a651;