diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 935bd3c..5a36f1d 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -6,6 +6,8 @@ import {
AddressConnectorIcon,
ArrowIcon,
Bar3Icon,
+ BellIcon,
+ BellStrokeIcon,
BoxCloseIcon,
CalculatorIcon,
CaretIcon,
@@ -71,6 +73,8 @@ export enum IconName {
AddressConnector = 'AddressConnector',
Arrow = 'Arrow',
Bar3 = 'Bar3',
+ Bell = 'Bell',
+ BellStroked = 'BellStroked',
BoxClose = 'BoxClose',
Calculator = 'Calculator',
Caret = 'Caret',
@@ -137,6 +141,8 @@ const icons = {
[IconName.AddressConnector]: AddressConnectorIcon,
[IconName.Arrow]: ArrowIcon,
[IconName.Bar3]: Bar3Icon,
+ [IconName.Bell]: BellIcon,
+ [IconName.BellStroked]: BellStrokeIcon,
[IconName.BoxClose]: BoxCloseIcon,
[IconName.Calculator]: CalculatorIcon,
[IconName.Caret]: CaretIcon,
@@ -213,7 +219,8 @@ export const Icon = styled(
iconComponent: Component = iconName && icons[iconName],
className,
...props
- }: ElementProps & StyleProps) => (Component ? : null)
+ }: ElementProps & StyleProps) =>
+ Component ? : null
)`
width: 1em;
height: 1em;
diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx
index c09d7c9..e064fe3 100644
--- a/src/hooks/useNotificationTypes.tsx
+++ b/src/hooks/useNotificationTypes.tsx
@@ -69,7 +69,7 @@ export const notificationTypes = [
),
title: `${stringGetter({
- key: TRADE_TYPE_STRINGS[order.type.rawValue as TradeTypes].tradeTypeKey,
+ key: TRADE_TYPE_STRINGS[order.type.rawValue as TradeTypes]?.tradeTypeKey,
})} ${
order.status === AbacusOrderStatus.open && (order?.totalFilled ?? 0) > 0
? stringGetter({ key: STRING_KEYS.PARTIALLY_FILLED })
@@ -138,7 +138,8 @@ export const notificationTypes = [
{stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: {
- ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
+ ERROR_MESSAGE:
+ error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
},
})}
@@ -182,8 +183,8 @@ Styled.TransferText = styled.span`
display: inline-flex;
align-items: center;
gap: 0.5ch;
-`
+`;
Styled.ErrorMessage = styled.div`
max-width: 13rem;
-`;
\ No newline at end of file
+`;
diff --git a/src/icons/bell-stroke.svg b/src/icons/bell-stroke.svg
new file mode 100644
index 0000000..21ecaa7
--- /dev/null
+++ b/src/icons/bell-stroke.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/bell.svg b/src/icons/bell.svg
index f714c96..3fa83d3 100644
--- a/src/icons/bell.svg
+++ b/src/icons/bell.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/icons/index.ts b/src/icons/index.ts
index a3a2bf8..a96402a 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -2,6 +2,7 @@ export { default as AddressConnectorIcon } from './address-connector.svg';
export { default as ArrowIcon } from './arrow.svg';
export { default as Bar3Icon } from './bar3.svg';
export { default as BellIcon } from './bell.svg';
+export { default as BellStrokeIcon } from './bell-stroke.svg';
export { default as BoxCloseIcon } from './box-close.svg';
export { default as CalculatorIcon } from './calculator.svg';
export { default as CaretIcon } from './caret-down.svg';
diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx
index 20ceb75..f637a60 100644
--- a/src/layout/Header/HeaderDesktop.tsx
+++ b/src/layout/Header/HeaderDesktop.tsx
@@ -7,7 +7,7 @@ import { DialogTypes } from '@/constants/dialogs';
import { STRING_KEYS } from '@/constants/localization';
import { AppRoute } from '@/constants/routes';
import { useStringGetter } from '@/hooks';
-import { LogoShortIcon, BellIcon } from '@/icons';
+import { LogoShortIcon, BellStrokeIcon } from '@/icons';
import { Icon, IconName } from '@/components/Icon';
import { IconButton } from '@/components/IconButton';
@@ -131,7 +131,9 @@ export const HeaderDesktop = () => {
}
+ slotTrigger={
+
+ }
/>
@@ -165,7 +167,7 @@ Styled.Header = styled.header`
)
var(--border-width) 1fr var(--border-width) auto;
- font-size: 0.9375em;
+ font-size: 0.9375rem;
:before {
backdrop-filter: blur(10px);
@@ -214,7 +216,8 @@ Styled.NavAfter = styled.div`
}
`;
-Styled.IconButton = styled(IconButton)`
+Styled.IconButton = styled(IconButton)<{ size?: string }>`
${headerMixins.button}
--button-border: none;
+ --button-icon-size: 1rem;
`;
diff --git a/src/views/menus/NotificationsMenu.tsx b/src/views/menus/NotificationsMenu.tsx
index 348f7d4..842e128 100644
--- a/src/views/menus/NotificationsMenu.tsx
+++ b/src/views/menus/NotificationsMenu.tsx
@@ -178,10 +178,11 @@ export const NotificationsMenu = ({
};
const $UnreadIndicator = styled.div`
- width: 0.5em;
- height: 0.5em;
+ width: 0.5rem;
+ height: 0.5rem;
border-radius: 50%;
background-color: var(--color-accent);
+ border: 1px solid var(--color-layer-2);
`;
const $TriggerContainer = styled.div`
@@ -192,8 +193,8 @@ const $TriggerUnreadIndicator = styled($UnreadIndicator)`
place-self: center;
position: relative;
- right: -0.425em;
- top: -0.425em;
+ right: -0.2rem;
+ top: -0.325rem;
`;
const $Output = styled(Output)`