about summary refs log tree commit diff
path: root/src/view/com/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util')
-rw-r--r--src/view/com/util/Link.tsx2
-rw-r--r--src/view/com/util/LoadingPlaceholder.tsx17
-rw-r--r--src/view/com/util/PostCtrls.tsx13
-rw-r--r--src/view/com/util/PostEmbeds.tsx5
-rw-r--r--src/view/com/util/Selector.tsx2
-rw-r--r--src/view/com/util/UserAvatar.tsx14
-rw-r--r--src/view/com/util/UserInfoText.tsx10
-rw-r--r--src/view/com/util/ViewHeader.tsx31
-rw-r--r--src/view/com/util/ViewSelector.tsx5
-rw-r--r--src/view/com/util/forms/RadioGroup.tsx3
-rw-r--r--src/view/com/util/gestures/HorzSwipe.tsx7
-rw-r--r--src/view/com/util/gestures/SwipeAndZoom.tsx3
-rw-r--r--src/view/com/util/images/AutoSizedImage.tsx4
-rw-r--r--src/view/com/util/images/ImageLayoutGrid.tsx2
14 files changed, 66 insertions, 52 deletions
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index aacdc3272..1cbb1af83 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -57,7 +57,7 @@ export const Link = observer(function Link({
   )
 })
 
