diff --git a/src/components/main/HomePageFilters.tsx b/src/components/main/HomePageFilters.tsx index 8bf7bd10f..b0c1c67f0 100644 --- a/src/components/main/HomePageFilters.tsx +++ b/src/components/main/HomePageFilters.tsx @@ -1,6 +1,8 @@ import { Col, Radio, RadioChangeEvent, Row, Select } from 'antd' import clsx from 'clsx' import { useRouter } from 'next/router' +import { MdVerified } from 'react-icons/md' +import { ReactNode } from 'react-markdown' import config from 'src/config' import { useIsMyAddressWhitelisted } from 'src/config/constants' import LatestPostsPage from '../posts/LatestPostsPage' @@ -29,9 +31,18 @@ const commonFilterOption = [{ label: 'Latest', value: 'latest' }] // ] // : [] -type Filter = { label: string; value: string; icon?: string } +type Filter = { label: string; value: string; icon?: ReactNode } + +const verifiedIcon = ( + +) + export const postFilterOpt: Filter[] = [ - { label: 'Featured Posts', icon: '✅', value: 'suggested' }, + { + label: 'Featured Posts', + icon: verifiedIcon, + value: 'suggested', + }, { label: 'Hot Posts', icon: '🔥', value: 'hot' }, { label: 'All Posts', value: 'latest' }, // removed most liked and commented @@ -55,7 +66,11 @@ export const commentFilterOpt: Filter[] = enableGraphQl // : [] export const spaceFilterOpt: Filter[] = [ - { label: 'Featured Creators', icon: '✅', value: 'suggested' }, + { + label: 'Featured Creators', + icon: verifiedIcon, + value: 'suggested', + }, { label: 'Creators Staking', value: 'creators' }, // ...offchainSpaceFilterOpt, ] diff --git a/src/components/spaces/helpers/OfficialSpaceStatus.tsx b/src/components/spaces/helpers/OfficialSpaceStatus.tsx index 922ed53bf..71bd5a538 100644 --- a/src/components/spaces/helpers/OfficialSpaceStatus.tsx +++ b/src/components/spaces/helpers/OfficialSpaceStatus.tsx @@ -1,7 +1,8 @@ -import { CheckCircleFilled, HourglassOutlined } from '@ant-design/icons' +import { HourglassOutlined } from '@ant-design/icons' import { Tag, Tooltip } from 'antd' import clsx from 'clsx' import Link from 'next/link' +import { MdVerified } from 'react-icons/md' import { useIsMobileWidthOrDevice } from 'src/components/responsive' import messages from 'src/messages' import { SpaceStruct } from 'src/types' @@ -19,7 +20,7 @@ type InnerIconProps = { icon: JSX.Element } -const officialSpaceIcon = +const officialSpaceIcon = const unclaimedSpaceIcon = diff --git a/src/components/spaces/spaces.module.sass b/src/components/spaces/spaces.module.sass index 173462a43..7ca4cb847 100644 --- a/src/components/spaces/spaces.module.sass +++ b/src/components/spaces/spaces.module.sass @@ -8,12 +8,12 @@ text-align: left .OfficialSpaceIcon - margin-left: $space_tiny - font-size: $font_big + margin-left: $space_mini + font-size: 1.1em .ClaimedOfficialSpaceIcon @extend .OfficialSpaceIcon - color: $color_green + color: #1D9AF1 .ClaimSpacePendingIcon padding: $space_mini diff --git a/src/styles/subsocial.scss b/src/styles/subsocial.scss index a015717a3..7fa27366b 100644 --- a/src/styles/subsocial.scss +++ b/src/styles/subsocial.scss @@ -2325,3 +2325,7 @@ hr { } } } + +.VerifiedIcon { + color: #1d9af1; +}