Bluesky app fork with some witchin' additions ๐Ÿ’ซ

[๐Ÿด] 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 size

authored by

Eric Bailey and committed by
GitHub
8f56f79c d7f3a8d0

+250 -266
+1
assets/icons/bell2_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/bell2_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/bell_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/bell_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/bulletList_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/bulletList_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/editBig_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/hashtag_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/homeOpen_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/homeOpen_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/magnifyingGlass_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/message_stroke2_corner0_rounded.svg
··· 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>
+1
assets/icons/message_stroke2_corner0_rounded_filled.svg
··· 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>
+1
assets/icons/settingsGear2_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/userCircle_filled_corner0_rounded.svg
··· 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>
+1
assets/icons/userCircle_stroke2_corner0_rounded.svg
··· 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>
+9
src/components/icons/Bell.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const Bell_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const Bell_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+9
src/components/icons/Bell2.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const Bell2_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const Bell2_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+9
src/components/icons/BulletList.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const BulletList_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const BulletList_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+5
src/components/icons/EditBig.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const EditBig_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + })
+4
src/components/icons/Hashtag.tsx
··· 3 3 export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 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', 5 5 }) 6 + 7 + export const Hashtag_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+9
src/components/icons/HomeOpen.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const HomeOpen_Stoke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const HomeOpen_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+6
src/components/icons/MagnifyingGlass.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const MagnifyingGlass_Filled_Stroke2_Corner0_Rounded = 4 + createSinglePathSVG({ 5 + 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', 6 + })
+9
src/components/icons/Message.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const Message_Stroke2_Corner0_Rounded_Filled = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const Message_Stroke2_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+9
src/components/icons/SettingsGear2.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const SettingsGear2_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+9
src/components/icons/UserCircle.tsx
··· 1 + import {createSinglePathSVG} from './TEMPLATE' 2 + 3 + export const UserCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 + 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', 5 + }) 6 + 7 + export const UserCircle_Filled_Corner0_Rounded = createSinglePathSVG({ 8 + 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', 9 + })
+57 -91
src/view/shell/bottom-bar/BottomBar.tsx
··· 13 13 import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode' 14 14 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' 15 15 import {usePalette} from '#/lib/hooks/usePalette' 16 - import { 17 - BellIcon, 18 - BellIconSolid, 19 - HashtagIcon, 20 - HomeIcon, 21 - HomeIconSolid, 22 - MagnifyingGlassIcon2, 23 - MagnifyingGlassIcon2Solid, 24 - } from '#/lib/icons' 25 16 import {clamp} from '#/lib/numbers' 26 17 import {getTabState, TabState} from '#/lib/routes/helpers' 27 18 import {useGate} from '#/lib/statsig/statsig' ··· 41 32 import {Logotype} from '#/view/icons/Logotype' 42 33 import {useDialogControl} from '#/components/Dialog' 43 34 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount' 44 - import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' 45 - import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope' 35 + import { 36 + Bell_Filled_Corner0_Rounded as BellFilled, 37 + Bell_Stroke2_Corner0_Rounded as Bell, 38 + } from '#/components/icons/Bell' 39 + import { 40 + HomeOpen_Filled_Corner0_Rounded as HomeFilled, 41 + HomeOpen_Stoke2_Corner0_Rounded as Home, 42 + } from '#/components/icons/HomeOpen' 43 + import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass' 44 + import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' 45 + import { 46 + Message_Stroke2_Corner0_Rounded as Message, 47 + Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, 48 + } from '#/components/icons/Message' 46 49 import {styles} from './BottomBarStyles' 47 50 48 51 type TabOptions = ··· 60 63 const safeAreaInsets = useSafeAreaInsets() 61 64 const {track} = useAnalytics() 62 65 const {footerHeight} = useShellLayout() 63 - const { 64 - isAtHome, 65 - isAtSearch, 66 - isAtFeeds, 67 - isAtNotifications, 68 - isAtMyProfile, 69 - isAtMessages, 70 - } = useNavigationTabState() 66 + const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} = 67 + useNavigationTabState() 71 68 const numUnreadNotifications = useUnreadNotifications() 72 69 const numUnreadMessages = useUnreadMessageCount() 73 70 const {footerMinimalShellTransform} = useMinimalShellMode() ··· 78 75 const accountSwitchControl = useDialogControl() 79 76 const playHaptic = useHaptics() 80 77 const gate = useGate() 78 + const iconWidth = 28 81 79 82 80 const showSignIn = React.useCallback(() => { 83 81 closeAllActiveElements() ··· 110 108 () => onPressTab('Search'), 111 109 [onPressTab], 112 110 ) 113 - const onPressFeeds = React.useCallback( 114 - () => onPressTab('Feeds'), 115 - [onPressTab], 116 - ) 117 111 const onPressNotifications = React.useCallback( 118 112 () => onPressTab('Notifications'), 119 113 [onPressTab], ··· 152 146 testID="bottomBarHomeBtn" 153 147 icon={ 154 148 isAtHome ? ( 155 - <HomeIconSolid 156 - strokeWidth={4} 157 - size={24} 149 + <HomeFilled 150 + width={iconWidth + 1} 158 151 style={[styles.ctrlIcon, pal.text, styles.homeIcon]} 159 152 /> 160 153 ) : ( 161 - <HomeIcon 162 - strokeWidth={4} 163 - size={24} 154 + <Home 155 + width={iconWidth + 1} 164 156 style={[styles.ctrlIcon, pal.text, styles.homeIcon]} 165 157 /> 166 158 ) ··· 174 166 testID="bottomBarSearchBtn" 175 167 icon={ 176 168 isAtSearch ? ( 177 - <MagnifyingGlassIcon2Solid 178 - size={25} 169 + <MagnifyingGlassFilled 170 + width={iconWidth + 2} 179 171 style={[styles.ctrlIcon, pal.text, styles.searchIcon]} 180 - strokeWidth={1.8} 181 172 /> 182 173 ) : ( 183 - <MagnifyingGlassIcon2 184 - size={25} 174 + <MagnifyingGlass 175 + width={iconWidth + 2} 185 176 style={[styles.ctrlIcon, pal.text, styles.searchIcon]} 186 - strokeWidth={1.8} 187 177 /> 188 178 ) 189 179 } ··· 192 182 accessibilityLabel={_(msg`Search`)} 193 183 accessibilityHint="" 194 184 /> 195 - <Btn 196 - testID="bottomBarFeedsBtn" 197 - icon={ 198 - isAtFeeds ? ( 199 - <HashtagIcon 200 - size={24} 201 - style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} 202 - strokeWidth={4} 203 - /> 204 - ) : ( 205 - <HashtagIcon 206 - size={24} 207 - style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} 208 - strokeWidth={2.25} 209 - /> 210 - ) 211 - } 212 - onPress={onPressFeeds} 213 - accessibilityRole="tab" 214 - accessibilityLabel={_(msg`Feeds`)} 215 - accessibilityHint="" 216 - /> 217 - <Btn 218 - testID="bottomBarNotificationsBtn" 219 - icon={ 220 - isAtNotifications ? ( 221 - <BellIconSolid 222 - size={24} 223 - strokeWidth={1.9} 224 - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 225 - /> 226 - ) : ( 227 - <BellIcon 228 - size={24} 229 - strokeWidth={1.9} 230 - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 231 - /> 232 - ) 233 - } 234 - onPress={onPressNotifications} 235 - notificationCount={numUnreadNotifications} 236 - accessible={true} 237 - accessibilityRole="tab" 238 - accessibilityLabel={_(msg`Notifications`)} 239 - accessibilityHint={ 240 - numUnreadNotifications === '' 241 - ? '' 242 - : `${numUnreadNotifications} unread` 243 - } 244 - /> 245 185 {gate('dms') && ( 246 186 <Btn 247 187 testID="bottomBarMessagesBtn" 248 188 icon={ 249 189 isAtMessages ? ( 250 - <EnvelopeFilled 251 - size="lg" 190 + <MessageFilled 191 + width={iconWidth - 1} 252 192 style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} 253 193 /> 254 194 ) : ( 255 - <Envelope 256 - size="lg" 195 + <Message 196 + width={iconWidth - 1} 257 197 style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} 258 198 /> 259 199 ) ··· 271 211 /> 272 212 )} 273 213 <Btn 214 + testID="bottomBarNotificationsBtn" 215 + icon={ 216 + isAtNotifications ? ( 217 + <BellFilled 218 + width={iconWidth} 219 + style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 220 + /> 221 + ) : ( 222 + <Bell 223 + width={iconWidth} 224 + style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 225 + /> 226 + ) 227 + } 228 + onPress={onPressNotifications} 229 + notificationCount={numUnreadNotifications} 230 + accessible={true} 231 + accessibilityRole="tab" 232 + accessibilityLabel={_(msg`Notifications`)} 233 + accessibilityHint={ 234 + numUnreadNotifications === '' 235 + ? '' 236 + : `${numUnreadNotifications} unread` 237 + } 238 + /> 239 + <Btn 274 240 testID="bottomBarProfileBtn" 275 241 icon={ 276 242 <View style={styles.ctrlIconSizingWrapper}> ··· 285 251 ]}> 286 252 <UserAvatar 287 253 avatar={profile?.avatar} 288 - size={27} 254 + size={iconWidth - 3} 289 255 // See https://github.com/bluesky-social/social-app/pull/1801: 290 256 usePlainRNImage={true} 291 257 type={profile?.associated?.labeler ? 'labeler' : 'user'} ··· 296 262 style={[styles.ctrlIcon, pal.text, styles.profileIcon]}> 297 263 <UserAvatar 298 264 avatar={profile?.avatar} 299 - size={28} 265 + size={iconWidth - 3} 300 266 // See https://github.com/bluesky-social/social-app/pull/1801: 301 267 usePlainRNImage={true} 302 268 type={profile?.associated?.labeler ? 'labeler' : 'user'}
+9 -17
src/view/shell/bottom-bar/BottomBarStyles.tsx
··· 48 48 marginLeft: 'auto', 49 49 marginRight: 'auto', 50 50 }, 51 - ctrlIconSizingWrapper: { 52 - height: 27, 53 - }, 54 - homeIcon: { 55 - top: 0, 56 - }, 57 - feedsIcon: { 58 - top: -2, 59 - }, 51 + ctrlIconSizingWrapper: {}, 52 + homeIcon: {}, 53 + feedsIcon: {}, 60 54 searchIcon: { 61 - top: -2, 55 + top: -1, 62 56 }, 63 - bellIcon: { 64 - top: -2.5, 65 - }, 57 + bellIcon: {}, 66 58 profileIcon: { 67 - top: -4, 68 - }, 69 - messagesIcon: { 70 - top: 2, 59 + borderRadius: 100, 60 + borderWidth: 1, 61 + borderColor: 'transparent', 71 62 }, 63 + messagesIcon: {}, 72 64 onProfile: { 73 65 borderWidth: 1, 74 66 borderRadius: 100,
+38 -49
src/view/shell/bottom-bar/BottomBarWeb.tsx
··· 8 8 9 9 import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode' 10 10 import {usePalette} from '#/lib/hooks/usePalette' 11 - import { 12 - BellIcon, 13 - BellIconSolid, 14 - HashtagIcon, 15 - HomeIcon, 16 - HomeIconSolid, 17 - MagnifyingGlassIcon2, 18 - MagnifyingGlassIcon2Solid, 19 - UserIcon, 20 - UserIconSolid, 21 - } from '#/lib/icons' 22 11 import {clamp} from '#/lib/numbers' 23 12 import {getCurrentRoute, isTab} from '#/lib/routes/helpers' 24 13 import {makeProfileLink} from '#/lib/routes/links' ··· 33 22 import {Logo} from '#/view/icons/Logo' 34 23 import {Logotype} from '#/view/icons/Logotype' 35 24 import {Link} from 'view/com/util/Link' 36 - import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' 37 - import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope' 25 + import { 26 + Bell_Filled_Corner0_Rounded as BellFilled, 27 + Bell_Stroke2_Corner0_Rounded as Bell, 28 + } from '#/components/icons/Bell' 29 + import { 30 + HomeOpen_Filled_Corner0_Rounded as HomeFilled, 31 + HomeOpen_Stoke2_Corner0_Rounded as Home, 32 + } from '#/components/icons/HomeOpen' 33 + import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass' 34 + import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' 35 + import { 36 + Message_Stroke2_Corner0_Rounded as Message, 37 + Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, 38 + } from '#/components/icons/Message' 39 + import { 40 + UserCircle_Filled_Corner0_Rounded as UserCircleFilled, 41 + UserCircle_Stroke2_Corner0_Rounded as UserCircle, 42 + } from '#/components/icons/UserCircle' 38 43 import {styles} from './BottomBarStyles' 39 44 40 45 export function BottomBarWeb() { ··· 46 51 const {requestSwitchToAccount} = useLoggedOutViewControls() 47 52 const closeAllActiveElements = useCloseAllActiveElements() 48 53 const gate = useGate() 54 + const iconWidth = 26 49 55 50 56 const showSignIn = React.useCallback(() => { 51 57 closeAllActiveElements() ··· 72 78 <> 73 79 <NavItem routeName="Home" href="/"> 74 80 {({isActive}) => { 75 - const Icon = isActive ? HomeIconSolid : HomeIcon 81 + const Icon = isActive ? HomeFilled : Home 76 82 return ( 77 83 <Icon 78 - strokeWidth={4} 79 - size={24} 84 + width={iconWidth + 1} 80 85 style={[styles.ctrlIcon, pal.text, styles.homeIcon]} 81 86 /> 82 87 ) ··· 84 89 </NavItem> 85 90 <NavItem routeName="Search" href="/search"> 86 91 {({isActive}) => { 87 - const Icon = isActive 88 - ? MagnifyingGlassIcon2Solid 89 - : MagnifyingGlassIcon2 92 + const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass 90 93 return ( 91 94 <Icon 92 - size={25} 95 + width={iconWidth + 2} 93 96 style={[styles.ctrlIcon, pal.text, styles.searchIcon]} 94 - strokeWidth={1.8} 95 97 /> 96 98 ) 97 99 }} ··· 99 101 100 102 {hasSession && ( 101 103 <> 102 - <NavItem routeName="Feeds" href="/feeds"> 103 - {({isActive}) => { 104 - return ( 105 - <HashtagIcon 106 - size={22} 107 - style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} 108 - strokeWidth={isActive ? 4 : 2.5} 109 - /> 110 - ) 111 - }} 112 - </NavItem> 113 - <NavItem routeName="Notifications" href="/notifications"> 114 - {({isActive}) => { 115 - const Icon = isActive ? BellIconSolid : BellIcon 116 - return ( 117 - <Icon 118 - size={24} 119 - strokeWidth={1.9} 120 - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 121 - /> 122 - ) 123 - }} 124 - </NavItem> 125 104 {gate('dms') && ( 126 105 <NavItem routeName="Messages" href="/messages"> 127 106 {({isActive}) => { 128 - const Icon = isActive ? EnvelopeFilled : Envelope 107 + const Icon = isActive ? MessageFilled : Message 129 108 return ( 130 109 <Icon 131 - size="lg" 110 + width={iconWidth - 1} 132 111 style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} 133 112 /> 134 113 ) 135 114 }} 136 115 </NavItem> 137 116 )} 117 + <NavItem routeName="Notifications" href="/notifications"> 118 + {({isActive}) => { 119 + const Icon = isActive ? BellFilled : Bell 120 + return ( 121 + <Icon 122 + width={iconWidth} 123 + style={[styles.ctrlIcon, pal.text, styles.bellIcon]} 124 + /> 125 + ) 126 + }} 127 + </NavItem> 138 128 <NavItem 139 129 routeName="Profile" 140 130 href={ ··· 146 136 : '/' 147 137 }> 148 138 {({isActive}) => { 149 - const Icon = isActive ? UserIconSolid : UserIcon 139 + const Icon = isActive ? UserCircleFilled : UserCircle 150 140 return ( 151 141 <Icon 152 - size={28} 153 - strokeWidth={1.5} 142 + width={iconWidth} 154 143 style={[styles.ctrlIcon, pal.text, styles.profileIcon]} 155 144 /> 156 145 )
+52 -109
src/view/shell/desktop/LeftNav.tsx
··· 23 23 import {useComposerControls} from '#/state/shell/composer' 24 24 import {usePalette} from 'lib/hooks/usePalette' 25 25 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 26 - import { 27 - BellIcon, 28 - BellIconSolid, 29 - CogIcon, 30 - CogIconSolid, 31 - ComposeIcon2, 32 - HashtagIcon, 33 - HomeIcon, 34 - HomeIconSolid, 35 - ListIcon, 36 - MagnifyingGlassIcon2, 37 - MagnifyingGlassIcon2Solid, 38 - UserIcon, 39 - UserIconSolid, 40 - } from 'lib/icons' 41 26 import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers' 42 27 import {makeProfileLink} from 'lib/routes/links' 43 28 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' ··· 48 33 import {PressableWithHover} from 'view/com/util/PressableWithHover' 49 34 import {Text} from 'view/com/util/text/Text' 50 35 import {UserAvatar} from 'view/com/util/UserAvatar' 51 - import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' 52 - import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope' 36 + import { 37 + Bell_Filled_Corner0_Rounded as BellFilled, 38 + Bell_Stroke2_Corner0_Rounded as Bell, 39 + } from '#/components/icons/Bell' 40 + import { 41 + BulletList_Filled_Corner0_Rounded as ListFilled, 42 + BulletList_Stroke2_Corner0_Rounded as List, 43 + } from '#/components/icons/BulletList' 44 + import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' 45 + import { 46 + Hashtag_Filled_Corner0_Rounded as HashtagFilled, 47 + Hashtag_Stroke2_Corner0_Rounded as Hashtag, 48 + } from '#/components/icons/Hashtag' 49 + import { 50 + HomeOpen_Filled_Corner0_Rounded as HomeFilled, 51 + HomeOpen_Stoke2_Corner0_Rounded as Home, 52 + } from '#/components/icons/HomeOpen' 53 + import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass' 54 + import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' 55 + import { 56 + Message_Stroke2_Corner0_Rounded as Message, 57 + Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, 58 + } from '#/components/icons/Message' 59 + import { 60 + SettingsGear2_Filled_Corner0_Rounded as SettingsFilled, 61 + SettingsGear2_Stroke2_Corner0_Rounded as Settings, 62 + } from '#/components/icons/SettingsGear2' 63 + import { 64 + UserCircle_Filled_Corner0_Rounded as UserCircleFilled, 65 + UserCircle_Stroke2_Corner0_Rounded as UserCircle, 66 + } from '#/components/icons/UserCircle' 53 67 import {router} from '../../../routes' 54 68 55 69 function ProfileCard() { ··· 256 270 accessibilityLabel={_(msg`New post`)} 257 271 accessibilityHint=""> 258 272 <View style={styles.newPostBtnIconWrapper}> 259 - <ComposeIcon2 260 - size={19} 261 - strokeWidth={2} 262 - style={styles.newPostBtnLabel} 263 - /> 273 + <EditBig width={19} style={styles.newPostBtnLabel} /> 264 274 </View> 265 275 <Text type="button" style={styles.newPostBtnLabel}> 266 276 <Trans context="action">New Post</Trans> ··· 278 288 const numUnreadNotifications = useUnreadNotifications() 279 289 const numUnreadMessages = useUnreadMessageCount() 280 290 const gate = useGate() 291 + const iconWidth = 28 281 292 282 293 if (!hasSession && !isDesktop) { 283 294 return null ··· 305 316 306 317 <NavItem 307 318 href="/" 308 - icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />} 309 - iconFilled={ 310 - <HomeIconSolid 311 - strokeWidth={4} 312 - size={isDesktop ? 24 : 28} 313 - style={pal.text} 314 - /> 315 - } 319 + icon={<Home width={iconWidth} style={pal.text} />} 320 + iconFilled={<HomeFilled width={iconWidth} style={pal.text} />} 316 321 label={_(msg`Home`)} 317 322 /> 318 323 <NavItem 319 324 href="/search" 320 - icon={ 321 - <MagnifyingGlassIcon2 322 - strokeWidth={2} 323 - size={isDesktop ? 24 : 26} 324 - style={pal.text} 325 - /> 326 - } 325 + icon={<MagnifyingGlass style={pal.text} width={iconWidth} />} 327 326 iconFilled={ 328 - <MagnifyingGlassIcon2Solid 329 - strokeWidth={2} 330 - size={isDesktop ? 24 : 26} 331 - style={pal.text} 332 - /> 327 + <MagnifyingGlassFilled style={pal.text} width={iconWidth} /> 333 328 } 334 329 label={_(msg`Search`)} 335 330 /> 336 331 <NavItem 337 332 href="/notifications" 338 333 count={numUnreadNotifications} 339 - icon={ 340 - <BellIcon 341 - strokeWidth={2} 342 - size={isDesktop ? 24 : 26} 343 - style={pal.text} 344 - /> 345 - } 346 - iconFilled={ 347 - <BellIconSolid 348 - strokeWidth={1.5} 349 - size={isDesktop ? 24 : 26} 350 - style={pal.text} 351 - /> 352 - } 334 + icon={<Bell width={iconWidth} style={pal.text} />} 335 + iconFilled={<BellFilled width={iconWidth} style={pal.text} />} 353 336 label={_(msg`Notifications`)} 354 337 /> 355 338 {gate('dms') && ( 356 339 <NavItem 357 340 href="/messages" 358 341 count={numUnreadMessages.numUnread} 359 - icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />} 360 - iconFilled={ 361 - <EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} /> 362 - } 342 + icon={<Message style={pal.text} width={iconWidth} />} 343 + iconFilled={<MessageFilled style={pal.text} width={iconWidth} />} 363 344 label={_(msg`Messages`)} 364 345 /> 365 346 )} 366 347 <NavItem 367 348 href="/feeds" 368 349 icon={ 369 - <HashtagIcon 370 - strokeWidth={2.25} 350 + <Hashtag 371 351 style={pal.text as FontAwesomeIconStyle} 372 - size={isDesktop ? 24 : 28} 352 + width={iconWidth} 373 353 /> 374 354 } 375 355 iconFilled={ 376 - <HashtagIcon 377 - strokeWidth={4} 356 + <HashtagFilled 378 357 style={pal.text as FontAwesomeIconStyle} 379 - size={isDesktop ? 24 : 28} 358 + width={iconWidth} 380 359 /> 381 360 } 382 361 label={_(msg`Feeds`)} 383 362 /> 384 363 <NavItem 385 364 href="/lists" 386 - icon={ 387 - <ListIcon 388 - style={pal.text} 389 - size={isDesktop ? 26 : 30} 390 - strokeWidth={2} 391 - /> 392 - } 393 - iconFilled={ 394 - <ListIcon 395 - style={pal.text} 396 - size={isDesktop ? 26 : 30} 397 - strokeWidth={3} 398 - /> 399 - } 365 + icon={<List style={pal.text} width={iconWidth} />} 366 + iconFilled={<ListFilled style={pal.text} width={iconWidth} />} 400 367 label={_(msg`Lists`)} 401 368 /> 402 369 <NavItem 403 370 href={currentAccount ? makeProfileLink(currentAccount) : '/'} 404 - icon={ 405 - <UserIcon 406 - strokeWidth={1.75} 407 - size={isDesktop ? 28 : 30} 408 - style={pal.text} 409 - /> 410 - } 411 - iconFilled={ 412 - <UserIconSolid 413 - strokeWidth={1.75} 414 - size={isDesktop ? 28 : 30} 415 - style={pal.text} 416 - /> 417 - } 371 + icon={<UserCircle width={iconWidth} style={pal.text} />} 372 + iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />} 418 373 label={_(msg`Profile`)} 419 374 /> 420 375 <NavItem 421 376 href="/settings" 422 - icon={ 423 - <CogIcon 424 - strokeWidth={1.75} 425 - size={isDesktop ? 28 : 32} 426 - style={pal.text} 427 - /> 428 - } 429 - iconFilled={ 430 - <CogIconSolid 431 - strokeWidth={1.5} 432 - size={isDesktop ? 28 : 32} 433 - style={pal.text} 434 - /> 435 - } 377 + icon={<Settings width={iconWidth} style={pal.text} />} 378 + iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />} 436 379 label={_(msg`Settings`)} 437 380 /> 438 381 ··· 494 437 alignItems: 'center', 495 438 justifyContent: 'center', 496 439 width: 28, 497 - height: 28, 440 + height: 24, 498 441 marginTop: 2, 499 442 zIndex: 1, 500 443 },