Skip to content

Commit

Permalink
fix: fixed icons for counter
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauti7
lauti7 committed Dec 8, 2023
1 parent f17deee commit aa46f90
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 13 deletions.
105 changes: 105 additions & 0 deletions src/components/Icons/Notifications/CounterIcons/Numbers.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from "react";

export const Number1 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M9.20207 4.72729V12H7.8846V6.00925H7.84199L6.14099 7.0959V5.88852L7.94852 4.72729H9.20207Z"
fill="white"
/>
</svg>
)

export const Number2 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M5.54078 12V11.0483L8.06564 8.57312C8.30712 8.32928 8.50835 8.11266 8.66933 7.92326C8.83032 7.73387 8.95106 7.55039 9.03155 7.37284C9.11204 7.19528 9.15229 7.00589 9.15229 6.80465C9.15229 6.57501 9.1002 6.37852 8.99604 6.21517C8.89187 6.04945 8.74864 5.92161 8.56635 5.83164C8.38406 5.74168 8.17691 5.6967 7.9449 5.6967C7.70579 5.6967 7.49628 5.74642 7.31635 5.84585C7.13643 5.94291 6.99675 6.08141 6.89732 6.26133C6.80025 6.44125 6.75172 6.65551 6.75172 6.90409H5.49817C5.49817 6.44244 5.60352 6.04116 5.81422 5.70025C6.02492 5.35934 6.31493 5.09537 6.68425 4.90835C7.05593 4.72132 7.48207 4.62781 7.96266 4.62781C8.45035 4.62781 8.87885 4.71895 9.24817 4.90125C9.61749 5.08354 9.90395 5.3333 10.1075 5.65054C10.3135 5.96777 10.4165 6.32999 10.4165 6.73718C10.4165 7.00944 10.3644 7.27696 10.2602 7.53974C10.1561 7.80252 9.9726 8.09372 9.70982 8.41332C9.4494 8.73292 9.08363 9.12 8.61252 9.57454L7.35896 10.8494V10.8991H10.5266V12H5.54078Z"
fill="white"
/>
</svg>
)

export const Number3 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M7.99955 12.0994C7.48818 12.0994 7.03364 12.0118 6.63591 11.8366C6.24055 11.6614 5.92805 11.4176 5.69841 11.1051C5.46877 10.7926 5.34685 10.4315 5.33264 10.022H6.66787C6.67971 10.2185 6.74481 10.3901 6.86318 10.5369C6.98155 10.6813 7.13899 10.7938 7.33548 10.8743C7.53198 10.9547 7.75215 10.995 7.99599 10.995C8.25641 10.995 8.48723 10.95 8.68847 10.8601C8.8897 10.7677 9.04713 10.6399 9.16077 10.4765C9.2744 10.3132 9.33004 10.125 9.32767 9.9119C9.33004 9.69173 9.27322 9.4976 9.15722 9.32951C9.04121 9.16143 8.87312 9.03003 8.65295 8.93534C8.43515 8.84064 8.17237 8.79329 7.8646 8.79329H7.22185V7.77767H7.8646C8.11792 7.77767 8.33927 7.73387 8.52866 7.64627C8.72043 7.55868 8.87076 7.43557 8.97966 7.27696C9.08856 7.11597 9.14183 6.93013 9.13946 6.71943C9.14183 6.51346 9.09566 6.33472 9.00097 6.18321C8.90864 6.02932 8.77724 5.90977 8.60679 5.82454C8.4387 5.73931 8.24102 5.6967 8.01375 5.6967C7.79121 5.6967 7.58525 5.73695 7.39585 5.81744C7.20646 5.89793 7.05376 6.01275 6.93776 6.1619C6.82175 6.30868 6.7602 6.48387 6.7531 6.68747H5.48534C5.49481 6.28027 5.612 5.92279 5.8369 5.61502C6.06418 5.30489 6.36721 5.06341 6.74599 4.89059C7.12478 4.7154 7.54973 4.62781 8.02085 4.62781C8.50617 4.62781 8.92758 4.71895 9.28506 4.90125C9.64491 5.08117 9.92308 5.32383 10.1196 5.62923C10.3161 5.93463 10.4143 6.27198 10.4143 6.6413C10.4167 7.05087 10.2959 7.39414 10.0521 7.67113C9.81062 7.94812 9.49339 8.12923 9.1004 8.21446V8.27127C9.61176 8.3423 10.0036 8.53169 10.2758 8.83946C10.5504 9.14485 10.6866 9.52482 10.6842 9.97937C10.6842 10.3866 10.5682 10.7512 10.3362 11.0731C10.1066 11.3927 9.78932 11.6437 9.38449 11.826C8.98203 12.0083 8.52038 12.0994 7.99955 12.0994Z"
fill="white"
/>
</svg>
)

