SEL-504: fix fonts and some styles (#762)

* fix fonts and some styles

* dry config

* fix some warnings

app/App.tsx

@@ -22,7 +22,7 @@ global.Buffer = Buffer;
 function App(): React.JSX.Element {
   return (
     <ErrorBoundary>
-      <YStack f={1} h="100%" w="100%">
+      <YStack flex={1} height="100%" width="100%">
         <RemoteConfigProvider>
           <AuthProvider>
             <PassportProvider>

app/src/components/buttons/AbstractButton.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import React from 'react';
-import { StyleSheet, ViewStyle } from 'react-native';
+import { Platform, StyleSheet, ViewStyle } from 'react-native';
 import { Button, Text, ViewProps } from 'tamagui';
 
 import { shouldShowAesopRedesign } from '../../hooks/useAesopRedesign';
@@ -65,7 +65,9 @@ export default function AbstractButton({
       style={[
         styles.container,
         { backgroundColor: bgColor, borderColor: borderColor },
-        hasBorder ? styles.withBorder : {},
+        hasBorder
+          ? styles.withBorder
+          : Platform.select({ web: { borderWidth: 0 }, default: {} }),
         style as ViewStyle,
       ]}
       pressStyle={!animatedComponent ? pressedStyle : {}}

app/src/layouts/ExpandableBottomLayout.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {
   Dimensions,
   PixelRatio,
+  Platform,
   ScrollView,
   StatusBar,
   StyleSheet,
@@ -56,14 +57,15 @@ const TopSection: React.FC<TopSectionProps> = ({
   ...props
 }) => {
   const { top } = useSafeAreaInsets();
+  const { roundTop, ...restProps } = props;
   return (
     <View
-      {...props}
+      {...restProps}
       backgroundColor={backgroundColor}
       style={[
         styles.topSection,
-        props.roundTop && styles.roundTop,
-        props.roundTop ? { marginTop: top } : { paddingTop: top },
+        roundTop && styles.roundTop,
+        roundTop ? { marginTop: top } : { paddingTop: top },
         { backgroundColor },
       ]}
     >
@@ -174,7 +176,7 @@ const styles = StyleSheet.create({
   topSection: {
     alignSelf: 'stretch',
     flexGrow: 1,
-    flexShrink: 1,
+    flexShrink: Platform.select({ web: 0, default: 1 }),
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: black,

app/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
+
+interface ViteTypeOptions {
+  // By adding this line, you can make the type of ImportMetaEnv strict
+  // to disallow unknown keys.
+  // strictImportMetaEnv: unknown
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  readonly VITE_DEV_PRIVATE_SECRET_FOR_TESTING: string;
+  readonly DEV: boolean;
+  readonly PROD: boolean;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

app/tamagui.config.ts

@@ -1,11 +1,70 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import { config } from '@tamagui/config/v3';
-import { createTamagui } from 'tamagui';
+import { createFont, createTamagui } from 'tamagui';
+const commonSizes = {
+  1: 12,
+  2: 14,
+  3: 15,
+  4: 16,
+  5: 18,
+  6: 20,
+  7: 24,
+  8: 28,
+  9: 32,
+  10: 40,
+  11: 52,
+  12: 62,
+  13: 72,
+  14: 92,
+  15: 114,
+  16: 134,
+};
 
-// or '@tamagui/core'
+const commonLineHeights = {
+  1: 16,
+  2: 20,
+  3: 22,
+  4: 24,
+  5: 26,
+  6: 28,
+  7: 32,
+  8: 36,
+  9: 40,
+  10: 48,
+  11: 60,
+  12: 70,
+  13: 80,
+  14: 100,
+  15: 122,
+  16: 142,
+};
 
-const appConfig = createTamagui(config);
+const commonLetterSpacing = { 4: 0 };
+
+function makeFont(family: string, weight: Record<number, string>) {
+  return createFont({
+    family,
+    size: commonSizes,
+    lineHeight: commonLineHeights,
+    weight,
+    letterSpacing: commonLetterSpacing,
+  });
+}
+
+const advercaseFont = makeFont('Advercase-Regular', { 4: '400' });
+const dinotFont = makeFont('DINOT-Medium', { 4: '400', 5: '500' });
+const plexMonoFont = makeFont('IBMPlexMono-Regular', { 4: '400' });
+
+const appConfig = createTamagui({
+  ...config,
+  fonts: {
+    ...config.fonts,
+    advercase: advercaseFont,
+    dinot: dinotFont,
+    plexMono: plexMonoFont,
+  },
+});
 
 export type AppConfig = typeof appConfig;
 

app/vite.config.ts

@@ -12,6 +12,8 @@ const __dirname = path.dirname(__filename);
 
 export default defineConfig({
   root: 'web',
+  publicDir: 'web',
+  envDir: '..', // This is the directory where Vite will look for .env files relative to the root
   resolve: {
     extensions: [
       '.web.tsx',
@@ -46,6 +48,7 @@ export default defineConfig({
     tamaguiPlugin({
       config: path.resolve(__dirname, 'tamagui.config.ts'),
       components: ['tamagui'],
+      enableDynamicEvaluation: true,
       excludeReactNativeWebExports: [
         'Switch',
         'ProgressBar',

app/web/fonts.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'Advercase-Regular';
+  src: url('./fonts/Advercase-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DINOT-Medium';
+  src: url('./fonts/DINOT-Medium.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBMPlexMono-Regular';
+  src: url('./fonts/IBMPlexMono-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

app/web/main.tsx

@@ -1,18 +1,19 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import 'react-native-get-random-values';
+import './fonts.css';
+import './reset.css';
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { TamaguiProvider, View } from 'tamagui';
 
 import App from '../App';
-import { black } from '../src/utils/colors';
 import tamaguiConfig from '../tamagui.config.ts';
 
 const Root = () => (
   <TamaguiProvider config={tamaguiConfig}>
-    <View backgroundColor={black} flex={1} height="100vh" width="100%">
+    <View flex={1} height="100vh" width="100%">
       <App />
     </View>
   </TamaguiProvider>

app/web/reset.css

@@ -0,0 +1,6 @@
+/* just a few resets for web so that it looks more like the native app */
+
+button {
+  background-color: transparent;
+  border: none;
+}