style(account bar): add mail icons and counter

src/components/account-bar/account-bar.module.css

@@ -25,7 +25,7 @@
 }
 
 .separator {
- color: var(--text-primary);
+ color: var(--gray-contrast);
  margin: 0px .7ex 0px .7ex;
  cursor: default; 
 }
@@ -103,4 +103,32 @@
 
 .dropdownChoice:hover {
   background-color: var(--background-primary);
+}
+
+.mailIcon {
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 15px;
+  height: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.mailIconRead {
+  background-image: url('/public/assets/mail.png');
+}
+
+.mailIconUnread {
+  background-image: url('/public/assets/mail-unread.png');
+}
+
+.mailUnreadCount {
+  background-color: var(--orange);
+  color: #FFF;
+  font-size: 8px;
+  font-weight: bold;
+  padding: 0px 3px;
+  margin-left: 3px;
+  border-radius: 2px;
+  display: inline-block;
 }

src/components/account-bar/account-bar.tsx

@@ -29,6 +29,9 @@ const AccountBar = () => {
   const accountDropdownClass = isAccountDropdownOpen ? styles.visible : styles.hidden;
   const accountSelectButtonRef = useRef<HTMLDivElement>(null);
 
+  const [isMailUnread, setIsMailUnread] = useState(false);
+  const mailClass = isMailUnread ? styles.mailIconUnread : styles.mailIconRead;
+
   let submitLink = '/submit';
   if (isSubplebbit) {
     submitLink = `/p/${subplebbitAddress}/submit`;
@@ -99,8 +102,9 @@ const AccountBar = () => {
         </Link>
       </span>
       <span className={styles.separator}>|</span>
-      <Link to='/settings' className={styles.iconButton} onClick={(e) => e.preventDefault()}>
-        ✉️
+      <Link to='/settings' className={styles.iconButton} onClick={(e) => {e.preventDefault(); setIsMailUnread(!isMailUnread)}}>
+        <span className={`${styles.mailIcon} ${mailClass}`} />
+        {isMailUnread && <span className={styles.mailUnreadCount}>1</span>}
       </Link>
       <span className={styles.searchButton}>
         <span className={styles.separator}>|</span>

src/themes.css

@@ -1,4 +1,9 @@
 :root .light {
+  --orange: #FF7500;
+  --green: #228822;
+  --yellow: goldenrod;
+  --red: red;
+  --gray-contrast: #888;
   --filter: brightness(100%);
   --background: white;
   --background-primary: #cee3f8;
@@ -13,7 +18,6 @@
   --text-primary: #369;
   --button-border-primary: #c4dbf1;
   --button-border-primary-hover: #879eb4;
-  --green: #228822;
   --text-info: #888;
   --border-primary: #5f99cf;
   --border-text: gray;
@@ -27,8 +31,6 @@
   --play-button-hover: url("/public/assets/buttons/play-button-hover.png");
   --close-button: url("/public/assets/buttons/close-button.png");
   --close-button-hover: url("/public/assets/buttons/close-button-hover.png");
-  --yellow: goldenrod;
-  --red: red;
   --button-large: url('/public/assets/buttons/button-large.png');
   --button-large-hover: url('/public/assets/buttons/button-large-hover.png');
   --button-large-nub: url('/public/assets/buttons/button-large-nub.png');
@@ -38,6 +40,11 @@
 }
 
 :root .dark {
+  --orange: #FF7500;
+  --green: #228822;
+  --yellow: rgb(200, 171, 0);
+  --red: rgb(200, 0, 0);
+  --gray-contrast: #c7c7c7;
   --filter: brightness(80%);
   --background: #0f0f0f;
   --background-primary: #1f1f1f;
@@ -52,7 +59,6 @@
   --text-primary: #c7c7c7;
   --button-border-primary: #1f1f1f;
   --button-border-primary-hover: #3e3e3e;
-  --green: #228822;
   --text-info: #757575;
   --border-primary: #1f1f1f;
   --border-text: #3e3e3e;
@@ -66,8 +72,6 @@
   --play-button-hover: url("/public/assets/buttons/play-button-hover.png");
   --close-button: url("/public/assets/buttons/close-button-dark.png");
   --close-button-hover: url("/public/assets/buttons/close-button-hover.png");
-  --yellow: rgb(200, 171, 0);
-  --red: rgb(200, 0, 0);
   --button-large: url('/public/assets/buttons/button-large-dark.png');
   --button-large-hover: url('/public/assets/buttons/button-large-hover-dark.png');
   --button-large-nub: url('/public/assets/buttons/button-large-nub-dark.png');