-export const TextLink = observer(function Link({
+export const TextLink = observer(function TextLink({
   type = 'md',
   style,
   href,
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index 207a3f5d2..9828058e8 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -19,23 +19,15 @@ export function LoadingPlaceholder({
   return (
     <View
       style={[
+        styles.loadingPlaceholder,
         {
           width,
           height,
           backgroundColor: theme.palette.default.backgroundLight,
-          borderRadius: 6,
-          overflow: 'hidden',
         },
         style,
-      ]}>
-      <View
-        style={{
-          width,
-          height,
-          backgroundColor: theme.palette.default.backgroundLight,
-        }}
-      />
-    </View>
+      ]}
+    />
   )
 }
 
@@ -137,6 +129,9 @@ export function NotificationFeedLoadingPlaceholder() {
 }
 
 const styles = StyleSheet.create({
+  loadingPlaceholder: {
+    borderRadius: 6,
+  },
   post: {
     flexDirection: 'row',
     padding: 10,
diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx
index 0ca13b62f..bde44abab 100644
--- a/src/view/com/util/PostCtrls.tsx
+++ b/src/view/com/util/PostCtrls.tsx
@@ -128,10 +128,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           hitSlop={HITSLOP}
           onPress={opts.onPressReply}>
           <CommentBottomArrow
-            style={[
-              defaultCtrlColor,
-              opts.big ? {marginTop: 2} : {marginTop: 1},
-            ]}
+            style={[defaultCtrlColor, opts.big ? s.mt2 : styles.mt1]}
             strokeWidth={3}
             size={opts.big ? 20 : 15}
           />
@@ -181,10 +178,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
               />
             ) : (
               <HeartIcon
-                style={[
-                  defaultCtrlColor,
-                  opts.big ? {marginTop: 1} : undefined,
-                ]}
+                style={[defaultCtrlColor, opts.big ? styles.mt1 : undefined]}
                 strokeWidth={3}
                 size={opts.big ? 20 : 16}
               />
@@ -244,4 +238,7 @@ const styles = StyleSheet.create({
   ctrlIconUpvoted: {
     color: colors.red3,
   },
+  mt1: {
+    marginTop: 1,
+  },
 })
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
index 65518470a..e3fca2538 100644
--- a/src/view/com/util/PostEmbeds.tsx
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -67,7 +67,7 @@ export function PostEmbeds({
             <AutoSizedImage
               uri={embed.images[0].thumb}
               onPress={() => openLightbox(0)}
-              containerStyle={{borderRadius: 8}}
+              containerStyle={styles.singleImage}
             />
           </View>
         )
@@ -120,6 +120,9 @@ const styles = StyleSheet.create({
   imagesContainer: {
     marginTop: 4,
   },
+  singleImage: {
+    borderRadius: 8,
+  },
   extOuter: {
     borderWidth: 1,
     borderRadius: 8,
diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx
index 7a8b9b530..87540cf38 100644
--- a/src/view/com/util/Selector.tsx
+++ b/src/view/com/util/Selector.tsx
@@ -41,7 +41,7 @@ export function Selector({
       width: middle.width,
     }
     return [left, middle, right]
-  }, [selectedIndex, items, itemLayouts])
+  }, [selectedIndex, itemLayouts])
 
   const underlineStyle = {
     backgroundColor: pal.colors.text,
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index bd4897ba8..c9c255f46 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -62,8 +62,8 @@ export function UserAvatar({
     ])
   }, [onSelectNewAvatar])
 
-  const renderSvg = (size: number, initials: string) => (
-    <Svg width={size} height={size} viewBox="0 0 100 100">
+  const renderSvg = (svgSize: number, svgInitials: string) => (
+    <Svg width={svgSize} height={svgSize} viewBox="0 0 100 100">
       <Defs>
         <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
           <Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" />
@@ -78,7 +78,7 @@ export function UserAvatar({
         x="50"
         y="67"
         textAnchor="middle">
-        {initials}
+        {svgInitials}
       </Text>
     </Svg>
   )
@@ -88,7 +88,11 @@ export function UserAvatar({
     <TouchableOpacity onPress={handleEditAvatar}>
       {avatar ? (
         <Image
-          style={{width: size, height: size, borderRadius: (size / 2) | 0}}
+          style={{
+            width: size,
+            height: size,
+            borderRadius: Math.floor(size / 2),
+          }}
           source={{uri: avatar}}
         />
       ) : (
@@ -104,7 +108,7 @@ export function UserAvatar({
     </TouchableOpacity>
   ) : avatar ? (
     <Image
-      style={{width: size, height: size, borderRadius: (size / 2) | 0}}
+      style={{width: size, height: size, borderRadius: Math.floor(size / 2)}}
       resizeMode="stretch"
       source={{uri: avatar}}
     />
diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx
index 151fa54d0..a6daf18b2 100644
--- a/src/view/com/util/UserInfoText.tsx
+++ b/src/view/com/util/UserInfoText.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import {AppBskyActorGetProfile as GetProfile} from '@atproto/api'
-import {StyleProp, TextStyle} from 'react-native'
+import {StyleProp, StyleSheet, TextStyle} from 'react-native'
 import {Link} from './Link'
 import {Text} from './text/Text'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
@@ -53,7 +53,7 @@ export function UserInfoText({
     return () => {
       aborted = true
     }
-  }, [did, store.api.app.bsky])
+  }, [did, store.profiles])
 
   let inner
   if (didFail) {
@@ -73,7 +73,7 @@ export function UserInfoText({
       <LoadingPlaceholder
         width={80}
         height={8}
-        style={{position: 'relative', top: 1, left: 2}}
+        style={styles.loadingPlaceholder}
       />
     )
   }
@@ -91,3 +91,7 @@ export function UserInfoText({
 
   return inner
 }
+
+const styles = StyleSheet.create({
+  loadingPlaceholder: {position: 'relative', top: 1, left: 2},
+})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 761553cc5..c8b1b2d97 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -11,8 +11,8 @@ import {UserAvatar} from './UserAvatar'
 import {Text} from './text/Text'
 import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
-import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
+import {colors} from '../../lib/styles'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
@@ -26,7 +26,6 @@ export const ViewHeader = observer(function ViewHeader({
   subtitle?: string
   canGoBack?: boolean
 }) {
-  const theme = useTheme()
   const pal = usePalette('default')
   const store = useStores()
   const onPressBack = () => {
@@ -52,12 +51,12 @@ export const ViewHeader = observer(function ViewHeader({
         testID="viewHeaderBackOrMenuBtn"
         onPress={canGoBack ? onPressBack : onPressMenu}
         hitSlop={BACK_HITSLOP}
-        style={canGoBack ? styles.backIcon : styles.backIconWide}>
+        style={canGoBack ? styles.backBtn : styles.backBtnWide}>
         {canGoBack ? (
           <FontAwesomeIcon
             size={18}
             icon="angle-left"
-            style={[{marginTop: 6}, pal.text]}
+            style={[styles.backIcon, pal.text]}
           />
         ) : (
           <UserAvatar
@@ -96,13 +95,10 @@ export const ViewHeader = observer(function ViewHeader({
               <FontAwesomeIcon icon="signal" style={pal.text} size={16} />
               <FontAwesomeIcon
                 icon="x"
-                style={{
-                  backgroundColor: pal.colors.background,
-                  color: theme.palette.error.background,
-                  position: 'absolute',
-                  right: 7,
-                  bottom: 7,
-                }}
+                style={[
+                  styles.littleXIcon,
+                  {backgroundColor: pal.colors.background},
+                ]}
                 size={8}
               />
             </>
@@ -136,15 +132,18 @@ const styles = StyleSheet.create({
     fontWeight: 'normal',
   },
 
-  backIcon: {
+  backBtn: {
     width: 30,
     height: 30,
   },
-  backIconWide: {
+  backBtnWide: {
     width: 40,
     height: 30,
     marginLeft: 6,
   },
+  backIcon: {
+    marginTop: 6,
+  },
   btn: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -154,4 +153,10 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     marginLeft: 4,
   },
+  littleXIcon: {
+    color: colors.red3,
+    position: 'absolute',
+    right: 7,
+    bottom: 7,
+  },
 })
diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx
index 9ea7bc740..0dd93ec64 100644
--- a/src/view/com/util/ViewSelector.tsx
+++ b/src/view/com/util/ViewSelector.tsx
@@ -5,6 +5,7 @@ import {HorzSwipe} from './gestures/HorzSwipe'
 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
 import {clamp} from '../../../lib/numbers'
+import {s} from '../../lib/styles'
 
 const HEADER_ITEM = {_reactKey: '__header__'}
 const SELECTOR_ITEM = {_reactKey: '__selector__'}
@@ -54,7 +55,7 @@ export function ViewSelector({
     setSelectedIndex(clamp(index, 0, sections.length))
   useEffect(() => {
     onSelectView?.(selectedIndex)
-  }, [selectedIndex])
+  }, [selectedIndex, onSelectView])
 
   // rendering
   // =
@@ -98,7 +99,7 @@ export function ViewSelector({
         onScroll={onScroll}
         onRefresh={onRefresh}
         onEndReached={onEndReached}
-        contentContainerStyle={{paddingBottom: 200}}
+        contentContainerStyle={s.contentContainer}
       />
     </HorzSwipe>
   )
diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx
index 9abc2345f..b33cd9831 100644
--- a/src/view/com/util/forms/RadioGroup.tsx
+++ b/src/view/com/util/forms/RadioGroup.tsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import {View} from 'react-native'
 import {RadioButton} from './RadioButton'
 import {ButtonType} from './Button'
+import {s} from '../../../lib/styles'
 
 export interface RadioGroupItem {
   label: string
@@ -29,7 +30,7 @@ export function RadioGroup({
       {items.map((item, i) => (
         <RadioButton
           key={item.key}
-          style={i !== 0 ? {marginTop: 2} : undefined}
+          style={i !== 0 ? s.mt2 : undefined}
           type={type}
           label={item.label}
           isSelected={item.key === selection}
diff --git a/src/view/com/util/gestures/HorzSwipe.tsx b/src/view/com/util/gestures/HorzSwipe.tsx
index 6dcdcf918..22b15afe7 100644
--- a/src/view/com/util/gestures/HorzSwipe.tsx
+++ b/src/view/com/util/gestures/HorzSwipe.tsx
@@ -9,6 +9,7 @@ import {
   View,
 } from 'react-native'
 import {clamp} from 'lodash'
+import {s} from '../../../lib/styles'
 
 interface Props {
   panX: Animated.Value
@@ -111,7 +112,9 @@ export function HorzSwipe({
       (Math.abs(gestureState.dx) > swipeDistanceThreshold / 4 ||
         Math.abs(gestureState.vx) > swipeVelocityThreshold)
     ) {
-      const final = ((gestureState.dx / Math.abs(gestureState.dx)) * -1) | 0
+      const final = Math.floor(
+        (gestureState.dx / Math.abs(gestureState.dx)) * -1,
+      )
       Animated.timing(panX, {
         toValue: final,
         duration: 100,
@@ -144,7 +147,7 @@ export function HorzSwipe({
   })
 
   return (
-    <View {...panResponder.panHandlers} style={{flex: 1}}>
+    <View {...panResponder.panHandlers} style={s.h100pct}>
       {children}
     </View>
   )
diff --git a/src/view/com/util/gestures/SwipeAndZoom.tsx b/src/view/com/util/gestures/SwipeAndZoom.tsx
index 881eea094..ee00edab7 100644
--- a/src/view/com/util/gestures/SwipeAndZoom.tsx
+++ b/src/view/com/util/gestures/SwipeAndZoom.tsx
@@ -9,6 +9,7 @@ import {
   View,
 } from 'react-native'
 import {clamp} from 'lodash'
+import {s} from '../../../lib/styles'
 
 export enum Dir {
   None,
@@ -294,7 +295,7 @@ export function SwipeAndZoom({
   })
 
   return (
-    <View {...panResponder.panHandlers} style={{flex: 1}}>
+    <View {...panResponder.panHandlers} style={s.h100pct}>
       {children}
     </View>
   )
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index a711323a9..648bb957f 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -47,9 +47,9 @@ export function AutoSizedImage({
             setImgInfo({width, height})
           }
         },
-        (error: any) => {
+        (err: any) => {
           if (!aborted) {
-            setError(String(error))
+            setError(String(err))
           }
         },
       )
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 5eb5b3c54..8acab7109 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -105,7 +105,7 @@ function ImageLayoutGridInner({
           <TouchableWithoutFeedback onPress={() => onPress?.(1)}>
             <Image source={{uri: uris[1]}} style={size1} />
           </TouchableWithoutFeedback>
-          <View style={{height: 5}} />
+          <View style={styles.hSpace} />
           <TouchableWithoutFeedback onPress={() => onPress?.(2)}>
             <Image source={{uri: uris[2]}} style={size1} />
           </TouchableWithoutFeedback>
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 14:41:03 +0000