Page MenuHomePhorge
Files F33036078

D10390.1768409354.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D10390.1768409354.diff
View Options

diff --git a/web/components/unread-badge.css b/web/components/unread-badge.css
new file mode 100644
--- /dev/null
+++ b/web/components/unread-badge.css
@@ -0,0 +1,14 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 12px;
+ height: 12px;
+ border-radius: 10px;
+ background-color: var(--unreadIndicator-background-primary-default);
+ color: var(--unreadIndicator-label-primary-default);
+ font-size: var(--xxs-font-10);
+ font-weight: var(--semi-bold);
+ padding: 3px;
+ border: 1px solid var(--unreadIndicator-border-primary-default);
+}
diff --git a/web/components/unread-badge.react.js b/web/components/unread-badge.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/unread-badge.react.js
@@ -0,0 +1,19 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './unread-badge.css';
+
+type Props = {
+ +unreadCount: number,
+};
+
+function UnreadBadge(props: Props): React.Node {
+ const { unreadCount } = props;
+
+ const unreadText = unreadCount > 99 ? '99+' : unreadCount;
+
+ return <div className={css.container}>{unreadText}</div>;
+}
+
+export default UnreadBadge;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -318,6 +318,11 @@
/* Tooltip */
--tooltip-background-primary-default: var(--shades-black-75);
--tooltip-label-primary-default: var(--shades-white-100);
+
+ /* Unread Indicator */
+ --unreadIndicator-background-primary-default: var(--error-primary);
+ --unreadIndicator-label-primary-default: var(--shades-white-100);
+ --unreadIndicator-border-primary-default: var(--shades-black-85);
}
/* Light theme */
@@ -390,4 +395,9 @@
/* @GINSU: TODO double check these values after redesign is finished */
--tooltip-background-primary-default: var(--shades-white-80);
--tooltip-label-primary-default: var(--shades-black-85);
+
+ /* Unread Indicator */
+ --unreadIndicator-background-primary-default: var(--error-primary);
+ --unreadIndicator-label-primary-default: var(--shades-white-100);
+ --unreadIndicator-border-primary-default: var(--shades-white-80);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 14, 4:49 PM (1 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5922285
Default Alt Text
D10390.1768409354.diff (2 KB)

Event Timeline