about summary refs log tree commit diff
path: root/src/lib/styles.ts
diff options
context:
space:
mode:
authorPaul Frazee <pfrazee@gmail.com>2023-02-22 14:23:57 -0600
committerGitHub <noreply@github.com>2023-02-22 14:23:57 -0600
commitf28334739b107f3e9f7b6ca2670778dba280600d (patch)
tree4e1563242e1a041c5d5483ab018123170dcb3fc8 /src/lib/styles.ts
parent7916b26aadb7e003728d9dc653ab8b8deabf4076 (diff)
downloadvoidsky-f28334739b107f3e9f7b6ca2670778dba280600d.tar.zst
Merge main into the Web PR (#230)
* Update to RN 71.1.0 (#100)

* Update to RN 71

* Adds missing lint plugin

* Add missing native changes

* Bump @atproto/api@0.0.7 (#112)

* Image not loading on swipe (#114)

* Adds prefetching to images

* Adds image prefetch

* bugfix for images not showing on swipe

* Fixes prefetch bug

* Update src/view/com/util/PostEmbeds.tsx

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* Fixes to session management (#117)

* Update session-management to solve incorrectly dropped sessions

* Reset the nav on account switch

* Reset the feed on me.load()

* Update tests to reflect new account-switching behavior

* Increase max image resolutions and sizes (#118)

* Slightly increase the hitslop for post controls

* Fix character counter color in dark mode

* Update login to use new session.create api, which enables email login (close #93) (#119)

* Replaces the alert with dropdown for profile image and banner (#123)

* replaces the alert with dropdown for profile image and banner

* lint

* Fix to ordering of images in the embed grid (#121)

* Add explicit link-embed controls to the composer (#120)

* Add explicit link-embed controls

* Update the target rez/size of link embed thumbs

* Remove the alert before publishing without a link card

* [Draft] Fixes image failing on reupload issue (#128)

* Fixes image failing on reupload issue

* Use tmp folder instead of documents

* lint

* Image performance improvements (#126)

* Switch out most images for FastImage

* Add image loading placeholders

* Fix tests

* Collection of fixes to list rendering (#127)

* Fix bug that caused endless spinners in profile feeds

* Bundle fetches of suggested actors into one update

* Fixes to suggested follow rendering

* Fix missing replacement of flex:1 to height:100

* Fixes to navigation swipes (#129)

* Nav swipe: increase the distance traveled in response to gesture movement.

This causes swipes to feel faster and more responsive.

* Fix: fully clamp the swipe against the edge

* Improve the performance of swipes by skipping the interaction manager

* Adds dark mode to the edit screen (#130)

* Adds dark mode to edit screen

* lint

* lint

* lint

* Reduce render cost of post controls and improve perceived responsiveness (#132)

* Move post control animations into conditional render and increase perceived responsiveness

* Remove log

* Adds dark mode to the dropdown (#131)

* Adds dark mode to the bottom sheet

* Make background button lighter (like before)

* lint

* Fix bug in lightbox rendering (#133)

* Fix layout in onboarding to not overflow the footer

* Configure feed FlatList (removeClippedSubviews=true) to improve scroll performance (#136)

* Disable like/repost animations to see if theyre causing #135 (#137)

* Composer: mention tagging now works in middle of text (close #105) (#139)

* Implement account deletion (#141)

* Fix photo & camera permission management (#140)

* Check photo & camera perms and alert the user if not available (close #64)

- Adds perms checks with a prompt to update settings if needed
- Moves initial access of photos in the composer so that the initial prompt
  occurs at an intuitive time.

* Add react-native-permissions test mock

* Fix issue causing multiple access requests

* Use longer var names

* Update podfile.lock

* Lint fix

* Move photo perm request in composer to the gallery btn instead of when the carousel is opened

* Adds more tracking all around the app (#142)

* Adds more tracking all around the app

* more events

* lint

* using better analytics naming

* missed file

* more fixes

* Calculate image aspect ratio on load (#146)

* Calculate image aspect ratio on load

* Move aspect ratio bounds to constants

* Adds detox testing and instructions (#147)

* Adds detox testing and instructions

* lint

* lint

* Error cleanup (close #79) (#148)

* Avoid surfacing errors to the user when it's not critical

* Remove now-unused GetAssertionsView

* Apply cleanError() consistently

* Give a better error message for Upstream Failures (http status 502)

* Hide errors in notifications because they're not useful

* More e2e tests (create account) (#150)

* Adds respots under the 'post' tab under profile (#158)

* Adds dark mode to delete account screen (#159)

* 87 dark mode edit profile (#162)

* Adds dark mode to delete account screen

* Adds one more missed darkmode

* more fixes

* Remove fallback gradient on external links without thumbs (#164)

* Remove fallback gradient on external links without thumbs

* Remove fallback gradient on external links without thumbs in the composer preview

* Fix refresh behavior around a series of models (repost, graph, vote) (#163)

* Fix refresh behavior around a series of models (repost, graph, vote)

* Fix cursor behavior in reposted-by view

* Fixes issue where retrying on image upload fails (#166)

* Fixes issue where retrying on image upload fails

* Lint, longer test time

* Longer waitfor time in tests

* even longer timeout

* longer timeout

* missed file

* Update src/view/com/composer/ComposePost.tsx

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* Update src/view/com/composer/ComposePost.tsx

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* 154 cached image profile (#167)

* Fixes issue where retrying on image upload fails

* Lint, longer test time

* Longer waitfor time in tests

* even longer timeout

* longer timeout

* missed file

* Fixes image cache error on second try for profile screen

* lint

* lint

* lint

* Refactor session management to use a new "Agent" API (#165)

* Add the atp-agent implementation (temporarily in this repo)

* Rewrite all session & API management to use the new atp-agent

* Update tests for the atp-agent refactor

* Refactor management of session-related state. Includes:
- More careful management of when state is cleared or fetched
- Debug logging to help trace future issues
- Clearer APIs overall

* Bubble session-expiration events to the user and display a toast to explain

* Switch to the new @atproto/api@0.1.0

* Minor aesthetic cleanup in SessionModel

* Wire up ReportAccount and ReportPost (#168)

* Fixes embeds for youtube channels (#169)

* Bump app ios version to 1.1 (needed after app store submission)

* Fix potential issues with promise guards when an error occurs (#170)

* Refactor models to use bundleAsync and lock regions (#171)

* Fix to an edge case with feed re-ordering for threads (#172)

* 151 fix youtube channel embed (#173)

* Fixes embeds for youtube channels

* Tests for youtube extract meta

* lint

* Add 'doesnt use non-exempt encryption' to ios config

* Rework the search UI and add  (#174)

* Add search tab and move icon to footer

* Remove subtitles from view header

* Remove unused code

* Clean up UI of search screen

* Search: give better user feedback to UI state and add a cancel button

* Add WhoToFollow section to search

* Add a temporary SuggestedPosts solution using the patented 'bsky team algo'

* Trigger reload of suggested content in search on open

* Wait five min between reloading discovery content

* Reduce weight of solid search icon in footer

* Fix lint

* Fix tests

* 151 feat youtube embed iframe (#176)

* youtube embed iframe temp commit

* Fixes styling and code cleanup

* lint

* Now clicking between the pause and settings button doesn't trigger the parent

* use modest branding (less yt logos)

* Stop playing the video once there's a navigation event

* Make sure the iframe is unmounted on any navigation event

* fixes tests

* lint

* Add scroll-to-top for all screens (#177)

* Adds hardcoded suggested list (#178)

* Adds hardcoded suggested list

* Update suggested-actors-view to support page sizes smaller than the hardcoded list

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* more robust centering of the play button (#181)

Co-authored-by: Aryan Goharzad <arrygoo@gmail.com>

* Bundle of UI modifications (#175)

* Adjust visual balance of SuggestedPosts and WhoToFollow

* Fix bug in the discovery load trigger

* Adjust search header aesthetic and have it scroll away

* More visual balance tweaks on the search page

* Even more visual balance tweaks on the search page

* Hide the footer on scroll in search

* Ditch the composer prompt buttons in the home feed

* Center the view header title

* Hide header on scroll on the home feed

* Fix e2e tests

* Fix home feed positioning (closes #189) (#195)

* Fix home feed positioning for floating header

* Fix positioning of errors in home feed

* Fix lint

* Don't show new-content notification for reposts (close #179) (#197)

* Show the splash screen during session resumption (close #186) (#199)

* Fix to suggested follows: chunk the hardcoded fetches to 25 at a time (close #196) (#198)

* UI updates to the floating action button (#201)

* Update FAB to use a plus icon and not drop shadow

* Update FAB positioning to be more consistent in different shell modes

* Animate the FAB's repositioning

* Remove the 'loading' placeholder from images as it degraded feed perf (#202)

* Remove the 'loading' placeholder from images as it degraded feed perf

* Remove references

* Fix RN bug that causes home feed not to load more; also fix home feed load view. (#208)

RN has a bug where rendering a flatlist with an empty array appears to break its
virtual list windowing behaviors. See https://stackoverflow.com/a/67873596

* Only give the loading spinner on the home feed during PTR (#207)

(cherry picked from commit b7a5da12fdfacef74873b5cf6d75f20d259bde0e)

* Implement our own lifecycle tracking to ensure it never fires while the app is backgrounded (close #193) (#211)

* Push notification fixes (#210)

* Fix to when screen analytics events are firing

* Fix: dont trigger update state when backgrounded

* Small fix to notifee API usage

* Fix: properly load notification info for push card

* Add feedback link to main menu (close #191) (#212)

* Add "follows you" information and sync follow state between views (#215)

* Bump @atproto/api@0.1.2 and update API usage

* Add 'follows you' pill to profile header (close #110)

* Add 'follows you' to followers and follows (close #103)

* Update reposted-by and liked-by views to use the same components as followers and following

* Create a local follows cache MyFollowsModel to keep views in sync (close #205)

* Add incremental hydration to the MyFollows model

* Fix tests

* Update deps

* Fix lint

* Fix to paginated fetches

* Fix reference

* Fix potential state-desync issue

* Fixes to notifications (#216)

* Improve push-notification for follows

* Refresh notifications on screen open (close #214)

* Avoid showing loader more than needed in post threads

* Refactor notification polling to handle view-state more effectively

* Delete a bunch of tests taht werent adding value

* Remove the accounts integration test; we'll use the e2e test instead

* Load latest in notifications when the screen is open rather than full refresh

* Randomize hard-coded suggested follows (#226)

* Ensure follows are loaded before filtering hardcoded suggestions

* Randomize hard-coded suggested profiles (close #219)

* Sanitizes posts on publish and render (#217)

* Sanatizes posts on publish and render

* lint

* lint and added sanitize to thread view as well

* adjusts indices based on replaced text

* Woops, fixes a bug

* bugfix + cleanup

* comment

* lint

* move sanitize text to later in the flow

* undo changes to compose post

* Add RichText library building upon the sanitizePost library method

* Add lodash.clonedeep dep

* Switch to RichText processing on record load & render

* Fix lint

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* A group of notifications fixes (#227)

* Fix: don't group together notifications that can't visually be grouped (close #221)

* Mark all notifications read on PTR

* Small optimization: useCallback and useMemo in posts feed

* Add loading spinner to footer of notifications (close #222)

* Fix to scrolling to posts within a thread (#228)

* Fix: render the entire thread at start so that scrollToIndex works always (close #270)

* Visual fixes to thread 'load more'

* A few small perf improvements to thread rendering

* Fix lint

* 1.2

* Remove unused logger lib

* Remove state-mock

* Type fixes

* Reorganize the folder structure for lib and switch to typescript path aliases

* Move build-flags into lib

* Move to the state path alias

* Add view path alias

* Fix lint

* iOS build fixes

* Wrap analytics in native/web splitter and re-enable in all view code

* Add web version of react-native-webview

* Add web split for version number

* Fix BlurView import for web

* Add web split for fastimage

* Create web split for permissions lib

* Fix for web high priority images

---------

Co-authored-by: Aryan Goharzad <arrygoo@gmail.com>
Diffstat (limited to 'src/lib/styles.ts')
-rw-r--r--src/lib/styles.ts218
1 files changed, 218 insertions, 0 deletions
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
new file mode 100644
index 000000000..db6c03606
--- /dev/null
+++ b/src/lib/styles.ts
@@ -0,0 +1,218 @@
+import {StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {Theme, TypographyVariant} from './ThemeContext'
+
+// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
+export const colors = {
+  white: '#ffffff',
+  black: '#000000',
+
+  gray1: '#F3F3F8',
+  gray2: '#E2E2E4',
+  gray3: '#B9B9C1',
+  gray4: '#8D8E96',
+  gray5: '#545664',
+  gray6: '#373942',
+  gray7: '#26272D',
+  gray8: '#101013',
+
+  blue0: '#bfe1ff',
+  blue1: '#8bc7fd',
+  blue2: '#52acfe',
+  blue3: '#0085ff',
+  blue4: '#0062bd',
+  blue5: '#034581',
+
+  red1: '#ffe6f2',
+  red2: '#fba2ce',
+  red3: '#ec4899',
+  red4: '#d1106f',
+  red5: '#97074e',
+
+  pink1: '#f8ccff',
+  pink2: '#e966ff',
+  pink3: '#db00ff',
+  pink4: '#a601c1',
+  pink5: '#570066',
+
+  purple1: '#ebdbff',
+  purple2: '#ba85ff',
+  purple3: '#9747ff',
+  purple4: '#6d00fa',
+  purple5: '#380080',
+
+  green1: '#c1ffb8',
+  green2: '#27f406',
+  green3: '#20bc07',
+  green4: '#148203',
+  green5: '#082b03',
+
+  unreadNotifBg: '#ebf6ff',
+}
+
+export const gradients = {
+  blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons
+  blue: {start: '#5E55FB', end: colors.blue3}, // fab
+  blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
+}
+
+export const s = StyleSheet.create({
+  // helpers
+  footerSpacer: {height: 100},
+  contentContainer: {paddingBottom: 200},
+  border1: {borderWidth: 1},
+
+  // font weights
+  fw600: {fontWeight: '600'},
+  bold: {fontWeight: 'bold'},
+  fw500: {fontWeight: '500'},
+  semiBold: {fontWeight: '500'},
+  fw400: {fontWeight: '400'},
+  normal: {fontWeight: '400'},
+  fw300: {fontWeight: '300'},
+  light: {fontWeight: '300'},
+  fw200: {fontWeight: '200'},
+
+  // text decoration
+  underline: {textDecorationLine: 'underline'},
+
+  // font sizes
+  f9: {fontSize: 9},
+  f10: {fontSize: 10},
+  f11: {fontSize: 11},
+  f12: {fontSize: 12},
+  f13: {fontSize: 13},
+  f14: {fontSize: 14},
+  f15: {fontSize: 15},
+  f16: {fontSize: 16},
+  f17: {fontSize: 17},
+  f18: {fontSize: 18},
+
+  // line heights
+  ['lh13-1']: {lineHeight: 13},
+  ['lh13-1.3']: {lineHeight: 16.9}, // 1.3 of 13px
+  ['lh14-1']: {lineHeight: 14},
+  ['lh14-1.3']: {lineHeight: 18.2}, // 1.3 of 14px
+  ['lh15-1']: {lineHeight: 15},
+  ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
+  ['lh16-1']: {lineHeight: 16},
+  ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
+  ['lh17-1']: {lineHeight: 17},
+  ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 17px
+  ['lh18-1']: {lineHeight: 18},
+  ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
+
+  // margins
+  mr2: {marginRight: 2},
+  mr5: {marginRight: 5},
+  mr10: {marginRight: 10},
+  ml2: {marginLeft: 2},
+  ml5: {marginLeft: 5},
+  ml10: {marginLeft: 10},
+  mt2: {marginTop: 2},
+  mt5: {marginTop: 5},
+  mt10: {marginTop: 10},
+  mb2: {marginBottom: 2},
+  mb5: {marginBottom: 5},
+  mb10: {marginBottom: 10},
+
+  // paddings
+  p2: {padding: 2},
+  p5: {padding: 5},
+  p10: {padding: 10},
+  p20: {padding: 20},
+  pr2: {paddingRight: 2},
+  pr5: {paddingRight: 5},
+  pr10: {paddingRight: 10},
+  pr20: {paddingRight: 20},
+  pl2: {paddingLeft: 2},
+  pl5: {paddingLeft: 5},
+  pl10: {paddingLeft: 10},
+  pl20: {paddingLeft: 20},
+  pt2: {paddingTop: 2},
+  pt5: {paddingTop: 5},
+  pt10: {paddingTop: 10},
+  pt20: {paddingTop: 20},
+  pb2: {paddingBottom: 2},
+  pb5: {paddingBottom: 5},
+  pb10: {paddingBottom: 10},
+  pb20: {paddingBottom: 20},
+
+  // flex
+  flexRow: {flexDirection: 'row'},
+  flexCol: {flexDirection: 'column'},
+  flex1: {flex: 1},
+  alignCenter: {alignItems: 'center'},
+  alignBaseline: {alignItems: 'baseline'},
+
+  // position
+  absolute: {position: 'absolute'},
+
+  // dimensions
+  w100pct: {width: '100%'},
+  h100pct: {height: '100%'},
+
+  // text align
+  textLeft: {textAlign: 'left'},
+  textCenter: {textAlign: 'center'},
+  textRight: {textAlign: 'right'},
+
+  // colors
+  white: {color: colors.white},
+  black: {color: colors.black},
+
+  gray1: {color: colors.gray1},
+  gray2: {color: colors.gray2},
+  gray3: {color: colors.gray3},
+  gray4: {color: colors.gray4},
+  gray5: {color: colors.gray5},
+
+  blue1: {color: colors.blue1},
+  blue2: {color: colors.blue2},
+  blue3: {color: colors.blue3},
+  blue4: {color: colors.blue4},
+  blue5: {color: colors.blue5},
+
+  red1: {color: colors.red1},
+  red2: {color: colors.red2},
+  red3: {color: colors.red3},
+  red4: {color: colors.red4},
+  red5: {color: colors.red5},
+
+  pink1: {color: colors.pink1},
+  pink2: {color: colors.pink2},
+  pink3: {color: colors.pink3},
+  pink4: {color: colors.pink4},
+  pink5: {color: colors.pink5},
+
+  purple1: {color: colors.purple1},
+  purple2: {color: colors.purple2},
+  purple3: {color: colors.purple3},
+  purple4: {color: colors.purple4},
+  purple5: {color: colors.purple5},
+
+  green1: {color: colors.green1},
+  green2: {color: colors.green2},
+  green3: {color: colors.green3},
+  green4: {color: colors.green4},
+  green5: {color: colors.green5},
+})
+
+export function lh(
+  theme: Theme,
+  type: TypographyVariant,
+  height: number,
+): TextStyle {
+  return {
+    lineHeight: (theme.typography[type].fontSize || 16) * height,
+  }
+}
+
+export function addStyle<T>(
+  base: StyleProp<T>,
+  addedStyle: StyleProp<T>,
+): StyleProp<T> {
+  if (Array.isArray(base)) {
+    return base.concat([addedStyle])
+  }
+  return [base, addedStyle]
+}