WIP fonts

app.config.js

@@ -259,6 +259,8 @@ module.exports = function (_config) {
               './assets/fonts/inter/Inter-SemiBoldItalic.otf',
               './assets/fonts/inter/Inter-ExtraBold.otf',
               './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
+              // Verification
+              './assets/fonts/verification/Verification.ttf',
             ],
           },
         ],

assets/fonts/verification/unicodesMap.json

@@ -0,0 +1 @@
+{ "Verification-verifiedCheck": 59905, "Verification-verifiedCheckGray": 59906, "Verification-verifierCheck": 59907, "Verification-verifierCheckGray": 59908}

bskyweb/templates/base.html

@@ -13,6 +13,7 @@
   <!-- Hello Humans! API docs at https://atproto.com -->
 
   <link rel="preload" as="font" type="font/woff2" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/Verification.a57fd7e1809cc90127c3.ttf" crossorigin>
 
   <style>
     /**

package.json

@@ -64,6 +64,7 @@
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
+    "@expo/vector-icons": "^14.1.0",
     "@expo/webpack-config": "^19.0.0",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react-dom": "^2.0.8",
@@ -196,6 +197,7 @@
     "react-native-uitextview": "^1.4.0",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.2",
+    "react-native-vector-icons": "^10.2.0",
     "react-native-view-shot": "^4.0.3",
     "react-native-web": "~0.19.13",
     "react-native-web-webview": "^1.0.2",

src/App.web.tsx

@@ -61,6 +61,7 @@ import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {loadVerificationCheckFonts} from '#/components/verification/VerificationCheck'
 
 /**
  * Begin geolocation ASAP
@@ -74,6 +75,7 @@ function InnerApp() {
   const theme = useColorModeTheme()
   const {_} = useLingui()
   const hasCheckedReferrer = useStarterPackEntry()
+  const [verificationChecksFontLoaded] = loadVerificationCheckFonts()
 
   // init
   useEffect(() => {
@@ -103,6 +105,7 @@ function InnerApp() {
 
   // wait for session to resume
   if (!isReady || !hasCheckedReferrer) return null
+  if (!verificationChecksFontLoaded) return null
 
   return (
     <Alf theme={theme}>

src/components/verification/VerificationCheck.tsx

@@ -1,3 +1,6 @@
+import {createIconSet} from '@expo/vector-icons'
+import {useFonts} from 'expo-font'
+
 import {type Props} from '#/components/icons/common'
 import {VerifiedCheck} from '#/components/icons/VerifiedCheck'
 import {VerifierCheck} from '#/components/icons/VerifierCheck'
@@ -10,3 +13,20 @@ export function VerificationCheck({
 }) {
   return verifier ? <VerifierCheck {...rest} /> : <VerifiedCheck {...rest} />
 }
+
+export function loadVerificationCheckFonts() {
+  return useFonts({
+    Verification: require('../../../assets/fonts/verification/Verification.ttf'),
+  })
+}
+
+export const VerificationCheckIcon = createIconSet(
+  {
+    'Verification-verifiedCheck': 59905,
+    'Verification-verifiedCheckGray': 59906,
+    'Verification-verifierCheck': 59907,
+    'Verification-verifierCheckGray': 59908,
+  },
+  'Verification',
+  'Verification.ttf',
+)

src/view/com/util/PostMeta.tsx

@@ -20,7 +20,7 @@ import {WebOnlyInlineLinkText} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
-import {VerificationCheck} from '#/components/verification/VerificationCheck'
+import {VerificationCheck, VerificationCheckIcon} from '#/components/verification/VerificationCheck'
 import {TimeElapsed} from './TimeElapsed'
 import {PreviewableUserAvatar} from './UserAvatar'
 
@@ -100,22 +100,18 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
                   opts.moderation?.ui('displayName'),
                 ),
               )}
-            </WebOnlyInlineLinkText>
               {verification.showBadge && (
-              <View
-                style={[
-                  a.pl_2xs,
-                  a.self_center,
-                  {
-                    marginTop: platform({web: -1, ios: -1, android: -2}),
-                  },
-                ]}>
-                <VerificationCheck
-                  width={14}
-                  verifier={verification.role === 'verifier'}
+                <>
+                  {' '}
+                <VerificationCheckIcon
+                  name='Verification-verifiedCheck'
+                  style={{
+                    color: t.palette.primary_500,
+                  }}
                 />
-              </View>
+                </>
               )}
+            </WebOnlyInlineLinkText>
             <WebOnlyInlineLinkText
               numberOfLines={1}
               to={profileLink}

web/index.html

@@ -18,6 +18,7 @@
     <title>%WEB_TITLE%</title>
 
     <link rel="preload" as="font" type="font/woff2" href="/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
+    <link rel="preload" as="font" type="font/ttf" href="/static/media/Verification.a57fd7e1809cc90127c3.ttf" crossorigin>
 
     <style>
       /**

yarn.lock

@@ -4280,6 +4280,11 @@
   resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-14.0.0.tgz#48ce0aa5c05873b07c0c78bfe16c870388f4de9a"
   integrity sha512-5orm59pdnBQlovhU9k4DbjMUZBHNlku7IRgFY56f7pcaaCnXq9yaLJoOQl9sMwNdFzf4gnkTyHmR5uN10mI9rA==
 
+"@expo/vector-icons@^14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-14.1.0.tgz#d3dddad8b6ea60502e0fe5485b86751827606ce4"
+  integrity sha512-7T09UE9h8QDTsUeMGymB4i+iqvtEeaO5VvUjryFB4tugDTG/bkzViWA74hm5pfjjDEhYMXWaX112mcvhccmIwQ==
+
 "@expo/webpack-config@^19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/@expo/webpack-config/-/webpack-config-19.0.0.tgz#d8ce69bdb9a99089bb0672a7dc01dc96bebad390"
@@ -9004,6 +9009,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -16899,6 +16913,14 @@ react-native-uuid@^2.0.2:
   resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.2.tgz#3da192e342ef35ee95a7def676ab41c1256dfd66"
   integrity sha512-5ypj/hV58P+6VREdjkW0EudSibsH3WdqDERoHKnD9syFWjF+NfRWWrJb2sa3LIwI5zpzMvUiabs+DX40WHpEMw==
 
+react-native-vector-icons@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz#f438f2ca16f7d6be658fd6ec8f0d2b7e2132b91c"
+  integrity sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==
+  dependencies:
+    prop-types "^15.7.2"
+    yargs "^16.1.1"
+
 react-native-view-shot@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-4.0.3.tgz#9b98388fcc5228073cb66ac98ca339eda35767ac"
@@ -20212,6 +20234,11 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
@@ -20234,6 +20261,19 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yargs@^17.3.1, yargs@^17.6.2, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"