Refine repost icon

bskyembed/src/components/post.tsx

@@ -9,7 +9,7 @@ import {h} from 'preact'
 import replyIcon from '../../assets/bubble_filled_stroke2_corner2_rounded.svg'
 import likeIcon from '../../assets/heart2_filled_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
-import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg'
+import repostIcon from '../../assets/repost_stroke2_corner3_rounded.svg'
 import {CONTENT_LABELS} from '../labels'
 import {getRkey, niceDate, prettyNumber} from '../utils'
 import {Container} from './container'

src/components/icons/Pin.tsx

@@ -1,9 +1,17 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const Pin = createSinglePathSVG({
+  path: 'M12 15H19V12.5C16 10 16.5 6.5 16.5 3H7.5C7.5 6.5 8 10 5 12.5V15H12ZM12 15V21',
+})
+
 export const Pin_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M6.5 3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3.997a6.25 6.25 0 0 0 1.83 4.42l.377.376A1 1 0 0 1 20 12.5V15a1 1 0 0 1-1 1h-6v5a1 1 0 1 1-2 0v-5H5a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 .293-.707l.376-.377A6.25 6.25 0 0 0 6.5 6.996V3.001Zm2 1v2.997a8.25 8.25 0 0 1-2.416 5.834L6 12.914V14h12v-1.086l-.084-.083A8.25 8.25 0 0 1 15.5 6.997V4h-7Z',
+  path: 'M6.5 3C6.5 2.44772 6.94772 2 7.5 2H16.5C17.0523 2 17.5 2.44772 17.5 3C17.5 3.48483 17.4917 3.95217 17.4836 4.40529C17.461 5.68303 17.4403 6.84775 17.6134 7.97294C17.836 9.41979 18.3711 10.6742 19.6402 11.7318C19.8682 11.9218 20 12.2032 20 12.5V15C20 15.5523 19.5523 16 19 16H13V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V16H5C4.44772 16 4 15.5523 4 15V12.5C4 12.2032 4.13182 11.9218 4.35982 11.7318C5.62887 10.6742 6.16404 9.41979 6.38663 7.97294C6.55973 6.84775 6.53905 5.68303 6.51635 4.40529C6.5083 3.95217 6.5 3.48483 6.5 3ZM8.511 4C8.51234 4.07642 8.51374 4.15318 8.51514 4.23023C8.53922 5.5553 8.56488 6.96729 8.36337 8.27706C8.10602 9.94981 7.47224 11.573 6 12.9506V14H18V12.9506C16.5278 11.573 15.894 9.94981 15.6366 8.27706C15.4351 6.96729 15.4608 5.5553 15.4849 4.23023C15.4863 4.15318 15.4877 4.07642 15.489 4H8.511Z',
+})
+
+export const Pin_Stroke2_5_Corner0_Rounded = createSinglePathSVG({
+  path: 'M6.25 3C6.25 2.30964 6.80964 1.75 7.5 1.75H16.5C17.1904 1.75 17.75 2.30964 17.75 3C17.75 3.49672 17.7416 3.9711 17.7335 4.42796C17.711 5.69793 17.6909 6.8325 17.8605 7.93493C18.0762 9.33723 18.5889 10.5303 19.8002 11.5397C20.0852 11.7772 20.25 12.129 20.25 12.5V15C20.25 15.6904 19.6904 16.25 19 16.25H13.25V21C13.25 21.6904 12.6904 22.25 12 22.25C11.3096 22.25 10.75 21.6904 10.75 21V16.25H5C4.30964 16.25 3.75 15.6904 3.75 15V12.5C3.75 12.129 3.91478 11.7772 4.19977 11.5397C5.41108 10.5303 5.9238 9.33723 6.13954 7.93493C6.30914 6.8325 6.28903 5.69793 6.26651 4.42796C6.25841 3.9711 6.25 3.49672 6.25 3ZM8.76574 4.25C8.78975 5.56787 8.81346 6.99558 8.61046 8.31507C8.35131 9.99957 7.71563 11.6502 6.25 13.0581V13.75H17.75V13.0581C16.2844 11.6502 15.6487 9.99957 15.3895 8.31507C15.1865 6.99558 15.2102 5.56787 15.2343 4.25H8.76574Z',
 })
 
 export const Pin_Filled_Corner0_Rounded = createSinglePathSVG({
-  path: 'M7.5 2a1 1 0 0 0-1 1v3.997a6.25 6.25 0 0 1-1.83 4.42l-.377.376A1 1 0 0 0 4 12.5V15a1 1 0 0 0 1 1h6v5a1 1 0 1 0 2 0v-5h6a1 1 0 0 0 1-1v-2.5a1 1 0 0 0-.293-.707l-.376-.377a6.25 6.25 0 0 1-1.831-4.42V3.001a1 1 0 0 0-1-1h-9Z',
+  path: 'M7.5 2C6.94772 2 6.5 2.44772 6.5 3C6.5 3.48483 6.5083 3.95217 6.51635 4.40529C6.53905 5.68303 6.55973 6.84775 6.38663 7.97294C6.16404 9.41979 5.62887 10.6742 4.35982 11.7318C4.13182 11.9218 4 12.2032 4 12.5V15C4 15.5523 4.44772 16 5 16H11V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V16H19C19.5523 16 20 15.5523 20 15V12.5C20 12.2032 19.8682 11.9218 19.6402 11.7318C18.3711 10.6742 17.836 9.41979 17.6134 7.97294C17.4403 6.84776 17.461 5.68304 17.4836 4.40531C17.4917 3.9522 17.5 3.48482 17.5 3C17.5 2.44772 17.0523 2 16.5 2H7.5Z',
 })

