diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index 2babd40d..a28bf1c1 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -166,8 +166,8 @@ padding: 0 12px; border: none; border-bottom: 1px solid #f1f3f4; - background: #fff; - color: #202124; + background: #f6f8fc; + color: #5f6368; text-align: left; cursor: pointer; font-family: inherit; @@ -179,6 +179,16 @@ background: #f2f6fc; } +.gmail-row-unread { + background: #fff; + color: #202124; +} + +.gmail-row-unread:hover, +.gmail-row-unread.gmail-row-selected { + background: #f2f6fc; +} + .gmail-row-check { width: 14px; height: 14px; @@ -195,6 +205,12 @@ .gmail-row-content strong, .gmail-row-date { font-size: 13px; + font-weight: 400; +} + +.gmail-row-unread .gmail-row-sender, +.gmail-row-unread .gmail-row-content strong, +.gmail-row-unread .gmail-row-date { font-weight: 700; } @@ -216,6 +232,10 @@ .gmail-row-content strong { flex-shrink: 0; + color: inherit; +} + +.gmail-row-unread .gmail-row-content strong { color: #202124; } diff --git a/apps/x/apps/renderer/src/components/email-view.tsx b/apps/x/apps/renderer/src/components/email-view.tsx index 9c4fee0d..4854f4eb 100644 --- a/apps/x/apps/renderer/src/components/email-view.tsx +++ b/apps/x/apps/renderer/src/components/email-view.tsx @@ -430,11 +430,12 @@ export function EmailView() { {filteredThreads.map((thread) => { const latest = latestMessage(thread) const isSelected = thread.threadId === selectedThread.threadId + const isUnread = thread.unread === true return (