[🐴] Change up icons (#3938)
* Swap for chat icon * Replace icons in left nav * Replace icons in bottom bars * Ditch feeds, drop size * Fine tune * Swap bell icon, improve alignment and sizezio/stable
Eric Bailey
GitHub
parent
d7f3a8d01f
commit
8f56f79c6c
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.307 7.307 0 0 0-7.298 6.943l-.19 3.798-1.321 2.641A1.809 1.809 0 0 0 4.809 18H7.1a5.002 5.002 0 0 0 9.8 0h2.291a1.809 1.809 0 0 0 1.618-2.618l-1.32-2.641-.19-3.798A7.308 7.308 0 0 0 12 2Zm0 18a3.001 3.001 0 0 1-2.83-2h5.66A3.001 3.001 0 0 1 12 20Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 398 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.702 8.943a7.307 7.307 0 0 1 14.596 0l.19 3.798 1.321 2.641A1.809 1.809 0 0 1 19.191 18H16.9a5.002 5.002 0 0 1-9.8 0H4.809a1.809 1.809 0 0 1-1.618-2.618l1.32-2.641.19-3.798ZM9.17 18a3.001 3.001 0 0 0 5.658 0H9.171ZM12 4a5.307 5.307 0 0 0-5.3 5.042l-.19 3.798a2 2 0 0 1-.21.795L5.119 16h13.764l-1.183-2.365a2 2 0 0 1-.208-.795l-.19-3.798A5.308 5.308 0 0 0 12 4Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 505 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 387 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 454 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm0 10a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm10-1a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2h-7Zm-1-9a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 302 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 381 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 393 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9.186 2.512a1.5 1.5 0 0 0-1.674 1.302L7.176 6.5H4a1.5 1.5 0 1 0 0 3h2.8l-.624 5H4a1.5 1.5 0 0 0 0 3h1.8l-.288 2.314a1.5 1.5 0 1 0 2.976.372l.336-2.686h4.977l-.29 2.314a1.5 1.5 0 1 0 2.977.372l.336-2.686H20a1.5 1.5 0 0 0 0-3h-2.8l.624-5H20a1.5 1.5 0 0 0 0-3h-1.8l.288-2.314a1.5 1.5 0 1 0-2.976-.372L15.176 6.5h-4.977l.29-2.314a1.5 1.5 0 0 0-1.303-1.674ZM9.2 14.5l.625-5h4.977l-.625 5H9.199Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 533 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.63 1.724a1 1 0 0 0-1.26 0l-8 6.5A1 1 0 0 0 3 9v11a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-6h4v6a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-.37-.776l-8-6.5Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 252 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.37 1.724a1 1 0 0 1 1.26 0l8 6.5A1 1 0 0 1 21 9v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 .37-.776l8-6.5ZM5 9.476V19h4v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h4V9.476l-7-5.688-7 5.688Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 367 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3Zm4 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 4.445 7.169 1 1 0 0 0-.629-.088l-3.537.662.7-3.415a1 1 0 0 0-.09-.66A7.961 7.961 0 0 1 4 12Zm8-10C6.477 2 2 6.477 2 12c0 1.523.341 2.968.951 4.262l-.93 4.537a1 1 0 0 0 1.163 1.184l4.68-.876A9.968 9.968 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2ZM7.5 13.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 567 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.968 9.968 0 0 1-4.136-.893l-4.68.876a1 1 0 0 1-1.164-1.184l.931-4.537A9.965 9.965 0 0 1 2 12Zm4.25 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm4.5 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm5.75 1.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 453 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9.996 2.869A1.951 1.951 0 0 1 11.62 2h.76c.653 0 1.262.326 1.624.869l1.141 1.712 1.749-.404a1.951 1.951 0 0 1 1.819.522l.588.589c.476.475.673 1.162.522 1.818l-.404 1.749 1.712 1.141c.543.362.869.971.869 1.624v.76c0 .653-.326 1.262-.869 1.624l-1.712 1.141.404 1.749a1.951 1.951 0 0 1-.522 1.819l-.588.588a1.951 1.951 0 0 1-1.819.522l-1.749-.404-1.141 1.712A1.951 1.951 0 0 1 12.38 22h-.76a1.951 1.951 0 0 1-1.624-.869L8.855 19.42l-1.749.404a1.951 1.951 0 0 1-1.818-.522l-.59-.588a1.951 1.951 0 0 1-.52-1.819l.403-1.749-1.712-1.141A1.951 1.951 0 0 1 2 12.38v-.76c0-.653.326-1.262.869-1.624L4.58 8.855l-.404-1.749A1.951 1.951 0 0 1 4.7 5.288l.589-.59a1.951 1.951 0 0 1 1.818-.52l1.749.403 1.141-1.712ZM8.5 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 886 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3-12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-3 10a7.976 7.976 0 0 1-5.714-2.4C7.618 16.004 9.605 15 12 15c2.396 0 4.383 1.005 5.714 2.6A7.976 7.976 0 0 1 12 20Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 366 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 0 0-5.935 13.365C7.56 15.895 9.612 15 12 15c2.388 0 4.44.894 5.935 2.365A8 8 0 0 0 12 4Zm4.412 14.675C15.298 17.636 13.792 17 12 17c-1.791 0-3.298.636-4.412 1.675A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.412-1.325ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10a9.98 9.98 0 0 1-3.462 7.567A9.965 9.965 0 0 1 12 22a9.965 9.965 0 0 1-6.538-2.433A9.98 9.98 0 0 1 2 12Zm10-4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 581 B |
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const Bell_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Bell_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const Bell2_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M4.702 8.943a7.307 7.307 0 0 1 14.596 0l.19 3.798 1.321 2.641A1.809 1.809 0 0 1 19.191 18H16.9a5.002 5.002 0 0 1-9.8 0H4.809a1.809 1.809 0 0 1-1.618-2.618l1.32-2.641.19-3.798ZM9.17 18a3.001 3.001 0 0 0 5.658 0H9.171ZM12 4a5.307 5.307 0 0 0-5.3 5.042l-.19 3.798a2 2 0 0 1-.21.795L5.119 16h13.764l-1.183-2.365a2 2 0 0 1-.208-.795l-.19-3.798A5.308 5.308 0 0 0 12 4Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Bell2_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12 2a7.307 7.307 0 0 0-7.298 6.943l-.19 3.798-1.321 2.641A1.809 1.809 0 0 0 4.809 18H7.1a5.002 5.002 0 0 0 9.8 0h2.291a1.809 1.809 0 0 0 1.618-2.618l-1.32-2.641-.19-3.798A7.308 7.308 0 0 0 12 2Zm0 18a3.001 3.001 0 0 1-2.83-2h5.66A3.001 3.001 0 0 1 12 20Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const BulletList_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const BulletList_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm0 10a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm10-1a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2h-7Zm-1-9a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const EditBig_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z',
|
||||||
|
})
|
||||||
|
|
@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
|
||||||
export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
path: 'M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z',
|
path: 'M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const Hashtag_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M9.186 2.512a1.5 1.5 0 0 0-1.674 1.302L7.176 6.5H4a1.5 1.5 0 1 0 0 3h2.8l-.624 5H4a1.5 1.5 0 0 0 0 3h1.8l-.288 2.314a1.5 1.5 0 1 0 2.976.372l.336-2.686h4.977l-.29 2.314a1.5 1.5 0 1 0 2.977.372l.336-2.686H20a1.5 1.5 0 0 0 0-3h-2.8l.624-5H20a1.5 1.5 0 0 0 0-3h-1.8l.288-2.314a1.5 1.5 0 1 0-2.976-.372L15.176 6.5h-4.977l.29-2.314a1.5 1.5 0 0 0-1.303-1.674ZM9.2 14.5l.625-5h4.977l-.625 5H9.199Z',
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const HomeOpen_Stoke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M11.37 1.724a1 1 0 0 1 1.26 0l8 6.5A1 1 0 0 1 21 9v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 .37-.776l8-6.5ZM5 9.476V19h4v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h4V9.476l-7-5.688-7 5.688Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const HomeOpen_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12.63 1.724a1 1 0 0 0-1.26 0l-8 6.5A1 1 0 0 0 3 9v11a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-6h4v6a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-.37-.776l-8-6.5Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const MagnifyingGlass_Filled_Stroke2_Corner0_Rounded =
|
||||||
|
createSinglePathSVG({
|
||||||
|
path: 'M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3Zm4 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const Message_Stroke2_Corner0_Rounded_Filled = createSinglePathSVG({
|
||||||
|
path: 'M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.968 9.968 0 0 1-4.136-.893l-4.68.876a1 1 0 0 1-1.164-1.184l.931-4.537A9.965 9.965 0 0 1 2 12Zm4.25 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm4.5 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm5.75 1.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Message_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M4 12a8 8 0 1 1 4.445 7.169 1 1 0 0 0-.629-.088l-3.537.662.7-3.415a1 1 0 0 0-.09-.66A7.961 7.961 0 0 1 4 12Zm8-10C6.477 2 2 6.477 2 12c0 1.523.341 2.968.951 4.262l-.93 4.537a1 1 0 0 0 1.163 1.184l4.68-.876A9.968 9.968 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2ZM7.5 13.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const SettingsGear2_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M9.996 2.869A1.951 1.951 0 0 1 11.62 2h.76c.653 0 1.262.326 1.624.869l1.141 1.712 1.749-.404a1.951 1.951 0 0 1 1.819.522l.588.589c.476.475.673 1.162.522 1.818l-.404 1.749 1.712 1.141c.543.362.869.971.869 1.624v.76c0 .653-.326 1.262-.869 1.624l-1.712 1.141.404 1.749a1.951 1.951 0 0 1-.522 1.819l-.588.588a1.951 1.951 0 0 1-1.819.522l-1.749-.404-1.141 1.712A1.951 1.951 0 0 1 12.38 22h-.76a1.951 1.951 0 0 1-1.624-.869L8.855 19.42l-1.749.404a1.951 1.951 0 0 1-1.818-.522l-.59-.588a1.951 1.951 0 0 1-.52-1.819l.403-1.749-1.712-1.141A1.951 1.951 0 0 1 2 12.38v-.76c0-.653.326-1.262.869-1.624L4.58 8.855l-.404-1.749A1.951 1.951 0 0 1 4.7 5.288l.589-.59a1.951 1.951 0 0 1 1.818-.52l1.749.403 1.141-1.712ZM8.5 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z',
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createSinglePathSVG} from './TEMPLATE'
|
||||||
|
|
||||||
|
export const UserCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12 4a8 8 0 0 0-5.935 13.365C7.56 15.895 9.612 15 12 15c2.388 0 4.44.894 5.935 2.365A8 8 0 0 0 12 4Zm4.412 14.675C15.298 17.636 13.792 17 12 17c-1.791 0-3.298.636-4.412 1.675A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.412-1.325ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10a9.98 9.98 0 0 1-3.462 7.567A9.965 9.965 0 0 1 12 22a9.965 9.965 0 0 1-6.538-2.433A9.98 9.98 0 0 1 2 12Zm10-4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const UserCircle_Filled_Corner0_Rounded = createSinglePathSVG({
|
||||||
|
path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3-12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-3 10a7.976 7.976 0 0 1-5.714-2.4C7.618 16.004 9.605 15 12 15c2.396 0 4.383 1.005 5.714 2.6A7.976 7.976 0 0 1 12 20Z',
|
||||||
|
})
|
||||||
|
|
@ -13,15 +13,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
|
||||||
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
|
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
|
||||||
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
|
||||||
import {usePalette} from '#/lib/hooks/usePalette'
|
import {usePalette} from '#/lib/hooks/usePalette'
|
||||||
import {
|
|
||||||
BellIcon,
|
|
||||||
BellIconSolid,
|
|
||||||
HashtagIcon,
|
|
||||||
HomeIcon,
|
|
||||||
HomeIconSolid,
|
|
||||||
MagnifyingGlassIcon2,
|
|
||||||
MagnifyingGlassIcon2Solid,
|
|
||||||
} from '#/lib/icons'
|
|
||||||
import {clamp} from '#/lib/numbers'
|
import {clamp} from '#/lib/numbers'
|
||||||
import {getTabState, TabState} from '#/lib/routes/helpers'
|
import {getTabState, TabState} from '#/lib/routes/helpers'
|
||||||
import {useGate} from '#/lib/statsig/statsig'
|
import {useGate} from '#/lib/statsig/statsig'
|
||||||
|
|
@ -41,8 +32,20 @@ import {Logo} from '#/view/icons/Logo'
|
||||||
import {Logotype} from '#/view/icons/Logotype'
|
import {Logotype} from '#/view/icons/Logotype'
|
||||||
import {useDialogControl} from '#/components/Dialog'
|
import {useDialogControl} from '#/components/Dialog'
|
||||||
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
|
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
|
||||||
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
|
import {
|
||||||
import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
|
Bell_Filled_Corner0_Rounded as BellFilled,
|
||||||
|
Bell_Stroke2_Corner0_Rounded as Bell,
|
||||||
|
} from '#/components/icons/Bell'
|
||||||
|
import {
|
||||||
|
HomeOpen_Filled_Corner0_Rounded as HomeFilled,
|
||||||
|
HomeOpen_Stoke2_Corner0_Rounded as Home,
|
||||||
|
} from '#/components/icons/HomeOpen'
|
||||||
|
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
|
||||||
|
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
|
||||||
|
import {
|
||||||
|
Message_Stroke2_Corner0_Rounded as Message,
|
||||||
|
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
|
||||||
|
} from '#/components/icons/Message'
|
||||||
import {styles} from './BottomBarStyles'
|
import {styles} from './BottomBarStyles'
|
||||||
|
|
||||||
type TabOptions =
|
type TabOptions =
|
||||||
|
|
@ -60,14 +63,8 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
const safeAreaInsets = useSafeAreaInsets()
|
const safeAreaInsets = useSafeAreaInsets()
|
||||||
const {track} = useAnalytics()
|
const {track} = useAnalytics()
|
||||||
const {footerHeight} = useShellLayout()
|
const {footerHeight} = useShellLayout()
|
||||||
const {
|
const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
|
||||||
isAtHome,
|
useNavigationTabState()
|
||||||
isAtSearch,
|
|
||||||
isAtFeeds,
|
|
||||||
isAtNotifications,
|
|
||||||
isAtMyProfile,
|
|
||||||
isAtMessages,
|
|
||||||
} = useNavigationTabState()
|
|
||||||
const numUnreadNotifications = useUnreadNotifications()
|
const numUnreadNotifications = useUnreadNotifications()
|
||||||
const numUnreadMessages = useUnreadMessageCount()
|
const numUnreadMessages = useUnreadMessageCount()
|
||||||
const {footerMinimalShellTransform} = useMinimalShellMode()
|
const {footerMinimalShellTransform} = useMinimalShellMode()
|
||||||
|
|
@ -78,6 +75,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
const accountSwitchControl = useDialogControl()
|
const accountSwitchControl = useDialogControl()
|
||||||
const playHaptic = useHaptics()
|
const playHaptic = useHaptics()
|
||||||
const gate = useGate()
|
const gate = useGate()
|
||||||
|
const iconWidth = 28
|
||||||
|
|
||||||
const showSignIn = React.useCallback(() => {
|
const showSignIn = React.useCallback(() => {
|
||||||
closeAllActiveElements()
|
closeAllActiveElements()
|
||||||
|
|
@ -110,10 +108,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
() => onPressTab('Search'),
|
() => onPressTab('Search'),
|
||||||
[onPressTab],
|
[onPressTab],
|
||||||
)
|
)
|
||||||
const onPressFeeds = React.useCallback(
|
|
||||||
() => onPressTab('Feeds'),
|
|
||||||
[onPressTab],
|
|
||||||
)
|
|
||||||
const onPressNotifications = React.useCallback(
|
const onPressNotifications = React.useCallback(
|
||||||
() => onPressTab('Notifications'),
|
() => onPressTab('Notifications'),
|
||||||
[onPressTab],
|
[onPressTab],
|
||||||
|
|
@ -152,15 +146,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
testID="bottomBarHomeBtn"
|
testID="bottomBarHomeBtn"
|
||||||
icon={
|
icon={
|
||||||
isAtHome ? (
|
isAtHome ? (
|
||||||
<HomeIconSolid
|
<HomeFilled
|
||||||
strokeWidth={4}
|
width={iconWidth + 1}
|
||||||
size={24}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<HomeIcon
|
<Home
|
||||||
strokeWidth={4}
|
width={iconWidth + 1}
|
||||||
size={24}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
@ -174,16 +166,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
testID="bottomBarSearchBtn"
|
testID="bottomBarSearchBtn"
|
||||||
icon={
|
icon={
|
||||||
isAtSearch ? (
|
isAtSearch ? (
|
||||||
<MagnifyingGlassIcon2Solid
|
<MagnifyingGlassFilled
|
||||||
size={25}
|
width={iconWidth + 2}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||||
strokeWidth={1.8}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<MagnifyingGlassIcon2
|
<MagnifyingGlass
|
||||||
size={25}
|
width={iconWidth + 2}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||||
strokeWidth={1.8}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -192,68 +182,18 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
accessibilityLabel={_(msg`Search`)}
|
accessibilityLabel={_(msg`Search`)}
|
||||||
accessibilityHint=""
|
accessibilityHint=""
|
||||||
/>
|
/>
|
||||||
<Btn
|
|
||||||
testID="bottomBarFeedsBtn"
|
|
||||||
icon={
|
|
||||||
isAtFeeds ? (
|
|
||||||
<HashtagIcon
|
|
||||||
size={24}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
|
||||||
strokeWidth={4}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<HashtagIcon
|
|
||||||
size={24}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
|
||||||
strokeWidth={2.25}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
onPress={onPressFeeds}
|
|
||||||
accessibilityRole="tab"
|
|
||||||
accessibilityLabel={_(msg`Feeds`)}
|
|
||||||
accessibilityHint=""
|
|
||||||
/>
|
|
||||||
<Btn
|
|
||||||
testID="bottomBarNotificationsBtn"
|
|
||||||
icon={
|
|
||||||
isAtNotifications ? (
|
|
||||||
<BellIconSolid
|
|
||||||
size={24}
|
|
||||||
strokeWidth={1.9}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<BellIcon
|
|
||||||
size={24}
|
|
||||||
strokeWidth={1.9}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
onPress={onPressNotifications}
|
|
||||||
notificationCount={numUnreadNotifications}
|
|
||||||
accessible={true}
|
|
||||||
accessibilityRole="tab"
|
|
||||||
accessibilityLabel={_(msg`Notifications`)}
|
|
||||||
accessibilityHint={
|
|
||||||
numUnreadNotifications === ''
|
|
||||||
? ''
|
|
||||||
: `${numUnreadNotifications} unread`
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{gate('dms') && (
|
{gate('dms') && (
|
||||||
<Btn
|
<Btn
|
||||||
testID="bottomBarMessagesBtn"
|
testID="bottomBarMessagesBtn"
|
||||||
icon={
|
icon={
|
||||||
isAtMessages ? (
|
isAtMessages ? (
|
||||||
<EnvelopeFilled
|
<MessageFilled
|
||||||
size="lg"
|
width={iconWidth - 1}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Envelope
|
<Message
|
||||||
size="lg"
|
width={iconWidth - 1}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
@ -270,6 +210,32 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
<Btn
|
||||||
|
testID="bottomBarNotificationsBtn"
|
||||||
|
icon={
|
||||||
|
isAtNotifications ? (
|
||||||
|
<BellFilled
|
||||||
|
width={iconWidth}
|
||||||
|
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Bell
|
||||||
|
width={iconWidth}
|
||||||
|
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onPress={onPressNotifications}
|
||||||
|
notificationCount={numUnreadNotifications}
|
||||||
|
accessible={true}
|
||||||
|
accessibilityRole="tab"
|
||||||
|
accessibilityLabel={_(msg`Notifications`)}
|
||||||
|
accessibilityHint={
|
||||||
|
numUnreadNotifications === ''
|
||||||
|
? ''
|
||||||
|
: `${numUnreadNotifications} unread`
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Btn
|
<Btn
|
||||||
testID="bottomBarProfileBtn"
|
testID="bottomBarProfileBtn"
|
||||||
icon={
|
icon={
|
||||||
|
|
@ -285,7 +251,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
]}>
|
]}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
avatar={profile?.avatar}
|
avatar={profile?.avatar}
|
||||||
size={27}
|
size={iconWidth - 3}
|
||||||
// See https://github.com/bluesky-social/social-app/pull/1801:
|
// See https://github.com/bluesky-social/social-app/pull/1801:
|
||||||
usePlainRNImage={true}
|
usePlainRNImage={true}
|
||||||
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
||||||
|
|
@ -296,7 +262,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
|
||||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
|
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
avatar={profile?.avatar}
|
avatar={profile?.avatar}
|
||||||
size={28}
|
size={iconWidth - 3}
|
||||||
// See https://github.com/bluesky-social/social-app/pull/1801:
|
// See https://github.com/bluesky-social/social-app/pull/1801:
|
||||||
usePlainRNImage={true}
|
usePlainRNImage={true}
|
||||||
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
type={profile?.associated?.labeler ? 'labeler' : 'user'}
|
||||||
|
|
|
||||||
|
|
@ -48,27 +48,19 @@ export const styles = StyleSheet.create({
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
marginRight: 'auto',
|
marginRight: 'auto',
|
||||||
},
|
},
|
||||||
ctrlIconSizingWrapper: {
|
ctrlIconSizingWrapper: {},
|
||||||
height: 27,
|
homeIcon: {},
|
||||||
},
|
feedsIcon: {},
|
||||||
homeIcon: {
|
|
||||||
top: 0,
|
|
||||||
},
|
|
||||||
feedsIcon: {
|
|
||||||
top: -2,
|
|
||||||
},
|
|
||||||
searchIcon: {
|
searchIcon: {
|
||||||
top: -2,
|
top: -1,
|
||||||
},
|
|
||||||
bellIcon: {
|
|
||||||
top: -2.5,
|
|
||||||
},
|
},
|
||||||
|
bellIcon: {},
|
||||||
profileIcon: {
|
profileIcon: {
|
||||||
top: -4,
|
borderRadius: 100,
|
||||||
},
|
borderWidth: 1,
|
||||||
messagesIcon: {
|
borderColor: 'transparent',
|
||||||
top: 2,
|
|
||||||
},
|
},
|
||||||
|
messagesIcon: {},
|
||||||
onProfile: {
|
onProfile: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderRadius: 100,
|
borderRadius: 100,
|
||||||
|
|
|
||||||
|
|
@ -8,17 +8,6 @@ import {useNavigationState} from '@react-navigation/native'
|
||||||
|
|
||||||
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
|
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
|
||||||
import {usePalette} from '#/lib/hooks/usePalette'
|
import {usePalette} from '#/lib/hooks/usePalette'
|
||||||
import {
|
|
||||||
BellIcon,
|
|
||||||
BellIconSolid,
|
|
||||||
HashtagIcon,
|
|
||||||
HomeIcon,
|
|
||||||
HomeIconSolid,
|
|
||||||
MagnifyingGlassIcon2,
|
|
||||||
MagnifyingGlassIcon2Solid,
|
|
||||||
UserIcon,
|
|
||||||
UserIconSolid,
|
|
||||||
} from '#/lib/icons'
|
|
||||||
import {clamp} from '#/lib/numbers'
|
import {clamp} from '#/lib/numbers'
|
||||||
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
|
import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
|
||||||
import {makeProfileLink} from '#/lib/routes/links'
|
import {makeProfileLink} from '#/lib/routes/links'
|
||||||
|
|
@ -33,8 +22,24 @@ import {Text} from '#/view/com/util/text/Text'
|
||||||
import {Logo} from '#/view/icons/Logo'
|
import {Logo} from '#/view/icons/Logo'
|
||||||
import {Logotype} from '#/view/icons/Logotype'
|
import {Logotype} from '#/view/icons/Logotype'
|
||||||
import {Link} from 'view/com/util/Link'
|
import {Link} from 'view/com/util/Link'
|
||||||
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
|
import {
|
||||||
import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
|
Bell_Filled_Corner0_Rounded as BellFilled,
|
||||||
|
Bell_Stroke2_Corner0_Rounded as Bell,
|
||||||
|
} from '#/components/icons/Bell'
|
||||||
|
import {
|
||||||
|
HomeOpen_Filled_Corner0_Rounded as HomeFilled,
|
||||||
|
HomeOpen_Stoke2_Corner0_Rounded as Home,
|
||||||
|
} from '#/components/icons/HomeOpen'
|
||||||
|
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
|
||||||
|
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
|
||||||
|
import {
|
||||||
|
Message_Stroke2_Corner0_Rounded as Message,
|
||||||
|
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
|
||||||
|
} from '#/components/icons/Message'
|
||||||
|
import {
|
||||||
|
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
|
||||||
|
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
|
||||||
|
} from '#/components/icons/UserCircle'
|
||||||
import {styles} from './BottomBarStyles'
|
import {styles} from './BottomBarStyles'
|
||||||
|
|
||||||
export function BottomBarWeb() {
|
export function BottomBarWeb() {
|
||||||
|
|
@ -46,6 +51,7 @@ export function BottomBarWeb() {
|
||||||
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
||||||
const closeAllActiveElements = useCloseAllActiveElements()
|
const closeAllActiveElements = useCloseAllActiveElements()
|
||||||
const gate = useGate()
|
const gate = useGate()
|
||||||
|
const iconWidth = 26
|
||||||
|
|
||||||
const showSignIn = React.useCallback(() => {
|
const showSignIn = React.useCallback(() => {
|
||||||
closeAllActiveElements()
|
closeAllActiveElements()
|
||||||
|
|
@ -72,11 +78,10 @@ export function BottomBarWeb() {
|
||||||
<>
|
<>
|
||||||
<NavItem routeName="Home" href="/">
|
<NavItem routeName="Home" href="/">
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? HomeIconSolid : HomeIcon
|
const Icon = isActive ? HomeFilled : Home
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
strokeWidth={4}
|
width={iconWidth + 1}
|
||||||
size={24}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
@ -84,14 +89,11 @@ export function BottomBarWeb() {
|
||||||
</NavItem>
|
</NavItem>
|
||||||
<NavItem routeName="Search" href="/search">
|
<NavItem routeName="Search" href="/search">
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive
|
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
|
||||||
? MagnifyingGlassIcon2Solid
|
|
||||||
: MagnifyingGlassIcon2
|
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
size={25}
|
width={iconWidth + 2}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
|
||||||
strokeWidth={1.8}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
|
|
@ -99,42 +101,30 @@ export function BottomBarWeb() {
|
||||||
|
|
||||||
{hasSession && (
|
{hasSession && (
|
||||||
<>
|
<>
|
||||||
<NavItem routeName="Feeds" href="/feeds">
|
|
||||||
{({isActive}) => {
|
|
||||||
return (
|
|
||||||
<HashtagIcon
|
|
||||||
size={22}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
|
|
||||||
strokeWidth={isActive ? 4 : 2.5}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</NavItem>
|
|
||||||
<NavItem routeName="Notifications" href="/notifications">
|
|
||||||
{({isActive}) => {
|
|
||||||
const Icon = isActive ? BellIconSolid : BellIcon
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
size={24}
|
|
||||||
strokeWidth={1.9}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</NavItem>
|
|
||||||
{gate('dms') && (
|
{gate('dms') && (
|
||||||
<NavItem routeName="Messages" href="/messages">
|
<NavItem routeName="Messages" href="/messages">
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? EnvelopeFilled : Envelope
|
const Icon = isActive ? MessageFilled : Message
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
size="lg"
|
width={iconWidth - 1}
|
||||||
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</NavItem>
|
</NavItem>
|
||||||
)}
|
)}
|
||||||
|
<NavItem routeName="Notifications" href="/notifications">
|
||||||
|
{({isActive}) => {
|
||||||
|
const Icon = isActive ? BellFilled : Bell
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
width={iconWidth}
|
||||||
|
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</NavItem>
|
||||||
<NavItem
|
<NavItem
|
||||||
routeName="Profile"
|
routeName="Profile"
|
||||||
href={
|
href={
|
||||||
|
|
@ -146,11 +136,10 @@ export function BottomBarWeb() {
|
||||||
: '/'
|
: '/'
|
||||||
}>
|
}>
|
||||||
{({isActive}) => {
|
{({isActive}) => {
|
||||||
const Icon = isActive ? UserIconSolid : UserIcon
|
const Icon = isActive ? UserCircleFilled : UserCircle
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
size={28}
|
width={iconWidth}
|
||||||
strokeWidth={1.5}
|
|
||||||
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -23,21 +23,6 @@ import {useSession} from '#/state/session'
|
||||||
import {useComposerControls} from '#/state/shell/composer'
|
import {useComposerControls} from '#/state/shell/composer'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from 'lib/hooks/usePalette'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||||
import {
|
|
||||||
BellIcon,
|
|
||||||
BellIconSolid,
|
|
||||||
CogIcon,
|
|
||||||
CogIconSolid,
|
|
||||||
ComposeIcon2,
|
|
||||||
HashtagIcon,
|
|
||||||
HomeIcon,
|
|
||||||
HomeIconSolid,
|
|
||||||
ListIcon,
|
|
||||||
MagnifyingGlassIcon2,
|
|
||||||
MagnifyingGlassIcon2Solid,
|
|
||||||
UserIcon,
|
|
||||||
UserIconSolid,
|
|
||||||
} from 'lib/icons'
|
|
||||||
import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
|
import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
|
||||||
import {makeProfileLink} from 'lib/routes/links'
|
import {makeProfileLink} from 'lib/routes/links'
|
||||||
import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
|
import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
|
||||||
|
|
@ -48,8 +33,37 @@ import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
|
||||||
import {PressableWithHover} from 'view/com/util/PressableWithHover'
|
import {PressableWithHover} from 'view/com/util/PressableWithHover'
|
||||||
import {Text} from 'view/com/util/text/Text'
|
import {Text} from 'view/com/util/text/Text'
|
||||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||||
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
|
import {
|
||||||
import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope'
|
Bell_Filled_Corner0_Rounded as BellFilled,
|
||||||
|
Bell_Stroke2_Corner0_Rounded as Bell,
|
||||||
|
} from '#/components/icons/Bell'
|
||||||
|
import {
|
||||||
|
BulletList_Filled_Corner0_Rounded as ListFilled,
|
||||||
|
BulletList_Stroke2_Corner0_Rounded as List,
|
||||||
|
} from '#/components/icons/BulletList'
|
||||||
|
import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig'
|
||||||
|
import {
|
||||||
|
Hashtag_Filled_Corner0_Rounded as HashtagFilled,
|
||||||
|
Hashtag_Stroke2_Corner0_Rounded as Hashtag,
|
||||||
|
} from '#/components/icons/Hashtag'
|
||||||
|
import {
|
||||||
|
HomeOpen_Filled_Corner0_Rounded as HomeFilled,
|
||||||
|
HomeOpen_Stoke2_Corner0_Rounded as Home,
|
||||||
|
} from '#/components/icons/HomeOpen'
|
||||||
|
import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
|
||||||
|
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
|
||||||
|
import {
|
||||||
|
Message_Stroke2_Corner0_Rounded as Message,
|
||||||
|
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
|
||||||
|
} from '#/components/icons/Message'
|
||||||
|
import {
|
||||||
|
SettingsGear2_Filled_Corner0_Rounded as SettingsFilled,
|
||||||
|
SettingsGear2_Stroke2_Corner0_Rounded as Settings,
|
||||||
|
} from '#/components/icons/SettingsGear2'
|
||||||
|
import {
|
||||||
|
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
|
||||||
|
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
|
||||||
|
} from '#/components/icons/UserCircle'
|
||||||
import {router} from '../../../routes'
|
import {router} from '../../../routes'
|
||||||
|
|
||||||
function ProfileCard() {
|
function ProfileCard() {
|
||||||
|
|
@ -256,11 +270,7 @@ function ComposeBtn() {
|
||||||
accessibilityLabel={_(msg`New post`)}
|
accessibilityLabel={_(msg`New post`)}
|
||||||
accessibilityHint="">
|
accessibilityHint="">
|
||||||
<View style={styles.newPostBtnIconWrapper}>
|
<View style={styles.newPostBtnIconWrapper}>
|
||||||
<ComposeIcon2
|
<EditBig width={19} style={styles.newPostBtnLabel} />
|
||||||
size={19}
|
|
||||||
strokeWidth={2}
|
|
||||||
style={styles.newPostBtnLabel}
|
|
||||||
/>
|
|
||||||
</View>
|
</View>
|
||||||
<Text type="button" style={styles.newPostBtnLabel}>
|
<Text type="button" style={styles.newPostBtnLabel}>
|
||||||
<Trans context="action">New Post</Trans>
|
<Trans context="action">New Post</Trans>
|
||||||
|
|
@ -278,6 +288,7 @@ export function DesktopLeftNav() {
|
||||||
const numUnreadNotifications = useUnreadNotifications()
|
const numUnreadNotifications = useUnreadNotifications()
|
||||||
const numUnreadMessages = useUnreadMessageCount()
|
const numUnreadMessages = useUnreadMessageCount()
|
||||||
const gate = useGate()
|
const gate = useGate()
|
||||||
|
const iconWidth = 28
|
||||||
|
|
||||||
if (!hasSession && !isDesktop) {
|
if (!hasSession && !isDesktop) {
|
||||||
return null
|
return null
|
||||||
|
|
@ -305,134 +316,66 @@ export function DesktopLeftNav() {
|
||||||
|
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/"
|
href="/"
|
||||||
icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
|
icon={<Home width={iconWidth} style={pal.text} />}
|
||||||
iconFilled={
|
iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
|
||||||
<HomeIconSolid
|
|
||||||
strokeWidth={4}
|
|
||||||
size={isDesktop ? 24 : 28}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={_(msg`Home`)}
|
label={_(msg`Home`)}
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/search"
|
href="/search"
|
||||||
icon={
|
icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
|
||||||
<MagnifyingGlassIcon2
|
|
||||||
strokeWidth={2}
|
|
||||||
size={isDesktop ? 24 : 26}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
iconFilled={
|
iconFilled={
|
||||||
<MagnifyingGlassIcon2Solid
|
<MagnifyingGlassFilled style={pal.text} width={iconWidth} />
|
||||||
strokeWidth={2}
|
|
||||||
size={isDesktop ? 24 : 26}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
label={_(msg`Search`)}
|
label={_(msg`Search`)}
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/notifications"
|
href="/notifications"
|
||||||
count={numUnreadNotifications}
|
count={numUnreadNotifications}
|
||||||
icon={
|
icon={<Bell width={iconWidth} style={pal.text} />}
|
||||||
<BellIcon
|
iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
|
||||||
strokeWidth={2}
|
|
||||||
size={isDesktop ? 24 : 26}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
iconFilled={
|
|
||||||
<BellIconSolid
|
|
||||||
strokeWidth={1.5}
|
|
||||||
size={isDesktop ? 24 : 26}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={_(msg`Notifications`)}
|
label={_(msg`Notifications`)}
|
||||||
/>
|
/>
|
||||||
{gate('dms') && (
|
{gate('dms') && (
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/messages"
|
href="/messages"
|
||||||
count={numUnreadMessages.numUnread}
|
count={numUnreadMessages.numUnread}
|
||||||
icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />}
|
icon={<Message style={pal.text} width={iconWidth} />}
|
||||||
iconFilled={
|
iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
|
||||||
<EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} />
|
|
||||||
}
|
|
||||||
label={_(msg`Messages`)}
|
label={_(msg`Messages`)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/feeds"
|
href="/feeds"
|
||||||
icon={
|
icon={
|
||||||
<HashtagIcon
|
<Hashtag
|
||||||
strokeWidth={2.25}
|
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={isDesktop ? 24 : 28}
|
width={iconWidth}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
iconFilled={
|
iconFilled={
|
||||||
<HashtagIcon
|
<HashtagFilled
|
||||||
strokeWidth={4}
|
|
||||||
style={pal.text as FontAwesomeIconStyle}
|
style={pal.text as FontAwesomeIconStyle}
|
||||||
size={isDesktop ? 24 : 28}
|
width={iconWidth}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label={_(msg`Feeds`)}
|
label={_(msg`Feeds`)}
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/lists"
|
href="/lists"
|
||||||
icon={
|
icon={<List style={pal.text} width={iconWidth} />}
|
||||||
<ListIcon
|
iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
|
||||||
style={pal.text}
|
|
||||||
size={isDesktop ? 26 : 30}
|
|
||||||
strokeWidth={2}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
iconFilled={
|
|
||||||
<ListIcon
|
|
||||||
style={pal.text}
|
|
||||||
size={isDesktop ? 26 : 30}
|
|
||||||
strokeWidth={3}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={_(msg`Lists`)}
|
label={_(msg`Lists`)}
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
|
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
|
||||||
icon={
|
icon={<UserCircle width={iconWidth} style={pal.text} />}
|
||||||
<UserIcon
|
iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
|
||||||
strokeWidth={1.75}
|
|
||||||
size={isDesktop ? 28 : 30}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
iconFilled={
|
|
||||||
<UserIconSolid
|
|
||||||
strokeWidth={1.75}
|
|
||||||
size={isDesktop ? 28 : 30}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={_(msg`Profile`)}
|
label={_(msg`Profile`)}
|
||||||
/>
|
/>
|
||||||
<NavItem
|
<NavItem
|
||||||
href="/settings"
|
href="/settings"
|
||||||
icon={
|
icon={<Settings width={iconWidth} style={pal.text} />}
|
||||||
<CogIcon
|
iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
|
||||||
strokeWidth={1.75}
|
|
||||||
size={isDesktop ? 28 : 32}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
iconFilled={
|
|
||||||
<CogIconSolid
|
|
||||||
strokeWidth={1.5}
|
|
||||||
size={isDesktop ? 28 : 32}
|
|
||||||
style={pal.text}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label={_(msg`Settings`)}
|
label={_(msg`Settings`)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
@ -494,7 +437,7 @@ const styles = StyleSheet.create({
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
width: 28,
|
width: 28,
|
||||||
height: 28,
|
height: 24,
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue