From 65b009077b03193f8426ef09fa89e70c3ee8de2d Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 25 Jul 2017 15:35:18 -0400
Subject: [PATCH] many updates to nav style

---
 client/components/Nav.jsx               | 116 ++++++++++++++----------
 client/styles/abstracts/_variables.scss |  16 ++--
 client/styles/components/_nav.scss      |  78 ++++++++++++----
 3 files changed, 139 insertions(+), 71 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 24d3f1e2..a0772d4d 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -19,10 +19,14 @@ class Nav extends React.PureComponent {
           </li>
           <li className="nav__item">
             <button>
-              File
+              <span className="nav__item-header">File</span>
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
+              <li className="nav__dropdown-heading">
+                <span>File</span>
+                <InlineSVG src={triangleUrl} />
+              </li>
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -85,24 +89,32 @@ class Nav extends React.PureComponent {
           </li>
           <li className="nav__item">
             <button>
-              Edit
+              <span className="nav__item-header">Edit</span>
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
+              <li className="nav__dropdown-heading">
+                <span>Edit</span>
+                <InlineSVG src={triangleUrl} />
+              </li>
               <li className="nav__dropdown-item">
                 Tidy Code
               </li>
-              <li cclassName="nav__dropdown-item">
+              <li className="nav__dropdown-item">
                 Find
               </li>
             </ul>
           </li>
           <li className="nav__item">
             <button>
-              Sketch
+              <span className="nav__item-header">Sketch</span>
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
+              <li className="nav__dropdown-heading">
+                <span>Sketch</span>
+                <InlineSVG src={triangleUrl} />
+              </li>
               <li className="nav__dropdown-item">
                 Run
               </li>
@@ -113,10 +125,14 @@ class Nav extends React.PureComponent {
           </li>
           <li className="nav__item">
             <button>
-              Help
+              <span className="nav__item-header">Help</span>
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
+              <li className="nav__dropdown-heading">
+                <span>Help</span>
+                <InlineSVG src={triangleUrl} />
+              </li>
               <li className="nav__dropdown-item">
                 Keyboard Shortcuts
               </li>
@@ -135,51 +151,53 @@ class Nav extends React.PureComponent {
             </ul>
           </li>
         </ul>
-        <ul className="nav__items-right" title="user-menu">
-          {(() => {
-            if (!this.props.user.authenticated) {
-              return (
-                <li className="nav__item">
-                  <p>
-                    <Link to="/login">Log in</Link>
-                    <span className="nav__item-spacer">or</span>
-                    <Link to="/signup">Sign up</Link>
-                  </p>
+        { !this.props.user.authenticated &&
+          <ul className="nav__items-right" title="user-menu">
+            <li className="nav__item">
+              <p>
+                <Link to="/login">Log in</Link>
+                <span className="nav__item-spacer">or</span>
+                <Link to="/signup">Sign up</Link>
+              </p>
+            </li>
+          </ul>}
+        { this.props.user.authenticated &&
+          <ul className="nav__items-right" title="user-menu">
+            <li className="nav__item">
+              <span>Hello, {this.props.user.username}!</span>
+            </li>
+            <span className="nav__item-spacer">|</span>
+            <li className="nav__item">
+              <button className="nav__item-header">My Account</button>
+              <InlineSVG src={triangleUrl} />
+              <ul className="nav__dropdown">
+                <li className="nav__dropdown-heading">
+                  <button>My Account</button>
+                  <InlineSVG src={triangleUrl} />
                 </li>
-              );
-            }
-            return (
-              <li className="nav__item">
-                <a>Hello, {this.props.user.username}!</a>
-                <ul className="nav__dropdown">
-                  <li className="nav__dropdown-heading">
-                    <a>Hello, {this.props.user.username}!</a>
-                  </li>
-                  <li>
-                    <Link to={`/${this.props.user.username}/sketches`}>
-                      My sketches
-                    </Link>
-                  </li>
-                  <li>
-                    <Link to={`/${this.props.user.username}/assets`}>
-                      My assets
-                    </Link>
-                  </li>
-                  <li>
-                    <Link to={`/${this.props.user.username}/account`}>
-                      My account
-                    </Link>
-                  </li>
-                  <li>
-                    <button onClick={this.props.logoutUser} >
-                      Log out
-                    </button>
-                  </li>
-                </ul>
-              </li>
-            );
-          })()}
-        </ul>
+                <li className="nav__dropdown-item">
+                  <Link to={`/${this.props.user.username}/sketches`}>
+                    My sketches
+                  </Link>
+                </li>
+                <li className="nav__dropdown-item">
+                  <Link to={`/${this.props.user.username}/assets`}>
+                    My assets
+                  </Link>
+                </li>
+                <li className="nav__dropdown-item">
+                  <Link to={`/${this.props.user.username}/account`}>
+                    Settings
+                  </Link>
+                </li>
+                <li className="nav__dropdown-item">
+                  <button onClick={this.props.logoutUser} >
+                    Log out
+                  </button>
+                </li>
+              </ul>
+            </li>
+          </ul> }
         <div className="nav__announce">
           This is a preview version of the editor, that has not yet been officially released.
           It is in development, you can report bugs <a
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 122c9df8..612a5108 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -15,7 +15,7 @@ $themes: (
     primary-text-color: #333,
     modal-button-color: #333,
     heading-text-color: #333,
-    secondary-text-color: #6b6b6b,
+    secondary-text-color: #a8a8a8,
     inactive-text-color: #b5b5b5,
     background-color: #fbfbfb,
     preview-placeholder-color: #dcdcdc,
@@ -30,7 +30,8 @@ $themes: (
     button-active-color: $white,
     modal-background-color: #f4f4f4,
     modal-button-background-color: #e6e6e6,
-    modal-border-color: #B9D0E1,
+    modal-border-color: rgba(17, 17, 17, 0.3),
+    modal-boder-selected-color: #B9D0E1,
     icon-color: $icon-color,
     icon-hover-color: $icon-hover-color,
     icon-toast-hover-color: $white,
@@ -44,14 +45,15 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #4a4a4a,
-    search-background-color: #ebebeb
+    search-background-color: #ebebeb,
+    dropdown-color: #414141
   ),
   dark: (
     logo-color: $p5js-pink,
     primary-text-color: $white,
     modal-button-color: $white,
     heading-text-color: $white,
-    secondary-text-color: #c2c2c2,
+    secondary-text-color: #DADADA,
     inactive-text-color: #b5b5b5,
     background-color: #333,
     preview-placeholder-color: #dcdcdc,
@@ -80,7 +82,8 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
-    search-background-color: #ebebeb
+    search-background-color: #ebebeb,
+    dropdown-color: #414141
   ),
   contrast: (
     logo-color: $yellow,
@@ -115,7 +118,8 @@ $themes: (
     input-text-color: #333,
     input-border-color: #b5b5b5,
     about-list-text-color: #f4f4f4,
-    search-background-color: $white
+    search-background-color: $white,
+    dropdown-color: #e1e1e1
   )
 );
 
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 7bba9a1d..559e65d0 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -7,6 +7,9 @@
 	@include themify() {
 		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
 	}
+  & button {
+    padding: 0;
+  }
 }
 
 .nav__items-left, .nav__items-right {
@@ -15,22 +18,24 @@
 	flex-direction: row;
 	justify-content: flex-end;
   height: 100%;
+  align-items: center;
 }
 
 .nav__items-left {
   & button {
     @include themify() {
-      color: getThemifyVariable('inactive-text-color');
+      color: getThemifyVariable('secondary-text-color');
     }
   }
 }
 
 .nav__item {
 	position: relative;
-	padding: 0 #{24 / $base-font-size}rem;
+	padding: 0 #{10 / $base-font-size}rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 
 .nav__item:first-child {
@@ -41,38 +46,43 @@
 	padding-right: #{15 / $base-font-size}rem;
 }
 
+.nav__item-header {
+  margin-right: #{5 / $base-font-size}rem;
+}
 
 .nav__dropdown {
 	@include themify() {
 		background-color: map-get($theme-map, 'modal-background-color');
 		border: 1px solid map-get($theme-map, 'modal-border-color');
-		box-shadow: 0 0 18px getThemifyVariable('shadow-color');
+		box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
+    color: getThemifyVariable('dropdown-color');
 	}
   display: none;
 	text-align: left;
-	width: #{140 / $base-font-size}rem;
+	width: #{180 / $base-font-size}rem;
 	.nav__item:hover &, .nav__item--open & {
 		display: flex;
 		position: absolute;
 		flex-direction: column;
-  	top: 50%;
+  	top: 4px;
 		left: 0;
 		height: auto;
 	}
-	padding-bottom: #{8 / $base-font-size}rem;
-  z-index: 1;
+  z-index: 9999;
+  border-radius: #{6 / $base-font-size}rem;
+}
+
+.nav__items-right {
+  padding-right: #{20 / $base-font-size}rem;
+  & .nav__dropdown {
+    width: #{121 / $base-font-size}rem;
+  }
 }
 
 .nav__item-spacer {
 	@include themify() {
 		color: map-get($theme-map, 'inactive-text-color');
 	}
-	padding: 0 #{15 / $base-font-size}rem;
-}
-
-.nav__dropdown li {
-  padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
-  width: 100%;
 }
 
 .nav__dropdown a, button {
@@ -95,9 +105,11 @@
   @include themify() {
 		border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
   }
-  margin-top: #{3 / $base-font-size}rem;
-  text-align: center;
-  margin-bottom: #{4 / $base-font-size}rem;
+  height: #{(42 - 5) / $base-font-size}rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 #{16 / $base-font-size}rem;
 }
 
 .nav__dropdown-heading a, .nav__dropdown-heading a:hover {
@@ -108,6 +120,40 @@
   width: 100%;
 }
 
+.nav__dropdown-heading svg {
+  transform-origin: 50% 50%;
+  transform: rotate(180deg);
+}
+
+.nav__dropdown-item {
+  height: #{32 / $base-font-size}rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 #{16 / $base-font-size}rem;
+  cursor: pointer;
+  & button, & a {
+    @include themify() {
+      color: getThemifyVariable('dropdown-color');
+    }
+  }
+  &:hover {
+    @include themify() {
+      background-color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable('button-hover-color')
+    }
+    & button, & a {
+      @include themify() {
+        color: getThemifyVariable('button-hover-color');
+      }
+    }
+  }
+}
+
+.nav__dropdown-item:last-child {
+  border-radius: 0 0 #{6 / $base-font-size}rem #{6 / $base-font-size}rem;
+}
+
 .nav__announce {
   position: absolute;
   top: #{40 / $base-font-size}rem;