style(message): swap the action-menu folds glyphs for custom stroke icons matching the rail
This commit is contained in:
parent
d92fd7ea60
commit
ad730b1538
1 changed files with 86 additions and 11 deletions
|
|
@ -178,6 +178,81 @@ const RailIcons = {
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
|
Receipts: () => (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.7" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
Source: () => (
|
||||||
|
<path
|
||||||
|
d="M16 18l6-6-6-6M8 6l-6 6 6 6"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
Link: () => (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 1 0-7.07-7.07l-1.72 1.71"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 1 0 7.07 7.07l1.71-1.71"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
Pin: () => (
|
||||||
|
<>
|
||||||
|
<path d="M12 17v4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
|
||||||
|
<path
|
||||||
|
d="M8 4h8l-1.5 7L17 14H7l2.5-3L8 4z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
Delete: () => (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path d="M10 11v6M14 11v6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
Report: () => (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.7"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path d="M4 22V4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MessageAllReactionItem = as<
|
export const MessageAllReactionItem = as<
|
||||||
|
|
@ -227,7 +302,7 @@ export const MessageAllReactionItem = as<
|
||||||
</Overlay>
|
</Overlay>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Smile} />}
|
after={<Icon size="100" src={RailIcons.Smile} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -278,7 +353,7 @@ export const MessageReadReceiptItem = as<
|
||||||
</Overlay>
|
</Overlay>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.CheckTwice} />}
|
after={<Icon size="100" src={RailIcons.Receipts} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -363,7 +438,7 @@ export const MessageSourceCodeItem = as<
|
||||||
</Overlay>
|
</Overlay>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.BlockCode} />}
|
after={<Icon size="100" src={RailIcons.Source} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -398,7 +473,7 @@ export const MessageCopyLinkItem = as<
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Link} />}
|
after={<Icon size="100" src={RailIcons.Link} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={handleCopy}
|
onClick={handleCopy}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -439,7 +514,7 @@ export const MessagePinItem = as<
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Pin} />}
|
after={<Icon size="100" src={RailIcons.Pin} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={handlePin}
|
onClick={handlePin}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -567,7 +642,7 @@ export const MessageDeleteItem = as<
|
||||||
variant="Critical"
|
variant="Critical"
|
||||||
fill="None"
|
fill="None"
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Delete} />}
|
after={<Icon size="100" src={RailIcons.Delete} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
aria-pressed={open}
|
aria-pressed={open}
|
||||||
|
|
@ -701,7 +776,7 @@ export const MessageReportItem = as<
|
||||||
variant="Critical"
|
variant="Critical"
|
||||||
fill="None"
|
fill="None"
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Warning} />}
|
after={<Icon size="100" src={RailIcons.Report} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
aria-pressed={open}
|
aria-pressed={open}
|
||||||
|
|
@ -1083,7 +1158,7 @@ const MessageInner = as<'div', MessageProps>(
|
||||||
{canSendReaction && (
|
{canSendReaction && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.SmilePlus} />}
|
after={<Icon size="100" src={RailIcons.Smile} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
onClick={handleAddReactions}
|
onClick={handleAddReactions}
|
||||||
>
|
>
|
||||||
|
|
@ -1107,7 +1182,7 @@ const MessageInner = as<'div', MessageProps>(
|
||||||
{!hideMainReplyAffordance && (
|
{!hideMainReplyAffordance && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.ReplyArrow} />}
|
after={<Icon size="100" src={RailIcons.Reply} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
data-event-id={mEvent.getId()}
|
data-event-id={mEvent.getId()}
|
||||||
onClick={(evt: Parameters<typeof onReplyClick>[0]) => {
|
onClick={(evt: Parameters<typeof onReplyClick>[0]) => {
|
||||||
|
|
@ -1128,7 +1203,7 @@ const MessageInner = as<'div', MessageProps>(
|
||||||
{!isThreadReply && !hideThreadReplyAffordance && (
|
{!isThreadReply && !hideThreadReplyAffordance && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon src={Icons.ThreadPlus} size="100" />}
|
after={<Icon src={RailIcons.Thread} size="100" />}
|
||||||
radii="300"
|
radii="300"
|
||||||
data-event-id={mEvent.getId()}
|
data-event-id={mEvent.getId()}
|
||||||
onClick={(evt: Parameters<typeof onReplyClick>[0]) => {
|
onClick={(evt: Parameters<typeof onReplyClick>[0]) => {
|
||||||
|
|
@ -1149,7 +1224,7 @@ const MessageInner = as<'div', MessageProps>(
|
||||||
{canEditEvent(mx, mEvent) && onEditId && (
|
{canEditEvent(mx, mEvent) && onEditId && (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
size="300"
|
size="300"
|
||||||
after={<Icon size="100" src={Icons.Pencil} />}
|
after={<Icon size="100" src={RailIcons.Edit} />}
|
||||||
radii="300"
|
radii="300"
|
||||||
data-event-id={mEvent.getId()}
|
data-event-id={mEvent.getId()}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue