Fixed Noodl styling after merging in 3.2.1

Author: michaelcartner

src/components/Sidebar/AppName.react.js

@@ -5,12 +5,11 @@ import styles from 'components/Sidebar/Sidebar.scss';
 const AppName = ({ name, onClick, onPinClick }) => (
   <div>
     <div className={styles.currentApp}>
-      <div className={styles.appNameContainer} onClick={onClick}>
+      <div className={styles.appNameContainer}>
         <div className={styles.currentAppName}>
           {name}
         </div>
       </div>
-      <Pin onClick={onPinClick} />
     </div>
   </div>
 );

src/components/Sidebar/Sidebar.react.js

@@ -121,7 +121,7 @@ const Sidebar = ({
       ? <Pin onClick={onPinClick} />
       : appSelector && (
         <div className={styles.apps}>
-          <AppName name={currentApp.name} onClick={() => setAppsMenuOpen(true)} onPinClick={onPinClick} />
+          <AppName name={currentApp.name} />
         </div>
       ) || undefined;
 
@@ -160,6 +160,7 @@ const Sidebar = ({
   return (
     <div
       className={sidebarClasses.join(' ')}
+      style={{overflow: 'hidden'}}
       onMouseEnter={
         !fixed && collapsed
           ? () => setCollapsed(false)
@@ -176,9 +177,12 @@ const Sidebar = ({
           : undefined
       }
     >
-      <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} />
+      {/* <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} /> */}
       {sidebarContent}
-      <div className={styles.footer}>
+      <div style={{position: 'absolute', bottom: 0, left: 0, right: 0}}>
+        <SidebarHeader />
+      </div>
+      {/* <div className={styles.footer}>
         {!collapsed && (
           <>
             <a target='_blank' href='http://parseplatform.org/'>Open Source Hub</a>
@@ -187,7 +191,7 @@ const Sidebar = ({
           </>
         )}
         <FooterMenu isCollapsed={!appsMenuOpen && collapsed} />
-      </div>
+      </div> */}
     </div>
   );
 }

src/components/Sidebar/Sidebar.scss

@@ -7,7 +7,7 @@
  */
 @import 'stylesheets/globals.scss';
 
-$headerHeight: 48px;
+$headerHeight: 0px;
 $menuSectionHeight: 24px;
 $sidebarMenuItemHeight: 48px;
 $footerHeight: 36px;
@@ -18,7 +18,7 @@ $footerHeight: 36px;
   top: 0;
   left: 0;
   bottom: 0;
-  background: #0c5582;
+  background: $noodlGrey1;
   color: #fff;
   z-index: 100;
 
@@ -86,7 +86,6 @@ $footerHeight: 36px;
 }
 
 .header {
-  background: #05283c;
   height: $headerHeight;
   padding: 10px 14px;
 
@@ -97,10 +96,16 @@ $footerHeight: 36px;
   }
 }
 
+.noodlheader {
+  background: #05283c;
+  height: $headerHeight;
+  padding: 10px 14px;
+}
+
 .currentApp, .menuRow {
   @include ellipsis();
   display: block;
-  background: #094162;
+  background: $noodlGrey0;
   height: $sidebarMenuItemHeight;
   padding: 10px 14px;
 
@@ -144,17 +149,17 @@ $footerHeight: 36px;
       max-width: 215px;
     }
 
-    &:after {
-      @include arrow('down', 10px, 7px, #132B39);
-      content: '';
-      margin-left: 10px;
-    }
-
-    &:hover {
-      &:after {
-        border-top-color: white;
-      }
-    }
+    // &:after {
+    //   @include arrow('down', 10px, 7px, #132B39);
+    //   content: '';
+    //   margin-left: 10px;
+    // }
+
+    // &:hover {
+    //   &:after {
+    //     border-top-color: white;
+    //   }
+    // }
   }
 }
 
@@ -199,7 +204,7 @@ $footerHeight: 36px;
   height: $menuSectionHeight;
   line-height: 24px;
   background: #0c5582;
-  color: #84A5BC;
+  color: #14606E;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 8px;
@@ -234,12 +239,12 @@ $footerHeight: 36px;
 }
 
 .active {
-  background: #159cee;
+  background: #171717;
 
   .section_header{
     font-weight: 700;
     &:hover{
-      background: #159cee;
+      background: #14606E;
     }
   }
 }
@@ -267,7 +272,7 @@ $footerHeight: 36px;
 }
 
 .section_contents {
-  background: #0e69a0;
+  background: #222222;
   padding: 16px 14px 16px 50px;
 }
 
@@ -281,7 +286,7 @@ $footerHeight: 36px;
 }
 
 a.subitem {
-  color: #8fb9cf;
+  color: #14606E;
   font-weight: 400;
   display: inline-block;
   width: 100%;
@@ -300,17 +305,19 @@ a.subitem {
   line-height: 20px;
   top: 4px;
   right: 0px;
-  background: #0c5987;
-  color: white;
+  background: #DDA302;
+  color: black;
   border-radius: 3px;
 
   &:hover {
-    background: #094162;
+    background: #D49517;
   }
 }
 
 .logo {
   float: left;
+  height: 20px;
+  margin-top: 4px;
 }
 
 .version {

src/components/Sidebar/SidebarHeader.react.js

@@ -34,12 +34,12 @@ export default class SidebarHeader extends React.Component {
       : (
         <>
           <Link className={styles.logo} to={{ pathname: '/apps' }}>
-            <Icon width={28} height={28} name='infinity' fill={'#ffffff'} />
+            <Icon width={20} height={20} name='infinity' fill={'#ffffff'} />
           </Link>
           <Link to='/apps'>
             <div className={styles.version}>
               <div>
-                Parse Dashboard {version}
+                Parse Platform
                 <div>
                   {this.state.dashboardUser}
                 </div>