Fixes

Author: Victor George

src/components/NotificationItem/NotificationItem.scss

@@ -4,35 +4,43 @@
 .notification-item-link {
   display: block;
 
-  & + &,
-  .notification-item + & {
+  .notification-item {
     border-top: 1px solid $tc-gray-10;
+
+    &:first-child {
+      border: none;
+    }
   }
 }
 
 .notification-item {
   display: flex;
   background-color: $tc-white;
   justify-content: space-between;
+  transition: 150ms all;
+
+  &:hover {
+    background-color: $tc-dark-blue-10;
+  }
 
   & + &,
   .notification-item-link + & {
     border-top: 1px solid $tc-gray-10;
   }
 
-  > .icon {
+  .icon {
     align-items: center;
     // border-left: 2px solid #55a5ff;
     display: flex;
     flex: 0 0 44px;
     justify-content: center;
   }
 
-  > .body {
+  .body {
     flex: 1;
     padding: 15px 0;
 
-    > .content {
+    .content {
       @include roboto;
       color: $tc-black;
       font-size: 13px;
@@ -52,13 +60,22 @@
     }
   }
 
-  > .mark-read {
+  .mark-read {
     align-items: center;
     display: flex;
-    flex: 0 0 55px;
+    flex: 0 0 40px;
     justify-content: flex-end;
+    transition: all 150ms;
 
-    > button {
+    &:hover {
+      background-color: $tc-dark-blue-30;
+
+      svg {
+        fill: $tc-dark-blue-90;
+      }
+    }
+
+    button {
       background: none;
       border: 0;
       display: block;
@@ -67,13 +84,8 @@
       padding: 0;
       width: 42px;
 
-      > svg {
+      svg {
         fill: $tc-gray-20;
-        transition: all 150ms;
-
-        &:hover {
-          fill: $tc-dark-blue-90;
-        }
       }
     }
   }

src/components/NotificationsDropdown/NotificationsDropdown.scss

@@ -9,6 +9,8 @@ body.noScroll {
 // project override for dropdown shadow
 .Dropdown {
   box-shadow: 0 3px 30px 2px rgba(0, 0, 0, 0.5);
+  cursor: default;
+  user-select: none;
 }
 
 .notifications-dropdown {

src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx

@@ -22,8 +22,12 @@ class NotificationsDropdownContainer extends React.Component {
   }
 
   // Make sure the body isn't scrollable when mouse is over the drop-down menu
-  freezeBodyToggle(){
-    document.body.classList.toggle('noScroll')
+  freezeBody(){
+    document.body.classList.add('noScroll')
+  }
+
+  unfreezeBody(){
+    document.body.classList.remove('noScroll')
   }
 
   render() {
@@ -61,7 +65,7 @@ class NotificationsDropdownContainer extends React.Component {
             </NotificationsEmpty>
           </div>
         ) : ([
-          <div key="body" className="notifications-dropdown-body" onMouseEnter={this.freezeBodyToggle} onMouseLeave={this.freezeBodyToggle} >
+          <div key="body" className="notifications-dropdown-body" onMouseEnter={this.freezeBody} onMouseLeave={this.unfreezeBody} >
             {globalSource && globalSource.notifications.length &&
               <NotificationsSection
                 {...globalSource}
@@ -79,7 +83,7 @@ class NotificationsDropdownContainer extends React.Component {
               />
             )}
           </div>,
-          <Link key="footer" to="/notifications" className="notifications-read-all tc-btn-link">Read all notifications</Link>
+          <Link key="footer" to="/notifications" className="notifications-read-all tc-btn-link">View all notifications</Link>
         ])}
       </NotificationsDropdown>
     )

src/components/NotificationsDropdownHeader/NotificationsDropdownHeader.scss

@@ -4,12 +4,12 @@
 .notifications-dropdown-header {
   align-items: center;
   background: $tc-gray-neutral-light;
-  border-bottom: 1px solid $tc-gray-10;
+  border-bottom: 1px solid $tc-gray-20;
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
 
-  > .header {
+  .header {
     @include roboto-medium;
     color: $tc-gray-70;
     font-size: 12px;
@@ -18,7 +18,7 @@
     text-transform: uppercase;
   }
 
-  > .mark-all {
+  .mark-all {
     @include roboto;
     background: none;
     border: 0;

src/components/NotificationsSectionTitle/NotificationsSectionTitle.scss

@@ -4,20 +4,20 @@
 .notifications-section-title {
   align-items: center;
   background-color: $tc-gray-20;
+  // border-bottom: 1px solid $tc-gray-20;
   display: flex;
   justify-content: space-between;
 
-  > .title {
-    @include roboto-medium;
-
+  .title {
+    @include roboto-bold;
     color: $tc-gray-80;
     font-size: 13px;
-    line-height: 38px;
+    line-height: 30px;
     margin-left: 15px;
   }
 
-  > .controls {
-    > .mark-all {
+  .controls {
+    .mark-all {
       @include roboto;
       background: none;
       border: 0;
@@ -38,16 +38,16 @@
       margin-top: 0;
     }
 
-    > .title {
+    .title {
       color: $tc-black;
       font-size: 20px;
       font-weight: 400;
       line-height: 30px;
       margin-left: 0;
     }
 
-    > .controls {
-      > .mark-all {
+    .controls {
+      .mark-all {
         height: 20px;
         line-height: 20px;
         padding: 0;

src/projects/list/components/Projects/ProjectsGridView.jsx

@@ -112,12 +112,15 @@ const ProjectsGridView = props => {
           <div className="spacing">
             <div className="user-block">
               <UserTooltip usr={m} id={item.id}/>
-              <div className="project-segment">
-                <ProjectSegmentSelect currentSegment={item.segment || 'self-service'}/>
-              </div>
+              
             </div>
           </div>
         )
+        // TODO: Restore user segment when we support it
+        // <div className="project-segment">
+        //  <ProjectSegmentSelect currentSegment={item.segment || 'self-service'}/>
+        // </div>
+        // Hiding the user segment for the momemnt
       }
     }, {
       id: 'managers',

src/projects/list/components/Projects/ProjectsGridView.scss

@@ -310,7 +310,8 @@
             text-overflow: ellipsis;
 
             &:hover {
-              background-color: $tc-gray-neutral-dark;
+              background-color: $tc-dark-blue-30;
+              color: $tc-black;
             }
           }