Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rename Action to Button #347

Merged
merged 3 commits into from
Sep 22, 2024
Merged

Rename Action to Button #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c57fd91
Update extension naming
lemonmade Sep 20, 2024
7675fbc
Rename app code
lemonmade Sep 20, 2024
e907f36
Fix lints
lemonmade Sep 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/gentle-seas-jam.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@watching/clips-preact': patch
'@watching/clips-react': patch
'@watching/design': patch
'@watching/clips': patch
'@watching/tools': patch
---

Rename `ui-action` to `ui-button`
90 changes: 45 additions & 45 deletions app/features/Account/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Heading,
TextBlock,
BlockStack,
Action,
Button,
Section,
Text,
Banner,
Expand Down Expand Up @@ -37,7 +37,7 @@ import {
useGraphQLQueryData,
useGraphQLMutation,
} from '~/shared/graphql.ts';
import {SignInWithAppleAction} from '~/shared/auth.ts';
import {SignInWithAppleButton} from '~/shared/auth.ts';

import {SearchParam, PaymentStatus} from '~/global/subscriptions.ts';

Expand Down Expand Up @@ -170,14 +170,14 @@ function AccountSection({
<Section>
<BlockStack spacing>
<TextBlock>Email: {email}</TextBlock>
<Action
<Button
onPress={async () => {
await signOut.run();
navigate('/signed-out');
}}
>
Sign out
</Action>
</Button>

{paymentBanner}

Expand Down Expand Up @@ -217,10 +217,10 @@ function FreeAccountSection({onUpdate}: {onUpdate(): Promise<void>}) {
</List>

<InlineStack spacing="small">
<Action overlay={<AccountGiftCodeModal onUpdate={onUpdate} />}>
<Button overlay={<AccountGiftCodeModal onUpdate={onUpdate} />}>
Use gift code…
</Action>
<DeleteAccountAction />
</Button>
<DeleteAccountButton />
</InlineStack>
</BlockStack>

Expand Down Expand Up @@ -290,26 +290,26 @@ function MemberAccountSection({

<InlineStack spacing="small">
{giftCode == null && (
<Action overlay={<AccountGiftCodeModal onUpdate={onUpdate} />}>
<Button overlay={<AccountGiftCodeModal onUpdate={onUpdate} />}>
Use gift code…
</Action>
</Button>
)}

{subscription?.status === 'ACTIVE' && (
<CancelSubscriptionAction onUpdate={onUpdate} />
<CancelSubscriptionButton onUpdate={onUpdate} />
)}

<DeleteAccountAction />
<DeleteAccountButton />
</InlineStack>
</BlockStack>
);
}

function DeleteAccountAction() {
function DeleteAccountButton() {
return (
<Action role="destructive" overlay={<DeleteAccountModal />}>
<Button role="destructive" overlay={<DeleteAccountModal />}>
Delete…
</Action>
</Button>
);
}

Expand All @@ -324,25 +324,25 @@ function DeleteAccountModal() {
You won’t be able to get any of your data back once you delete your
account.
</TextBlock>
<Action
<Button
role="destructive"
onPress={async () => {
await deleteAccount.run();
navigate('/goodbye');
}}
>
Delete account
</Action>
</Button>
</BlockStack>
</Modal>
);
}

function CancelSubscriptionAction({onUpdate}: {onUpdate(): Promise<void>}) {
function CancelSubscriptionButton({onUpdate}: {onUpdate(): Promise<void>}) {
return (
<Action overlay={<CancelSubscriptionModal onUpdate={onUpdate} />}>
<Button overlay={<CancelSubscriptionModal onUpdate={onUpdate} />}>
Cancel…
</Action>
</Button>
);
}

Expand All @@ -357,15 +357,15 @@ function CancelSubscriptionModal({onUpdate}: {onUpdate(): Promise<void>}) {
current season watchthroughs will not be interrupted, and all your
watch activity will be preserved.
</TextBlock>
<Action
<Button
role="destructive"
onPress={async () => {
await cancelSubscription.run();
await onUpdate();
}}
>
Cancel subscription
</Action>
</Button>
</BlockStack>
</Modal>
);
Expand Down Expand Up @@ -430,12 +430,12 @@ function SubscribeSection({
{children}
</BlockStack>

<SubscribeAction level={level}>Subscribe…</SubscribeAction>
<SubscribeButton level={level}>Subscribe…</SubscribeButton>
</BlockStack>
);
}

function SubscribeAction({
function SubscribeButton({
level,
children,
}: RenderableProps<{
Expand All @@ -445,7 +445,7 @@ function SubscribeAction({
const prepareSubscription = useGraphQLMutation(prepareSubscriptionMutation);

return (
<Action
<Button
to="../my/payment"
inlineSize="fill"
onPress={async () => {
Expand All @@ -457,7 +457,7 @@ function SubscribeAction({
}}
>
{children}
</Action>
</Button>
);
}

Expand All @@ -481,7 +481,7 @@ function AccountGiftCodeModal({onUpdate}: {onUpdate(): Promise<void>}) {
<BlockStack spacing>
<TextField label="Gift code" value={code} />

<Action perform="submit">Redeem</Action>
<Button perform="submit">Redeem</Button>
</BlockStack>
</Form>
</Modal>
Expand Down Expand Up @@ -511,7 +511,7 @@ function PasskeySection({
</BlockStack>
)}

<Action
<Button
onPress={async () => {
const [{startRegistration}, result] = await Promise.all([
import('@simplewebauthn/browser'),
Expand All @@ -538,7 +538,7 @@ function PasskeySection({
}}
>
Create a Passkey
</Action>
</Button>
</BlockStack>
</Section>
);
Expand All @@ -555,7 +555,7 @@ function Passkey(props: PasskeyProps) {
return (
<InlineGrid spacing sizes={['fill', 'auto']}>
<Text>{id}</Text>
<Action overlay={<PasskeyManageMenu {...props} />}>Manage</Action>
<Button overlay={<PasskeyManageMenu {...props} />}>Manage</Button>
</InlineGrid>
);
}
Expand All @@ -566,7 +566,7 @@ function PasskeyManageMenu({passkey: {id}, onUpdate}: PasskeyProps) {
return (
<Popover>
<Menu>
<Action
<Button
icon="delete"
role="destructive"
onPress={async () => {
Expand All @@ -575,7 +575,7 @@ function PasskeyManageMenu({passkey: {id}, onUpdate}: PasskeyProps) {
}}
>
Delete
</Action>
</Button>
</Menu>
</Popover>
);
Expand All @@ -600,16 +600,16 @@ function AppleSection({
<Heading divider>Apple account</Heading>
{account?.email ? <Text>email: {account.email}</Text> : null}
{account ? (
<Action
<Button
onPress={async () => {
await disconnectAppleAccount.run();
await onUpdate();
}}
>
Disconnect
</Action>
</Button>
) : (
<SignInWithAppleAction
<SignInWithAppleButton
redirectUrl={
new URL('/internal/auth/apple/connect/callback', currentUrl)
}
Expand All @@ -623,7 +623,7 @@ function AppleSection({
}}
>
Connect
</SignInWithAppleAction>
</SignInWithAppleButton>
)}
</BlockStack>
</Section>
Expand All @@ -650,14 +650,14 @@ function GoogleSection({
<BlockStack spacing>
<Heading divider>Google account</Heading>
<TextBlock>username: {email}</TextBlock>
<Action
<Button
onPress={async () => {
await disconnectAccount.run();
await onUpdate();
}}
>
Disconnect
</Action>
</Button>
</BlockStack>
</Section>
);
Expand Down Expand Up @@ -687,14 +687,14 @@ function ConnectGoogleAccount({onUpdate}: {onUpdate(): Promise<void>}) {
<TextBlock>
Connecting your Google account lets you sign in with Google.
</TextBlock>
<Action
<Button
onPress={() => {
setError(false);
open({redirectTo: currentUrl.href});
}}
>
Connect Google
</Action>
</Button>
</BlockStack>
</Section>
);
Expand All @@ -720,10 +720,10 @@ function GithubSection({
<BlockStack spacing>
<Heading divider>Github account</Heading>
<TextBlock>username: {username}</TextBlock>
<Action to={profileUrl} target="new">
<Button to={profileUrl} target="new">
Visit profile
</Action>
<Action
</Button>
<Button
onPress={async () => {
await disconnectAccount.run();
onConnectionChange();
Expand All @@ -732,7 +732,7 @@ function GithubSection({
<Text>
Disconnect <Text emphasis="strong">{username}</Text>
</Text>
</Action>
</Button>
</BlockStack>
</Section>
);
Expand Down Expand Up @@ -766,14 +766,14 @@ function ConnectGithubAccount({
<TextBlock>
Connecting your Github account lets you sign in with Github.
</TextBlock>
<Action
<Button
onPress={() => {
setError(false);
open({redirectTo: currentUrl.href});
}}
>
Connect Github
</Action>
</Button>
</BlockStack>
</Section>
);
Expand Down
Loading
Loading