src/components/icons/Repost.tsx

@@ -1,13 +1,13 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
-export const Repost_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z',
+export const Repost = createSinglePathSVG({
+  path: 'M4.5 11V9C4.5 7.34315 5.84315 6 7.5 6H20M20 6L16.5 2.5M20 6L16.5 9.5M19.5 13V15C19.5 16.6569 18.1569 18 16.5 18H4M4 18L7.5 14.5M4 18L7.5 21.5',
 })
 
-export const Repost_Stroke2_Corner2_Rounded = createSinglePathSVG({
-  path: 'M17.957 2.293a1 1 0 1 0-1.414 1.414L17.836 5H6a3 3 0 0 0-3 3v3a1 1 0 1 0 2 0V8a1 1 0 0 1 1-1h11.836l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.47-2.47a1.75 1.75 0 0 0 0-2.474l-2.47-2.47ZM20 12a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3H6.164l1.293 1.293a1 1 0 1 1-1.414 1.414l-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47a1 1 0 0 1 1.414 1.414L6.164 17H18a1 1 0 0 0 1-1v-3a1 1 0 0 1 1-1Z',
+export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M15.7929 1.79289C16.1834 1.40237 16.8166 1.40237 17.2071 1.79289L20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L17.2071 10.2071C16.8166 10.5976 16.1834 10.5976 15.7929 10.2071C15.4024 9.81658 15.4024 9.18342 15.7929 8.79289L17.5858 7H7.5C6.39543 7 5.5 7.89543 5.5 9V11C5.5 11.5523 5.05228 12 4.5 12C3.94772 12 3.5 11.5523 3.5 11V9C3.5 6.79086 5.29086 5 7.5 5H17.5858L15.7929 3.20711C15.4024 2.81658 15.4024 2.18342 15.7929 1.79289ZM19.5 12C20.0523 12 20.5 12.4477 20.5 13V15C20.5 17.2091 18.7091 19 16.5 19H6.41421L8.20711 20.7929C8.59763 21.1834 8.59763 21.8166 8.20711 22.2071C7.81658 22.5976 7.18342 22.5976 6.79289 22.2071L3.29289 18.7071C2.90237 18.3166 2.90237 17.6834 3.29289 17.2929L6.79289 13.7929C7.18342 13.4024 7.81658 13.4024 8.20711 13.7929C8.59763 14.1834 8.59763 14.8166 8.20711 15.2071L6.41421 17H16.5C17.6046 17 18.5 16.1046 18.5 15V13C18.5 12.4477 18.9477 12 19.5 12Z',
 })
 
-export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
-  path: 'M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z',
+export const Repost_Stroke2_5_Corner3_Rounded = createSinglePathSVG({
+  path: 'M15.6161 1.61612C16.1043 1.12796 16.8957 1.12796 17.3839 1.61612L20.8839 5.11612C21.372 5.60427 21.372 6.39573 20.8839 6.88388L17.3839 10.3839C16.8957 10.872 16.1043 10.872 15.6161 10.3839C15.128 9.89573 15.128 9.10427 15.6161 8.61612L16.9822 7.25H7.5C6.5335 7.25 5.75 8.0335 5.75 9V11C5.75 11.6904 5.19036 12.25 4.5 12.25C3.80964 12.25 3.25 11.6904 3.25 11V9C3.25 6.65279 5.15279 4.75 7.5 4.75H16.9822L15.6161 3.38388C15.128 2.89573 15.128 2.10427 15.6161 1.61612ZM19.5 11.75C20.1904 11.75 20.75 12.3096 20.75 13V15C20.75 17.3472 18.8472 19.25 16.5 19.25H7.01777L8.38388 20.6161C8.87204 21.1043 8.87204 21.8957 8.38388 22.3839C7.89573 22.872 7.10427 22.872 6.61612 22.3839L3.11612 18.8839C2.62796 18.3957 2.62796 17.6043 3.11612 17.1161L6.61612 13.6161C7.10427 13.128 7.89573 13.128 8.38388 13.6161C8.87204 14.1043 8.87204 14.8957 8.38388 15.3839L7.01777 16.75H16.5C17.4665 16.75 18.25 15.9665 18.25 15V13C18.25 12.3096 18.8096 11.75 19.5 11.75Z',
 })

src/screens/Settings/FollowingFeedPreferences.tsx

@@ -12,7 +12,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
 import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
 import {CloseQuote_Stroke2_Corner1_Rounded as QuoteIcon} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
+import {Repost_Stroke2_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost'
 import * as Layout from '#/components/Layout'
 import * as SettingsList from './components/SettingsList'
 

src/view/com/notifications/NotificationFeedItem.tsx

@@ -51,7 +51,7 @@ import {
 } from '#/components/icons/Chevron'
 import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2'
 import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
-import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
+import {Repost_Stroke2_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {StarterPack} from '#/components/icons/StarterPack'
 import {Link as NewLink} from '#/components/Link'
 import * as MediaPreview from '#/components/MediaPreview'

src/view/com/posts/PostFeedItem.tsx

@@ -38,8 +38,8 @@ import {PostMeta} from '#/view/com/util/PostMeta'
 import {Text} from '#/view/com/util/text/Text'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
-import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
-import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
+import {Pin_Stroke2_5_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {Repost_Stroke2_5_Corner3_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'

src/view/com/util/LoadingPlaceholder.tsx

@@ -15,7 +15,7 @@ import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
   Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
 } from '#/components/icons/Heart2'
-import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
+import {Repost_Stroke2_Corner3_Rounded as Repost} from '#/components/icons/Repost'
 
 export function LoadingPlaceholder({
   width,

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -10,7 +10,10 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
+import {
+  Repost_Stroke2_5_Corner3_Rounded as RepostBold,
+  Repost_Stroke2_Corner3_Rounded as Repost,
+} from '#/components/icons/Repost'
 import {Text} from '#/components/Typography'
 import {formatCount} from '../numeric/format'
 
@@ -81,7 +84,11 @@ let RepostButton = ({
         variant="ghost"
         color="secondary"
         hitSlop={POST_CTRL_HITSLOP}>
-        <Repost style={color} width={big ? 22 : 18} />
+        {isReposted ? (
+          <RepostBold style={color} width={big ? 22 : 18} />
+        ) : (
+          <Repost style={color} width={big ? 22 : 18} />
+        )}
         {typeof repostCount !== 'undefined' && repostCount > 0 ? (
           <Text
             testID="repostCount"

src/view/com/util/post-ctrls/RepostButton.web.tsx

@@ -8,7 +8,10 @@ import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
-import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
+import {
+  Repost_Stroke2_5_Corner3_Rounded as RepostBold,
+  Repost_Stroke2_Corner3_Rounded as Repost,
+} from '#/components/icons/Repost'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
 import {EventStopper} from '../EventStopper'
@@ -129,7 +132,11 @@ const RepostInner = ({
   const {i18n} = useLingui()
   return (
     <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
-      <Repost style={color} width={big ? 22 : 18} />
+      {isReposted ? (
+        <RepostBold style={color} width={big ? 22 : 18} />
+      ) : (
+        <Repost style={color} width={big ? 22 : 18} />
+      )}
       {typeof repostCount !== 'undefined' && repostCount > 0 ? (
         <Text
           testID="repostCount"