about summary refs log tree commit diff
path: root/src/view
diff options
context:
space:
mode:
Diffstat (limited to 'src/view')
-rw-r--r--src/view/com/composer/GifAltText.tsx2
-rw-r--r--src/view/com/composer/threadgate/ThreadgateBtn.tsx2
-rw-r--r--src/view/com/composer/videos/SubtitleDialog.tsx4
-rw-r--r--src/view/com/composer/videos/SubtitleFilePicker.tsx2
-rw-r--r--src/view/com/notifications/FeedItem.tsx2
-rw-r--r--src/view/com/util/post-ctrls/RepostButton.tsx2
-rw-r--r--src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx2
-rw-r--r--src/view/screens/Storybook/Buttons.tsx131
-rw-r--r--src/view/screens/Storybook/index.tsx2
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 />