export const Number4 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M5.18481 10.6506V9.60301L8.27075 4.72729H9.14433V6.21877H8.61166L6.53425 9.51068V9.56749H10.8418V10.6506H5.18481ZM8.65427 12V10.331L8.66848 9.86224V4.72729H9.91138V12H8.65427Z"
fill="white"
/>
</svg>
)

export const Number5 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M8.01065 12.0995C7.53717 12.0995 7.1134 12.0107 6.73935 11.8331C6.36529 11.6532 6.06818 11.407 5.84801 11.0945C5.63021 10.782 5.5142 10.4245 5.5 10.022H6.77841C6.80208 10.3203 6.93111 10.5642 7.16548 10.7536C7.39986 10.9406 7.68158 11.0341 8.01065 11.0341C8.2687 11.0341 8.49834 10.9749 8.69957 10.8566C8.9008 10.7382 9.05942 10.5736 9.17543 10.3629C9.29143 10.1522 9.34825 9.91195 9.34588 9.64207C9.34825 9.36745 9.29025 9.1236 9.17188 8.91053C9.0535 8.69747 8.89134 8.53056 8.68537 8.40982C8.4794 8.28672 8.24266 8.22516 7.97514 8.22516C7.75734 8.2228 7.54309 8.26304 7.33239 8.3459C7.12169 8.42876 6.95478 8.53766 6.83168 8.67261L5.64205 8.47729L6.02202 4.72729H10.2408V5.82815H7.11222L6.9027 7.75641H6.94531C7.08026 7.5978 7.27083 7.4664 7.51705 7.36224C7.76326 7.2557 8.03314 7.20244 8.3267 7.20244C8.76705 7.20244 9.16004 7.3066 9.50568 7.51494C9.85133 7.7209 10.1236 8.00499 10.3224 8.36721C10.5213 8.72943 10.6207 9.14372 10.6207 9.61011C10.6207 10.0907 10.5095 10.5192 10.2869 10.8956C10.0668 11.2697 9.76018 11.5644 9.36719 11.7799C8.97656 11.9929 8.52438 12.0995 8.01065 12.0995Z"
fill="white"
/>
</svg>
)

export const Number6 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M8.06745 12.0994C7.71944 12.097 7.37971 12.0367 7.04827 11.9183C6.71683 11.7976 6.41854 11.6022 6.15338 11.3324C5.88823 11.0601 5.67753 10.6991 5.52128 10.2493C5.36503 9.79708 5.28809 9.23718 5.29046 8.56957C5.29046 7.94694 5.35675 7.39178 5.48932 6.90409C5.6219 6.4164 5.81248 6.00446 6.06105 5.66829C6.30963 5.32975 6.60911 5.0717 6.95949 4.89414C7.31224 4.71659 7.70641 4.62781 8.14202 4.62781C8.59893 4.62781 9.00376 4.71777 9.35651 4.89769C9.71162 5.07762 9.99808 5.32383 10.2159 5.63633C10.4337 5.94646 10.5686 6.29684 10.6207 6.68747H9.32455C9.25826 6.40811 9.12213 6.18557 8.91617 6.01985C8.71257 5.85177 8.45452 5.76772 8.14202 5.76772C7.63776 5.76772 7.2495 5.98671 6.97725 6.42468C6.70736 6.86266 6.57123 7.46398 6.56887 8.22866H6.61858C6.73459 8.02033 6.88492 7.84159 7.06958 7.69244C7.25424 7.54329 7.46257 7.42847 7.69458 7.34798C7.92895 7.26512 8.17635 7.22369 8.43677 7.22369C8.8629 7.22369 9.24524 7.32549 9.58378 7.52909C9.92469 7.73268 10.1946 8.01322 10.3934 8.37071C10.5923 8.72582 10.6906 9.13302 10.6882 9.5923C10.6906 10.0705 10.5817 10.5002 10.3615 10.8814C10.1413 11.2601 9.83473 11.5584 9.44174 11.7762C9.04874 11.994 8.59065 12.1018 8.06745 12.0994ZM8.06034 11.0341C8.31839 11.0341 8.54922 10.9713 8.75282 10.8458C8.95641 10.7204 9.1174 10.5511 9.23577 10.338C9.35414 10.125 9.41214 9.88586 9.40978 9.62071C9.41214 9.36029 9.35533 9.12473 9.23932 8.91403C9.12569 8.70333 8.96825 8.53643 8.76702 8.41332C8.56579 8.29021 8.33615 8.22866 8.0781 8.22866C7.88634 8.22866 7.7076 8.26536 7.54188 8.33875C7.37616 8.41214 7.23175 8.51393 7.10864 8.64414C6.98553 8.77198 6.88847 8.92113 6.81745 9.09159C6.74879 9.25967 6.71328 9.4396 6.71091 9.63136C6.71328 9.88467 6.77247 10.1179 6.88847 10.3309C7.00447 10.544 7.16427 10.7145 7.36787 10.8423C7.57147 10.9701 7.8023 11.0341 8.06034 11.0341Z"
fill="white"
/>
</svg>
)

