From 0f10253d999064e2814a080f66abf041038ea65c Mon Sep 17 00:00:00 2001 From: Bonn Date: Tue, 20 Feb 2024 12:48:01 +0700 Subject: [PATCH 01/17] fix: chat avatar (#135) --- src/chat/components/ChatHeader/index.tsx | 17 ++--------------- src/chat/components/UserAvatar/index.tsx | 2 ++ src/chat/hooks/useChatInfo.ts | 1 + 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/chat/components/ChatHeader/index.tsx b/src/chat/components/ChatHeader/index.tsx index d51fa4a1f..c7217f75f 100644 --- a/src/chat/components/ChatHeader/index.tsx +++ b/src/chat/components/ChatHeader/index.tsx @@ -16,6 +16,7 @@ import { MemberCount, } from './styles'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; +import useChannel from '~/chat/hooks/useChannel'; type ChatHeaderProps = { channelId: string; @@ -24,21 +25,7 @@ type ChatHeaderProps = { }; const ChatHeader = ({ channelId, onChatDetailsClick, shouldShowChatDetails }: ChatHeaderProps) => { - const [channel, setChannel] = useState(null); - const unsubscribeChannel = useRef<() => void>(() => {}); - useEffect(() => { - async function run() { - const unsubscribe = await ChannelRepository.getChannel(channelId, (response) => { - setChannel(response.data); - }); - unsubscribeChannel.current = unsubscribe; - } - run(); - - return () => { - unsubscribeChannel.current(); - }; - }, [channelId]); + const channel = useChannel(channelId); const { chatName, chatAvatar } = useChatInfo({ channel }); return ( diff --git a/src/chat/components/UserAvatar/index.tsx b/src/chat/components/UserAvatar/index.tsx index 456f7bb0e..becd694f4 100644 --- a/src/chat/components/UserAvatar/index.tsx +++ b/src/chat/components/UserAvatar/index.tsx @@ -24,6 +24,8 @@ const UserAvatar = ({ const [backgroundImage, setBackgroundImage] = useState(null); useEffect(() => { + setAvatar(null); + setBackgroundImage(null); const getAvatarProps = async () => { if (avatarUrl) { setAvatar(avatarUrl); diff --git a/src/chat/hooks/useChatInfo.ts b/src/chat/hooks/useChatInfo.ts index 227d35b21..270444724 100644 --- a/src/chat/hooks/useChatInfo.ts +++ b/src/chat/hooks/useChatInfo.ts @@ -89,6 +89,7 @@ function useChatInfo({ channel }: { channel: Amity.Channel | null }) { useEffect(() => { async function run() { + setChatAvatar(null); const url = await getChatAvatar( channel, { avatarUrl: otherUser?.avatarCustomUrl || otherUserAvatarUrl }, From 026206aa97202976b1b7aae413a7201866f0ce89 Mon Sep 17 00:00:00 2001 From: Bonn Date: Thu, 22 Feb 2024 00:16:41 +0700 Subject: [PATCH 02/17] fix: ASC-20427 - fix session renewal (#145) * fix: typing * chore: update ts-sdk version * fix: renew with another function for secure mode --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- src/core/providers/UiKitProvider/index.tsx | 6 ++++++ src/social/components/CommunitySideMenu/index.tsx | 2 +- src/social/providers/NavigationProvider.tsx | 1 + 5 files changed, 13 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1ec8b272f..0fa6b60fc 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "react-dom": ">=17.0.2" }, "devDependencies": { - "@amityco/ts-sdk": "6.17.3-7fc20e4.0", + "@amityco/ts-sdk": "6.17.3", "@fortawesome/pro-light-svg-icons": "^5.15.4", "@fortawesome/pro-regular-svg-icons": "^5.15.4", "@fortawesome/pro-solid-svg-icons": "^5.15.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55e1c21b6..5b321faa6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,8 +98,8 @@ dependencies: devDependencies: '@amityco/ts-sdk': - specifier: 6.17.3-7fc20e4.0 - version: 6.17.3-7fc20e4.0 + specifier: 6.17.3 + version: 6.17.3 '@fortawesome/pro-light-svg-icons': specifier: ^5.15.4 version: 5.15.4 @@ -264,8 +264,8 @@ packages: engines: {node: '>=0.10.0'} dev: true - /@amityco/ts-sdk@6.17.3-7fc20e4.0: - resolution: {integrity: sha512-zrI6rxf+6NnWdX/hzeeB0/o7Zh7Of7JFcTpL+O4TGqiESMFNdzmzK7K8oiMQeD0cAW9mkjjS5r6M92yoLUYOWg==} + /@amityco/ts-sdk@6.17.3: + resolution: {integrity: sha512-htACVQHYyGNEsybNeXXMxq07PVtIHFpP36b9OulWyaAJMDzDtHyC8g/kXeDkxqNBWZI0bYZHWt1lAOSkpp3r/A==} engines: {node: '>=12', npm: '>=6'} dependencies: agentkeepalive: 4.5.0 diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index 28da9ad2c..54e72f126 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -99,6 +99,12 @@ const UiKitProvider = ({ { userId, displayName, authToken }, { sessionWillRenewAccessToken(renewal) { + // secure mode + if (authToken) { + renewal.renewWithAuthToken(authToken); + return; + } + renewal.renew(); }, }, diff --git a/src/social/components/CommunitySideMenu/index.tsx b/src/social/components/CommunitySideMenu/index.tsx index 7f366caf8..09fa7f0fc 100644 --- a/src/social/components/CommunitySideMenu/index.tsx +++ b/src/social/components/CommunitySideMenu/index.tsx @@ -10,7 +10,7 @@ const SocialSearch = styled(UiKitSocialSearch)` padding: 0.5rem; `; -interface CommunitySideMenuProps { +export interface CommunitySideMenuProps { className?: string; activeCommunity?: string; } diff --git a/src/social/providers/NavigationProvider.tsx b/src/social/providers/NavigationProvider.tsx index 7de12a786..718d51476 100644 --- a/src/social/providers/NavigationProvider.tsx +++ b/src/social/providers/NavigationProvider.tsx @@ -32,6 +32,7 @@ type Page = type: PageTypes.ViewStory; storyId: string; targetId?: string; + communityId?: string; }; type ContextValue = { From f7b35bcb75fab8457aa5fd41ed31c6ea8b03487f Mon Sep 17 00:00:00 2001 From: Bonn Date: Fri, 23 Feb 2024 11:30:14 +0700 Subject: [PATCH 03/17] feat: ASC-19739 - remove font awesome pro (#129) * feat: ASC-19739 - remove font awesome pro 1-17 (#127) * feat: update icons * feat: remove font-size and change color to fill * fix: ASC-00000 - remove fontawesome 35 51 (#118) * fix: change fontawesome to svg 35-51 * added `` * feat: ASC-00000 - remove fontawesome pro icon (#116) * fix: shield icon * fix: soloarsystem icon * fix: sortdown icon * fix: trash and user plus icon * fix: user regular icon * fix: verified icon * fix: icon * fix: icon props * feat(icon): ASC-19739 - remove font-awesome 18-34 (#128) * feat(icon): remove font-awesome * feat(icon): remove font size * fix: fill * fix: revert some code * fix: revert some code * fix: revert some code * fix: revert some code * fix: revert some code * fix: ASC-00000 - change fontawesome to svg 52-68 (#123) * fix: change fontawesome to svg 52-68 * feat: add attribute * fix: remove font-size from style * feat: fix icon width and height * fix: width and height * feat(icon): update chat header (#142) --------- Co-authored-by: Naing <155952277+NaingAmity@users.noreply.github.com> Co-authored-by: Chaiwat Trisuwan Co-authored-by: Kiattirat Sujjapongse Co-authored-by: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Co-authored-by: ptchaya_p --- .../ChatDetailsControls/styles.tsx | 19 +++++---- .../ChatDetails/ChatDetailsMembers/styles.tsx | 5 +-- src/chat/components/ChatDetails/styles.tsx | 5 +-- src/chat/components/ChatHeader/styles.tsx | 15 +++---- src/chat/components/Message/styles.tsx | 3 +- .../components/MessageComposeBar/styles.tsx | 27 ++++++++---- src/chat/components/RecentChat/styles.tsx | 3 +- src/core/components/Avatar/AvatarUpload.tsx | 7 +++- src/core/components/Dropdown/index.tsx | 2 +- src/core/components/Files/styles.tsx | 8 ++-- src/core/components/HorizontalList/index.tsx | 4 +- src/core/components/InputCounter/styles.tsx | 8 +--- src/core/components/Layout/styles.tsx | 7 +++- src/core/components/Modal/styles.tsx | 5 +-- src/core/components/Notification/styles.tsx | 12 +++--- src/core/components/OptionMenu/styles.tsx | 3 +- src/core/components/PageHeader/index.tsx | 2 +- src/core/components/Select/index.tsx | 2 +- src/core/components/Uploaders/File/styles.tsx | 7 +++- .../components/Uploaders/Image/styles.tsx | 3 +- .../components/Uploaders/Video/styles.tsx | 6 ++- src/core/components/UserChip/styles.tsx | 5 +-- src/icons/ArrowLeft.tsx | 27 ++++++++---- src/icons/ArrowRight.tsx | 36 ++++++++-------- src/icons/Balloon.tsx | 4 +- src/icons/Ban.tsx | 26 +++++++++--- src/icons/Camera.tsx | 27 ++++++++---- src/icons/Category.tsx | 4 +- src/icons/Check.tsx | 25 +++++++---- src/icons/CheckCircle.tsx | 29 +++++++++---- src/icons/ChevronDown.tsx | 25 +++++++---- src/icons/ChevronLeft.tsx | 28 +++++++++---- src/icons/ChevronRight.tsx | 28 +++++++++---- src/icons/CircleRemove.tsx | 4 +- src/icons/Close.tsx | 31 +++++++++----- src/icons/Comment.tsx | 36 ++++++++-------- src/icons/Community.tsx | 4 +- src/icons/CommunityAlt.tsx | 4 +- src/icons/CommunityCoverPicture.tsx | 4 +- src/icons/CreateChat.tsx | 28 +++++++++---- src/icons/Dots.tsx | 4 +- src/icons/EllipsisH.tsx | 35 ++++++++-------- src/icons/EllipsisV.tsx | 25 +++++++---- src/icons/EmptyFeed.tsx | 6 +-- src/icons/EmptyImageGallery.tsx | 7 +++- src/icons/EmptyLivestreamGallery.tsx | 4 +- src/icons/EmptyVideoGallery.tsx | 7 +++- src/icons/ExclamationCircle.tsx | 29 +++++++++---- src/icons/FileAttachment.tsx | 34 +++++++++++---- src/icons/Globe.tsx | 38 +++++++++++++---- src/icons/ImageAttachment.tsx | 28 +++++++++---- src/icons/Lock.tsx | 27 ++++++++---- src/icons/Message.tsx | 29 +++++++++---- src/icons/MinusCircle.tsx | 25 +++++++---- src/icons/Newspaper.tsx | 33 +++++++++++---- src/icons/NewspaperLight.tsx | 33 +++++++++++---- src/icons/Pencil.tsx | 30 ++++++++++---- src/icons/PlayCircle.tsx | 28 +++++++++---- src/icons/Plus.tsx | 25 +++++++---- src/icons/Remove.tsx | 30 ++++++++++---- src/icons/Reply.tsx | 28 +++++++++---- src/icons/Save.tsx | 28 +++++++++---- src/icons/Search.tsx | 26 ++++++++---- src/icons/SendMessage.tsx | 26 ++++++++---- src/icons/Shield.tsx | 26 ++++++++---- src/icons/SolarSystem.tsx | 21 ++++++---- src/icons/SortDown.tsx | 24 +++++++---- src/icons/Trash.tsx | 38 +++++++++-------- src/icons/UserPlus.tsx | 30 ++++++++++---- src/icons/UserRegular.tsx | 28 +++++++++---- src/icons/Verified.tsx | 41 +++++++++++-------- src/icons/files/Csv.tsx | 4 +- src/icons/files/Default.tsx | 4 +- src/icons/files/Doc.tsx | 4 +- src/icons/files/Exe.tsx | 4 +- src/icons/files/File.tsx | 4 +- src/icons/ui.stories.jsx | 1 + src/social/components/Comment/styles.tsx | 10 ++--- .../CommunityForm/AvatarUploader.tsx | 8 ++-- .../components/CommunityForm/styles.tsx | 14 ++----- .../components/CommunityInfo/styles.tsx | 6 +-- src/social/components/EmptyFeed/index.tsx | 6 +-- .../components/EngagementBar/styles.tsx | 3 +- src/social/components/Feed/styles.tsx | 5 +-- src/social/components/ImageGallery/styles.tsx | 9 ++-- src/social/components/Images/styles.tsx | 13 +++--- src/social/components/LoadMore/styles.jsx | 3 +- .../components/LoadMoreWrapper/styles.tsx | 3 +- src/social/components/PrivateFeed/styles.tsx | 5 +-- .../components/ProfileSettings/styles.tsx | 3 +- .../components/SideSectionCommunity/index.tsx | 8 +--- src/social/components/SocialSearch/styles.tsx | 5 +-- src/social/components/UserInfo/styles.tsx | 6 +-- .../category/CategoryChip/UICategoryChip.tsx | 3 +- .../category/CategoryChip/styles.tsx | 5 +-- .../components/community/Name/styles.tsx | 20 +++------ .../components/post/Creator/Uploaders.tsx | 4 +- .../Creator/components/PostTargetSelector.tsx | 3 +- src/social/pages/CommunityEdit/styles.tsx | 3 +- 99 files changed, 962 insertions(+), 525 deletions(-) diff --git a/src/chat/components/ChatDetails/ChatDetailsControls/styles.tsx b/src/chat/components/ChatDetails/ChatDetailsControls/styles.tsx index d845faac4..a44b63ec5 100644 --- a/src/chat/components/ChatDetails/ChatDetailsControls/styles.tsx +++ b/src/chat/components/ChatDetails/ChatDetailsControls/styles.tsx @@ -39,25 +39,28 @@ export const ControlItemState = styled.span` color: ${({ theme }) => theme.palette.neutral.shade3}; `; -export const ControlItemArrowRight = styled(ChevronRight)` +export const ControlItemArrowRight = styled(ChevronRight).attrs({ width: 16, height: 12 })` width: 16px !important; padding-left: 8px; - font-size: 12px; - color: ${({ theme }) => theme.palette.neutral.shade3}; + fill: ${({ theme }) => theme.palette.neutral.shade3}; `; const controlIconStyle = css` - width: 24px !important; padding-right: 8px; - font-size: 20px; text-align: center; - color: ${({ theme }) => theme.palette.neutral.main}; + fill: ${({ theme }) => theme.palette.neutral.main}; `; -export const MembersIcon = styled(UserRegular)<{ icon?: ReactNode }>` +export const MembersIcon = styled(UserRegular).attrs<{ icon?: ReactNode }>({ + width: 24, + height: 24, +})` ${controlIconStyle} `; -export const GroupSettingIcon = styled(Pencil)` +export const GroupSettingIcon = styled(Pencil).attrs<{ icon?: ReactNode }>({ + width: 24, + height: 20, +})` ${controlIconStyle} `; diff --git a/src/chat/components/ChatDetails/ChatDetailsMembers/styles.tsx b/src/chat/components/ChatDetails/ChatDetailsMembers/styles.tsx index a7a1d8dd7..1bbed5b46 100644 --- a/src/chat/components/ChatDetails/ChatDetailsMembers/styles.tsx +++ b/src/chat/components/ChatDetails/ChatDetailsMembers/styles.tsx @@ -25,10 +25,7 @@ export const MembersReturn = styled.div` } `; -export const MembersArrowLeft = styled(ChevronLeft)` - width: 18px !important; - font-size: 14px; -`; +export const MembersArrowLeft = styled(ChevronLeft).attrs({ width: 18, height: 14 })``; export const MembersReturnTitle = styled.span` padding-left: 8px; diff --git a/src/chat/components/ChatDetails/styles.tsx b/src/chat/components/ChatDetails/styles.tsx index 76992923e..97d9c9fb6 100644 --- a/src/chat/components/ChatDetails/styles.tsx +++ b/src/chat/components/ChatDetails/styles.tsx @@ -23,9 +23,8 @@ export const ChatDetailsHeader = styled.div` color: ${({ theme }) => theme.palette.neutral.shade1}; `; -export const HeaderCloseIcon = styled(Close)<{ icon?: ReactNode }>` - font-size: 20px; - color: ${({ theme }) => theme.palette.neutral.main}; +export const HeaderCloseIcon = styled(Close).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })` + fill: ${({ theme }) => theme.palette.neutral.main}; cursor: pointer; `; diff --git a/src/chat/components/ChatHeader/styles.tsx b/src/chat/components/ChatHeader/styles.tsx index d7508b577..56d4db455 100644 --- a/src/chat/components/ChatHeader/styles.tsx +++ b/src/chat/components/ChatHeader/styles.tsx @@ -1,13 +1,14 @@ import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faBars } from '@fortawesome/free-solid-svg-icons'; import { ReactNode } from 'react'; +import { BarsIcon } from "~/icons"; -export const DetailsIcon = styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faBars })` - font-size: 16px; - cursor: pointer; - color: ${({ theme }) => theme.palette.neutral.main}; - align-self: center; +export const DetailsIcon = styled(BarsIcon).attrs<{ icon?: ReactNode }>({ + width: 24, + height: 24, +})` + cursor: pointer; + fill: ${({ theme }) => theme.palette.neutral.main}; + align-self: center; `; export const ChatHeaderContainer = styled.div` diff --git a/src/chat/components/Message/styles.tsx b/src/chat/components/Message/styles.tsx index be54152e4..eabbcfcd6 100644 --- a/src/chat/components/Message/styles.tsx +++ b/src/chat/components/Message/styles.tsx @@ -36,9 +36,8 @@ export const CloseIcon = styled(Close)<{ icon?: ReactNode }>` cursor: pointer; `; -export const MessageOptionsIcon = styled(EllipsisV)<{ icon?: ReactNode }>` +export const MessageOptionsIcon = styled(EllipsisV).attrs<{ icon?: ReactNode }>({ width: 11, height: 11 })` opacity: 0.5; - font-size: 11px; margin: 0 5px; cursor: pointer; `; diff --git a/src/chat/components/MessageComposeBar/styles.tsx b/src/chat/components/MessageComposeBar/styles.tsx index 664c707ae..07e3b1be6 100644 --- a/src/chat/components/MessageComposeBar/styles.tsx +++ b/src/chat/components/MessageComposeBar/styles.tsx @@ -2,26 +2,35 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; import { FileAttachment, ImageAttachment, SendMessage } from '~/icons'; -export const SendMessageIcon = styled(SendMessage)<{ icon?: ReactNode }>` - font-size: 28px; +export const SendMessageIcon = styled(SendMessage).attrs<{ icon?: ReactNode }>({ + width: 28, + height: 28, +})` cursor: pointer; margin-left: 12px; margin-right: 8px; - color: #0f86fe; + fill: #0f86fe; `; -export const ImageMessageIcon = styled(ImageAttachment)` - font-size: 18px; +export const ImageMessageIcon = styled(ImageAttachment).attrs<{ icon?: ReactNode }>({ + width: 18, + height: 18, +})` cursor: pointer; margin-right: 20px; - color: ${({ theme }) => theme.palette.neutral.main}; + fill: ${({ theme }) => theme.palette.neutral.main}; `; -export const FileMessageIcon = styled(FileAttachment)` - font-size: 18px; +export const FileMessageIcon = styled(FileAttachment).attrs<{ + disabled?: boolean; + icon?: ReactNode; +}>({ + width: 18, + height: 18, +})` margin-right: 12px; cursor: pointer; - color: ${({ theme }) => theme.palette.neutral.main}; + fill: ${({ theme }) => theme.palette.neutral.main}; `; export const MessageComposeBarContainer = styled.div` diff --git a/src/chat/components/RecentChat/styles.tsx b/src/chat/components/RecentChat/styles.tsx index 33fcfea81..6ed989388 100644 --- a/src/chat/components/RecentChat/styles.tsx +++ b/src/chat/components/RecentChat/styles.tsx @@ -2,9 +2,8 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; import { CreateChat } from '~/icons'; -export const CreateNewChatIcon = styled(CreateChat)<{ icon?: ReactNode }>` +export const CreateNewChatIcon = styled(CreateChat).attrs<{ icon?: ReactNode }>({ width: 24, height: 18 })` width: 24px !important; - font-size: 18px; cursor: pointer; `; diff --git a/src/core/components/Avatar/AvatarUpload.tsx b/src/core/components/Avatar/AvatarUpload.tsx index 3b25ad578..b7169f2c0 100644 --- a/src/core/components/Avatar/AvatarUpload.tsx +++ b/src/core/components/Avatar/AvatarUpload.tsx @@ -20,14 +20,17 @@ interface AvatarUploadProps { value: string; } -const StyledCameraIcon = styled(CameraIcon)<{ icon?: ReactNode }>` +const StyledCameraIcon = styled(CameraIcon).attrs({ + width: 20, + height: 20, +})` font-size: 20px; z-index: 3; position: absolute; left: 22px; top: 20px; cursor: pointer; - color: #fff; + fill: #fff; `; export const AvatarUpload = ({ disabled, setAvatarFileId, value }: AvatarUploadProps) => { diff --git a/src/core/components/Dropdown/index.tsx b/src/core/components/Dropdown/index.tsx index 373efb912..8cf1ce5d2 100644 --- a/src/core/components/Dropdown/index.tsx +++ b/src/core/components/Dropdown/index.tsx @@ -13,7 +13,7 @@ const SCROLLABLE_HEIGHT = 200; const triggerRenderer: DropdownProps['renderTrigger'] = (props) => { return ( ); }; diff --git a/src/core/components/Files/styles.tsx b/src/core/components/Files/styles.tsx index 233ae5407..531782468 100644 --- a/src/core/components/Files/styles.tsx +++ b/src/core/components/Files/styles.tsx @@ -70,14 +70,16 @@ export const FileInput = styled.input.attrs({ type: 'file' })` export const Label = styled.label<{ disabled?: boolean }>``; -export const FileIcon = styled(FileAttachment)<{ disabled?: boolean; icon?: ReactNode }>` - font-size: 18px; +export const FileIcon = styled(FileAttachment).attrs<{ disabled?: boolean; icon?: ReactNode }>({ + width: 18, + height: 18, +})` cursor: pointer; ${({ disabled, theme }) => disabled && ` - color: ${theme.palette.base.shade3}; + fill: ${theme.palette.base.shade3}; cursor: default; `} `; diff --git a/src/core/components/HorizontalList/index.tsx b/src/core/components/HorizontalList/index.tsx index 792950266..6745b777d 100644 --- a/src/core/components/HorizontalList/index.tsx +++ b/src/core/components/HorizontalList/index.tsx @@ -135,10 +135,10 @@ const HorizontalList = ({ {hasMultiPage && ( setPage(page - 1)}> - + setPage(page + 1)}> - + )} diff --git a/src/core/components/InputCounter/styles.tsx b/src/core/components/InputCounter/styles.tsx index 07ad83810..2b3579a07 100644 --- a/src/core/components/InputCounter/styles.tsx +++ b/src/core/components/InputCounter/styles.tsx @@ -31,9 +31,5 @@ export const CircleButton = styled.button` } `; -export const MinusIcon = styled(Minus)` - font-size: 24px; -`; -export const PlusIcon = styled(Plus)` - font-size: 24px; -`; +export const MinusIcon = styled(Minus).attrs({ width: 24, height: 24 })``; +export const PlusIcon = styled(Plus).attrs({ width: 24, height: 24 })``; diff --git a/src/core/components/Layout/styles.tsx b/src/core/components/Layout/styles.tsx index 5ccd87d4b..36dc412ba 100644 --- a/src/core/components/Layout/styles.tsx +++ b/src/core/components/Layout/styles.tsx @@ -18,8 +18,11 @@ export const Username = styled.div` margin-left: 7px; `; -export const DropdownIcon = styled(SortDown)<{ icon?: ReactNode }>` - color: #292b32; +export const DropdownIcon = styled(SortDown).attrs<{ icon?: ReactNode }>({ + width: 18, + height: 18, +})` + fill: #292b32; cursor: pointer; margin-bottom: 2px; `; diff --git a/src/core/components/Modal/styles.tsx b/src/core/components/Modal/styles.tsx index d51708bee..1e277816f 100644 --- a/src/core/components/Modal/styles.tsx +++ b/src/core/components/Modal/styles.tsx @@ -1,10 +1,9 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import styled, { css } from 'styled-components'; import { Close } from '~/icons'; -export const CloseIcon = styled(Close)` +export const CloseIcon = styled(Close).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` padding: 0 6px; - font-size: 18px; cursor: pointer; margin-left: auto; &.svg-inline--fa { diff --git a/src/core/components/Notification/styles.tsx b/src/core/components/Notification/styles.tsx index 85e8e1992..0fbc266c6 100644 --- a/src/core/components/Notification/styles.tsx +++ b/src/core/components/Notification/styles.tsx @@ -2,18 +2,18 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; import { Check, ExclamationCircle, Remove } from '~/icons'; -export const SuccessIcon = styled(Check)<{ icon?: ReactNode }>` - font-size: 18px; +export const SuccessIcon = styled(Check).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` margin-right: 8px; `; -export const InfoIcon = styled(ExclamationCircle)<{ icon?: ReactNode }>` - font-size: 18px; +export const InfoIcon = styled(ExclamationCircle).attrs<{ icon?: ReactNode }>({ + width: 18, + height: 18, +})` margin-right: 8px; `; -export const ErrorIcon = styled(Remove)<{ icon?: ReactNode }>` - font-size: 18px; +export const ErrorIcon = styled(Remove).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` margin-right: 8px; `; diff --git a/src/core/components/OptionMenu/styles.tsx b/src/core/components/OptionMenu/styles.tsx index 1e25e7eac..eb710ae9b 100644 --- a/src/core/components/OptionMenu/styles.tsx +++ b/src/core/components/OptionMenu/styles.tsx @@ -3,8 +3,7 @@ import styled from 'styled-components'; import { SecondaryButton } from '~/core/components/Button'; import { EllipsisH } from '~/icons'; -export const OptionsIcon = styled(EllipsisH)<{ icon?: ReactNode }>` - font-size: 16px; +export const OptionsIcon = styled(EllipsisH).attrs<{ icon?: ReactNode }>({ width: 16, height: 16 })` cursor: pointer; margin-left: auto; `; diff --git a/src/core/components/PageHeader/index.tsx b/src/core/components/PageHeader/index.tsx index 801f881ce..95439df0d 100644 --- a/src/core/components/PageHeader/index.tsx +++ b/src/core/components/PageHeader/index.tsx @@ -61,7 +61,7 @@ const PageHeader = ({ {onBack instanceof Function && ( - + {backLinkText ?? } )} diff --git a/src/core/components/Select/index.tsx b/src/core/components/Select/index.tsx index 525e93736..fa283c36e 100644 --- a/src/core/components/Select/index.tsx +++ b/src/core/components/Select/index.tsx @@ -24,7 +24,7 @@ const defaultTriggerRenderer: SelectProps['renderTrigger'] = ({
{placeholder}
)} - + ); }; diff --git a/src/core/components/Uploaders/File/styles.tsx b/src/core/components/Uploaders/File/styles.tsx index af98451b3..5b0638613 100644 --- a/src/core/components/Uploaders/File/styles.tsx +++ b/src/core/components/Uploaders/File/styles.tsx @@ -44,8 +44,11 @@ export const FileIcon = styled(Icon)` grid-area: icon; `; -export const CircleIcon = styled(ExclamationCircle)<{ icon?: ReactNode }>` - color: ${({ theme }) => theme.palette.alert.main}; +export const CircleIcon = styled(ExclamationCircle).attrs<{ icon?: ReactNode }>({ + width: 14, + height: 14, +})` + fill: ${({ theme }) => theme.palette.alert.main}; z-index: 2; `; diff --git a/src/core/components/Uploaders/Image/styles.tsx b/src/core/components/Uploaders/Image/styles.tsx index e08d5189d..815de2c6d 100644 --- a/src/core/components/Uploaders/Image/styles.tsx +++ b/src/core/components/Uploaders/Image/styles.tsx @@ -83,10 +83,9 @@ export const RemoveButton = styled(Button).attrs<{ right: 0.5em; `; -export const CircleIcon = styled(ExclamationCircle)<{ icon?: ReactNode }>` +export const CircleIcon = styled(ExclamationCircle).attrs<{ icon?: ReactNode }>({ width: 24, height: 24 })` z-index: 2; opacity: 0.7; - font-size: 24px; `; export const RetryButton = styled(Button).attrs<{ diff --git a/src/core/components/Uploaders/Video/styles.tsx b/src/core/components/Uploaders/Video/styles.tsx index 561cbabe3..d911c2f12 100644 --- a/src/core/components/Uploaders/Video/styles.tsx +++ b/src/core/components/Uploaders/Video/styles.tsx @@ -95,10 +95,12 @@ export const RemoveButton = styled(Button).attrs<{ right: 0.5em; `; -export const CircleIcon = styled(ExclamationCircle)<{ icon?: ReactNode }>` +export const CircleIcon = styled(ExclamationCircle).attrs<{ icon?: ReactNode }>({ + width: 24, + height: 24, +})` z-index: 2; opacity: 0.7; - font-size: 24px; `; export const RetryButton = styled(Button).attrs<{ diff --git a/src/core/components/UserChip/styles.tsx b/src/core/components/UserChip/styles.tsx index 6d0d1d165..f782fb6b8 100644 --- a/src/core/components/UserChip/styles.tsx +++ b/src/core/components/UserChip/styles.tsx @@ -19,9 +19,8 @@ export const Name = styled.span` margin: 0 0.5rem; `; -export const Close = styled(Remove)` - font-size: 12px; - color: ${({ theme }) => theme.palette.base.shade1}; +export const Close = styled(Remove).attrs({ width: 12, height: 12 })` + fill: ${({ theme }) => theme.palette.base.shade1}; `; export const RoundButton = styled(Button)` diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx index c2eb4f9c5..0ae9ad501 100644 --- a/src/icons/ArrowLeft.tsx +++ b/src/icons/ArrowLeft.tsx @@ -1,9 +1,22 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ArrowLeft = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowLeft })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ArrowLeft; diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx index 74914508f..88ce670aa 100644 --- a/src/icons/ArrowRight.tsx +++ b/src/icons/ArrowRight.tsx @@ -1,21 +1,21 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const ArrowRight = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default ArrowRight; + +export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z' fill='%23636878' /%3E%3C/svg%3E");`; diff --git a/src/icons/Balloon.tsx b/src/icons/Balloon.tsx index d3c2427f2..1b84a0e1a 100644 --- a/src/icons/Balloon.tsx +++ b/src/icons/Balloon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Balloon = (props: React.SVGProps) => ( @@ -30,6 +30,6 @@ const Svg = (props: React.SVGProps) => ( ); -export default Svg; +export default Balloon; export const backgroundImage = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='262' height='243' fill='none' viewBox='0 0 262 243'%3E%3Cg rel='balloon'%3E%3Cpath fill='%23BCF7FC' d='M104 149l-11 4 10 32 17 17-16-53z'/%3E%3Cpath fill='%2397E4FD' d='M162 174l5 11-31 15-24-2 50-24z'/%3E%3Cpath fill='%23E8F7F4' d='M190 32a78 78 0 00-109 76l43 45 66-121z'/%3E%3Cpath fill='%23231F20' d='M190 32l-45 131 62 1a78 78 0 00-17-132z'/%3E%3Cpath fill='%23EC95AD' d='M190 32l-66 121 52-3c7-9 13-20 18-31 17-39 16-78-4-87z'/%3E%3Cpath fill='%234A82F2' d='M190 32c-20-9-50 16-67 56-5 11-9 23-10 34l21 36 56-126z'/%3E%3Cpath fill='%234CBEFF' d='M130 169l37 16 25-11 15-10-63-28-22 10 8 23z'/%3E%3Cpath fill='%2371D1FE' d='M81 108l3 18 9 27 37 16 14-33-63-28z'/%3E%3Cpath fill='%23231F20' d='M136 200l-17-8-13 10 2 16 16 7 12-25z'/%3E%3Cpath fill='%23EC95AD' d='M103 185l16 7-11 26-16-7 11-26z'/%3E%3C/g%3E%3Cg rel='heart'%3E%3Cpath fill='%23D9E5FC' fill-rule='evenodd' d='M54 89c4-5 6-11 6-17 0-15-13-28-29-28C16 44 3 57 3 72s13 28 28 28c7 0 13-2 17-5l12 3-6-9z' clip-rule='evenodd'/%3E%3Cpath fill='%231054DE' d='M24 61c3 0 6 2 7 4 2-2 4-4 7-4 5 0 9 4 9 8 0 11-16 17-16 17s-15-6-15-17c0-4 4-8 8-8z'/%3E%3C/g%3E%3C/svg%3E")`; diff --git a/src/icons/Ban.tsx b/src/icons/Ban.tsx index 5a3670de2..475f3989f 100644 --- a/src/icons/Ban.tsx +++ b/src/icons/Ban.tsx @@ -1,10 +1,24 @@ +import React from 'react'; import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faBan } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Ban = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faBan })` - color: ${({ theme }) => theme.palette.base.shade3}; - font-size: ${({ height = 'inherit' }) => height}; +export default styled(Ban)` + fill: ${({ theme }) => theme.palette.base.shade3}; `; diff --git a/src/icons/Camera.tsx b/src/icons/Camera.tsx index e840da02f..a226cad7d 100644 --- a/src/icons/Camera.tsx +++ b/src/icons/Camera.tsx @@ -1,8 +1,21 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faCamera } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faCamera })` - font-size: '${({ height = 'inherit' }) => height}'; -`; +const Camera = (props: React.SVGProps) => ( + + + +); + +export default Camera; diff --git a/src/icons/Category.tsx b/src/icons/Category.tsx index 3a19154c9..baac694a5 100644 --- a/src/icons/Category.tsx +++ b/src/icons/Category.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Category = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default Category; export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M28 21C28 20.4688 27.5312 20 27 20H22C21.4375 20 21 20.4688 21 21V26C21 26.5625 21.4375 27 22 27H27C27.5312 27 28 26.5625 28 26V21ZM14 19C11.7812 19 10 20.8125 10 23C10 25.2188 11.7812 27 14 27C16.1875 27 18 25.2188 18 23C18 20.8125 16.1875 19 14 19ZM26.9688 17C27.75 17 28.25 16.1875 27.8438 15.5L24.875 10.5C24.4688 9.84375 23.5 9.84375 23.0938 10.5L20.125 15.5C19.7188 16.1875 20.2188 17 21 17H26.9688Z' fill='white'/%3E%3C/svg%3E%0A");`; diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx index b81afa3e8..fc6dd8749 100644 --- a/src/icons/Check.tsx +++ b/src/icons/Check.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCheck } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Check = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheck })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Check; diff --git a/src/icons/CheckCircle.tsx b/src/icons/CheckCircle.tsx index 717046026..59cf42207 100644 --- a/src/icons/CheckCircle.tsx +++ b/src/icons/CheckCircle.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const CheckCircle = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheckCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default CheckCircle; diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx index 3cb4a2647..4c50049e9 100644 --- a/src/icons/ChevronDown.tsx +++ b/src/icons/ChevronDown.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronDown } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronDown = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronDown })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ChevronDown; diff --git a/src/icons/ChevronLeft.tsx b/src/icons/ChevronLeft.tsx index 156fc85fb..0f999d8a5 100644 --- a/src/icons/ChevronLeft.tsx +++ b/src/icons/ChevronLeft.tsx @@ -1,11 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronLeft = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronLeft })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default ChevronLeft; diff --git a/src/icons/ChevronRight.tsx b/src/icons/ChevronRight.tsx index 6e85c2fb6..8b82059ab 100644 --- a/src/icons/ChevronRight.tsx +++ b/src/icons/ChevronRight.tsx @@ -1,11 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronRight } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const ChevronRight = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronRight })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default ChevronRight; diff --git a/src/icons/CircleRemove.tsx b/src/icons/CircleRemove.tsx index 6fae1c287..5a5a36c8a 100644 --- a/src/icons/CircleRemove.tsx +++ b/src/icons/CircleRemove.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CircleRemove = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CircleRemove; diff --git a/src/icons/Close.tsx b/src/icons/Close.tsx index fd2973720..ae74d4095 100644 --- a/src/icons/Close.tsx +++ b/src/icons/Close.tsx @@ -1,14 +1,23 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const Close = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default Close; diff --git a/src/icons/Comment.tsx b/src/icons/Comment.tsx index 1a8746821..4ac797e1e 100644 --- a/src/icons/Comment.tsx +++ b/src/icons/Comment.tsx @@ -1,21 +1,21 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const Comment = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default Comment; diff --git a/src/icons/Community.tsx b/src/icons/Community.tsx index 16a02fec4..ced2fc1b7 100644 --- a/src/icons/Community.tsx +++ b/src/icons/Community.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Community = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default Community; export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z' fill='white'/%3E%3C/svg%3E%0A");`; diff --git a/src/icons/CommunityAlt.tsx b/src/icons/CommunityAlt.tsx index 62947ba72..9c8eff6d5 100644 --- a/src/icons/CommunityAlt.tsx +++ b/src/icons/CommunityAlt.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CommunityAlt = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CommunityAlt; export const backgroundImage = `url("data:image/svg+xml, %3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http%3A//www.w3.org/2000/svg'%3E%3Ccircle cx='7.82443' cy='18.04' r='2.48767' fill='%231054DE'/%3E%3Ccircle r='2.48767' transform='matrix%28-1 0 0 1 22.4188 18.04%29' fill='%231054DE'/%3E%3Cpath d='M7.82334 21.5221C5.35031 21.5221 3.34553 23.5269 3.34553 25.9999H8.90133C8.90133 24.2088 9.45415 22.5787 9.81348 21.9876C9.21397 21.6896 8.53822 21.5221 7.82334 21.5221Z' fill='%231054DE'/%3E%3Cpath d='M22.4183 21.5221C24.8914 21.5221 26.8961 23.5269 26.8961 25.9999H21.3403C21.3403 24.2088 20.7875 22.5787 20.4282 21.9875C21.0277 21.6896 21.7034 21.5221 22.4183 21.5221Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1099 20.4352C18.1087 19.7843 18.7689 18.6574 18.7689 17.3764C18.7689 15.3613 17.1354 13.7278 15.1203 13.7278C13.1052 13.7278 11.4717 15.3613 11.4717 17.3764C11.4717 18.7266 12.2052 19.9056 13.2955 20.5365V20.9179C11.4476 21.708 10.1452 23.6116 10.1452 25.8344H20.2617C20.2617 23.611 18.9586 21.707 17.1099 20.9172V20.4352ZM17.2773 17.3765C17.2773 18.5672 16.3121 19.5325 15.1214 19.5325C13.9306 19.5325 12.9654 18.5672 12.9654 17.3765C12.9654 16.9838 13.0704 16.6156 13.2538 16.2985C13.6828 16.879 15.0882 17.9072 17.2773 17.3765Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8429 8.62622C15.3935 8.62622 15.8398 9.07253 15.8398 9.62308V11.9686C15.8398 12.5192 15.3935 12.9655 14.8429 12.9655C14.2924 12.9655 13.8461 12.5192 13.8461 11.9686V9.62308C13.8461 9.07253 14.2924 8.62622 14.8429 8.62622Z' fill='%231054DE'/%3E%3Cpath d='M3.73594 7.50087C4.05829 8.13364 4.9647 8.1268 5.27746 7.48924V7.48924C5.52678 6.98102 5.93601 6.56868 6.44232 6.31553L6.48079 6.29629C7.1152 5.97909 7.10843 5.07141 6.46935 4.7637V4.7637C5.94653 4.51198 5.52471 4.09015 5.27298 3.56733V3.56733C4.96528 2.92826 4.0576 2.92148 3.74039 3.55589L3.72116 3.59436C3.468 4.10068 3.05566 4.5099 2.54745 4.75922V4.75922C1.90989 5.07198 1.90304 5.97839 2.53581 6.30074L2.56702 6.31664C3.06349 6.56956 3.46712 6.97319 3.72004 7.46966L3.73594 7.50087Z' fill='%231054DE'/%3E%3Cpath d='M14.2909 6.58406C14.5595 7.11136 15.3149 7.10566 15.5755 6.57436V6.57436C15.7832 6.15085 16.1243 5.80723 16.5462 5.59627L16.5783 5.58024C17.1069 5.3159 17.1013 4.5595 16.5687 4.30309V4.30309C16.133 4.09331 15.7815 3.74179 15.5717 3.30611V3.30611C15.3153 2.77355 14.5589 2.7679 14.2946 3.29658L14.2786 3.32864C14.0676 3.75056 13.724 4.09159 13.3005 4.29935V4.29935C12.7692 4.55998 12.7635 5.31532 13.2908 5.58395L13.3168 5.5972C13.7305 5.80797 14.0669 6.14432 14.2776 6.55805L14.2909 6.58406Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.27084 7.81208C7.62329 7.38913 8.25188 7.33199 8.67483 7.68445C9.9614 8.75659 10.6121 9.63667 11.798 11.4156C12.1034 11.8737 11.9797 12.4927 11.5216 12.798C11.0635 13.1034 10.4446 12.9797 10.1392 12.5216C8.97958 10.7822 8.45747 10.0986 7.39847 9.21607C6.97553 8.86362 6.91838 8.23503 7.27084 7.81208Z' fill='%231054DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.2895 7.81208C21.937 7.38913 21.3084 7.33199 20.8855 7.68445C19.5989 8.75659 18.9483 9.63667 17.7623 11.4156C17.4569 11.8737 17.5807 12.4927 18.0388 12.798C18.4969 13.1034 19.1158 12.9797 19.4212 12.5216C20.5807 10.7822 21.1029 10.0986 22.1619 9.21607C22.5848 8.86362 22.6419 8.23503 22.2895 7.81208Z' fill='%231054DE'/%3E%3C/svg%3E")`; diff --git a/src/icons/CommunityCoverPicture.tsx b/src/icons/CommunityCoverPicture.tsx index 737803b64..33998f781 100644 --- a/src/icons/CommunityCoverPicture.tsx +++ b/src/icons/CommunityCoverPicture.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const CommunityCoverPicture = (props: React.SVGProps) => ( ) => ( ); -export default Svg; +export default CommunityCoverPicture; export const backgroundImage = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUwIiBoZWlnaHQ9IjMxMSIgdmlld0JveD0iMCAwIDU1MCAzMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yMTU6MzI3NjEpIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzIxNTozMjc2MSkiPgo8cGF0aCBkPSJNLTIgMTQuODA5Nkg0MjUuMTk4VjMxMUgtMlYxNC44MDk2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+CjxyZWN0IHg9Ii04OC41Nzg2IiB5PSItMjUwLjYyMyIgd2lkdGg9IjY1MC40OCIgaGVpZ2h0PSI1ODIuMTI4IiBmaWxsPSIjMzk1MkVFIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTIiIGQ9Ik01OTMuNzE5IDIxNy43NDJDNTk3LjY5IDE0Ni42OTEgNTQzLjAwNyA2NS4xNTg4IDQ2OS43NjkgNTUuOTE5MkM0NjguNDgxIDU1LjczNjYgNDY3LjE4OCA1NS41OTQgNDY1Ljg1MiA1NS40NDU2QzM2MC43NjMgNDMuOTc4IDM0NS41NDggMTcyLjIyMiAyNDkuMzkgMTgwLjg1M0MxNTMuMjggMTg5LjQ1MSA4NC41OTEyIDExMS42NTMgLTMyLjE0MjEgMTUyLjQxOEMtMTM2Ljk3MSAxODkuMDMgLTE3OC4yMzQgNDI4LjY2MiAxMjIuMTcyIDQ1Ni45OTVDMzYyLjYxIDQ3OS42NDQgNTgxLjg4OSA0MjkuNzIzIDU5My43MTkgMjE3Ljc0MloiIGZpbGw9IiNFM0U4RkYiLz4KPHJlY3QgeD0iLTg4LjU3ODYiIHk9IjI5Ni4xOSIgd2lkdGg9IjU5NC42NTkiIGhlaWdodD0iODguODU3MSIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNMjcxLjM3NiAzMDIuOTUxQzI3Mi4xMjEgMzAwLjU3MSAyNzIuNTQ2IDI5OC4wNzIgMjcyLjU0NiAyOTUuNTE0QzI3Mi41NDYgMjc3LjY0NyAyNTMuMTQyIDI2My4xNzEgMjI5LjE5MyAyNjMuMTcxQzIyMy40NzggMjYzLjE3MSAyMTguMDI5IDI2NC4wMDQgMjEzLjAzMiAyNjUuNTExQzIwOC40MDcgMjU1LjIxOSAxOTUuMzgzIDI0Ny44MjIgMTgwLjAxOSAyNDcuODIyQzE3OC41MDQgMjQ3LjgyMiAxNzcuMDQyIDI0Ny45MDEgMTc1LjU4IDI0OC4wNEMxNzIuMTI1IDIxOC43OSAxMzkuMjQ1IDE5NS44NjYgOTkuMTYxNSAxOTUuODY2QzU3LjMyMzkgMTk1Ljg2NiAyMy4zMjc0IDIyMC44NTMgMjIuNDc2OCAyNTEuOTI3QzMuOTUwMjUgMjU4LjYxIC04LjgzNDk2IDI3Mi43NjkgLTguODM0OTYgMjg5LjE2OEMtOC44MzQ5NiAyOTQuMDA3IC03LjcxODU4IDI5OC42NDcgLTUuNjcxODggMzAyLjk1MUgyNzEuMzc2WiIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNMjQyLjUzMSAyOTguMzk0QzI0Mi4wNTggMjk2Ljg3NSAyNDEuNzg4IDI5NS4yOCAyNDEuNzg4IDI5My42NDdDMjQxLjc4OCAyODIuMjQzIDI1NC4xMjEgMjczLjAwMiAyNjkuMzQ0IDI3My4wMDJDMjcyLjk3NiAyNzMuMDAyIDI3Ni40NCAyNzMuNTM0IDI3OS42MTYgMjc0LjQ5NkMyODIuNTU2IDI2Ny45MjcgMjkwLjgzNSAyNjMuMjA1IDMwMC42IDI2My4yMDVDMzAxLjU2MyAyNjMuMjA1IDMwMi40OTIgMjYzLjI1NiAzMDMuNDIyIDI2My4zNDVDMzA1LjYxOCAyNDQuNjc0IDMyNi41MTcgMjMwLjA0MiAzNTEuOTk2IDIzMC4wNDJDMzc4LjU4OSAyMzAuMDQyIDQwMC4xOTggMjQ1Ljk5MSA0MDAuNzM4IDI2NS44MjVDNDEyLjUxNCAyNzAuMDkxIDQyMC42NDEgMjc5LjEyOSA0MjAuNjQxIDI4OS41OTdDNDIwLjY0MSAyOTIuNjg1IDQxOS45MzIgMjk1LjY0NyA0MTguNjMxIDI5OC4zOTRIMjQyLjUzMVoiIGZpbGw9IiNGQkFDQzIiLz4KPHBhdGggZD0iTS0wLjIyNjU2MiAzMzEuNTA2QzIuOTkxIDMyNy40NTQgNC44MzQ5OCAzMjIuNzk4IDQuODM0OTggMzE3LjgzOUM0LjgzNDk4IDMwMi4yOTEgLTEzLjE5MDkgMjg5LjY5IC0zNS40MzE2IDI4OS42OUMtMzkuMDI1NSAyODkuNjkgLTQyLjUwNjUgMjkwLjAxOSAtNDUuODE4MiAyOTAuNjM3Qy01Mi44OTMgMjc3LjI2IC03MS4zMTQxIDI2Ny43MTEgLTkyLjkzMzkgMjY3LjcxMUMtMTE3LjQxNCAyNjcuNzExIC0xMzcuNzkyIDI3OS45NTcgLTE0Mi4yNTEgMjk2LjE0OUMtMTQ1LjM3NSAyOTUuNjA5IC0xNDguNjMgMjk1LjMyIC0xNTEuOTc5IDI5NS4zMkMtMTc0LjIyIDI5NS4zMiAtMTkyLjI0NiAzMDcuOTIxIC0xOTIuMjQ2IDMyMy40NjlDLTE5Mi4yNDYgMzI2LjI1NyAtMTkxLjY2MiAzMjguOTY3IC0xOTAuNTcxIDMzMS41MDZILTAuMjI2NTYyWiIgZmlsbD0iI0ZCQUNDMiIvPgo8cGF0aCBkPSJNNTkyLjE1NSAzMjEuMjUzQzU5NS4zNzIgMzE3LjIwMSA1OTcuMjE2IDMxMi41NDUgNTk3LjIxNiAzMDcuNTg2QzU5Ny4yMTYgMjkyLjAzOSA1NzkuMTkgMjc5LjQzOCA1NTYuOTUgMjc5LjQzOEM1NTMuMzU2IDI3OS40MzggNTQ5Ljg3NSAyNzkuNzY2IDU0Ni41NjMgMjgwLjM4NUM1MzkuNDg4IDI2Ny4wMDcgNTIxLjA2NyAyNTcuNDU4IDQ5OS40NDcgMjU3LjQ1OEM0NzQuOTY4IDI1Ny40NTggNDU0LjU5IDI2OS43MDQgNDUwLjEzIDI4NS44OTZDNDQ3LjAwNyAyODUuMzU3IDQ0My43NTIgMjg1LjA2NyA0NDAuNDAyIDI4NS4wNjdDNDE4LjE2MiAyODUuMDY3IDQwMC4xMzYgMjk3LjY2OCA0MDAuMTM2IDMxMy4yMTZDNDAwLjEzNiAzMTYuMDA0IDQwMC43MTkgMzE4LjcxNCA0MDEuODEgMzIxLjI1M0g1OTIuMTU1WiIgZmlsbD0iI0ZCQUNDMiIvPgo8ZyBvcGFjaXR5PSIwLjUiIGNsaXAtcGF0aD0idXJsKCNjbGlwMl8yMTU6MzI3NjEpIj4KPHBhdGggZD0iTTIwOS4wMSAxOTAuNzM4QzIxMS4wODkgMTkyLjgzMyAyMTQuNjY5IDE5NC4yMiAyMTcuODE5IDE5My41NThDMjE4LjA4OSAxOTMuNDk4IDIxOC4zNTggMTkzLjQyOCAyMTguNjI3IDE5My4zMzZDMjE5Ljk0OSAxOTIuODg5IDIyMS4xNjQgMTkyLjA0MSAyMjIuMTE3IDE5MC42NzhDMjIzLjU3MyAxODguNjAzIDIyNC40MTMgMTg1LjMyIDIyNC4wOTcgMTgwLjQ2M0MyMjMuNTcyIDE3Mi40MzQgMjIwLjIwMSAxNjkuMDAxIDIxNi45NjcgMTY3LjU3M0MyMTMuNzMzIDE2Ni4xNDUgMjEwLjYyNSAxNjYuNzMyIDIxMC42MjUgMTY2LjczMkMxOTguMDgxIDE2OS44MjcgMjA0LjQ3MyAxODYuMTg3IDIwOS4wMSAxOTAuNzM4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIxNy44MDMgMTkzLjIxQzIxNy44MDMgMTkzLjIxIDIxNi44MzQgMTk0LjcwMiAyMTcuMTMzIDE5NC44MjRDMjE3LjQzMiAxOTQuOTQ2IDIxNy40NDUgMTk0LjYwOCAyMTguMjE3IDE5NC43MDFDMjE4Ljk4OSAxOTQuNzk1IDIxOC44ODEgMTk0Ljc4OCAyMTkuMjczIDE5NC42MzVDMjE5LjY2NSAxOTQuNDgyIDIxOS43MTIgMTk0LjA1OCAyMTkuNzEyIDE5NC4wNThMMjE4LjYwNyAxOTIuOTE1TDIxNy44MDMgMTkzLjIxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIxOC42OTkgMTkzLjc3NEMyMTYuNjQ1IDE5NS44NTIgMjE1Ljg0NiAxOTkuMTAxIDIxNy4yMjQgMjAxLjUzNEMyMTcuOTQ4IDIwMi44MTggMjE5LjE3IDIwMy43NjggMjIwLjQwOCAyMDQuNjM3QzIyMS42NDUgMjA1LjUwNiAyMjIuOTMyIDIwNi4zNCAyMjMuODU3IDIwNy40OTdDMjI0Ljc5MyAyMDguNjUxIDIyNS4zMjcgMjEwLjIwMyAyMjQuODIzIDIxMS42MjRDMjI0LjMyOCAyMTMuMDMxIDIyMi41NjIgMjE0LjA4MyAyMjEuMTI3IDIxMy41MzhDMjIwLjg1NCAyMTMuNDMyIDIyMC42MDcgMjEzLjI4NiAyMjAuNDM0IDIxMy4wNjdDMjE5LjkwOSAyMTIuNDIzIDIyMC4yNTIgMjExLjM4MiAyMjAuOTY5IDIxMC44OTNDMjIyLjExNiAyMTAuMTIgMjIzLjgwNCAyMTAuNjAxIDIyNC42MzcgMjExLjYyN0MyMjUuNDkyIDIxMi42NDggMjI1LjY1OSAyMTQuMDQxIDIyNS42NDEgMjE1LjM1QzIyNS42MjYgMjE2LjY2OCAyMjUuNDYyIDIxOC4wMDMgMjI1Ljc1MSAyMTkuMjc3QzIyNi40NDUgMjIyLjM3NyAyMjkuNjIxIDIyNC40ODUgMjMwLjQzOSAyMjcuNTY1QzIzMC45MjEgMjI5LjM3MSAyMzAuNTQ3IDIzMS4zOTQgMjMxLjM0IDIzMy4wODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMC40NTU2NzgiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAzXzIxNTozMjc2MSkiPgo8cGF0aCBkPSJNMzM1Ljc1MiAxMjYuNTUyQzMzNS4zOTcgMTI3LjI3MSAzMzUuMDM3IDEyNy45NjYgMzM0LjY3MiAxMjguNjM5QzMzMi43NTUgMTMyLjA4NiAzMzAuNTAyIDEzNC45NjMgMzI4LjU3MSAxMzYuNTk3QzMyNS4yNSAxMzkuNDE0IDMxOS44NjUgMTQwLjk5IDMxNS4zNyAxMzkuNTY5QzMxNS4yNjggMTM5LjU0NyAzMTUuMTYgMTM5LjUwMSAzMTUuMDY2IDEzOS40NjRDMzE0Ljc4OSAxMzkuMzc1IDMxNC41MTYgMTM5LjI1IDMxNC4yNDMgMTM5LjEyNEwzMTQuMjI4IDEzOS4xMTZDMzEzLjQ3OSAxMzguNzgyIDMxMi43NjIgMTM4LjMzMiAzMTIuMDk2IDEzNy43OTVDMzA4LjYwNyAxMzQuOTYxIDMwNi41MjkgMTI5LjIyOSAzMDguMTIyIDExOS4yNkMzMDkuNDM5IDExMS4xMDUgMzEyLjQxMyAxMDYuMzUyIDMxNS43MzkgMTAzLjY1NUMzMjIuMDY3IDk4LjUxMTUgMzI5LjY3NCAxMDAuNzE3IDMyOS42NzQgMTAwLjcxN0MzNDEuNzY3IDEwNS4wMzUgMzQwLjIzNiAxMTcuMjU0IDMzNS43NTIgMTI2LjU1MloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMTQuMjExIDEzOS4xNDRDMzE0LjIxMSAxMzkuMTQ0IDMxMS43MiAxMzkuOTM3IDMxMS45MzMgMTQwLjM1NkMzMTIuMTUxIDE0MC43OTggMzEyLjQ4OCAxNDAuMzk5IDMxMy4yNTYgMTQxLjI0OUMzMTQuMDI0IDE0Mi4wOTggMzEzLjkxMyAxNDEuOTkzIDMxNC41MDMgMTQyLjE3M0MzMTUuMDg0IDE0Mi4zNjcgMzE1LjUzNSAxNDEuOTM5IDMxNS41MzUgMTQxLjkzOUwzMTUuMzcgMTM5LjU2OUwzMTQuMjExIDEzOS4xNDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzEzLjIxOSAxNDEuMjQ2QzMwOC45MzMgMTQzLjYzNyAzMDYuMTM3IDE1MC4wMyAzMDUuODU2IDE1NC43NTJDMzA1LjcyMiAxNTcuMDM5IDMwNi40MTYgMTU5LjQ5NCAzMDguMjA0IDE2MC45MzdDMzA5LjEgMTYxLjY3IDMxMC4yMjIgMTYyLjA5MiAzMTEuMzcgMTYyLjI3OEMzMTIuNzU1IDE2Mi40ODkgMzE0LjQ2NSAxNjIuMTU5IDMxNS4wMjggMTYwLjg2N0MzMTUuNDU0IDE1OS45IDMxNS4wMiAxNTguNjg4IDMxNC4yIDE1OC4wMjFDMzEzLjM4MSAxNTcuMzU0IDMxMi4yNTUgMTU3LjE2MiAzMTEuMTk4IDE1Ny4yNDVDMzA1LjI0MiAxNTcuNzQgMzAyLjUxNiAxNjUuMDQ5IDMwMi4wNDQgMTcwLjEyMUMzMDEuNjkxIDE3My45NjUgMzAyLjE1MiAxNzguMTYzIDMwMy40NDkgMTgxLjc3NkMzMDUuODM2IDE4OC40MTEgMzA2LjE0NCAxOTMuNjA0IDMwMi4zNjggMTk5Ljc1N0MzMDEuMTYzIDIwMS43MyAyOTkuODgzIDIwMy42OTcgMjk5LjE0NSAyMDUuODkzQzI5OC40MjEgMjA4LjA5NyAyOTguMzA2IDIxMC42MDkgMjk5LjQxNSAyMTIuNjM0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuNDU1Njc4IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9nPgo8cGF0aCBkPSJNMTM2LjAyNCA1MS40NDc1QzEzNi40MDIgNTMuMzQ2MSAxMzUuMTQ2IDU1LjE5OTQgMTMzLjIyMyA1NS41ODE5QzEzMS4zIDU1Ljk2NDQgMTI5LjQzMSA1NC43MzI2IDEyOS4wNTMgNTIuODM0QzEyOC42NzUgNTAuOTM1NCAxMjkuOTMxIDQ5LjA4MjEgMTMxLjg1NCA0OC42OTk2QzEzMy43NzcgNDguMzE3MSAxMzUuNjQ2IDQ5LjU0ODkgMTM2LjAyNCA1MS40NDc1WiIgZmlsbD0iI0ZERTVERSIvPgo8cGF0aCBkPSJNNDQuMzI5NiAxOTkuMzg4QzQ0LjY0NDUgMjAwLjk3MiA0My41OTc0IDIwMi41MzEgNDEuOTc2MSAyMDIuODUzQzQwLjM1NDkgMjAzLjE3NSAzOC43OTA5IDIwMi4xMzYgMzguNDc2IDIwMC41NTNDMzguMTYxMSAxOTguOTY5IDM5LjIwODMgMTk3LjQxIDQwLjgyOTUgMTk3LjA4OEM0Mi40NTA3IDE5Ni43NjUgNDQuMDE0NyAxOTcuODA1IDQ0LjMyOTYgMTk5LjM4OFoiIHN0cm9rZT0iI0ZERTVERSIgc3Ryb2tlLXdpZHRoPSIxLjEzOTE5Ii8+CjxwYXRoIGQ9Ik0xNjUuMDAyIDE4My40MThMMTY1LjAwNSAxODMuNDE3QzE2Ni42MiAxODMuMDg2IDE2OC4xODUgMTg0LjEyMiAxNjguNTAyIDE4NS43MThDMTY4LjgxNyAxODcuMzAxIDE2Ny43NyAxODguODYgMTY2LjE0OSAxODkuMTgzQzE2NC41MjcgMTg5LjUwNSAxNjIuOTYzIDE4OC40NjYgMTYyLjY0OCAxODYuODgyQzE2Mi4zMzMgMTg1LjI5OSAxNjMuMzgxIDE4My43NCAxNjUuMDAyIDE4My40MThaIiBzdHJva2U9IiNGREU1REUiIHN0cm9rZS13aWR0aD0iMS4xMzkxOSIvPgo8cGF0aCBkPSJNMjc2LjY0MyA2OC40MzQzTDI3Ni42NDYgNjguNDMzN0MyNzguMjYxIDY4LjEwMyAyNzkuODI2IDY5LjEzODkgMjgwLjE0MyA3MC43MzQ3QzI4MC40NTggNzIuMzE4IDI3OS40MTEgNzMuODc2OSAyNzcuNzkgNzQuMTk5M0MyNzYuMTY4IDc0LjUyMTggMjc0LjYwNCA3My40ODIzIDI3NC4yODkgNzEuODk5QzI3My45NzUgNzAuMzE1NiAyNzUuMDIyIDY4Ljc1NjggMjc2LjY0MyA2OC40MzQzWiIgc3Ryb2tlPSIjRkRFNURFIiBzdHJva2Utd2lkdGg9IjEuMTM5MTkiLz4KPHBhdGggb3BhY2l0eT0iMC40IiBkPSJNMzg3LjA4MyAxMzEuNjQ3TDM5MS42MTggMTM0Ljg2MUMzOTEuNjE4IDEzNC44NjEgMzkyLjMwMSAxMzguMjkxIDM4OC45ODMgMTM5Ljc3QzM4NS42NjUgMTQxLjI0OCAzODMuNTI1IDE0My4wNTMgMzg0LjI1OSAxNDUuMzc0QzM4NC4yNTkgMTQ1LjM3NCAzODAuMTk2IDE0NC41MzQgMzc5Ljg5MiAxNDEuNTc4QzM3OS41NzcgMTM4LjYyNCAzODMuNTM1IDEzOC45MzYgMzg1LjQ2NyAxMzYuMDg1QzM4Ny4zOTkgMTMzLjIzMyAzODcuMDgzIDEzMS42NDcgMzg3LjA4MyAxMzEuNjQ3WiIgZmlsbD0iI0Y2RjVGMyIvPgo8cGF0aCBkPSJNNTkuMjAyNiAyMzkuNTgyTDU2Ljg1MzYgMjQ0LjYxQzU2Ljg1MzYgMjQ0LjYxIDUzLjU3NjYgMjQ1Ljk0NyA1MS40ODAxIDI0My4wMjJDNDkuMzk0NCAyNDAuMDk0IDQ3LjIwNjIgMjM4LjM2NiA0NS4wMzU4IDIzOS41NDFDNDUuMDM1OCAyMzkuNTQxIDQ1LjEyMDUgMjM1LjQzOCA0Ny45OTE3IDIzNC41NkM1MC44NzM3IDIzMy42NzkgNTEuMjg4NiAyMzcuNTcyIDU0LjQ4OTUgMjM4Ljg4N0M1Ny42OTAzIDI0MC4yMDMgNTkuMjAyNiAyMzkuNTgyIDU5LjIwMjYgMjM5LjU4MloiIGZpbGw9IiNGRkQ0MDAiLz4KPHBhdGggZD0iTTk3LjA4OTMgMjE5LjkyMkw5OS42NiAyMjQuODE2Qzk5LjY2IDIyNC44MTYgOTguNzA2NCAyMjguMTg4IDk1LjA3MyAyMjguMDQ0QzkxLjQ0NDIgMjI3Ljg5MSA4OC43MTIxIDIyOC41NDggODguMzExNiAyMzAuOTU3Qzg4LjMxMTYgMjMwLjk1NyA4NS4wODMzIDIyOC4zOTQgODYuMTUzMyAyMjUuNjE4Qzg3LjIyNzggMjIyLjgzMiA5MC41OTY3IDIyNC44NzcgOTMuNjI0NyAyMjMuMTc5Qzk2LjY1MjcgMjIxLjQ4IDk3LjA4OTMgMjE5LjkyMiA5Ny4wODkzIDIxOS45MjJaIiBmaWxsPSIjRkRFNURFIi8+CjxwYXRoIG9wYWNpdHk9IjAuNCIgZD0iTTM2NC4zNTQgMTc0Ljc0N0wzNjEuODE1IDE3OS42ODJDMzYxLjgxNSAxNzkuNjgyIDM1OC40ODkgMTgwLjg5MyAzNTYuNTA2IDE3Ny44OUMzNTQuNTIzIDE3NC44ODYgMzUyLjQxMyAxNzMuMDc0IDM1MC4xOTkgMTc0LjE2NUMzNTAuMTk5IDE3NC4xNjUgMzUwLjQ0MSAxNzAuMDY5IDM1My4zNDQgMTY5LjMwMUMzNTYuMjU3IDE2OC41MyAzNTYuNTM0IDE3Mi40MzQgMzU5LjY3MSAxNzMuODczQzM2Mi44MTkgMTc1LjMxMSAzNjQuMzU0IDE3NC43NDcgMzY0LjM1NCAxNzQuNzQ3WiIgZmlsbD0iI0Y2RjVGMyIvPgo8cGF0aCBkPSJNMTQ2LjI1MyAxMTQuNDM3TDE0My43MTMgMTE5LjM3MUMxNDMuNzEzIDExOS4zNzEgMTQwLjM4OCAxMjAuNTgyIDEzOC40MDQgMTE3LjU3OUMxMzYuNDMyIDExNC41NzMgMTM0LjMxMiAxMTIuNzY0IDEzMi4wOTggMTEzLjg1NEMxMzIuMDk4IDExMy44NTQgMTMyLjM0IDEwOS43NTggMTM1LjI0MiAxMDguOTlDMTM4LjE1NiAxMDguMjIgMTM4LjQyMiAxMTIuMTI2IDE0MS41NyAxMTMuNTYzQzE0NC43MTggMTE1IDE0Ni4yNTMgMTE0LjQzNyAxNDYuMjUzIDExNC40MzdaIiBmaWxsPSIjRjhEQTNBIi8+CjxwYXRoIGQ9Ik0zNS4zNzY0IDU4LjYwNzhMMzcuNzgyNCA2My42MDlDMzcuNzgyNCA2My42MDkgMzYuNzQzNSA2Ni45OTI0IDMzLjE1MTcgNjYuNzYzOUMyOS41NjQ3IDY2LjUyNTQgMjYuODQyNCA2Ny4xMjYxIDI2LjM3OCA2OS41NDk5QzI2LjM3OCA2OS41NDk5IDIzLjI1NTQgNjYuODg3NiAyNC4zOTI3IDY0LjEwODdDMjUuNTM0OCA2MS4zMTk4IDI4LjgxMTEgNjMuNDYyNSAzMS44NTU3IDYxLjgxNzNDMzQuOTAwMyA2MC4xNzIgMzUuMzc2NCA1OC42MDc4IDM1LjM3NjQgNTguNjA3OFoiIGZpbGw9IiNGOERBM0EiLz4KPHBhdGggZD0iTTM1OS43MSAxMDYuNjYxTDM2My43MjQgMTAyLjgwMUMzNjMuNzI0IDEwMi44MDEgMzY3LjI2MiAxMDIuNzE0IDM2OC4xNDggMTA2LjE5NEMzNjkuMDMzIDEwOS42NzMgMzcwLjQzOSAxMTIuMDYzIDM3Mi44ODQgMTExLjczM0MzNzIuODg0IDExMS43MzMgMzcxLjMyNSAxMTUuNTQyIDM2OC4zMiAxMTUuMzQ0QzM2NS4zMTYgMTE1LjE0NSAzNjYuMzM0IDExMS4zNTQgMzYzLjg0MiAxMDguOTlDMzYxLjM1IDEwNi42MjYgMzU5LjcxIDEwNi42NjEgMzU5LjcxIDEwNi42NjFaIiBmaWxsPSIjRkZENDAwIi8+CjxlbGxpcHNlIG9wYWNpdHk9IjAuNiIgY3g9IjI1NS40NTgiIGN5PSIyNzguNTMzIiByeD0iMzAuNzU4MiIgcnk9IjMuOTg3MTgiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMTIiLz4KPHBhdGggZD0iTTI3OS4wMTYgMjc2LjQ3NUwyNzYuODY0IDIxMC43NTFMMjMxLjUzNSAyNjUuNjY1QzIzMS41MzUgMjY1LjY2NSAyNDkuMTMxIDI4Ny4yODYgMjc5LjAxNiAyNzYuNDc1WiIgZmlsbD0iIzEyMUU2QSIvPgo8cGF0aCBkPSJNMjY0LjE5IDI0Ny44NjRDMjY0LjE5IDI1MC44MDYgMjYxLjgwNCAyNTMuMTkyIDI1OC44NjEgMjUzLjE5MkMyNTUuOTE4IDI1My4xOTIgMjUzLjUzMiAyNTAuODA2IDI1My41MzIgMjQ3Ljg2NEMyNTMuNTMyIDI0NC45MjEgMjU1LjkxOCAyNDIuNTM1IDI1OC44NjEgMjQyLjUzNUMyNjEuODA0IDI0Mi41MzUgMjY0LjE5IDI0NC45MjEgMjY0LjE5IDI0Ny44NjRaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMuMzY4NTUiLz4KPHBhdGggZD0iTTI3Ny43MjUgMjM5LjExN0MyNzIuNzA0IDIzOS4zNTYgMjY4LjQ5NiAyMzUuNDMzIDI2OC4yNTcgMjMwLjQxMUMyNjguMDE4IDIyNS4zODggMjcyLjA4MiAyMjIuMzgyIDI3Ny4xMDIgMjIyLjE0M0wyNzcuNzI1IDIzOS4xMTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjU3LjgzNCAyNzIuODg4QzI2MC41MjcgMjcyLjg4OCAyNjIuNzExIDI3MC43MDMgMjYyLjcxMSAyNjguMDA4QzI2Mi43MTEgMjY1LjMxNCAyNjAuNTI3IDI2My4xMjkgMjU3LjgzNCAyNjMuMTI5QzI1NS4xNCAyNjMuMTI5IDI1Mi45NTcgMjY1LjMxNCAyNTIuOTU3IDI2OC4wMDhDMjUyLjk1NyAyNzAuNzAzIDI1NS4xNCAyNzIuODg4IDI1Ny44MzQgMjcyLjg4OFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iNTUzLjY0OCIgaGVpZ2h0PSIzMTEiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMikiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iNTUzLjY0OCIgaGVpZ2h0PSIzMTEiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMikiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMl8yMTU6MzI3NjEiPgo8cmVjdCB3aWR0aD0iMjUuODYyNCIgaGVpZ2h0PSI2OS43MTAzIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk4LjQ5OCAxNjkuODU0KSByb3RhdGUoLTE1LjU4NjQpIi8+CjwvY2xpcFBhdGg+CjxjbGlwUGF0aCBpZD0iY2xpcDNfMjE1OjMyNzYxIj4KPHJlY3Qgd2lkdGg9IjQzLjMxNDgiIGhlaWdodD0iMTEyLjE0NCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyMC4wNjYgOTQuNTUzMSkgcm90YXRlKDMxLjAwOTEpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==`; diff --git a/src/icons/CreateChat.tsx b/src/icons/CreateChat.tsx index b5ba8da01..ef4f32f7b 100644 --- a/src/icons/CreateChat.tsx +++ b/src/icons/CreateChat.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCommentAltPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const CreateChat = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCommentAltPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default CreateChat; diff --git a/src/icons/Dots.tsx b/src/icons/Dots.tsx index f6b37047c..3e88d4a83 100644 --- a/src/icons/Dots.tsx +++ b/src/icons/Dots.tsx @@ -1,11 +1,11 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => ( +const Dots = (props: React.SVGProps) => ( ); -export default Svg; +export default Dots; export const backgroundImage = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' viewBox='0 0 25 25'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23F3F0EA' opacity='.1'/%3E%3C/svg%3E")`; diff --git a/src/icons/EllipsisH.tsx b/src/icons/EllipsisH.tsx index 6db46de29..4724cde15 100644 --- a/src/icons/EllipsisH.tsx +++ b/src/icons/EllipsisH.tsx @@ -1,21 +1,20 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const EllipsisH = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default EllipsisH; diff --git a/src/icons/EllipsisV.tsx b/src/icons/EllipsisV.tsx index 18527c9aa..c8f88bbd0 100644 --- a/src/icons/EllipsisV.tsx +++ b/src/icons/EllipsisV.tsx @@ -1,8 +1,19 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faEllipsisV })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const EllipsisV = (props: React.SVGProps) => ( + + + +); + +export default EllipsisV; diff --git a/src/icons/EmptyFeed.tsx b/src/icons/EmptyFeed.tsx index 111c2a234..7c30b1ca3 100644 --- a/src/icons/EmptyFeed.tsx +++ b/src/icons/EmptyFeed.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Svg = (props: React.SVGProps) => { +const EmptyFeed = ({ color = '#A5A9B5', ...props }: React.SVGProps) => { return ( ) => { > ); }; -export default Svg; +export default EmptyFeed; diff --git a/src/icons/EmptyImageGallery.tsx b/src/icons/EmptyImageGallery.tsx index 224caf896..694388856 100644 --- a/src/icons/EmptyImageGallery.tsx +++ b/src/icons/EmptyImageGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyImageGallery = (props: React.SVGProps) => { return ( ) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; + +export default EmptyImageGallery; diff --git a/src/icons/EmptyLivestreamGallery.tsx b/src/icons/EmptyLivestreamGallery.tsx index 5021ca786..bf1b0263d 100644 --- a/src/icons/EmptyLivestreamGallery.tsx +++ b/src/icons/EmptyLivestreamGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyLivestreamGallery = (props: React.SVGProps) => { return ( ) => { ); }; + +export default EmptyLivestreamGallery; \ No newline at end of file diff --git a/src/icons/EmptyVideoGallery.tsx b/src/icons/EmptyVideoGallery.tsx index 04bf20618..9ae086fbf 100644 --- a/src/icons/EmptyVideoGallery.tsx +++ b/src/icons/EmptyVideoGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export default (props: React.SVGProps) => { +const EmptyVideoGallery = (props: React.SVGProps) => { return ( ) => { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); }; + +export default EmptyVideoGallery; \ No newline at end of file diff --git a/src/icons/ExclamationCircle.tsx b/src/icons/ExclamationCircle.tsx index 031e8803e..cf1bffd02 100644 --- a/src/icons/ExclamationCircle.tsx +++ b/src/icons/ExclamationCircle.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faExclamationCircle } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const ExclamationCircle = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faExclamationCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default ExclamationCircle; diff --git a/src/icons/FileAttachment.tsx b/src/icons/FileAttachment.tsx index c21ce66db..1cbd0db75 100644 --- a/src/icons/FileAttachment.tsx +++ b/src/icons/FileAttachment.tsx @@ -1,8 +1,28 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPaperclip } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPaperclip })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props : React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Globe.tsx b/src/icons/Globe.tsx index 600874f6d..ffaffa37d 100644 --- a/src/icons/Globe.tsx +++ b/src/icons/Globe.tsx @@ -1,9 +1,33 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faGlobeAfrica } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props : React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faGlobeAfrica })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/ImageAttachment.tsx b/src/icons/ImageAttachment.tsx index fe3a632dc..35f82fe14 100644 --- a/src/icons/ImageAttachment.tsx +++ b/src/icons/ImageAttachment.tsx @@ -1,8 +1,22 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faImage } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faImage })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props : React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Lock.tsx b/src/icons/Lock.tsx index 275bea9ae..9ac56e253 100644 --- a/src/icons/Lock.tsx +++ b/src/icons/Lock.tsx @@ -1,8 +1,21 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faLockAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faLockAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Message.tsx b/src/icons/Message.tsx index 39fa0e08e..64b1803b9 100644 --- a/src/icons/Message.tsx +++ b/src/icons/Message.tsx @@ -1,9 +1,24 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faCommentsAlt } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCommentsAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/MinusCircle.tsx b/src/icons/MinusCircle.tsx index 55ea7d547..c30bed62e 100644 --- a/src/icons/MinusCircle.tsx +++ b/src/icons/MinusCircle.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faMinusCircle } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faMinusCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Newspaper.tsx b/src/icons/Newspaper.tsx index 1f20c5a25..c1ba558a7 100644 --- a/src/icons/Newspaper.tsx +++ b/src/icons/Newspaper.tsx @@ -1,9 +1,28 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faNewspaper } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faNewspaper })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; \ No newline at end of file diff --git a/src/icons/NewspaperLight.tsx b/src/icons/NewspaperLight.tsx index a2d4c3eb9..9ee72a1f7 100644 --- a/src/icons/NewspaperLight.tsx +++ b/src/icons/NewspaperLight.tsx @@ -1,9 +1,28 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faNewspaper } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faNewspaper })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; \ No newline at end of file diff --git a/src/icons/Pencil.tsx b/src/icons/Pencil.tsx index 60008a38b..ec5f16baf 100644 --- a/src/icons/Pencil.tsx +++ b/src/icons/Pencil.tsx @@ -1,9 +1,25 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPencil } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPencil })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/PlayCircle.tsx b/src/icons/PlayCircle.tsx index efe5547c2..99d1afd64 100644 --- a/src/icons/PlayCircle.tsx +++ b/src/icons/PlayCircle.tsx @@ -1,8 +1,22 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPlayCircle } from '@fortawesome/pro-light-svg-icons'; -import { ReactNode } from 'react'; +import React from 'react'; -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPlayCircle })` - font-size: ${({ height = 'inherit' }) => height}; -`; +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/icons/Plus.tsx b/src/icons/Plus.tsx index c6ba93173..42e0edde2 100644 --- a/src/icons/Plus.tsx +++ b/src/icons/Plus.tsx @@ -1,9 +1,20 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Remove.tsx b/src/icons/Remove.tsx index e090bcc62..5be7bab12 100644 --- a/src/icons/Remove.tsx +++ b/src/icons/Remove.tsx @@ -1,11 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faTimes } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faTimes })` - && { - font-size: ${({ height = 'inherit' }) => height}; - } -`; +export default Svg; diff --git a/src/icons/Reply.tsx b/src/icons/Reply.tsx index ff14db5e9..566605c97 100644 --- a/src/icons/Reply.tsx +++ b/src/icons/Reply.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faShare } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faShare })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Save.tsx b/src/icons/Save.tsx index 97d981fda..17921717e 100644 --- a/src/icons/Save.tsx +++ b/src/icons/Save.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSave } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSave })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Search.tsx b/src/icons/Search.tsx index 4c4019a1d..b8666acbc 100644 --- a/src/icons/Search.tsx +++ b/src/icons/Search.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faSearch } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faSearch })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SendMessage.tsx b/src/icons/SendMessage.tsx index 3d99dd222..d7f9d2fb0 100644 --- a/src/icons/SendMessage.tsx +++ b/src/icons/SendMessage.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faArrowCircleUp } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowCircleUp })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Shield.tsx b/src/icons/Shield.tsx index fee54deb1..82382cf2b 100644 --- a/src/icons/Shield.tsx +++ b/src/icons/Shield.tsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome'; -import { faShieldAlt } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faShieldAlt })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SolarSystem.tsx b/src/icons/SolarSystem.tsx index 051f4fe10..7c07d4473 100644 --- a/src/icons/SolarSystem.tsx +++ b/src/icons/SolarSystem.tsx @@ -1,9 +1,16 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSolarSystem } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSolarSystem })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/SortDown.tsx b/src/icons/SortDown.tsx index e4738fdcd..5bd003bea 100644 --- a/src/icons/SortDown.tsx +++ b/src/icons/SortDown.tsx @@ -1,9 +1,19 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSortDown } from '@fortawesome/pro-solid-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faSortDown })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Trash.tsx b/src/icons/Trash.tsx index 2c6a29470..87a43eb7f 100644 --- a/src/icons/Trash.tsx +++ b/src/icons/Trash.tsx @@ -1,21 +1,23 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const Svg = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default Svg; diff --git a/src/icons/UserPlus.tsx b/src/icons/UserPlus.tsx index c560af456..c2a4fe925 100644 --- a/src/icons/UserPlus.tsx +++ b/src/icons/UserPlus.tsx @@ -1,9 +1,25 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUserPlus } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faUserPlus })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/UserRegular.tsx b/src/icons/UserRegular.tsx index 47ee73c47..91149d27e 100644 --- a/src/icons/UserRegular.tsx +++ b/src/icons/UserRegular.tsx @@ -1,9 +1,23 @@ -import styled from 'styled-components'; +import React from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUser } from '@fortawesome/pro-regular-svg-icons'; -import { ReactNode } from 'react'; +const Svg = (props: React.SVGProps) => ( + + + +); -export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faUser })` - font-size: ${({ height = 'inherit' }) => height}; -`; +export default Svg; diff --git a/src/icons/Verified.tsx b/src/icons/Verified.tsx index 6dcd489dd..d138f7385 100644 --- a/src/icons/Verified.tsx +++ b/src/icons/Verified.tsx @@ -1,21 +1,26 @@ import React from 'react'; -function Icon(props: React.SVGProps) { - return ( - - - - ); -} +const Svg = (props: React.SVGProps) => ( + + + +); -export default Icon; +export default Svg; diff --git a/src/icons/files/Csv.tsx b/src/icons/files/Csv.tsx index 861c0529a..cf86669b5 100644 --- a/src/icons/files/Csv.tsx +++ b/src/icons/files/Csv.tsx @@ -1,7 +1,7 @@ import React from 'react'; import File from './File'; -const Svg = ({ color = '#00BED4', ...props }) => ( +const Csv = ({ color = '#00BED4', ...props }: React.SVGProps) => ( ( ); -export default Svg; +export default Csv; diff --git a/src/icons/files/Default.tsx b/src/icons/files/Default.tsx index d2439881d..40d3564b0 100644 --- a/src/icons/files/Default.tsx +++ b/src/icons/files/Default.tsx @@ -1,7 +1,7 @@ import React from 'react'; import File from './File'; -const Svg = ({ color = '#999', ...props }) => ( +const Default = ({ color = '#999', ...props }: React.SVGProps) => ( ( ); -export default Svg; +export default Default; diff --git a/src/icons/files/Doc.tsx b/src/icons/files/Doc.tsx index 04c3b4ea3..3c45b3d60 100644 --- a/src/icons/files/Doc.tsx +++ b/src/icons/files/Doc.tsx @@ -1,7 +1,7 @@ import React from 'react'; import File from './File'; -const Svg = ({ color = '#0E86FE', ...props }) => ( +const Doc = ({ color = '#0E86FE', ...props }: React.SVGProps) => ( ( ); -export default Svg; +export default Doc; diff --git a/src/icons/files/Exe.tsx b/src/icons/files/Exe.tsx index e9dc60bbe..bc43cd7ae 100644 --- a/src/icons/files/Exe.tsx +++ b/src/icons/files/Exe.tsx @@ -1,7 +1,7 @@ import React from 'react'; import File from './File'; -const Svg = ({ color = '#5C6070', ...props }) => ( +const Exe = ({ color = '#5C6070', ...props }: React.SVGProps) => ( ( ); -export default Svg; +export default Exe; diff --git a/src/icons/files/File.tsx b/src/icons/files/File.tsx index f1712173b..0423df8f2 100644 --- a/src/icons/files/File.tsx +++ b/src/icons/files/File.tsx @@ -6,7 +6,7 @@ interface SvgProps { children?: React.ReactNode; } -const Svg = ({ bg = '#fff', fg = '#cacaca', children, ...props }: SvgProps) => ( +const File = ({ bg = '#fff', fg = '#cacaca', children, ...props }: SvgProps) => ( ( ); -export default Svg; +export default File; diff --git a/src/icons/ui.stories.jsx b/src/icons/ui.stories.jsx index 7fc10a956..364996f08 100644 --- a/src/icons/ui.stories.jsx +++ b/src/icons/ui.stories.jsx @@ -5,6 +5,7 @@ export default { title: 'Assets/Icons', }; +export const Bars = () => ; export const Category = () => ; export const Community = () => ; export const CommunityAlt = () => ; diff --git a/src/social/components/Comment/styles.tsx b/src/social/components/Comment/styles.tsx index 591c236e7..c432d9b23 100644 --- a/src/social/components/Comment/styles.tsx +++ b/src/social/components/Comment/styles.tsx @@ -143,9 +143,10 @@ export const DeletedReplyContainer = styled.div` padding: 4px 8px 2px 0px; `; -export const DeletedIcon = styled(MinusCircle)<{ icon?: ReactNode }>` - font-size: 18px; -`; +export const DeletedIcon = styled(MinusCircle).attrs<{ icon?: ReactNode }>({ + width: 18, + height: 18, +})``; export const IconContainer = styled.div` display: flex; @@ -165,8 +166,7 @@ export const Text = styled.span` font-size: 14px; `; -export const ReplyIcon = styled(Reply)<{ icon?: ReactNode }>` - font-size: 16px; +export const ReplyIcon = styled(Reply).attrs<{ icon?: ReactNode }>({ width: 16, height: 16 })` margin-right: 5px; `; diff --git a/src/social/components/CommunityForm/AvatarUploader.tsx b/src/social/components/CommunityForm/AvatarUploader.tsx index 5844da4aa..c5862c7cc 100644 --- a/src/social/components/CommunityForm/AvatarUploader.tsx +++ b/src/social/components/CommunityForm/AvatarUploader.tsx @@ -10,10 +10,12 @@ import CameraIcon from '~/icons/Camera'; import useFile from '~/core/hooks/useFile'; import useFileUpload, { getUpdatedTime, isAmityFile } from '~/core/hooks/useFileUpload'; -const StyledCameraIcon = styled(CameraIcon)<{ icon?: ReactNode }>` - font-size: 20px; +const StyledCameraIcon = styled(CameraIcon).attrs({ + height: 20, + width: 20, +})` z-index: 3; - color: #fff; + fill: #fff; `; const AvatarUploadContainer = styled.div` diff --git a/src/social/components/CommunityForm/styles.tsx b/src/social/components/CommunityForm/styles.tsx index d4943e6aa..b1f4c9ade 100644 --- a/src/social/components/CommunityForm/styles.tsx +++ b/src/social/components/CommunityForm/styles.tsx @@ -21,16 +21,11 @@ export const InputPlaceholder = styled.span` color: ${({ theme }) => theme.palette.base.shade1}; `; -export const WorldIcon = styled(Globe)<{ icon?: ReactNode }>` - font-size: 20px; -`; +export const WorldIcon = styled(Globe).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })``; -export const LockIcon = styled(Lock)<{ icon?: ReactNode }>` - font-size: 20px; -`; +export const LockIcon = styled(Lock).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })``; -export const CloseIcon = styled(Close)<{ icon?: ReactNode }>` - font-size: 12px; +export const CloseIcon = styled(Close).attrs({ width: 12, height: 12 })` padding: 5px 12px; color: ${({ theme }) => theme.palette.base.shade1}; `; @@ -261,8 +256,7 @@ export const TextField = styled.input` } `; -export const SelectIcon = styled(ChevronDown)` - font-size: 16px; +export const SelectIcon = styled(ChevronDown).attrs({ width: 16, height: 16 })` margin-left: auto; `; diff --git a/src/social/components/CommunityInfo/styles.tsx b/src/social/components/CommunityInfo/styles.tsx index ce48d0cfd..5f3ab2dcb 100644 --- a/src/social/components/CommunityInfo/styles.tsx +++ b/src/social/components/CommunityInfo/styles.tsx @@ -6,13 +6,11 @@ import { PrimaryButton } from '~/core/components/Button'; import { Plus, Pencil } from '~/icons'; import SocialCommunityName from '~/social/components/community/Name'; -export const PlusIcon = styled(Plus)<{ icon?: ReactNode }>` - font-size: 15px; +export const PlusIcon = styled(Plus).attrs<{ icon?: ReactNode }>({ width: 15, height: 15 })` margin-right: 8px; `; -export const PencilIcon = styled(Pencil)` - font-size: 15px; +export const PencilIcon = styled(Pencil).attrs<{ icon?: ReactNode }>({ width: 15, height: 15 })` margin-right: 4px; `; diff --git a/src/social/components/EmptyFeed/index.tsx b/src/social/components/EmptyFeed/index.tsx index ba59e4898..433c41e8d 100644 --- a/src/social/components/EmptyFeed/index.tsx +++ b/src/social/components/EmptyFeed/index.tsx @@ -8,8 +8,7 @@ import Button from '~/core/components/Button'; import { NewspaperLight, Search } from '~/icons'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; -const FeedIcon = styled(NewspaperLight)<{ icon?: ReactNode }>` - font-size: 48px; +const FeedIcon = styled(NewspaperLight).attrs<{ icon?: ReactNode }>({ width: 48, height: 48 })` margin: 10px; `; @@ -18,8 +17,7 @@ const ExploreLink = styled(Button)` margin-top: 8px; `; -const SearchIcon = styled(Search)<{ icon?: ReactNode }>` - font-size: 16px; +const SearchIcon = styled(Search).attrs<{ icon?: ReactNode }>({ width: 16, height: 16 })` margin-right: 6px; `; diff --git a/src/social/components/EngagementBar/styles.tsx b/src/social/components/EngagementBar/styles.tsx index be1955dd6..969a01987 100644 --- a/src/social/components/EngagementBar/styles.tsx +++ b/src/social/components/EngagementBar/styles.tsx @@ -20,9 +20,8 @@ export const InteractionBar = styled.div` border-bottom: 1px solid #e3e4e8; `; -export const CommentIcon = styled(Comment)<{ icon?: ReactNode }>` +export const CommentIcon = styled(Comment).attrs({ width: 16, height: 16 })` position: relative; - font-size: 16px; margin-right: 5px; `; diff --git a/src/social/components/Feed/styles.tsx b/src/social/components/Feed/styles.tsx index 86ba22d43..804187753 100644 --- a/src/social/components/Feed/styles.tsx +++ b/src/social/components/Feed/styles.tsx @@ -44,9 +44,8 @@ export const TextContainer = styled.div` align-items: center; `; -export const LockIcon = styled(Lock)<{ icon?: ReactNode }>` - font-size: 40px; - color: ${({ theme }) => theme.palette.base.shade2}; +export const LockIcon = styled(Lock).attrs<{ icon?: ReactNode }>({ width: 40, height: 40 })` + fill: ${({ theme }) => theme.palette.base.shade2}; `; export const PrivateFeedTitle = styled.div` diff --git a/src/social/components/ImageGallery/styles.tsx b/src/social/components/ImageGallery/styles.tsx index f9da7c739..002f570ff 100644 --- a/src/social/components/ImageGallery/styles.tsx +++ b/src/social/components/ImageGallery/styles.tsx @@ -52,21 +52,18 @@ export const Counter = styled.div` ${({ theme }) => theme.typography.headline} `; -export const CloseIcon = styled(Close)` +export const CloseIcon = styled(Close).attrs({ width: 24, height: 24 })` position: absolute; top: 60px; right: 60px; - font-size: 24px; cursor: pointer; `; -export const RightIcon = styled(ChevronRight)` - font-size: 24px; +export const RightIcon = styled(ChevronRight).attrs({ height: 24 })` cursor: pointer; justify-self: right; `; -export const LeftIcon = styled(ChevronLeft)` - font-size: 24px; +export const LeftIcon = styled(ChevronLeft).attrs({ height: 24 })` cursor: pointer; `; diff --git a/src/social/components/Images/styles.tsx b/src/social/components/Images/styles.tsx index 568fcebc6..c527f6a95 100644 --- a/src/social/components/Images/styles.tsx +++ b/src/social/components/Images/styles.tsx @@ -18,9 +18,8 @@ export const CircleButton = styled.button` border: none; `; -export const CloseIcon = styled(Close)` - color: #fff; - font-size: 18px; +export const CloseIcon = styled(Close).attrs({ width: 18, height: 18 })` + fill: #fff; `; export const ImageContainer = styled.div<{ editing?: Boolean }>` @@ -151,14 +150,16 @@ export const FileInput = styled.input.attrs({ type: 'file' })` export const Label = styled.label<{ disabled?: Boolean }>``; -export const ImageIcon = styled(ImageAttachment)<{ disabled?: Boolean; icon?: ReactNode }>` - font-size: 18px; +export const ImageIcon = styled(ImageAttachment).attrs<{ disabled?: Boolean; icon?: ReactNode }>({ + width: 18, + height: 18, +})` cursor: pointer; ${({ disabled, theme }) => disabled && css` - color: ${theme.palette.base.shade3}; + fill: ${theme.palette.base.shade3}; cursor: default; `} `; diff --git a/src/social/components/LoadMore/styles.jsx b/src/social/components/LoadMore/styles.jsx index 821c0dd9b..8d50f749b 100644 --- a/src/social/components/LoadMore/styles.jsx +++ b/src/social/components/LoadMore/styles.jsx @@ -36,7 +36,6 @@ export const LoadMoreButton = styled(Button)` } `; -export const ShevronDownIcon = styled(ChevronDown)` - font-size: 16px; +export const ShevronDownIcon = styled(ChevronDown).attrs({ height: 14, width: 14 })` margin-left: 5px; `; diff --git a/src/social/components/LoadMoreWrapper/styles.tsx b/src/social/components/LoadMoreWrapper/styles.tsx index 821c0dd9b..e4c5fc015 100644 --- a/src/social/components/LoadMoreWrapper/styles.tsx +++ b/src/social/components/LoadMoreWrapper/styles.tsx @@ -36,7 +36,6 @@ export const LoadMoreButton = styled(Button)` } `; -export const ShevronDownIcon = styled(ChevronDown)` - font-size: 16px; +export const ShevronDownIcon = styled(ChevronDown).attrs({ width: 14, height: 14 })` margin-left: 5px; `; diff --git a/src/social/components/PrivateFeed/styles.tsx b/src/social/components/PrivateFeed/styles.tsx index f039913cc..95f51ec51 100644 --- a/src/social/components/PrivateFeed/styles.tsx +++ b/src/social/components/PrivateFeed/styles.tsx @@ -18,9 +18,8 @@ export const LockIconContainer = styled.div` margin-bottom: 12px; `; -export const LockIcon = styled(Lock)<{ icon?: ReactNode }>` - font-size: 40px; - color: ${({ theme }) => theme.palette.base.shade2}; +export const LockIcon = styled(Lock).attrs<{ icon?: ReactNode }>({ width: 40, height: 40 })` + fill: ${({ theme }) => theme.palette.base.shade2}; `; export const PrivateFeedTitle = styled.div` diff --git a/src/social/components/ProfileSettings/styles.tsx b/src/social/components/ProfileSettings/styles.tsx index bce2eeb39..45ca85c26 100644 --- a/src/social/components/ProfileSettings/styles.tsx +++ b/src/social/components/ProfileSettings/styles.tsx @@ -85,7 +85,6 @@ export const ExtraActionButton = styled(Button)` width: 100%; `; -export const PlusIcon = styled(Plus)` - font-size: 15px; +export const PlusIcon = styled(Plus).attrs({ width: 15, height: 15 })` margin-right: 8px; `; diff --git a/src/social/components/SideSectionCommunity/index.tsx b/src/social/components/SideSectionCommunity/index.tsx index 1e03dce08..acb034d99 100644 --- a/src/social/components/SideSectionCommunity/index.tsx +++ b/src/social/components/SideSectionCommunity/index.tsx @@ -8,13 +8,9 @@ import SideMenuSection from '~/core/components/SideMenuSection'; import { useNavigation } from '~/social/providers/NavigationProvider'; import SideMenuActionItem from '~/core/components/SideMenuActionItem'; -export const NewsIcon = styled(Newspaper)<{ icon?: ReactNode }>` - font-size: 20px; -`; +export const NewsIcon = styled(Newspaper).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })``; -export const SearchIcon = styled(Search)<{ icon?: ReactNode }>` - font-size: 20px; -`; +export const SearchIcon = styled(Search).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })``; interface SideSectionCommunityProps { shouldHideExplore?: boolean; diff --git a/src/social/components/SocialSearch/styles.tsx b/src/social/components/SocialSearch/styles.tsx index e9d885ce7..4cbadf1a1 100644 --- a/src/social/components/SocialSearch/styles.tsx +++ b/src/social/components/SocialSearch/styles.tsx @@ -9,9 +9,8 @@ export const SearchIconContainer = styled.div` padding-left: 20px; `; -export const SearchIcon = styled(Search)` - color: ${({ theme }) => theme.palette.base.shade2}; - font-size: 16px; +export const SearchIcon = styled(Search).attrs({ width: 16, height: 16 })` + fill: ${({ theme }) => theme.palette.base.shade2}; `; export const SocialSearchContainer = styled.div<{ sticky?: boolean }>` diff --git a/src/social/components/UserInfo/styles.tsx b/src/social/components/UserInfo/styles.tsx index 6b2d55552..dd0f24f60 100644 --- a/src/social/components/UserInfo/styles.tsx +++ b/src/social/components/UserInfo/styles.tsx @@ -4,8 +4,7 @@ import { Pencil, Pending, Plus } from '~/icons'; import UIOptionMenu from '~/core/components/OptionMenu'; import { ReactNode } from 'react'; -export const PlusIcon = styled(Plus)<{ icon?: ReactNode }>` - font-size: 15px; +export const PlusIcon = styled(Plus).attrs<{ icon?: ReactNode }>({ width: 15, height: 15 })` margin-right: 8px; `; @@ -17,8 +16,7 @@ export const PendingIconContainer = styled.div` export const PendingIcon = styled(Pending).attrs({ height: 30, width: 20 })``; -export const PencilIcon = styled(Pencil)` - font-size: 15px; +export const PencilIcon = styled(Pencil).attrs({ height: 15, width: 15 })` margin-right: 4px; `; diff --git a/src/social/components/category/CategoryChip/UICategoryChip.tsx b/src/social/components/category/CategoryChip/UICategoryChip.tsx index f6c788a95..82cfb75c6 100644 --- a/src/social/components/category/CategoryChip/UICategoryChip.tsx +++ b/src/social/components/category/CategoryChip/UICategoryChip.tsx @@ -1,10 +1,9 @@ import React, { useCallback } from 'react'; import Avatar from '~/core/components/Avatar'; -import { Close, Remove } from '~/icons'; import { backgroundImage as CategoryImage } from '~/icons/Category'; -import { Chip, Name, RoundButton } from './styles'; +import { Chip, Name, RoundButton, Close } from './styles'; interface UICategoryChipProps { categoryId?: string; diff --git a/src/social/components/category/CategoryChip/styles.tsx b/src/social/components/category/CategoryChip/styles.tsx index 6d0d1d165..f782fb6b8 100644 --- a/src/social/components/category/CategoryChip/styles.tsx +++ b/src/social/components/category/CategoryChip/styles.tsx @@ -19,9 +19,8 @@ export const Name = styled.span` margin: 0 0.5rem; `; -export const Close = styled(Remove)` - font-size: 12px; - color: ${({ theme }) => theme.palette.base.shade1}; +export const Close = styled(Remove).attrs({ width: 12, height: 12 })` + fill: ${({ theme }) => theme.palette.base.shade1}; `; export const RoundButton = styled(Button)` diff --git a/src/social/components/community/Name/styles.tsx b/src/social/components/community/Name/styles.tsx index 686d6b9f9..d60264246 100644 --- a/src/social/components/community/Name/styles.tsx +++ b/src/social/components/community/Name/styles.tsx @@ -2,15 +2,16 @@ import { ReactNode } from 'react'; import styled, { css } from 'styled-components'; import { Lock, Verified } from '~/icons'; -export const PrivateIcon = styled(Lock)<{ icon?: ReactNode }>` +export const PrivateIcon = styled(Lock).attrs<{ icon?: ReactNode }>({ width: 16, height: 16 })` margin-right: 8px; - font-size: 16px; `; -export const VerifiedIcon = styled(Verified)<{ icon?: ReactNode }>` +export const VerifiedIcon = styled(Verified).attrs<{ icon?: ReactNode }>({ + width: 16, + height: 16, +})` margin-left: 8px; - font-size: 16px; - color: #1253de; + fill: #1253de; `; // the padding-right is to avoid cutting too short when the name ends with an emoji (due to the flex + text-overflow combination) @@ -33,13 +34,4 @@ export const NameContainer = styled.div<{ `} ${isTitle && theme.typography.title} `} - - & > ${PrivateIcon}, - & > ${VerifiedIcon} { - ${({ isTitle }) => - isTitle && - css` - font-size: 18px; - `} - } `; diff --git a/src/social/components/post/Creator/Uploaders.tsx b/src/social/components/post/Creator/Uploaders.tsx index e172c024b..0ac6e78ea 100644 --- a/src/social/components/post/Creator/Uploaders.tsx +++ b/src/social/components/post/Creator/Uploaders.tsx @@ -40,7 +40,7 @@ const PostCreatorUploaders = ({ onChange={(files) => onChangeImages?.(files)} onMaxFilesLimit={onMaxFilesLimit} > - + onChangeFiles?.(files)} onMaxFilesLimit={onMaxFilesLimit} > - + ); diff --git a/src/social/components/post/Creator/components/PostTargetSelector.tsx b/src/social/components/post/Creator/components/PostTargetSelector.tsx index 81cded352..3b070028e 100644 --- a/src/social/components/post/Creator/components/PostTargetSelector.tsx +++ b/src/social/components/post/Creator/components/PostTargetSelector.tsx @@ -17,8 +17,7 @@ import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; const COMMUNITY_LIST_HEIGHT = 350; const SCROLL_THRESHOLD = 0.98; -const SelectIcon = styled(SortDown)<{ icon?: ReactNode }>` - font-size: 18px; +const SelectIcon = styled(SortDown).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` margin-right: 8px; margin-top: -4px; `; diff --git a/src/social/pages/CommunityEdit/styles.tsx b/src/social/pages/CommunityEdit/styles.tsx index cc5a604a0..b7073103c 100644 --- a/src/social/pages/CommunityEdit/styles.tsx +++ b/src/social/pages/CommunityEdit/styles.tsx @@ -39,7 +39,6 @@ export const ExtraActionButton = styled(Button)` width: 100%; `; -export const PlusIcon = styled(Plus)<{ icon?: ReactNode }>` - font-size: 15px; +export const PlusIcon = styled(Plus).attrs<{ icon?: ReactNode }>({ width: 15, height: 15 })` margin-right: 8px; `; From 0a3aaa2dc04b8e1a0d452d94efdb37108c1eea2f Mon Sep 17 00:00:00 2001 From: bmo-amity-bot Date: Tue, 27 Feb 2024 07:53:40 +0000 Subject: [PATCH 04/17] chore(release): 3.2.0 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b84e62b55..cfd46b352 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 3.2.0 (2024-02-27) + +### Features + +- ASC-19739 - remove font awesome pro ([#129](https://github.com/EkoCommunications/AmityUiKitWeb/issues/129)) ([f7b35bc](https://github.com/EkoCommunications/AmityUiKitWeb/commit/f7b35bcb75fab8457aa5fd41ed31c6ea8b03487f)), closes [#127](https://github.com/EkoCommunications/AmityUiKitWeb/issues/127) [#118](https://github.com/EkoCommunications/AmityUiKitWeb/issues/118) [#116](https://github.com/EkoCommunications/AmityUiKitWeb/issues/116) [#128](https://github.com/EkoCommunications/AmityUiKitWeb/issues/128) [#123](https://github.com/EkoCommunications/AmityUiKitWeb/issues/123) [#142](https://github.com/EkoCommunications/AmityUiKitWeb/issues/142) + ## 3.1.0 (2024-01-25) ### Bug Fixes diff --git a/package.json b/package.json index 0fa6b60fc..d7769bdc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "3.1.0", + "version": "3.2.0", "engines": { "node": ">=16", "pnpm": ">=8" From 4fdca5d6fc4646c07da92bb184da768ffffaf966 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 27 Feb 2024 16:35:02 +0700 Subject: [PATCH 05/17] fix: update prod workflow --- .github/workflows/production.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index b8aa1c7f4..0e51d7ce1 100644 --- a/.github/workflows/production.yaml +++ b/.github/workflows/production.yaml @@ -45,7 +45,7 @@ jobs: run: pnpm install - name: increase version (patch) - run: pnpm standard-version --yes + run: pnpm standard-version --yes --release-as patch if: github.event.inputs.release_as == 'patch' - name: increase version (minor) From 6f36d27f6c58f19c669719c054fb4f7017cb42f8 Mon Sep 17 00:00:00 2001 From: bmo-amity-bot Date: Tue, 27 Feb 2024 09:36:44 +0000 Subject: [PATCH 06/17] chore(release): 3.2.1 --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfd46b352..c7a6dbc94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 3.2.1 (2024-02-27) + ## 3.2.0 (2024-02-27) ### Features diff --git a/package.json b/package.json index d7769bdc3..a0646b71a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "3.2.0", + "version": "3.2.1", "engines": { "node": ">=16", "pnpm": ">=8" From 51f930c6d49ee892f361f12a1cf075b3bd30ae2c Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Fri, 1 Mar 2024 16:40:46 +0700 Subject: [PATCH 07/17] fix: ASC-20427 - add get authToken (#158) * fix: add getAuthToken prop * feat: support custom version --- .github/workflows/production.yaml | 7 +++++ src/core/providers/UiKitProvider/index.tsx | 35 ++++++++++++---------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index 0e51d7ce1..2a46f62ac 100644 --- a/.github/workflows/production.yaml +++ b/.github/workflows/production.yaml @@ -6,6 +6,9 @@ on: release_as: description: 'release as' required: true + custom_version: + description: 'custom version' + required: false jobs: publish: @@ -56,6 +59,10 @@ jobs: run: pnpm standard-version --yes --release-as major if: github.event.inputs.release_as == 'major' + - name: increase version (custom) + run: pnpm starndard-version --yes --release-as ${{ github.event.inputs.custom_version }} + if: github.event.inputs.release_as == 'custom' + - name: build run: pnpm run build diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index 54e72f126..c67f6507a 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -26,7 +26,6 @@ interface UiKitProviderProps { http?: string; mqtt?: string; }; - authToken?: string; userId: string; displayName: string; customComponents?: CustomComponentType; @@ -47,13 +46,13 @@ interface UiKitProviderProps { onConnectionStatusChange?: (state: Amity.SessionStates) => void; onConnected?: () => void; onDisconnected?: () => void; + getAuthToken?: () => Promise; } const UiKitProvider = ({ apiKey, apiRegion, apiEndpoint, - authToken, userId, displayName, customComponents = {}, @@ -64,6 +63,7 @@ const UiKitProvider = ({ actionHandlers, onConnectionStatusChange, onDisconnected, + getAuthToken, }: UiKitProviderProps) => { const [isConnected, setIsConnected] = useState(false); const [client, setClient] = useState(null); @@ -95,20 +95,25 @@ const UiKitProvider = ({ const currentIsConnected = ASCClient.isConnected(); if (!currentIsConnected) { - await ASCClient.login( - { userId, displayName, authToken }, - { - sessionWillRenewAccessToken(renewal) { - // secure mode - if (authToken) { - renewal.renewWithAuthToken(authToken); - return; - } - - renewal.renew(); - }, + let params: Amity.ConnectClientParams = { userId, displayName }; + + if (getAuthToken) { + const authToken = await getAuthToken(); + params = { ...params, authToken }; + } + + await ASCClient.login(params, { + async sessionWillRenewAccessToken(renewal: Amity.AccessTokenRenewal) { + // secure mode + if (getAuthToken) { + const authToken = await getAuthToken(); + renewal.renewWithAuthToken(authToken); + return; + } + + renewal.renew(); }, - ); + }); } setIsConnected(true); From 02875bb8d10f174525424d12a3d69d7d92bf8c98 Mon Sep 17 00:00:00 2001 From: ptchaya_p Date: Fri, 1 Mar 2024 16:50:38 +0700 Subject: [PATCH 08/17] fix: typo --- .github/workflows/production.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index 2a46f62ac..64ec4cb5f 100644 --- a/.github/workflows/production.yaml +++ b/.github/workflows/production.yaml @@ -60,7 +60,7 @@ jobs: if: github.event.inputs.release_as == 'major' - name: increase version (custom) - run: pnpm starndard-version --yes --release-as ${{ github.event.inputs.custom_version }} + run: pnpm standard-version --yes --release-as ${{ github.event.inputs.custom_version }} if: github.event.inputs.release_as == 'custom' - name: build From 85d0194f75f70921adc5e92b545a972122b204f1 Mon Sep 17 00:00:00 2001 From: bmo-amity-bot Date: Fri, 1 Mar 2024 09:51:50 +0000 Subject: [PATCH 09/17] chore(release): 3.2.3 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c7a6dbc94..c13a92c97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 3.2.3 (2024-03-01) + +### Bug Fixes + +- typo ([02875bb](https://github.com/EkoCommunications/AmityUiKitWeb/commit/02875bb8d10f174525424d12a3d69d7d92bf8c98)) + ### 3.2.1 (2024-02-27) ## 3.2.0 (2024-02-27) diff --git a/package.json b/package.json index a0646b71a..bc7f05686 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "3.2.1", + "version": "3.2.3", "engines": { "node": ">=16", "pnpm": ">=8" From ba4e3f044f08a3aef4d78910203350661cc59076 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 1 Mar 2024 14:15:54 +0700 Subject: [PATCH 10/17] fix: ASC-20601 - comment with blocked word should show noti (#154) * fix: comment with blocked word should show noti * fix: error const * fix: poll --- src/i18n/en.json | 4 +- src/social/components/Comment/index.tsx | 40 ++++++++++++------- .../components/CommentComposeBar/index.tsx | 3 +- src/social/components/EngagementBar/index.tsx | 40 ++++++++++++++----- src/social/components/post/Creator/index.tsx | 9 +++++ .../post/PollComposer/PollModal.tsx | 20 ++++++++-- src/social/constants.ts | 4 ++ src/social/hooks/useStory.ts | 15 +++++++ 8 files changed, 102 insertions(+), 33 deletions(-) create mode 100644 src/social/hooks/useStory.ts diff --git a/src/i18n/en.json b/src/i18n/en.json index 732286e3d..4ff40a169 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -370,5 +370,7 @@ "editChatMembersModal.confirm.title": "Leave without finishing?", "editChatMembersModal.confirm.content": "Your progress won’t be saved. Are you sure to leave this page now?", "editChatMembersModal.confirm.cancelText": "Continue editing", - "editChatMembersModal.confirm.okText": "Leave" + "editChatMembersModal.confirm.okText": "Leave", + + "notification.error.blockedWord": "Amity SDK (400308): Text contain blocked word" } diff --git a/src/social/components/Comment/index.tsx b/src/social/components/Comment/index.tsx index 250c7c803..f7e7b0e32 100644 --- a/src/social/components/Comment/index.tsx +++ b/src/social/components/Comment/index.tsx @@ -33,11 +33,11 @@ import useSDK from '~/core/hooks/useSDK'; import useUser from '~/core/hooks/useUser'; import useFile from '~/core/hooks/useFile'; import { CommentRepository } from '@amityco/ts-sdk'; -import useCommunity from '~/social/hooks/useCommunity'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useCommentFlaggedByMe from '~/social/hooks/useCommentFlaggedByMe'; import useCommentPermission from '~/social/hooks/useCommentPermission'; import useCommentSubscription from '~/social/hooks/useCommentSubscription'; +import { ERROR_RESPONSE } from '~/social/constants'; const REPLIES_PER_PAGE = 5; @@ -138,18 +138,30 @@ const Comment = ({ commentId, readonly }: CommentProps) => { ) => { if (!comment?.referenceType || !comment?.referenceId) return; - const { referenceType, referenceId } = comment; - - await CommentRepository.createComment({ - referenceType, - referenceId, - data: { - text: replyCommentText, - }, - parentId: commentId, - metadata, - mentionees, - }); + try { + const { referenceType, referenceId } = comment; + + await CommentRepository.createComment({ + referenceType, + referenceId, + data: { + text: replyCommentText, + }, + parentId: commentId, + metadata, + mentionees, + }); + setIsReplying(false); + setExpanded(true); + } catch (error: unknown) { + if (error instanceof Error) { + if (error.message === ERROR_RESPONSE.CONTAIN_BLOCKED_WORD) { + notification.error({ + content: , + }); + } + } + } }; const handleEditComment = async (text: string, mentionees: Mentionees, metadata: Metadata) => @@ -288,8 +300,6 @@ const Comment = ({ commentId, readonly }: CommentProps) => { userToReply={commentAuthor?.displayName} onSubmit={(replyText, mentionees, metadata) => { handleReplyToComment(replyText, mentionees, metadata); - setIsReplying(false); - setExpanded(true); }} /> )} diff --git a/src/social/components/CommentComposeBar/index.tsx b/src/social/components/CommentComposeBar/index.tsx index 1774944fd..b4352e691 100644 --- a/src/social/components/CommentComposeBar/index.tsx +++ b/src/social/components/CommentComposeBar/index.tsx @@ -42,7 +42,7 @@ const CommentComposeBar = ({ const { currentUserId } = useSDK(); const user = useUser(currentUserId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); - const { text, markup, mentions, mentionees, metadata, onChange, clearAll, queryMentionees } = + const { text, markup, mentions, mentionees, metadata, onChange, queryMentionees } = useSocialMention({ targetId: post?.targetId, targetType: post?.targetType, @@ -76,7 +76,6 @@ const CommentComposeBar = ({ } onSubmit?.(text, mentionees, metadata); - clearAll?.(); }; const isEmpty = text === ''; diff --git a/src/social/components/EngagementBar/index.tsx b/src/social/components/EngagementBar/index.tsx index 684013de2..d3d60446a 100644 --- a/src/social/components/EngagementBar/index.tsx +++ b/src/social/components/EngagementBar/index.tsx @@ -7,6 +7,10 @@ import { Mentionees, Metadata } from '~/helpers/utils'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useReactionSubscription from '~/social/hooks/useReactionSubscription'; import usePostSubscription from '~/social/hooks/usePostSubscription'; +import { notification } from '~/core/components/Notification'; +import { FormattedMessage } from 'react-intl'; +import useSocialMention from '~/social/hooks/useSocialMention'; +import { ERROR_RESPONSE } from '~/social/constants'; interface EngagementBarProps { postId: string; @@ -20,6 +24,10 @@ const EngagementBar = ({ postId, readonly = false }: EngagementBarProps) => { const hideComposeBar = () => setComposeBarDisplayed(false); const post = usePost(postId); + const { clearAll } = useSocialMention({ + targetType: post?.targetType, + targetId: post?.targetId, + }); usePostSubscription({ postId, @@ -39,17 +47,27 @@ const EngagementBar = ({ postId, readonly = false }: EngagementBarProps) => { mentionees: Mentionees, metadata: Metadata, ) => { - await CommentRepository.createComment({ - referenceType: 'post', - referenceId: postId, - data: { - text: commentText, - }, - mentionees, - metadata, - }); - - hideComposeBar(); + try { + await CommentRepository.createComment({ + referenceType: 'post', + referenceId: postId, + data: { + text: commentText, + }, + mentionees, + metadata, + }); + clearAll?.(); + hideComposeBar(); + } catch (error: unknown) { + if (error instanceof Error) { + if (error.message === ERROR_RESPONSE.CONTAIN_BLOCKED_WORD) { + notification.error({ + content: , + }); + } + } + } }; return ( diff --git a/src/social/components/post/Creator/index.tsx b/src/social/components/post/Creator/index.tsx index b2e83c768..e006c9aab 100644 --- a/src/social/components/post/Creator/index.tsx +++ b/src/social/components/post/Creator/index.tsx @@ -44,6 +44,7 @@ import { MAXIMUM_POST_CHARACTERS, MAXIMUM_POST_MENTIONEES } from './constants'; import useSDK from '~/core/hooks/useSDK'; import useSocialMention from '~/social/hooks/useSocialMention'; import useCommunityModeratorsCollection from '~/social/hooks/collections/useCommunityModeratorsCollection'; +import { ERROR_RESPONSE } from '~/social/constants'; const useTargetData = ({ targetId, @@ -227,6 +228,14 @@ const PostCreatorBar = ({ }); } } + } catch (error: unknown) { + if (error instanceof Error) { + if (error.message === ERROR_RESPONSE.CONTAIN_BLOCKED_WORD) { + notification.error({ + content: , + }); + } + } } finally { setIsCreating(false); } diff --git a/src/social/components/post/PollComposer/PollModal.tsx b/src/social/components/post/PollComposer/PollModal.tsx index ec9e2d620..819e61627 100644 --- a/src/social/components/post/PollComposer/PollModal.tsx +++ b/src/social/components/post/PollComposer/PollModal.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; -import { useIntl } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import { PollRepository } from '@amityco/ts-sdk'; import Modal from '~/core/components/Modal'; import { confirm } from '~/core/components/Confirm'; import PollComposer from '~/social/components/post/PollComposer'; +import { notification } from '~/core/components/Notification'; +import { ERROR_RESPONSE } from '~/social/constants'; interface PollModalProps { targetId?: string | null; @@ -27,9 +29,19 @@ const PollModal = ({ targetId, targetType, onClose, onCreatePoll }: PollModalPro mentionees: Amity.UserMention[], metadata: Record, ) => { - const createdPoll = await PollRepository.createPoll(data); - await onCreatePoll(createdPoll.data.pollId, data.question, mentionees, metadata); - onClose(); + try { + const createdPoll = await PollRepository.createPoll(data); + await onCreatePoll(createdPoll.data.pollId, data.question, mentionees, metadata); + onClose(); + } catch (error: unknown) { + if (error instanceof Error) { + if (error.message === ERROR_RESPONSE.CONTAIN_BLOCKED_WORD) { + notification.error({ + content: , + }); + } + } + } }; const closeConfirm = () => diff --git a/src/social/constants.ts b/src/social/constants.ts index 7737ee1a5..408b8f4d0 100644 --- a/src/social/constants.ts +++ b/src/social/constants.ts @@ -74,3 +74,7 @@ export const VideoQuality = Object.freeze({ }); export const MP4MimeType = 'video/mp4'; + +export const ERROR_RESPONSE = Object.freeze({ + CONTAIN_BLOCKED_WORD: 'Amity SDK (400308): Text contain blocked word', +}); diff --git a/src/social/hooks/useStory.ts b/src/social/hooks/useStory.ts new file mode 100644 index 000000000..84210ccae --- /dev/null +++ b/src/social/hooks/useStory.ts @@ -0,0 +1,15 @@ +import { StoryRepository } from '@amityco/ts-sdk'; + +import useLiveObject from '~/core/hooks/useLiveObject'; + +const useStory = (storyId: string | undefined) => { + const story = useLiveObject({ + fetcher: StoryRepository.getStoryByStoryId, + params: storyId, + shouldCall: () => !!storyId, + }); + + return story; +}; + +export default useStory; From 57a7daa62f375b3698d7cc37c499a91de2735e13 Mon Sep 17 00:00:00 2001 From: bmo-amity-bot Date: Mon, 11 Mar 2024 10:57:06 +0000 Subject: [PATCH 11/17] chore(release): 3.2.4 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c13a92c97..5ed181a9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### 3.2.4 (2024-03-11) + +### Bug Fixes + +- ASC-20601 - comment with blocked word should show noti ([#154](https://github.com/EkoCommunications/AmityUiKitWeb/issues/154)) ([ba4e3f0](https://github.com/EkoCommunications/AmityUiKitWeb/commit/ba4e3f044f08a3aef4d78910203350661cc59076)) + ### 3.2.3 (2024-03-01) ### Bug Fixes diff --git a/package.json b/package.json index bc7f05686..3fc356875 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "3.2.3", + "version": "3.2.4", "engines": { "node": ">=16", "pnpm": ">=8" From c47bd5c7d4adfd2c3094253bae9603864a04b167 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 22 Mar 2024 18:48:57 +0700 Subject: [PATCH 12/17] fix: ASC-00000 - deps (#186) * fix: remove unused * fix: remove unused --- package.json | 2 - pnpm-lock.yaml | 122 ------- src/i18n/en.json | 16 - .../CommunityInfo/UICommunityInfo.tsx | 28 +- src/social/components/CommunityInfo/index.tsx | 33 +- .../CommunityPermissions.tsx | 21 +- .../components/CommunityPermissions/index.tsx | 7 - .../components/CommunityPermissions/utils.tsx | 14 +- src/social/components/Spinner/index.tsx | 44 --- src/social/components/StoryDraft/index.tsx | 127 ------- src/social/components/StoryDraft/styles.tsx | 121 ------- src/social/components/StoryTab/StoryRing.tsx | 90 ----- src/social/components/StoryTab/index.tsx | 87 ----- src/social/components/StoryTab/styles.tsx | 61 ---- .../components/StoryViewer/Footer/index.tsx | 79 ----- .../components/StoryViewer/Footer/styles.tsx | 109 ------ .../components/StoryViewer/Header/index.tsx | 75 ----- .../components/StoryViewer/Header/styles.tsx | 181 ---------- .../StoryViewer/Renderers/AutoPlayContent.tsx | 22 -- .../StoryViewer/Renderers/Default.tsx | 40 --- .../StoryViewer/Renderers/Image.tsx | 174 ---------- .../StoryViewer/Renderers/Video.tsx | 221 ------------ .../Renderers/Wrappers/Footer/index.tsx | 68 ---- .../Renderers/Wrappers/Footer/styles.tsx | 108 ------ .../Renderers/Wrappers/Header/index.tsx | 118 ------- .../StoryViewer/Renderers/index.tsx | 6 - .../StoryViewer/Renderers/styles.tsx | 240 ------------- .../components/StoryViewer/Renderers/types.ts | 26 -- src/social/components/StoryViewer/index.tsx | 289 ---------------- src/social/components/StoryViewer/styles.tsx | 315 ------------------ src/social/constants.ts | 1 - src/social/hooks/useStories.ts | 80 ----- src/social/hooks/useStory.ts | 15 - src/social/pages/Application/index.tsx | 8 - src/social/pages/CommunityFeed/index.tsx | 92 +---- src/social/providers/NavigationProvider.tsx | 25 -- 36 files changed, 10 insertions(+), 3055 deletions(-) delete mode 100644 src/social/components/Spinner/index.tsx delete mode 100644 src/social/components/StoryDraft/index.tsx delete mode 100644 src/social/components/StoryDraft/styles.tsx delete mode 100644 src/social/components/StoryTab/StoryRing.tsx delete mode 100644 src/social/components/StoryTab/index.tsx delete mode 100644 src/social/components/StoryTab/styles.tsx delete mode 100644 src/social/components/StoryViewer/Footer/index.tsx delete mode 100644 src/social/components/StoryViewer/Footer/styles.tsx delete mode 100644 src/social/components/StoryViewer/Header/index.tsx delete mode 100644 src/social/components/StoryViewer/Header/styles.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/AutoPlayContent.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Default.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Image.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Video.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Wrappers/Footer/index.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Wrappers/Footer/styles.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/Wrappers/Header/index.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/index.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/styles.tsx delete mode 100644 src/social/components/StoryViewer/Renderers/types.ts delete mode 100644 src/social/components/StoryViewer/index.tsx delete mode 100644 src/social/components/StoryViewer/styles.tsx delete mode 100644 src/social/hooks/useStories.ts delete mode 100644 src/social/hooks/useStory.ts diff --git a/package.json b/package.json index 3fc356875..f1d62b9b7 100644 --- a/package.json +++ b/package.json @@ -110,11 +110,9 @@ "polished": "^4.2.2", "react-hook-form": "^7.49.2", "react-infinite-scroll-component": "^6.1.0", - "react-insta-stories": "^2.6.2", "react-intl": "^6.5.5", "react-loading-skeleton": "^3.3.1", "react-mentions": "^4.4.10", - "react-modal-sheet": "^2.2.0", "react-sizeme": "^3.0.2", "react-textarea-autosize": "^8.5.3", "react-timeago": "^7.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b321faa6..5a1ea57f9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,9 +53,6 @@ dependencies: react-infinite-scroll-component: specifier: ^6.1.0 version: 6.1.0(react@18.2.0) - react-insta-stories: - specifier: ^2.6.2 - version: 2.6.2(react@18.2.0) react-intl: specifier: ^6.5.5 version: 6.5.5(react@18.2.0)(typescript@4.9.5) @@ -65,9 +62,6 @@ dependencies: react-mentions: specifier: ^4.4.10 version: 4.4.10(react-dom@18.2.0)(react@18.2.0) - react-modal-sheet: - specifier: ^2.2.0 - version: 2.2.0(framer-motion@10.18.0)(react@18.2.0) react-sizeme: specifier: ^3.0.2 version: 3.0.2 @@ -1613,26 +1607,12 @@ packages: engines: {node: '>=10.0.0'} dev: true - /@emotion/is-prop-valid@0.8.8: - resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} - requiresBuild: true - dependencies: - '@emotion/memoize': 0.7.4 - dev: false - optional: true - /@emotion/is-prop-valid@1.2.1: resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} dependencies: '@emotion/memoize': 0.8.1 dev: true - /@emotion/memoize@0.7.4: - resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} - requiresBuild: true - dev: false - optional: true - /@emotion/memoize@0.8.1: resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} dev: true @@ -3183,46 +3163,6 @@ packages: '@babel/runtime': 7.23.7 dev: true - /@react-aria/ssr@3.9.1(react@18.2.0): - resolution: {integrity: sha512-NqzkLFP8ZVI4GSorS0AYljC13QW2sc8bDqJOkBvkAt3M8gbcAXJWVRGtZBCRscki9RZF+rNlnPdg0G0jYkhJcg==} - engines: {node: '>= 12'} - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - dependencies: - '@swc/helpers': 0.5.3 - react: 18.2.0 - dev: false - - /@react-aria/utils@3.17.0(react@18.2.0): - resolution: {integrity: sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg==} - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - dependencies: - '@react-aria/ssr': 3.9.1(react@18.2.0) - '@react-stately/utils': 3.9.0(react@18.2.0) - '@react-types/shared': 3.22.0(react@18.2.0) - '@swc/helpers': 0.4.36 - clsx: 1.2.1 - react: 18.2.0 - dev: false - - /@react-stately/utils@3.9.0(react@18.2.0): - resolution: {integrity: sha512-yPKFY1F88HxuZ15BG2qwAYxtpE4HnIU0Ofi4CuBE0xC6I8mwo4OQjDzi+DZjxQngM9D6AeTTD6F1V8gkozA0Gw==} - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - dependencies: - '@swc/helpers': 0.5.3 - react: 18.2.0 - dev: false - - /@react-types/shared@3.22.0(react@18.2.0): - resolution: {integrity: sha512-yVOekZWbtSmmiThGEIARbBpnmUIuePFlLyctjvCbgJgGhz8JnEJOipLQ/a4anaWfzAgzSceQP8j/K+VOOePleA==} - peerDependencies: - react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 - dependencies: - react: 18.2.0 - dev: false - /@remix-run/router@1.14.1: resolution: {integrity: sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==} engines: {node: '>=14.0.0'} @@ -4050,25 +3990,6 @@ packages: file-system-cache: 2.3.0 dev: true - /@swc/helpers@0.4.14: - resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==} - dependencies: - tslib: 2.6.2 - dev: false - - /@swc/helpers@0.4.36: - resolution: {integrity: sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==} - dependencies: - legacy-swc-helpers: /@swc/helpers@0.4.14 - tslib: 2.6.2 - dev: false - - /@swc/helpers@0.5.3: - resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==} - dependencies: - tslib: 2.6.2 - dev: false - /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: @@ -5592,11 +5513,6 @@ packages: engines: {node: '>=0.8'} dev: true - /clsx@1.2.1: - resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} - engines: {node: '>=6'} - dev: false - /clsx@2.1.0: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} engines: {node: '>=6'} @@ -7196,24 +7112,6 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true - /framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==} - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - tslib: 2.6.2 - optionalDependencies: - '@emotion/is-prop-valid': 0.8.8 - dev: false - /fresh@0.5.2: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} engines: {node: '>= 0.6'} @@ -10048,14 +9946,6 @@ packages: throttle-debounce: 2.3.0 dev: false - /react-insta-stories@2.6.2(react@18.2.0): - resolution: {integrity: sha512-eM1YHr92bV7WK5h9sECjyYnqZtPxnzJrZFr9IaoDcaZaAEOHVRav+pST513DIG8Hk8QjSTHtdvHHZ0Ka5HwH8w==} - peerDependencies: - react: '>=16.8.2' - dependencies: - react: 18.2.0 - dev: false - /react-intl@6.5.5(react@18.2.0)(typescript@4.9.5): resolution: {integrity: sha512-cI5UKvBh4tc1zxLIziHBYGMX3dhYWDEFlvUDVN6NfT2i96zTXz/zH2AmM8+2waqgOhwkFUzd+7kK1G9q7fiC2g==} peerDependencies: @@ -10112,18 +10002,6 @@ packages: substyle: 9.4.1(react@18.2.0) dev: false - /react-modal-sheet@2.2.0(framer-motion@10.18.0)(react@18.2.0): - resolution: {integrity: sha512-OAIWuVWxMx3zQqrMLbYWnczadplg0WLd+AaBWmN5+ysNF5/pneqjkOV3AWaIZOCIF4TcrejiCsTduutbzCRP2Q==} - engines: {node: '>=16'} - peerDependencies: - framer-motion: '>=6' - react: '>=16' - dependencies: - '@react-aria/utils': 3.17.0(react@18.2.0) - framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - dev: false - /react-native-uuid@2.0.1: resolution: {integrity: sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g==} engines: {node: '>=10.0.0', npm: '>=6.0.0'} diff --git a/src/i18n/en.json b/src/i18n/en.json index 4ff40a169..758291f22 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -92,15 +92,10 @@ "UserFeed.tabs.timeline": "Timeline", "community.exploreCommunities": "Explore Community", "community.permissions.postReview": "Post review", - "community.permissions.storyComments": "Story comments", "community.permissions.approvePosts": "Approve member posts", - "community.permissions.allowStoryComments": "Allow comments on community stories", "community.permissions.approvePosts.prompt": "Posts by members have to be reviewed and approved by community moderator.", - "community.permissions.storyComments.prompt": "Turn on to receive comments on stories in this community.", "community.permissions.error.needApprovalOnPostCreation.turnOn": "Unable to turn on post review", "community.permissions.error.needApprovalOnPostCreation.turnOff": "Unable to turn off post review", - "community.permissions.error.storyComments.turnOn": "Unable to turn on post review", - "community.permissions.error.storyComments.turnOff": "Unable to turn off post review", "community.review.declinePendingPosts": "Decline pending post will permanently delete the selected post from community.", "community.pendingPostsBanner.title": "Pending posts", @@ -347,17 +342,6 @@ "pollComposer.overMentionees": "You have reached maximum 30 mentioned users in a post.", "pollComposer.okText": "OK", - "storyViewer.actions.deleteStory": "Delete story", - "storyViewer.action.confirmModal.title": "Delete this story?", - "storyViewer.action.confirmModal.content": "This story will be permanently deleted. You’ll no longer to see and find this story.", - "storyViewer.notification.deleted": "Story deleted", - "storyViewer.notification.success": "Successfully shared story", - "storyViewer.notification.error": "Failed to share story", - "storyViewer.footer.failed": "Failed to upload", - "storyViewer.footer.uploading": "Uploading...", - - "storyDraft.button.shareStory": "Share story", - "select.chatType.item": "{answerType} type", "chatComposer.label.channelId": "Channel ID", "chatComposer.label.displayName": "Display Name", diff --git a/src/social/components/CommunityInfo/UICommunityInfo.tsx b/src/social/components/CommunityInfo/UICommunityInfo.tsx index 4ac9d7cb1..462aa7a7a 100644 --- a/src/social/components/CommunityInfo/UICommunityInfo.tsx +++ b/src/social/components/CommunityInfo/UICommunityInfo.tsx @@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from 'react-intl'; import Button from '~/core/components/Button'; import { PendingPostsBanner } from '~/social/components/CommunityInfo/PendingPostsBanner'; -import { backgroundImage as communityCoverPlaceholder } from '~/icons/CommunityCoverPicture'; + import { Count, Container, @@ -26,7 +26,6 @@ import { import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import millify from 'millify'; import { isNonNullable } from '~/helpers/utils'; -import StoryTab from '../StoryTab'; interface UICommunityInfoProps { communityId: string; @@ -45,15 +44,8 @@ interface UICommunityInfoProps { onClickLeaveCommunity: (communityId: string) => void; canLeaveCommunity: boolean; canReviewPosts: boolean; - isStorySyncing: boolean; - haveStories: boolean; - haveStoryPermission: boolean; - isStoryErrored: boolean; - isSeen: boolean; name: string; postSetting: ValueOf; - setStoryFile: React.Dispatch>; - onClickStory: (communityId: string) => void; } const UICommunityInfo = ({ @@ -66,11 +58,6 @@ const UICommunityInfo = ({ isJoined, isOfficial, isPublic, - isStorySyncing, - isSeen, - isStoryErrored, - haveStories, - haveStoryPermission, avatarFileUrl, canEditCommunity, onEditCommunity, @@ -80,8 +67,6 @@ const UICommunityInfo = ({ canReviewPosts, name, postSetting, - setStoryFile, - onClickStory, }: UICommunityInfoProps) => { const { formatMessage } = useIntl(); @@ -156,17 +141,6 @@ const UICommunityInfo = ({ )} - onClickStory(communityId)} - onChange={setStoryFile} - /> - {isJoined && canEditCommunity && (