From ffd240055f4166c4e852d2e6a67decc882e9dbfc Mon Sep 17 00:00:00 2001 From: Minseo Lee Date: Fri, 20 Dec 2024 23:11:55 +0900 Subject: [PATCH 1/3] refine repost icon --- .../assets/repost_stroke2_corner2_rounded.svg | 1 - .../assets/repost_stroke2_corner3_rounded.svg | 1 + bskyembed/src/components/post.tsx | 2 +- src/components/icons/Repost.tsx | 12 ++++++------ .../Settings/FollowingFeedPreferences.tsx | 2 +- .../com/notifications/NotificationFeedItem.tsx | 2 +- src/view/com/posts/PostFeedItem.tsx | 2 +- src/view/com/util/LoadingPlaceholder.tsx | 2 +- src/view/com/util/post-ctrls/RepostButton.tsx | 17 ++++++++++++++--- .../com/util/post-ctrls/RepostButton.web.tsx | 11 +++++++++-- 10 files changed, 35 insertions(+), 17 deletions(-) delete mode 100644 bskyembed/assets/repost_stroke2_corner2_rounded.svg create mode 100644 bskyembed/assets/repost_stroke2_corner3_rounded.svg diff --git a/bskyembed/assets/repost_stroke2_corner2_rounded.svg b/bskyembed/assets/repost_stroke2_corner2_rounded.svg deleted file mode 100644 index a31e504a12..0000000000 --- a/bskyembed/assets/repost_stroke2_corner2_rounded.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/bskyembed/assets/repost_stroke2_corner3_rounded.svg b/bskyembed/assets/repost_stroke2_corner3_rounded.svg new file mode 100644 index 0000000000..38cb867808 --- /dev/null +++ b/bskyembed/assets/repost_stroke2_corner3_rounded.svg @@ -0,0 +1 @@ + diff --git a/bskyembed/src/components/post.tsx b/bskyembed/src/components/post.tsx index 26945eb69d..9bbc72e907 100644 --- a/bskyembed/src/components/post.tsx +++ b/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' diff --git a/src/components/icons/Repost.tsx b/src/components/icons/Repost.tsx index 01214bca71..10686f609b 100644 --- a/src/components/icons/Repost.tsx +++ b/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', }) diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index ea9455ab1a..95141cef08 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/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' diff --git a/src/view/com/notifications/NotificationFeedItem.tsx b/src/view/com/notifications/NotificationFeedItem.tsx index 1267ce0894..c57ae7a309 100644 --- a/src/view/com/notifications/NotificationFeedItem.tsx +++ b/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' diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx index 4b18c470a6..8233b117bc 100644 --- a/src/view/com/posts/PostFeedItem.tsx +++ b/src/view/com/posts/PostFeedItem.tsx @@ -39,7 +39,7 @@ 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 {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' diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 25ce460d4b..8b81f8a1f8 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/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, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index ca1647a991..f446eb1f49 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/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}> - + {isReposted ? ( + + ) : ( + + )} {typeof repostCount !== 'undefined' && repostCount > 0 ? ( - + {isReposted ? ( + + ) : ( + + )} {isReposted ? ( Remove repost diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index 54119b532d..93b2d19328 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/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 ( - + {isReposted ? ( + + ) : ( + + )} {typeof repostCount !== 'undefined' && repostCount > 0 ? ( Date: Sat, 21 Dec 2024 15:01:31 +0900 Subject: [PATCH 2/3] pin icon --- src/components/icons/Pin.tsx | 12 ++++++++++-- src/view/com/posts/PostFeedItem.tsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/icons/Pin.tsx b/src/components/icons/Pin.tsx index d1c37f39a3..a451827202 100644 --- a/src/components/icons/Pin.tsx +++ b/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', }) diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx index 8233b117bc..b813279a85 100644 --- a/src/view/com/posts/PostFeedItem.tsx +++ b/src/view/com/posts/PostFeedItem.tsx @@ -38,7 +38,7 @@ 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 {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' From af936e9cd7a3aa6fe1ffc402862354b0f9e2a508 Mon Sep 17 00:00:00 2001 From: Minseo Lee Date: Sat, 21 Dec 2024 16:46:23 +0900 Subject: [PATCH 3/3] Update RepostButton.tsx --- src/view/com/util/post-ctrls/RepostButton.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index f446eb1f49..14906e3738 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -166,11 +166,7 @@ let RepostButtonDialogInner = ({ size="large" variant="ghost" color="primary"> - {isReposted ? ( - - ) : ( - - )} + {isReposted ? ( Remove repost