Merge pull request #217 from dappforce/deploy/low-comments

Change verified icon

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 = (
+  <MdVerified className='VerifiedIcon FontSemilarge' style={{ top: '4px', position: 'relative' }} />
+)
+
 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,
 ]

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 = <CheckCircleFilled className={styles.ClaimedOfficialSpaceIcon} />
+const officialSpaceIcon = <MdVerified className={styles.ClaimedOfficialSpaceIcon} />
 
 const unclaimedSpaceIcon = <HourglassOutlined className={styles.ClaimSpacePendingIcon} />
 

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

src/styles/subsocial.scss

@@ -2325,3 +2325,7 @@ hr {
     }
   }
 }
+
+.VerifiedIcon {
+  color: #1d9af1;
+}