From a48962e706c80f2afaf4b2be37d9e837d63fad4e Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 3 Dec 2023 17:22:08 +0100 Subject: [PATCH] style(account bar): add mail icons and counter --- public/assets/mail-unread.png | Bin 0 -> 648 bytes public/assets/mail.png | Bin 0 -> 645 bytes .../account-bar/account-bar.module.css | 30 +++++++++++++++++- src/components/account-bar/account-bar.tsx | 8 +++-- src/themes.css | 16 ++++++---- 5 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 public/assets/mail-unread.png create mode 100644 public/assets/mail.png diff --git a/public/assets/mail-unread.png b/public/assets/mail-unread.png new file mode 100644 index 0000000000000000000000000000000000000000..c7bddfacaafa50f544822886112a25dc51a2ba25 GIT binary patch literal 648 zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3HF=rCELgDaPU;cPEB*=VV?2IRU8=o@u_m z3|c@o2LltM5Cbzv2@o>0XELyW*$fP7K$?Mpc>yCrb^#MymVW^=oDH&>;VySoI?#~F z%#etZ2wxwoh+i z#(Mch>H3D2mX`VkM*2oZx=P7{9O-#x! zEwNQn0$BtH5O0c3d|4@L;p!l8k%E4h+dgPZ!4!4bkL3^5;IxZ}d69bbWgh zi?Nc#!CNy9sCX!cFyu+-v3bZ|QR+yW;FQGUaEaqm(*>Us3?{uZW;rVTa_D)-Dj=`Y z$0oqYHYtN$YgG%I%qGSS2VADHuVi->mDu8#$-!^V8O(m=I7eUlgvkkJO+G3t4thII h9ALQU<6+2G$-v0XELyW*$fP7K$?Mpc>yCrb^#MymVW^=oDH&>;VySoI?#~F z%#etZ2wxwoh+i z#(Mch>H3D2mX`VkM*2oZx=P7{9O-#x! zEwNQn0$BtH5O0c3d|4@L;p!l8k%E4h+dUPZ!4!4biz15ArrB@VH*IU<+qU zEWE+I?#;qVUpvF16~Ba|f_`~%M{7Riu`lg7ZJGW0SJdjKZz3F6Z6?{orhK@~R4$Nq zD6Ua`#{rh4p3@u+N9NDsKj!$}cFB|+Mvqy6&%4<7ac#YJrrNEt!0dBS;j}pO5;wa| f+m1^#ehn3`UXVTOY>O!?C{jIL{an^LB{Ts5?G3wG literal 0 HcmV?d00001 diff --git a/src/components/account-bar/account-bar.module.css b/src/components/account-bar/account-bar.module.css index 26ff8d2c..a460ec9b 100644 --- a/src/components/account-bar/account-bar.module.css +++ b/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; } \ No newline at end of file diff --git a/src/components/account-bar/account-bar.tsx b/src/components/account-bar/account-bar.tsx index 9171fd1f..d5ce9dcd 100644 --- a/src/components/account-bar/account-bar.tsx +++ b/src/components/account-bar/account-bar.tsx @@ -29,6 +29,9 @@ const AccountBar = () => { const accountDropdownClass = isAccountDropdownOpen ? styles.visible : styles.hidden; const accountSelectButtonRef = useRef(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 = () => { | - e.preventDefault()}> - ✉️ + {e.preventDefault(); setIsMailUnread(!isMailUnread)}}> + + {isMailUnread && 1} | diff --git a/src/themes.css b/src/themes.css index 8e3efc37..91f78499 100644 --- a/src/themes.css +++ b/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');