export const Number7 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M5.97812 12L9.07116 5.87786V5.82815H5.48096V4.72729H10.4348V5.853L7.3453 12H5.97812Z"
fill="white"
/>
</svg>
)

export const Number8 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M8.004 12.0994C7.47607 12.0994 7.00732 12.0106 6.59775 11.8331C6.19055 11.6555 5.87095 11.4128 5.63894 11.1051C5.4093 10.7949 5.29567 10.4434 5.29803 10.0504C5.29567 9.745 5.36196 9.46446 5.4969 9.20877C5.63184 8.95309 5.81413 8.74002 6.04377 8.56957C6.27578 8.39675 6.53383 8.28666 6.81792 8.23931V8.1896C6.44387 8.10674 6.14084 7.91616 5.90883 7.61786C5.67919 7.3172 5.56555 6.97037 5.56792 6.57738C5.56555 6.20333 5.66972 5.86952 5.88042 5.57596C6.09112 5.2824 6.37995 5.05158 6.7469 4.88349C7.11385 4.71303 7.53288 4.62781 8.004 4.62781C8.47038 4.62781 8.88587 4.71303 9.25045 4.88349C9.6174 5.05158 9.90623 5.2824 10.1169 5.57596C10.33 5.86952 10.4365 6.20333 10.4365 6.57738C10.4365 6.97037 10.3193 7.3172 10.085 7.61786C9.85296 7.91616 9.55348 8.10674 9.18653 8.1896V8.23931C9.47062 8.28666 9.7263 8.39675 9.95357 8.56957C10.1832 8.74002 10.3655 8.95309 10.5004 9.20877C10.6378 9.46446 10.7064 9.745 10.7064 10.0504C10.7064 10.4434 10.5904 10.7949 10.3584 11.1051C10.1264 11.4128 9.80679 11.6555 9.3996 11.8331C8.99477 12.0106 8.52957 12.0994 8.004 12.0994ZM8.004 11.0838C8.27625 11.0838 8.513 11.0376 8.71423 10.9453C8.91546 10.8506 9.07171 10.718 9.18298 10.5476C9.29425 10.3771 9.35107 10.1806 9.35343 9.95806C9.35107 9.72606 9.2907 9.52127 9.17232 9.34372C9.05632 9.16379 8.89652 9.02293 8.69292 8.92113C8.49169 8.81933 8.26205 8.76843 8.004 8.76843C7.74358 8.76843 7.51158 8.81933 7.30798 8.92113C7.10438 9.02293 6.94339 9.16379 6.82502 9.34372C6.70902 9.52127 6.6522 9.72606 6.65457 9.95806C6.6522 10.1806 6.70665 10.3771 6.81792 10.5476C6.92919 10.7156 7.08544 10.847 7.28667 10.9417C7.49027 11.0364 7.72938 11.0838 8.004 11.0838ZM8.004 7.77056C8.22654 7.77056 8.42303 7.72558 8.59349 7.63562C8.76631 7.54566 8.90244 7.42018 9.00187 7.2592C9.1013 7.09822 9.1522 6.91237 9.15457 6.70167C9.1522 6.49334 9.10249 6.31105 9.00542 6.1548C8.90836 5.99618 8.77341 5.87426 8.60059 5.78903C8.42777 5.70143 8.22891 5.65764 8.004 5.65764C7.77436 5.65764 7.57195 5.70143 7.39676 5.78903C7.22393 5.87426 7.08899 5.99618 6.99193 6.1548C6.89723 6.31105 6.85107 6.49334 6.85343 6.70167C6.85107 6.91237 6.89841 7.09822 6.99548 7.2592C7.09491 7.41782 7.23104 7.54329 7.40386 7.63562C7.57905 7.72558 7.7791 7.77056 8.004 7.77056Z"
fill="white"
/>
</svg>
)

