sidebar minus clustersection + prevent project creation

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -293,7 +293,6 @@ const Overlay = styled.div`
   height: 100%;
   width: 100%;
   position: absolute;
-  background: #00000028;
   top: 0;
   left: 0;
   border-radius: 5px;

dashboard/src/main/home/new-project/NewProject.tsx

@@ -217,7 +217,6 @@ const Letter = styled.div`
   height: 100%;
   width: 100%;
   position: absolute;
-  background: #00000028;
   top: 0;
   left: 0;
   display: flex;

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -341,10 +341,11 @@ const LinkWrapper = styled.div`
 const ClusterSelector = styled(SidebarLink)`
   position: relative;
   display: block;
-  padding-left: 7px;
+  border-radius: 5px;
   width: 100%;
   height: 42px;
-  margin: 0 auto 0 auto;
+  margin: 5px 15px;
+  padding: 0 30px 2px 10px;
   font-size: 14px;
   font-weight: 500;
   color: white;

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -74,7 +74,7 @@ class ProjectSection extends Component<PropsType, StateType> {
         <div>
           <Dropdown>
             {this.renderOptionList()}
-            {this.context.canCreateProject && (
+            {this.context.user?.email.includes("porter.run") && (
               <Option
                 selected={false}
                 lastItem={true}
@@ -197,10 +197,10 @@ const Option = styled.div`
 
 const Dropdown = styled.div`
   position: absolute;
-  right: 10px;
+  right: 13px;
   top: calc(100% + 5px);
   background: #26282f;
-  width: 180px;
+  width: 199px;
   max-height: 500px;
   border-radius: 3px;
   z-index: 999;
@@ -221,7 +221,6 @@ const Letter = styled.div`
   position: absolute;
   padding-bottom: 2px;
   font-weight: 500;
-  background: #00000028;
   top: 0;
   left: 0;
   display: flex;
@@ -254,6 +253,7 @@ const ProjectIconAlt = styled(ProjectIcon)`
 
 const StyledProjectSection = styled.div`
   position: relative;
+  margin-left: 3px;
 `;
 
 const MainSelector = styled.div`

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -307,10 +307,12 @@ const ProjectPlaceholder = styled.div`
 const NavButton = styled(SidebarLink)`
   display: flex;
   align-items: center;
+  border-radius: 5px;
   position: relative;
   text-decoration: none;
-  height: 42px;
-  padding: 0 30px 2px 20px;
+  height: 36px;
+  margin: 5px 15px;
+  padding: 0 30px 2px 8px;
   font-size: 14px;
   font-family: "Work Sans", sans-serif;
   color: #ffffff;
@@ -369,10 +371,10 @@ const SidebarBg = styled.div`
   top: 0;
   left: 0;
   width: 100%;
-  background-color: #292c35;
+  background-color: #202227;
   height: 100%;
   z-index: -1;
-  box-shadow: 8px 0px 8px 0px #00000010;
+  border-right: 1px solid #383A3F;
 `;
 
 const SidebarLabel = styled.div`
@@ -465,7 +467,7 @@ const CollapseButton = styled.div`
 
 const StyledSidebar = styled.section`
   font-family: "Work Sans", sans-serif;
-  width: 200px;
+  width: 225px;
   position: relative;
   padding-top: 20px;
   height: 100vh;
@@ -475,7 +477,7 @@ const StyledSidebar = styled.section`
   animation-fill-mode: forwards;
   @keyframes showSidebar {
     from {
-      margin-left: -200px;
+      margin-left: -225px;
     }
     to {
       margin-left: 0px;
@@ -486,7 +488,7 @@ const StyledSidebar = styled.section`
       margin-left: 0px;
     }
     to {
-      margin-left: -200px;
+      margin-left: -225px;
     }
   }
 `;