+1

src/components/AppLanguageDropdown.tsx

··· 48 48 })} 49 49 variant="ghost" 50 50 color="secondary" 51 51 + shape="rectangular" 51 52 style={[ 52 53 a.pr_xs, 53 54 a.pl_sm,

+29 -1

src/components/Button.tsx

··· 39 39 | 'primary_subtle' 40 40 | 'negative_subtle' 41 41 export type ButtonSize = 'tiny' | 'small' | 'large' 42 42 - export type ButtonShape = 'round' | 'square' | 'default' 42 42 + export type ButtonShape = 'round' | 'square' | 'rectangular' | 'default' 43 43 export type VariantProps = { 44 44 /** 45 45 * The style variation of the button ··· 56 56 size?: ButtonSize 57 57 /** 58 58 * The shape of the button 59 59 + * 60 60 + * - `default`: Pill shaped. Most buttons should use this shape. 61 61 + * - `round`: Circular. For icon-only buttons. 62 62 + * - `square`: Square. For icon-only buttons. 63 63 + * - `rectangular`: Rectangular. Matches previous style, use when adjacent to form fields. 59 64 */ 60 65 shape?: ButtonShape 61 66 } ··· 450 455 baseStyles.push(a.rounded_full, { 451 456 paddingVertical: 5, 452 457 paddingHorizontal: 9, 458 458 + gap: 2, 459 459 + }) 460 460 + } 461 461 + } else if (shape === 'rectangular') { 462 462 + if (size === 'large') { 463 463 + baseStyles.push({ 464 464 + paddingVertical: 12, 465 465 + paddingHorizontal: 25, 466 466 + borderRadius: 10, 467 467 + gap: 3, 468 468 + }) 469 469 + } else if (size === 'small') { 470 470 + baseStyles.push({ 471 471 + paddingVertical: 8, 472 472 + paddingHorizontal: 13, 473 473 + borderRadius: 8, 474 474 + gap: 3, 475 475 + }) 476 476 + } else if (size === 'tiny') { 477 477 + baseStyles.push({ 478 478 + paddingVertical: 5, 479 479 + paddingHorizontal: 9, 480 480 + borderRadius: 6, 453 481 gap: 2, 454 482 }) 455 483 }

+1 -1

src/components/Select/index.tsx

··· 106 106 style={[a.flex_1, a.justify_between]} 107 107 color="secondary" 108 108 size="small" 109 109 - variant="solid"> 109 109 + shape="rectangular"> 110 110 <>{children}</> 111 111 </Button> 112 112 )

+2 -1

src/screens/Search/Shell.tsx

··· 362 362 size="large" 363 363 variant="ghost" 364 364 color="secondary" 365 365 - style={[a.px_sm, a.rounded_sm]} 365 365 + shape="rectangular" 366 366 + style={[a.px_sm]} 366 367 onPress={onPressCancelSearch} 367 368 hitSlop={HITSLOP_10}> 368 369 <ButtonText>

+2 -3

src/screens/Settings/AppPasswords.tsx

··· 5 5 FadeOut, 6 6 LayoutAnimationConfig, 7 7 LinearTransition, 8 8 - StretchOutY, 9 8 } from 'react-native-reanimated' 10 9 import {type ComAtprotoServerListAppPasswords} from '@atproto/api' 11 10 import {msg, Trans} from '@lingui/macro' ··· 14 13 15 14 import {type CommonNavigatorParams} from '#/lib/routes/types' 16 15 import {cleanError} from '#/lib/strings/errors' 17 17 - import {isWeb} from '#/platform/detection' 18 16 import { 19 17 useAppPasswordDeleteMutation, 20 18 useAppPasswordsQuery, ··· 94 92 key={appPassword.name} 95 93 style={a.w_full} 96 94 entering={FadeIn} 97 97 - exiting={isWeb ? FadeOut : StretchOutY} 95 95 + exiting={FadeOut} 98 96 layout={LinearTransition.delay(150)}> 99 97 <SettingsList.Item> 100 98 <AppPasswordCard appPassword={appPassword} /> ··· 188 186 variant="ghost" 189 187 color="negative" 190 188 size="small" 189 189 + shape="square" 191 190 style={[a.bg_transparent]} 192 191 onPress={() => deleteControl.open()}> 193 192 <ButtonIcon icon={TrashIcon} />

+1 -1

src/screens/Settings/LanguageSettings.tsx

··· 164 164 label={_(msg`Select content languages`)} 165 165 size="small" 166 166 color="secondary" 167 167 - variant="solid" 167 167 + shape="rectangular" 168 168 onPress={onPressContentLanguages} 169 169 style={[a.justify_start, web({maxWidth: 400})]}> 170 170 <ButtonIcon

+7 -2

src/screens/Settings/components/ChangeHandleDialog.tsx

··· 500 500 value={currentAccount?.did ?? ''} 501 501 label={_(msg`Copy DID`)} 502 502 size="large" 503 503 - variant="solid" 503 503 + shape="rectangular" 504 504 color="secondary" 505 505 - style={[a.px_md, a.border, t.atoms.border_contrast_low]}> 505 505 + style={[ 506 506 + a.px_md, 507 507 + a.border, 508 508 + t.atoms.border_contrast_low, 509 509 + t.atoms.bg_contrast_25, 510 510 + ]}> 506 511 <Text style={[a.text_md, a.flex_1]}>{currentAccount?.did}</Text> 507 512 <ButtonIcon icon={CopyIcon} /> 508 513 </CopyButton>