diff options
Diffstat (limited to 'src/view')
-rw-r--r-- | src/view/com/composer/GifAltText.tsx | 2 | ||||
-rw-r--r-- | src/view/com/composer/threadgate/ThreadgateBtn.tsx | 2 | ||||
-rw-r--r-- | src/view/com/composer/videos/SubtitleDialog.tsx | 4 | ||||
-rw-r--r-- | src/view/com/composer/videos/SubtitleFilePicker.tsx | 2 | ||||
-rw-r--r-- | src/view/com/notifications/FeedItem.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/post-ctrls/RepostButton.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx | 2 | ||||
-rw-r--r-- | src/view/screens/Storybook/Buttons.tsx | 131 | ||||
-rw-r--r-- | src/view/screens/Storybook/index.tsx | 2 |
9 files changed, 92 insertions, 57 deletions
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index b7690e102..a37452604 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -160,7 +160,7 @@ function AltTextInner({ </View> <Button label={_(msg`Save`)} - size="medium" + size="large" color="primary" variant="solid" onPress={onPressSubmit}> diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx index 666473afd..c4ce9a232 100644 --- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx +++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx @@ -60,7 +60,7 @@ export function ThreadgateBtn({ <Button variant="solid" color="secondary" - size="xsmall" + size="small" testID="openReplyGateButton" onPress={onPress} label={label} diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx index 10c2d7564..c07fdfc56 100644 --- a/src/view/com/composer/videos/SubtitleDialog.tsx +++ b/src/view/com/composer/videos/SubtitleDialog.tsx @@ -44,7 +44,7 @@ export function SubtitleDialogBtn(props: Props) { ? _('Opens captions and alt text dialog') : _('Opens alt text dialog') } - size="xsmall" + size="small" color="secondary" variant="ghost" onPress={() => { @@ -169,7 +169,7 @@ function SubtitleDialogInner({ <View style={web([a.flex_row, a.justify_end])}> <Button label={_(msg`Done`)} - size={isWeb ? 'small' : 'medium'} + size={isWeb ? 'small' : 'large'} color="primary" variant="solid" onPress={() => { diff --git a/src/view/com/composer/videos/SubtitleFilePicker.tsx b/src/view/com/composer/videos/SubtitleFilePicker.tsx index 856a0eb4f..44a6b53b6 100644 --- a/src/view/com/composer/videos/SubtitleFilePicker.tsx +++ b/src/view/com/composer/videos/SubtitleFilePicker.tsx @@ -57,7 +57,7 @@ export function SubtitleFilePicker({ <Button onPress={handleClick} label={_('Select subtitle file (.vtt)')} - size="medium" + size="large" color="primary" variant="solid" disabled={disabled}> diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index b1cf3b485..b248bb4c5 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -412,7 +412,7 @@ function SayHelloBtn({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) { label={_(msg`Say hello!`)} variant="ghost" color="primary" - size="xsmall" + size="small" style={[a.self_center, {marginLeft: 'auto'}]} disabled={isLoading} onPress={async () => { diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index 8c4928dfc..0ecdf25b9 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -157,7 +157,7 @@ let RepostButton = ({ label={_(msg`Cancel quote post`)} onAccessibilityEscape={close} onPress={close} - size="medium" + size="large" variant="solid" color="primary"> <ButtonText>{_(msg`Cancel`)}</ButtonText> diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx index 36b32a072..6b509d09a 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx @@ -26,7 +26,7 @@ export function ControlButton({ onPress={onPress} variant="ghost" shape="round" - size="medium" + size="large" style={a.p_2xs} hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}> {active ? ( diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index 2935103df..66040c2e3 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -9,7 +9,6 @@ import { ButtonText, ButtonVariant, } from '#/components/Button' -import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/Arrow' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {H1} from '#/components/Typography' @@ -70,81 +69,115 @@ export function Buttons() { ), )} </View> - {/* - <View style={[a.gap_md, a.align_start]}> - {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map( - name => ( - <React.Fragment key={name}> - <Button - variant="gradient" - color={name as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - <Button - disabled - variant="gradient" - color={name as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - </React.Fragment> - ), - )} - </View> - */} </View> </View> <View style={[a.flex_wrap, a.gap_md, a.align_start]}> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonIcon icon={Globe} position="left" /> + <ButtonText>Button</ButtonText> + </Button> + </View> + + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" size="lg" /> + </Button> <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" + size="large" + shape="round" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button + variant="solid" + color="primary" size="large" + shape="round" label="Link out"> - <ButtonText>Link out</ButtonText> - <ButtonIcon icon={ArrowTopRight} position="right" /> + <ButtonIcon icon={ChevronLeft} size="lg" /> </Button> + </View> + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="small" + shape="round" label="Link out"> - <ButtonText>Link out</ButtonText> - <ButtonIcon icon={ArrowTopRight} position="right" /> + <ButtonIcon icon={ChevronLeft} /> </Button> - <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="small" + shape="round" label="Link out"> - <ButtonText>Link xxxxxx</ButtonText> + <ButtonIcon icon={ChevronLeft} size="lg" /> </Button> + </View> + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> <Button - variant="gradient" - color="gradient_sky" - size="small" + variant="solid" + color="primary" + size="tiny" + shape="round" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Link out</ButtonText> + <ButtonIcon icon={ChevronLeft} /> </Button> - <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="tiny" + shape="round" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Link out</ButtonText> + <ButtonIcon icon={ChevronLeft} size="md" /> </Button> </View> - <View style={[a.flex_row, a.gap_md, a.align_start]}> + <View style={[a.flex_row, a.gap_md, a.align_center]}> <Button variant="solid" color="primary" diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index 71dbe8839..c6beecefe 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -80,6 +80,8 @@ function StorybookInner() { </Button> </View> + <Buttons /> + <Dialogs /> <ThemeProvider theme="light"> <Theming /> |