export const Number9 = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M7.92898 4.62784C8.27699 4.6302 8.61553 4.69176 8.9446 4.81249C9.27604 4.93087 9.57434 5.12499 9.83949 5.39488C10.1046 5.6624 10.3153 6.02106 10.4716 6.47088C10.6278 6.92069 10.706 7.47703 10.706 8.13991C10.7083 8.76491 10.642 9.32362 10.5071 9.81605C10.3745 10.3061 10.1839 10.7204 9.93537 11.0589C9.68679 11.3975 9.38731 11.6555 9.03693 11.8331C8.68655 12.0106 8.29238 12.0994 7.8544 12.0994C7.39512 12.0994 6.98793 12.0095 6.63281 11.8295C6.28007 11.6496 5.99479 11.4034 5.77699 11.0909C5.55919 10.7784 5.42543 10.4209 5.37571 10.0185H6.67188C6.73816 10.3073 6.87311 10.5369 7.0767 10.7074C7.28267 10.8755 7.5419 10.9595 7.8544 10.9595C8.35866 10.9595 8.74692 10.7405 9.01918 10.3026C9.29143 9.86458 9.42756 9.25615 9.42756 8.47727H9.37784C9.26184 8.6856 9.11151 8.86552 8.92685 9.01704C8.74219 9.16619 8.53267 9.28101 8.2983 9.3615C8.06629 9.44199 7.82008 9.48224 7.55966 9.48224C7.13352 9.48224 6.75 9.38044 6.40909 9.17684C6.07055 8.97324 5.80185 8.69389 5.60298 8.33877C5.40649 7.98366 5.30705 7.57765 5.30469 7.12073C5.30469 6.64725 5.41359 6.2223 5.63139 5.84588C5.85156 5.46709 6.15814 5.16879 6.55114 4.95099C6.94413 4.73082 7.40341 4.6231 7.92898 4.62784ZM7.93253 5.69318C7.67685 5.69318 7.44602 5.75591 7.24006 5.88139C7.03646 6.00449 6.87547 6.17258 6.7571 6.38565C6.6411 6.59635 6.5831 6.83191 6.5831 7.09232C6.58546 7.35037 6.64347 7.58475 6.7571 7.79545C6.87311 8.00615 7.03054 8.17305 7.2294 8.29616C7.43063 8.41927 7.66027 8.48082 7.91832 8.48082C8.11009 8.48082 8.28883 8.44412 8.45455 8.37073C8.62027 8.29734 8.76468 8.19554 8.88778 8.06534C9.01326 7.93276 9.11032 7.78243 9.17898 7.61434C9.25 7.44625 9.28433 7.2687 9.28196 7.08167C9.28196 6.83309 9.22277 6.60345 9.1044 6.39275C8.9884 6.18205 8.8286 6.01278 8.625 5.88494C8.42377 5.7571 8.19295 5.69318 7.93253 5.69318Z"
fill="white"
/>
</svg>
)

