Make the buttons round again (#9367)

* make the base button round

* some miscalleaneous tweaks

src/components/Button.tsx

@@ -434,25 +434,23 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }
 
       if (shape === 'default') {
+        baseStyles.push(a.rounded_full)
         if (size === 'large') {
           baseStyles.push({
             paddingVertical: 12,
             paddingHorizontal: 25,
-            borderRadius: 10,
             gap: 3,
           })
         } else if (size === 'small') {
           baseStyles.push({
             paddingVertical: 8,
             paddingHorizontal: 13,
-            borderRadius: 8,
             gap: 3,
           })
         } else if (size === 'tiny') {
           baseStyles.push({
             paddingVertical: 5,
             paddingHorizontal: 9,
-            borderRadius: 6,
             gap: 2,
           })
         }

src/components/Layout/Header/index.tsx

@@ -129,7 +129,6 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
         size="small"
         variant="ghost"
         color="secondary"
-        shape="square"
         onPress={onPressBack}
         hitSlop={HITSLOP_30}
         style={[

src/components/PostControls/RepostButton.tsx

@@ -204,8 +204,7 @@ let RepostButtonDialogInner = ({
           label={_(msg`Cancel quote post`)}
           onPress={onPressClose}
           size="large"
-          variant="outline"
+          color="secondary">
-          color="primary">
           <ButtonText>
             <Trans>Cancel</Trans>
           </ButtonText>

src/screens/Profile/Header/Shell.tsx

@@ -9,6 +9,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api'
+import {utils} from '@bsky.app/alf'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -26,7 +27,6 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {UserBanner} from '#/view/com/util/UserBanner'
 import {atoms as a, platform, useTheme} from '#/alf'
-import {transparentifyColor} from '#/alf/util/colorGeneration'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow'
@@ -175,14 +175,14 @@ let ProfileHeaderShell = ({
                     style={[
                       a.align_center,
                       a.justify_center,
-                      a.rounded_sm,
+                      a.rounded_full,
                       {
                         width: 31,
                         height: 31,
-                        backgroundColor: transparentifyColor('#000', 0.5),
+                        backgroundColor: utils.alpha('#000', 0.5),
                       },
                       hovered && {
-                        backgroundColor: transparentifyColor('#000', 0.75),
+                        backgroundColor: utils.alpha('#000', 0.75),
                       },
                     ]}>
                     <ArrowLeftIcon size="lg" fill="white" />

src/screens/Search/Shell.tsx

@@ -362,7 +362,7 @@ export function SearchScreenShell({
                     size="large"
                     variant="ghost"
                     color="secondary"
-                    style={[a.px_sm]}
+                    style={[a.px_sm, a.rounded_sm]}
                     onPress={onPressCancelSearch}
                     hitSlop={HITSLOP_10}>
                     <ButtonText>

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -97,7 +97,7 @@ export function TrendRow({
       PressableComponent={Pressable}>
       {({hovered, pressed}) => (
         <>
-          <SubtleHover hover={hovered || pressed} />
+          <SubtleHover hover={hovered || pressed} native />
           <View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}>
             <View style={[a.flex_1, a.gap_xs]}>
               <View style={[a.flex_row]}>

src/view/screens/Lists.tsx

@@ -71,7 +71,6 @@ export function ListsScreen({}: Props) {
           label={_(msg`New list`)}
           testID="newUserListBtn"
           color="secondary"
-          variant="solid"
           size="small"
           onPress={wrappedOnPressNewList}>
           <ButtonIcon icon={PlusIcon} />