New Onboarding (#2596)

* Add round and square buttons

* Allow some style for buttons, add icons

* Change text selection color

* Center button text, whoops

* Outer layout, some primitive updates

* WIP

* onboarding feed prefs (#2590)

* add `style` to toggle label to modify text style

* Revert "add `style` to toggle label to modify text style"

This reverts commit 8f4b517b8585ca64a4bf44f6cb40ac070ece8932.

* following feed prefs

* remove unnecessary memo

* reusable divider component

* org imports

* add finished screen

* Theme SelectedAccountCard

* Require at least 3 interests

* Placeholder save logic

* WIP algo feeds

* Improve lineHeight handling, add RichText, improve Link by adding InlineLink

* Inherit lineHeight in heading comps

* Algo feeds mostly good

* Topical feeds ish

* Layout cleanup

* Improve button styles

* moderation prefs for onboarding (#2594)

* WIP algo feeds

* modify controlalbelgroup typing for easy .map()

* adjust padding on button

* add moderation screen

* add moderation screen

* add moderation screen

---------

Co-authored-by: Eric Bailey <git@esb.lol>

* Fix toggle button styles

* A11y props on outer portal

* Put it all on red

* New data shape

* Handle mock data

* Bulk write (not yet)

* Remove interests validation

* Clean up interests

* i18n layout and first step

* Clean up suggested follows screen

* Clean up following step

* Clean up algo feeds step

* Clean up topical feeds

* Add skeleton for feed card

* WIP moderation step

* cleanup moderation styles (#2605)

* cleanup moderation styles

* fix(?) toggle button group styles

* adjust toggle to fit any screen

* Some more cleanup

* Icons

* ToggleButton tweaks

* Reset

* Hook up data

* Better suggestions

* Bulk write

* Some logging

* Use new api

* Concat topical feeds

* Metrics

* Disable links in RichText, feedcards

* Tweak primary feed cards

* Update metrics

* Fix layout shift

* Fix ToggleButton again, whoops

* Error state

* Bump api package, ensure interests are saved

* Better fix for autofill

* i18n, button positions

* Remove unused export

* Add default prefs object

* Fix overflow in user cards

* Add 2 lines of bios to suggested accounts cards

* Nits

* Don't resolve facets by default

* Update storybook

* Disable flag for now

* Remove age dialog from moderations step

* Improvements and tweaks to new onboarding

---------

Co-authored-by: Hailey <153161762+haileyok@users.noreply.github.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/alf/atoms.ts

@@ -104,6 +104,9 @@ export const atoms = {
   flex: {
     display: 'flex',
   },
+  flex_col: {
+    flexDirection: 'column',
+  },
   flex_row: {
     flexDirection: 'row',
   },
@@ -149,45 +152,38 @@ export const atoms = {
   },
   text_2xs: {
     fontSize: tokens.fontSize._2xs,
-    lineHeight: tokens.fontSize._2xs,
   },
   text_xs: {
     fontSize: tokens.fontSize.xs,
-    lineHeight: tokens.fontSize.xs,
   },
   text_sm: {
     fontSize: tokens.fontSize.sm,
-    lineHeight: tokens.fontSize.sm,
   },
   text_md: {
     fontSize: tokens.fontSize.md,
-    lineHeight: tokens.fontSize.md,
   },
   text_lg: {
     fontSize: tokens.fontSize.lg,
-    lineHeight: tokens.fontSize.lg,
   },
   text_xl: {
     fontSize: tokens.fontSize.xl,
-    lineHeight: tokens.fontSize.xl,
   },
   text_2xl: {
     fontSize: tokens.fontSize._2xl,
-    lineHeight: tokens.fontSize._2xl,
   },
   text_3xl: {
     fontSize: tokens.fontSize._3xl,
-    lineHeight: tokens.fontSize._3xl,
   },
   text_4xl: {
     fontSize: tokens.fontSize._4xl,
-    lineHeight: tokens.fontSize._4xl,
   },
   text_5xl: {
     fontSize: tokens.fontSize._5xl,
-    lineHeight: tokens.fontSize._5xl,
   },
   leading_tight: {
+    lineHeight: 1.15,
+  },
+  leading_snug: {
     lineHeight: 1.25,
   },
   leading_normal: {

src/alf/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {Dimensions} from 'react-native'
 import * as themes from '#/alf/themes'
 
+export * from '#/alf/types'
 export * as tokens from '#/alf/tokens'
 export {atoms} from '#/alf/atoms'
 export * from '#/alf/util/platform'

src/alf/tokens.ts

@@ -142,6 +142,14 @@ export const gradients = {
     ],
     hover_value: '#B88BB6',
   },
+  summer: {
+    values: [
+      [0, '#FF6A56'],
+      [0.3, '#FF9156'],
+      [1, '#FFDD87'],
+    ],
+    hover_value: '#FF9156',
+  },
   nordic: {
     values: [
       [0, '#083367'],

src/alf/types.ts

@@ -1,3 +1,5 @@
+import {StyleProp, ViewStyle, TextStyle} from 'react-native'
+
 type LiteralToCommon<T extends PropertyKey> = T extends number
   ? number
   : T extends string
@@ -14,3 +16,11 @@ export type Mutable<T> = {
     ? LiteralToCommon<T[K]>
     : Mutable<T[K]>
 }
+
+export type TextStyleProp = {
+  style?: StyleProp<TextStyle>
+}
+
+export type ViewStyleProp = {
+  style?: StyleProp<ViewStyle>
+}