feat(teamInbox): Increase Visibility of Unread Messages

erxes · Aug 19, 2020 · fff9273 · fff9273
1 parent 349712d
commit fff9273
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/ui/src/modules/activityLogs/styles.ts b/ui/src/modules/activityLogs/styles.ts
@@ -42,7 +42,7 @@ const ActivityRow = styledTS<{ isConversation?: boolean }>(styled(WhiteBox))`
   }
 
   &:hover {
-    background: ${props => props.isConversation && colors.bgUnread};
+    background: ${props => props.isConversation && colors.bgLightPurple};
   }
 `;
 

diff --git a/ui/src/modules/common/components/table/styles.ts b/ui/src/modules/common/components/table/styles.ts
@@ -58,7 +58,7 @@ const StyledTable = styledTS<{
       : null
   } ${
     props.striped
-      ? `tr:nth-of-type(odd) td { background-color: ${colors.bgUnread}; }`
+      ? `tr:nth-of-type(odd) td { background-color: ${colors.bgLightPurple}; }`
       : null
   } th {
       border-top: none;

diff --git a/ui/src/modules/common/styles/colors.ts b/ui/src/modules/common/styles/colors.ts
@@ -29,7 +29,8 @@ const bgDark = rgba(colorBlack, 0.95);
 const bgLight = '#FAFAFA';
 const bgActive = '#F0F0F0';
 const bgGray = '#e6e6e6';
-const bgUnread = '#F7F8FC';
+const bgLightPurple = '#F7F8FC';
+const bgUnread = '#ededfb';
 const bgInternal = '#FFFCCC';
 
 // Link colors
@@ -86,6 +87,7 @@ export default {
   bgLight,
   bgActive,
   bgUnread,
+  bgLightPurple,
   bgInternal,
   bgGray,
 

diff --git a/ui/src/modules/growthHacks/styles.ts b/ui/src/modules/growthHacks/styles.ts
@@ -147,7 +147,7 @@ const ScrollContent = styled.div`
 
   .weighted-score-table-body {
     .with-input:last-child {
-      background-color: ${colors.bgUnread};
+      background-color: ${colors.bgLightPurple};
       border-left: 1px solid ${colors.borderPrimary};
     }
   }
@@ -185,7 +185,7 @@ const TableHead = styled.th`
   width: 50px;
 
   &:last-child {
-    background-color: ${colors.bgUnread};
+    background-color: ${colors.bgLightPurple};
     border-left: 1px solid ${colors.borderPrimary};
   }
 `;

diff --git a/ui/src/modules/inbox/components/leftSidebar/styles.ts b/ui/src/modules/inbox/components/leftSidebar/styles.ts
@@ -124,17 +124,19 @@ const RowItem = styledTS<{
   display: flex;
   position: relative;
   flex-direction: row;
-  border-bottom: 1px solid ${colors.borderPrimary};
+  border-bottom: 1px solid rgba(0,0,0,0.05);
   transition: all ease 0.3s;
-  background: ${props => (props.isActive ? colors.bgActive : null)};
+  background: ${props => (props.isActive ? 'rgba(242,245,245,0.8)' : null)};
 
   ${props =>
     !props.isRead &&
     css`
       background: ${colors.bgUnread};
+      border-top: 1px solid rgba(0,0,0,0.05);
+      margin-top: -1px;
 
       ${MessageContent} {
-        font-weight: bold;
+        font-weight: 700;
       }
     `};
   &:hover {