Placeholder style tweaks (#9107)

* Align colors in loading placeholders

* Same for new skele components

* Increase opacity of disabled replies button slightly

src/components/PostControls/index.tsx

@@ -210,7 +210,7 @@ let PostControls = ({
             a.flex_1,
             a.align_start,
             {marginLeft: big ? -2 : -6},
-            replyDisabled ? {opacity: 0.5} : undefined,
+            replyDisabled ? {opacity: 0.6} : undefined,
           ]}>
           <PostControlButton
             testID="replyBtn"

src/components/Skeleton.tsx

@@ -32,7 +32,7 @@ export function Text({blend, style}: TextStyleProp & SkeletonProps) {
       <View
         style={[
           a.rounded_md,
-          t.atoms.bg_contrast_25,
+          t.atoms.bg_contrast_50,
           {
             height: lineHeight * 0.7,
             opacity: blend ? 0.6 : 1,
@@ -57,7 +57,7 @@ export function Circle({
         a.justify_center,
         a.align_center,
         a.rounded_full,
-        t.atoms.bg_contrast_25,
+        t.atoms.bg_contrast_50,
         {
           width: size,
           height: size,
@@ -80,7 +80,7 @@ export function Pill({
     <View
       style={[
         a.rounded_full,
-        t.atoms.bg_contrast_25,
+        t.atoms.bg_contrast_50,
         {
           width: size * 1.618,
           height: size,

src/view/com/util/LoadingPlaceholder.tsx

@@ -7,10 +7,8 @@ import {
   type ViewStyle,
 } from 'react-native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
+import {atoms as a, useTheme} from '#/alf'
-import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
@@ -27,7 +25,7 @@ export function LoadingPlaceholder({
   height: DimensionValue | undefined
   style?: StyleProp<ViewStyle>
 }) {
-  const theme = useTheme()
+  const t = useTheme()
   return (
     <View
       style={[
@@ -35,7 +33,7 @@ export function LoadingPlaceholder({
         {
           width,
           height,
-          backgroundColor: theme.palette.default.backgroundLight,
+          backgroundColor: t.palette.contrast_50,
         },
         style,
       ]}
@@ -48,10 +46,9 @@ export function PostLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const t = useTheme_NEW()
+  const t = useTheme()
-  const pal = usePalette('default')
   return (
-    <View style={[styles.post, pal.view, style]}>
+    <View style={[styles.post, style]}>
       <LoadingPlaceholder
         width={42}
         height={42}
@@ -137,14 +134,11 @@ export function NotificationLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
-    <View style={[styles.notification, pal.view, style]}>
+    <View style={[styles.notification, style]}>
       <View style={[{width: 60}, a.align_end, a.pr_sm, a.pt_2xs]}>
-        <HeartIconFilled
+        <HeartIconFilled size="xl" style={{color: t.palette.contrast_50}} />
-          size="xl"
-          style={{color: pal.colors.backgroundLight}}
-        />
       </View>
       <View style={{flex: 1}}>
         <View style={[a.flex_row, s.mb10]}>
@@ -184,9 +178,8 @@ export function ProfileCardLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const pal = usePalette('default')
   return (
-    <View style={[styles.profileCard, pal.view, style]}>
+    <View style={[styles.profileCard, style]}>
       <LoadingPlaceholder
         width={40}
         height={40}
@@ -228,7 +221,7 @@ export function FeedLoadingPlaceholder({
   showTopBorder?: boolean
   showLowerPlaceholder?: boolean
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <View
       style={[
@@ -236,10 +229,10 @@ export function FeedLoadingPlaceholder({
           padding: 16,
           borderTopWidth: showTopBorder ? StyleSheet.hairlineWidth : 0,
         },
-        pal.border,
+        t.atoms.border_contrast_low,
         style,
       ]}>
-      <View style={[pal.view, {flexDirection: 'row'}]}>
+      <View style={[{flexDirection: 'row'}]}>
         <LoadingPlaceholder
           width={36}
           height={36}
@@ -282,7 +275,7 @@ export function ChatListItemLoadingPlaceholder({
 }: {
   style?: StyleProp<ViewStyle>
 }) {
-  const t = useTheme_NEW()
+  const t = useTheme()
   const random = useMemo(() => Math.random(), [])
   return (
     <View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>