export const Number9Plus = (props: React.SVGAttributes<SVGElement>) => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
<circle cx="8" cy="8" r="8" fill="#FF2D55" />
<path
d="M4.90825 4.365C5.22146 4.36713 5.52615 4.42253 5.82231 4.5312C6.12061 4.63773 6.38907 4.81245 6.62771 5.05534C6.86634 5.29611 7.05597 5.61891 7.1966 6.02374C7.33722 6.42857 7.40754 6.92928 7.40754 7.52587C7.40967 8.08837 7.35001 8.59121 7.22856 9.03439C7.10924 9.47544 6.93772 9.84831 6.714 10.153C6.49028 10.4577 6.22075 10.6899 5.90541 10.8497C5.59007 11.0095 5.23531 11.0894 4.84113 11.0894C4.42778 11.0894 4.0613 11.0085 3.7417 10.8465C3.42423 10.6846 3.16748 10.463 2.97146 10.1818C2.77544 9.90051 2.65505 9.57878 2.61031 9.21657H3.77686C3.83651 9.47651 3.95796 9.68318 4.1412 9.83659C4.32657 9.98787 4.55988 10.0635 4.84113 10.0635C5.29497 10.0635 5.6444 9.86642 5.88943 9.47225C6.13446 9.07807 6.25697 8.53049 6.25697 7.82949H6.21222C6.10782 8.01699 5.97252 8.17892 5.80633 8.31529C5.64014 8.44952 5.45157 8.55286 5.24063 8.6253C5.03183 8.69774 4.81024 8.73397 4.57586 8.73397C4.19234 8.73397 3.84717 8.64235 3.54035 8.45911C3.23566 8.27587 2.99383 8.02445 2.81485 7.70485C2.63801 7.38524 2.54852 7.01983 2.54639 6.60861C2.54639 6.18247 2.6444 5.80002 2.84042 5.46124C3.03857 5.12033 3.3145 4.85186 3.66819 4.65584C4.02188 4.45769 4.43524 4.36074 4.90825 4.365ZM4.91144 5.32381C4.68133 5.32381 4.47359 5.38027 4.28822 5.4932C4.10498 5.60399 3.96009 5.75527 3.85356 5.94703C3.74916 6.13666 3.69695 6.34867 3.69695 6.58304C3.69909 6.81529 3.75129 7.02622 3.85356 7.21586C3.95796 7.40549 4.09965 7.5557 4.27863 7.66649C4.45974 7.77729 4.66642 7.83269 4.89866 7.83269C5.07124 7.83269 5.23211 7.79966 5.38126 7.73361C5.53041 7.66756 5.66038 7.57594 5.77117 7.45875C5.8841 7.33943 5.97146 7.20414 6.03325 7.05286C6.09717 6.90158 6.12806 6.74178 6.12593 6.57345C6.12593 6.34973 6.07267 6.14306 5.96613 5.95343C5.86173 5.7638 5.71791 5.61145 5.53467 5.49639C5.35356 5.38134 5.14582 5.32381 4.91144 5.32381Z"
fill="white"
/>
<path
d="M10.415 9.95165V5.52836H11.4185V9.95165H10.415ZM8.70512 8.24178V7.23823H13.1284V8.24178H8.70512Z"
fill="white"
/>
</svg>
)
14 changes: 14 additions & 0 deletions src/components/Icons/Notifications/CounterIcons/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react'
import * as Numbers from './Numbers'

type CounterProps = React.SVGAttributes<SVGElement> & {
count: number
}

const Counter = ({ count, ...rest }: CounterProps) => {
const Component = count <= 9 ? Numbers[`Number${count}`] : Numbers['Number9Plus']

return <Component {...rest} />
}

export default Counter
12 changes: 3 additions & 9 deletions src/components/Notifications/Notifications.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,9 @@
}

.dcl.notifications-counter {
width: 15px;
height: 15px;
border-radius: 50%;
font-size: 11px;
background-color: var(--primary);
width: 16px;
height: 16px;
position: relative;
top: -21px;
top: -24px;
left: 19px;
display: flex;
justify-content: center;
align-items: center;
}
7 changes: 3 additions & 4 deletions src/components/Notifications/Notifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import {

import NotificationBell from '../Icons/Notifications/NotificationBell'
import NotificationBellActive from '../Icons/Notifications/NotificationBellActive'
import { ModalProps } from '../Modal/Modal'
import Counter from '../Icons/Notifications/CounterIcons'

import './Notifications.css'
import { ModalProps } from '../Modal/Modal'

export interface NotificationsProps {
isOpen: boolean
Expand Down Expand Up @@ -55,9 +56,7 @@ export default function Notifications({
{!isOpen ? <NotificationBell /> : <NotificationBellActive />}
</button>
{!isOpen && newNotificationsCount > 0 && (
<div className="dcl notifications-counter">
{newNotificationsCount > 9 ? '9+' : newNotificationsCount}
</div>
<div className="dcl notifications-counter"><Counter count={newNotificationsCount} /></div>
)}
</div>
{isOpen && (
Expand Down

0 comments on commit aa46f90

Please sign in to comment.