formatting of dropdown login and editor menus (#239)

* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* dropdown formatting closes #210

client/components/Nav.jsx

@@ -111,7 +111,7 @@ function Nav(props) {
             return (
               <li className="nav__item">
                 <p>
-                  <Link to="/login">Login</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign up</Link>
+                  <Link to="/login">Log in</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign up</Link>
                 </p>
               </li>
             );
@@ -120,14 +120,17 @@ function Nav(props) {
             <li className="nav__item">
               <a>Hello, {props.user.username}!</a>
               <ul className="nav__dropdown">
+                <li className="nav__dropdown-heading">
+                  <a>Hello, {props.user.username}!</a>
+                </li>
                 <li>
                   <Link to="/sketches">
-                    My Sketches
+                    My sketches
                   </Link>
                 </li>
                 <li>
                   <a onClick={props.logoutUser} >
-                    Logout
+                    Log out
                   </a>
                 </li>
               </ul>

client/modules/IDE/components/Editor.jsx

@@ -230,7 +230,7 @@ class Editor extends React.Component {
             <a onClick={this.tidyCode}>Tidy</a>
           </li>
           <li>
-            <a onClick={this.props.showKeyboardShortcutModal}>Keyboard Shortcuts</a>
+            <a onClick={this.props.showKeyboardShortcutModal}>Keyboard shortcuts</a>
           </li>
         </ul>
         <div ref="container" className="editor-holder" tabIndex="0">

client/modules/IDE/components/Sidebar.jsx

@@ -49,12 +49,12 @@ class Sidebar extends React.Component {
             <ul className="sidebar__project-options">
               <li>
                 <a aria-label="add folder" onClick={this.props.newFolder} >
-                  Add Folder
+                  Add folder
                 </a>
               </li>
               <li>
                 <a aria-label="add file" onClick={this.props.newFile} >
-                  Add File
+                  Add file
                 </a>
               </li>
             </ul>

client/styles/abstracts/_variables.scss

@@ -25,7 +25,7 @@ $themes: (
     button-background-active-color: #f10046,
     button-hover-color: $white,
     button-active-color: $white,
-    modal-background-color: #fdfdfd,
+    modal-background-color: #f4f4f4,
     modal-button-background-color: #e6e6e6,
     modal-border-color: #B9D0E1,
     icon-color: #8b8b8b,

client/styles/components/_editor.scss

@@ -96,15 +96,28 @@
   display: none;
   @extend %modal;
   position: absolute;
-  top: #{20 / $base-font-size}rem;
+  right: #{0 / $base-font-size}rem;
-  right: #{5 / $base-font-size}rem;
+  padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
-  padding: #{10 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
-
+  @include themify() {
+    background-color: getThemifyVariable('modal-background-color');
+    box-shadow: 0 0 18px getThemifyVariable('shadow-color');
+  }
   .editor--options & {
     display: block;
   }
 }
 
+.editor__options li {
+  padding: #{4 / $base-font-size}rem 0;
+}
+
+.editor__options a {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
+}
+
 .editor__file-name {
   @include themify() {
     color: getThemifyVariable('secondary-text-color');

client/styles/components/_nav.scss

@@ -34,22 +34,22 @@
 
 .nav__dropdown {
 	@include themify() {
-		background-color: map-get($theme-map, 'background-color');
+		background-color: map-get($theme-map, 'modal-background-color');
-		border: 1px solid map-get($theme-map, 'ide-border-color');
+		border: 1px solid map-get($theme-map, 'modal-border-color');
-	}
+		box-shadow: 0 0 18px getThemifyVariable('shadow-color');
-	@extend %hidden-element;
-	& li + li {
-		margin-top: #{10 / $base-font-size}rem;
 	}
+  @extend %hidden-element;
+	text-align: left;
 	width: #{140 / $base-font-size}rem;
 	.nav__item:hover & {
 		display: flex;
 		position: absolute;
 		flex-direction: column;
-		padding: #{10 / $base-font-size}rem;
+  	top: #{-8 / $base-font-size}rem;;
-		left: #{-10 / $base-font-size}rem;
+		left: #{-11 / $base-font-size}rem;
 		height: auto;
 	}
+	padding-bottom: #{8 / $base-font-size}rem;
 }
 
 .nav__item-spacer {
@@ -57,4 +57,39 @@
 		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 {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
+}
+
+.nav__dropdown a:hover {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.nav__dropdown-heading {
+  @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;
+}
+
+.nav__dropdown-heading a, .nav__dropdown-heading a:hover {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+  }
+  cursor: default;
+  width: 100%;
+}
+

client/styles/components/_sidebar.scss

@@ -128,20 +128,30 @@
   @extend %modal;
   @include themify() {
     background-color: getThemifyVariable('modal-background-color');
+    box-shadow: 0 0 18px getThemifyVariable('shadow-color');
   }
   position: absolute;
   top: 95%;
   left: #{15 / $base-font-size}rem;
-  right: #{15 / $base-font-size}rem;
+  right: #{0 / $base-font-size}rem;
   display: none;
   z-index: 100;
-  padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
+  padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
-  z-index: 100;
   .sidebar__file-item--open > .file-item__content & {
     display: block;
   }
 }
 
+.sidebar__project-options li, .sidebar__file-item-options li {
+  padding: #{4 / $base-font-size}rem 0;
+}
+
+.sidebar__project-options a, .sidebar__file-item-options a {
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
+}
+
 .sidebar__file-item-input {
   display: none;
   padding: 0;
@@ -235,17 +245,22 @@
 
 .sidebar__project-options {
   @extend %modal;
+  @include themify() {
+    background-color: getThemifyVariable('modal-background-color');
+    box-shadow: 0 0 18px getThemifyVariable('shadow-color');
+  }
   display: none;
   position: absolute;
   .sidebar--project-options & {
     display: block;
   }
-  top: 100%;
+  top: #{22 / $base-font-size}rem;
-  right: #{-70 / $base-font-size}rem;
+  right: #{-6 / $base-font-size}rem;
-  padding: #{4 / $base-font-size}rem;
+  padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
-  width: #{110 / $base-font-size}rem;
+  width: #{145 / $base-font-size}rem;
 }
 
+
 .sidebar__file-item--closed .file-item__children {
   display: none;
 }