mirror of
https://github.com/enso-org/enso.git
synced 2024-12-23 23:31:35 +03:00
Replace Button variant="custom" with appropriate variant whenever possible (#10315)
Buttons were switched to `variant="custom"` as low hanging fruit in order to remove `UnstyledButton` (which was strictly inferior UX wise). - Switch buttons to use `variant="submit"` or `variant="cancel"` as appropriate - Replace both `ButtonBar` and `HorizontalMenuBar` with `ButtonGroup` # Important Notes None
This commit is contained in:
somebody1234
GitHub
parent
4c0647ea29
commit
30d97750bf
@ -1,39 +0,0 @@
|
||||
/** @file A styled horizontal button row. Does not have padding; does not have a background. */
|
||||
import * as React from 'react'
|
||||
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
|
||||
import * as tailwindMerge from '#/utilities/tailwindMerge'
|
||||
|
||||
// =================
|
||||
// === ButtonRow ===
|
||||
// =================
|
||||
|
||||
/** The flex `align-self` of a {@link ButtonRow}. */
|
||||
export type ButtonRowPosition = 'center' | 'end' | 'start'
|
||||
|
||||
/** Props for a {@link ButtonRow}. */
|
||||
export interface ButtonRowProps extends Readonly<React.PropsWithChildren> {
|
||||
/** The flex `align-self` of this element. Defaults to `start`. */
|
||||
readonly position?: ButtonRowPosition
|
||||
}
|
||||
|
||||
/** A styled horizontal button row. Does not have padding; does not have a background. */
|
||||
export default function ButtonRow(props: ButtonRowProps) {
|
||||
const { children, position = 'start' } = props
|
||||
const positionClass =
|
||||
position === 'start' ? 'self-start' : position === 'center' ? 'self-center' : 'self-end'
|
||||
|
||||
return (
|
||||
<FocusArea direction="horizontal">
|
||||
{innerProps => (
|
||||
<div
|
||||
className={tailwindMerge.twMerge('gap-buttons relative flex', positionClass)}
|
||||
{...innerProps}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</FocusArea>
|
||||
)
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
/** @file A styled horizontal menu bar. */
|
||||
import * as React from 'react'
|
||||
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
|
||||
import * as tailwindVariants from '#/utilities/tailwindVariants'
|
||||
|
||||
// =================
|
||||
// === Constants ===
|
||||
// =================
|
||||
|
||||
const HORIZONTAL_MENU_BAR_VARIANTS = tailwindVariants.tv({
|
||||
base: 'flex items-center h-row gap-drive-bar',
|
||||
variants: {
|
||||
grow: { true: 'grow' },
|
||||
},
|
||||
})
|
||||
|
||||
// =========================
|
||||
// === HorizontalMenuBar ===
|
||||
// =========================
|
||||
|
||||
/** Props for a {@link HorizontalMenuBar}. */
|
||||
export interface HorizontalMenuBarProps
|
||||
extends Readonly<React.PropsWithChildren>,
|
||||
Readonly<tailwindVariants.VariantProps<typeof HORIZONTAL_MENU_BAR_VARIANTS>> {
|
||||
readonly className?: string
|
||||
}
|
||||
|
||||
/** A styled horizontal menu bar. */
|
||||
export default function HorizontalMenuBar(props: HorizontalMenuBarProps) {
|
||||
const { children, ...variantProps } = props
|
||||
|
||||
return (
|
||||
<FocusArea direction="horizontal">
|
||||
{innerProps => (
|
||||
<div className={HORIZONTAL_MENU_BAR_VARIANTS(variantProps)} {...innerProps}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</FocusArea>
|
||||
)
|
||||
}
|
||||
@ -62,7 +62,7 @@ function SettingsInput(props: SettingsInputProps, ref: React.ForwardedRef<HTMLIn
|
||||
{
|
||||
ref,
|
||||
className:
|
||||
'settings-value w-full rounded-full bg-transparent font-bold placeholder-black/30 transition-colors invalid:border invalid:border-red-700 hover:bg-selected-frame focus:bg-selected-frame',
|
||||
'w-full rounded-full bg-transparent font-bold placeholder-black/30 transition-colors invalid:border invalid:border-red-700 hover:bg-selected-frame focus:bg-selected-frame',
|
||||
...(type == null ? {} : { type: isShowingPassword ? 'text' : type }),
|
||||
disabled: isDisabled,
|
||||
size: 1,
|
||||
|
||||
@ -13,7 +13,6 @@ import AssetListEventType from '#/events/AssetListEventType'
|
||||
import * as assetDiffView from '#/layouts/AssetDiffView'
|
||||
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
import type Backend from '#/services/Backend'
|
||||
import * as backendService from '#/services/Backend'
|
||||
@ -93,7 +92,7 @@ export default function AssetVersion(props: AssetVersionProps) {
|
||||
>
|
||||
{opts => (
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.TooltipTrigger>
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
@ -124,7 +123,7 @@ export default function AssetVersion(props: AssetVersionProps) {
|
||||
{getText('duplicateThisVersion')}
|
||||
</ariaComponents.Tooltip>
|
||||
</ariaComponents.TooltipTrigger>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
<assetDiffView.AssetDiffView
|
||||
latestVersionId={latestVersion.versionId}
|
||||
versionId={version.versionId}
|
||||
|
||||
@ -231,9 +231,8 @@ export default function Drive(props: DriveProps) {
|
||||
|
||||
{!supportLocalBackend && (
|
||||
<ariaComponents.Button
|
||||
variant="primary"
|
||||
size="medium"
|
||||
data-testid="download-free-edition"
|
||||
size="medium"
|
||||
onPress={async () => {
|
||||
const downloadUrl = await github.getDownloadUrl()
|
||||
if (downloadUrl == null) {
|
||||
|
||||
@ -25,7 +25,6 @@ import StartModal from '#/layouts/StartModal'
|
||||
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import HorizontalMenuBar from '#/components/styled/HorizontalMenuBar'
|
||||
|
||||
import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
|
||||
import UpsertDatalinkModal from '#/modals/UpsertDatalinkModal'
|
||||
@ -131,139 +130,131 @@ export default function DriveBar(props: DriveBarProps) {
|
||||
switch (category) {
|
||||
case Category.recent: {
|
||||
return (
|
||||
<div className="flex h-9 items-center">
|
||||
<HorizontalMenuBar grow>
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</HorizontalMenuBar>
|
||||
</div>
|
||||
<ariaComponents.ButtonGroup className="my-0.5 grow-0">
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</ariaComponents.ButtonGroup>
|
||||
)
|
||||
}
|
||||
case Category.trash: {
|
||||
return (
|
||||
<div className="flex h-9 items-center">
|
||||
<HorizontalMenuBar grow>
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
isDisabled={shouldBeDisabled}
|
||||
onPress={() => {
|
||||
setModal(
|
||||
<ConfirmDeleteModal
|
||||
actionText={getText('allTrashedItemsForever')}
|
||||
doDelete={doEmptyTrash}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{getText('clearTrash')}
|
||||
</ariaComponents.Button>
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</HorizontalMenuBar>
|
||||
</div>
|
||||
<ariaComponents.ButtonGroup className="my-0.5 grow-0">
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
isDisabled={shouldBeDisabled}
|
||||
onPress={() => {
|
||||
setModal(
|
||||
<ConfirmDeleteModal
|
||||
actionText={getText('allTrashedItemsForever')}
|
||||
doDelete={doEmptyTrash}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
>
|
||||
{getText('clearTrash')}
|
||||
</ariaComponents.Button>
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</ariaComponents.ButtonGroup>
|
||||
)
|
||||
}
|
||||
case Category.cloud:
|
||||
case Category.local: {
|
||||
return (
|
||||
<div className="flex h-9 items-center">
|
||||
<HorizontalMenuBar grow>
|
||||
<aria.DialogTrigger>
|
||||
<ariaComponents.Button size="medium" variant="tertiary" isDisabled={shouldBeDisabled}>
|
||||
{getText('startWithATemplate')}
|
||||
</ariaComponents.Button>
|
||||
|
||||
<StartModal createProject={doCreateProject} />
|
||||
</aria.DialogTrigger>
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
isDisabled={shouldBeDisabled}
|
||||
onPress={() => {
|
||||
doCreateProject()
|
||||
}}
|
||||
>
|
||||
{getText('newEmptyProject')}
|
||||
<ariaComponents.ButtonGroup className="my-0.5 grow-0">
|
||||
<aria.DialogTrigger>
|
||||
<ariaComponents.Button size="medium" variant="tertiary" isDisabled={shouldBeDisabled}>
|
||||
{getText('startWithATemplate')}
|
||||
</ariaComponents.Button>
|
||||
<div className="flex h-row items-center gap-4 rounded-full border-0.5 border-primary/20 px-[11px] text-primary/50">
|
||||
|
||||
<StartModal createProject={doCreateProject} />
|
||||
</aria.DialogTrigger>
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
isDisabled={shouldBeDisabled}
|
||||
onPress={() => {
|
||||
doCreateProject()
|
||||
}}
|
||||
>
|
||||
{getText('newEmptyProject')}
|
||||
</ariaComponents.Button>
|
||||
<div className="flex h-row items-center gap-4 rounded-full border-0.5 border-primary/20 px-[11px] text-primary/50">
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={AddFolderIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('newFolder')}
|
||||
onPress={() => {
|
||||
doCreateDirectory()
|
||||
}}
|
||||
/>
|
||||
{isCloud && (
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={AddFolderIcon}
|
||||
icon={AddKeyIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('newFolder')}
|
||||
aria-label={getText('newSecret')}
|
||||
onPress={() => {
|
||||
doCreateDirectory()
|
||||
}}
|
||||
/>
|
||||
{isCloud && (
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={AddKeyIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('newSecret')}
|
||||
onPress={() => {
|
||||
setModal(<UpsertSecretModal id={null} name={null} doCreate={doCreateSecret} />)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isCloud && (
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={AddDatalinkIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('newDatalink')}
|
||||
onPress={() => {
|
||||
setModal(<UpsertDatalinkModal doCreate={doCreateDatalink} />)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<aria.Input
|
||||
ref={uploadFilesRef}
|
||||
type="file"
|
||||
multiple
|
||||
id="upload_files_input"
|
||||
name="upload_files_input"
|
||||
className="hidden"
|
||||
onInput={event => {
|
||||
if (event.currentTarget.files != null) {
|
||||
doUploadFiles(Array.from(event.currentTarget.files))
|
||||
}
|
||||
// Clear the list of selected files. Otherwise, `onInput` will not be
|
||||
// dispatched again if the same file is selected.
|
||||
event.currentTarget.value = ''
|
||||
setModal(<UpsertSecretModal id={null} name={null} doCreate={doCreateSecret} />)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isCloud && (
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={DataUploadIcon}
|
||||
icon={AddDatalinkIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('uploadFiles')}
|
||||
aria-label={getText('newDatalink')}
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
uploadFilesRef.current?.click()
|
||||
setModal(<UpsertDatalinkModal doCreate={doCreateDatalink} />)
|
||||
}}
|
||||
/>
|
||||
<ariaComponents.Button
|
||||
isDisabled={!canDownload || shouldBeDisabled}
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={DataDownloadIcon}
|
||||
aria-label={getText('downloadFiles')}
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
dispatchAssetEvent({ type: AssetEventType.downloadSelected })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</HorizontalMenuBar>
|
||||
</div>
|
||||
)}
|
||||
<aria.Input
|
||||
ref={uploadFilesRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onInput={event => {
|
||||
if (event.currentTarget.files != null) {
|
||||
doUploadFiles(Array.from(event.currentTarget.files))
|
||||
}
|
||||
// Clear the list of selected files. Otherwise, `onInput` will not be
|
||||
// dispatched again if the same file is selected.
|
||||
event.currentTarget.value = ''
|
||||
}}
|
||||
/>
|
||||
<ariaComponents.Button
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={DataUploadIcon}
|
||||
isDisabled={shouldBeDisabled}
|
||||
aria-label={getText('uploadFiles')}
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
uploadFilesRef.current?.click()
|
||||
}}
|
||||
/>
|
||||
<ariaComponents.Button
|
||||
isDisabled={!canDownload || shouldBeDisabled}
|
||||
variant="icon"
|
||||
size="medium"
|
||||
icon={DataDownloadIcon}
|
||||
aria-label={getText('downloadFiles')}
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
dispatchAssetEvent({ type: AssetEventType.downloadSelected })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{searchBar}
|
||||
{assetPanelToggle}
|
||||
</ariaComponents.ButtonGroup>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
import SettingsInput from '#/components/styled/SettingsInput'
|
||||
|
||||
import * as eventModule from '#/utilities/event'
|
||||
@ -94,7 +93,7 @@ export default function ChangePasswordForm() {
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</aria.TextField>
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
variant="submit"
|
||||
isDisabled={!canSubmitPassword}
|
||||
@ -114,7 +113,7 @@ export default function ChangePasswordForm() {
|
||||
>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</aria.Form>
|
||||
)
|
||||
}
|
||||
|
||||
@ -19,7 +19,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import KeyboardShortcut from '#/components/dashboard/KeyboardShortcut'
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
import HorizontalMenuBar from '#/components/styled/HorizontalMenuBar'
|
||||
import SvgMask from '#/components/SvgMask'
|
||||
|
||||
import CaptureKeyboardShortcutModal from '#/modals/CaptureKeyboardShortcutModal'
|
||||
@ -54,7 +53,7 @@ export default function KeyboardShortcutsSettingsSection() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<HorizontalMenuBar>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
variant="bar"
|
||||
onPress={() => {
|
||||
@ -75,7 +74,7 @@ export default function KeyboardShortcutsSettingsSection() {
|
||||
>
|
||||
{getText('resetAll')}
|
||||
</ariaComponents.Button>
|
||||
</HorizontalMenuBar>
|
||||
</ariaComponents.ButtonGroup>
|
||||
<FocusArea direction="vertical" focusChildClass="focus-default" focusDefaultClass="">
|
||||
{innerProps => (
|
||||
<div
|
||||
|
||||
@ -12,7 +12,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import * as paywall from '#/components/Paywall'
|
||||
import HorizontalMenuBar from '#/components/styled/HorizontalMenuBar'
|
||||
|
||||
import InviteUsersModal from '#/modals/InviteUsersModal'
|
||||
|
||||
@ -62,7 +61,7 @@ export default function MembersSettingsSection() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<HorizontalMenuBar>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.DialogTrigger>
|
||||
<ariaComponents.Button variant="bar" rounded="full" size="medium">
|
||||
{getText('inviteMembers')}
|
||||
@ -82,7 +81,7 @@ export default function MembersSettingsSection() {
|
||||
<paywall.PaywallDialogButton feature="inviteUserFull" variant="link" showIcon={false} />
|
||||
</div>
|
||||
)}
|
||||
</HorizontalMenuBar>
|
||||
</ariaComponents.ButtonGroup>
|
||||
|
||||
<table className="table-fixed self-start rounded-rows">
|
||||
<thead>
|
||||
|
||||
@ -19,7 +19,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import * as paywallComponents from '#/components/Paywall'
|
||||
import StatelessSpinner, * as statelessSpinner from '#/components/StatelessSpinner'
|
||||
import HorizontalMenuBar from '#/components/styled/HorizontalMenuBar'
|
||||
|
||||
import NewUserGroupModal from '#/modals/NewUserGroupModal'
|
||||
|
||||
@ -131,43 +130,41 @@ export default function UserGroupsSettingsSection(props: UserGroupsSettingsSecti
|
||||
|
||||
return (
|
||||
<>
|
||||
<HorizontalMenuBar>
|
||||
<div className="flex items-center gap-2">
|
||||
{shouldDisplayPaywall && (
|
||||
<paywallComponents.PaywallDialogButton
|
||||
feature="userGroupsFull"
|
||||
variant="bar"
|
||||
size="medium"
|
||||
rounded="full"
|
||||
iconPosition="end"
|
||||
tooltip={getText('userGroupsPaywallMessage')}
|
||||
>
|
||||
{getText('newUserGroup')}
|
||||
</paywallComponents.PaywallDialogButton>
|
||||
)}
|
||||
{!shouldDisplayPaywall && (
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
onPress={event => {
|
||||
const rect = event.target.getBoundingClientRect()
|
||||
const position = { pageX: rect.left, pageY: rect.top }
|
||||
setModal(<NewUserGroupModal backend={backend} event={position} />)
|
||||
}}
|
||||
>
|
||||
{getText('newUserGroup')}
|
||||
</ariaComponents.Button>
|
||||
)}
|
||||
<ariaComponents.ButtonGroup>
|
||||
{shouldDisplayPaywall && (
|
||||
<paywallComponents.PaywallDialogButton
|
||||
feature="userGroupsFull"
|
||||
variant="bar"
|
||||
size="medium"
|
||||
rounded="full"
|
||||
iconPosition="end"
|
||||
tooltip={getText('userGroupsPaywallMessage')}
|
||||
>
|
||||
{getText('newUserGroup')}
|
||||
</paywallComponents.PaywallDialogButton>
|
||||
)}
|
||||
{!shouldDisplayPaywall && (
|
||||
<ariaComponents.Button
|
||||
size="medium"
|
||||
variant="bar"
|
||||
onPress={event => {
|
||||
const rect = event.target.getBoundingClientRect()
|
||||
const position = { pageX: rect.left, pageY: rect.top }
|
||||
setModal(<NewUserGroupModal backend={backend} event={position} />)
|
||||
}}
|
||||
>
|
||||
{getText('newUserGroup')}
|
||||
</ariaComponents.Button>
|
||||
)}
|
||||
|
||||
{isUnderPaywall && (
|
||||
<span className="text-xs">
|
||||
{userGroupsLeft <= 0
|
||||
? getText('userGroupsPaywallMessage')
|
||||
: getText('userGroupsLimitMessage', userGroupsLeft)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</HorizontalMenuBar>
|
||||
{isUnderPaywall && (
|
||||
<span className="text-xs">
|
||||
{userGroupsLeft <= 0
|
||||
? getText('userGroupsPaywallMessage')
|
||||
: getText('userGroupsLimitMessage', userGroupsLeft)}
|
||||
</span>
|
||||
)}
|
||||
</ariaComponents.ButtonGroup>
|
||||
<div
|
||||
ref={rootRef}
|
||||
className={tailwindMerge.twMerge(
|
||||
|
||||
@ -97,6 +97,7 @@ export default function UserRow(props: UserRowProps) {
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
className="absolute right-full mr-4 size-4 -translate-y-1/2"
|
||||
onPress={event => {
|
||||
const rect = event.target.getBoundingClientRect()
|
||||
const position = { pageX: rect.left, pageY: rect.top }
|
||||
@ -110,7 +111,6 @@ export default function UserRow(props: UserRowProps) {
|
||||
/>
|
||||
)
|
||||
}}
|
||||
className="absolute right-full mr-4 size-4 -translate-y-1/2"
|
||||
>
|
||||
<img src={Cross2} className="size-4" />
|
||||
</ariaComponents.Button>
|
||||
|
||||
@ -14,7 +14,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
|
||||
import UserMenu from '#/layouts/UserMenu'
|
||||
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import * as paywall from '#/components/Paywall'
|
||||
import Button from '#/components/styled/Button'
|
||||
@ -124,7 +123,7 @@ export default function UserBar(props: UserBarProps) {
|
||||
)
|
||||
}}
|
||||
>
|
||||
<aria.Text slot="label">{getText('share')}</aria.Text>
|
||||
{getText('share')}
|
||||
</ariaComponents.Button>
|
||||
)}
|
||||
<Button
|
||||
|
||||
@ -10,7 +10,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import KeyboardShortcut from '#/components/dashboard/KeyboardShortcut'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
import * as inputBindings from '#/utilities/inputBindings'
|
||||
import * as tailwindMerge from '#/utilities/tailwindMerge'
|
||||
@ -122,12 +121,10 @@ export default function CaptureKeyboardShortcutModal(props: CaptureKeyboardShort
|
||||
<aria.Text className="relative text-red-600">
|
||||
{doesAlreadyExist ? 'This shortcut already exists.' : ''}
|
||||
</aria.Text>
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
variant="submit"
|
||||
isDisabled={!canSubmit}
|
||||
className="button bg-invite text-white enabled:active"
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
onSubmit(shortcut)
|
||||
@ -135,15 +132,10 @@ export default function CaptureKeyboardShortcutModal(props: CaptureKeyboardShort
|
||||
>
|
||||
{getText('confirm')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
className="button bg-selected-frame active"
|
||||
onPress={unsetModal}
|
||||
>
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -9,7 +9,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
import * as tailwindMerge from '#/utilities/tailwindMerge'
|
||||
|
||||
@ -68,25 +67,14 @@ export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
|
||||
}}
|
||||
>
|
||||
<aria.Text className="relative">{getText('confirmPrompt', actionText)}</aria.Text>
|
||||
<ButtonRow>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
className="button bg-delete text-white active"
|
||||
onPress={doSubmit}
|
||||
>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button variant="delete" onPress={doSubmit}>
|
||||
{actionButtonLabel}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
autoFocus
|
||||
className="button bg-selected-frame active"
|
||||
onPress={unsetModal}
|
||||
>
|
||||
<ariaComponents.Button autoFocus variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -9,7 +9,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
// ==============================
|
||||
// === ConfirmDeleteUserModal ===
|
||||
@ -59,7 +58,7 @@ export default function ConfirmDeleteUserModal(props: ConfirmDeleteUserModalProp
|
||||
<aria.Text className="relative mb-2 text-balance text-center">
|
||||
{getText('confirmDeleteUserAccountWarning')}
|
||||
</aria.Text>
|
||||
<ButtonRow position="center">
|
||||
<ariaComponents.ButtonGroup className="self-center">
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
@ -68,7 +67,7 @@ export default function ConfirmDeleteUserModal(props: ConfirmDeleteUserModalProp
|
||||
>
|
||||
<aria.Text className="text">{getText('confirmDeleteUserAccountButtonLabel')}</aria.Text>
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -13,7 +13,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import AssetSummary from '#/components/dashboard/AssetSummary'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
import * as backendModule from '#/services/Backend'
|
||||
|
||||
@ -190,7 +189,6 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
</aria.Text>
|
||||
)}
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="cancel"
|
||||
isDisabled={didUploadNonConflicting}
|
||||
onPress={() => {
|
||||
@ -218,9 +216,8 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
/>
|
||||
</div>
|
||||
{count > 1 && (
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="cancel"
|
||||
onPress={() => {
|
||||
doUpdate([firstConflict])
|
||||
@ -239,7 +236,6 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
{getText('update')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="cancel"
|
||||
onPress={() => {
|
||||
doRename([firstConflict])
|
||||
@ -259,7 +255,7 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
? getText('renameNewFile')
|
||||
: getText('renameNewProject')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@ -277,9 +273,8 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
: getText('andOtherProjects', otherProjectsCount)}
|
||||
</aria.Text>
|
||||
)}
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="submit"
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
@ -290,7 +285,6 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
{count === 1 ? getText('update') : getText('updateAll')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="submit"
|
||||
onPress={() => {
|
||||
unsetModal()
|
||||
@ -306,10 +300,10 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
|
||||
? getText('renameNewFiles')
|
||||
: getText('renameNewProjects')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button size="small" variant="cancel" onPress={unsetModal}>
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -193,15 +193,11 @@ export default function ManageLabelsModal<
|
||||
</div>
|
||||
</FocusRing>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
variant="submit"
|
||||
isDisabled={!canCreateNewLabel}
|
||||
className="button bg-invite px-button-x text-tag-text enabled:active"
|
||||
onPress={eventModule.submitForm}
|
||||
>
|
||||
<aria.Text className="h-text py-modal-invite-button-text-y">
|
||||
{getText('create')}
|
||||
</aria.Text>
|
||||
{getText('create')}
|
||||
</ariaComponents.Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -11,7 +11,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import ColorPicker from '#/components/ColorPicker'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
import FocusRing from '#/components/styled/FocusRing'
|
||||
|
||||
@ -131,25 +130,14 @@ export default function NewLabelModal(props: NewLabelModalProps) {
|
||||
</ColorPicker>
|
||||
)}
|
||||
</FocusArea>
|
||||
<ButtonRow>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
isDisabled={!canSubmit}
|
||||
className="button bg-invite text-white enabled:active"
|
||||
onPress={doSubmit}
|
||||
>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button variant="submit" isDisabled={!canSubmit} onPress={doSubmit}>
|
||||
{getText('create')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
className="button bg-selected-frame active"
|
||||
onPress={unsetModal}
|
||||
>
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -10,7 +10,6 @@ import * as textProvider from '#/providers/TextProvider'
|
||||
import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
|
||||
import type Backend from '#/services/Backend'
|
||||
|
||||
@ -108,7 +107,7 @@ export default function NewUserGroupModal(props: NewUserGroupModalProps) {
|
||||
</div>
|
||||
<aria.FieldError className="text-red-700/90">{nameError}</aria.FieldError>
|
||||
</aria.TextField>
|
||||
<ButtonRow>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button
|
||||
variant="submit"
|
||||
isDisabled={!canSubmit}
|
||||
@ -119,7 +118,7 @@ export default function NewUserGroupModal(props: NewUserGroupModalProps) {
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -11,7 +11,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import DatalinkInput from '#/components/dashboard/DatalinkInput'
|
||||
import Modal from '#/components/Modal'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
import FocusRing from '#/components/styled/FocusRing'
|
||||
|
||||
@ -93,25 +92,14 @@ export default function UpsertDatalinkModal(props: UpsertDatalinkModalProps) {
|
||||
<div className="relative">
|
||||
<DatalinkInput dropdownTitle="Type" value={value} setValue={setValue} />
|
||||
</div>
|
||||
<ButtonRow>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
isDisabled={!isSubmittable}
|
||||
className="button bg-invite text-white enabled:active"
|
||||
onPress={doSubmit}
|
||||
>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button variant="submit" isDisabled={!isSubmittable} onPress={doSubmit}>
|
||||
{getText('create')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button
|
||||
size="custom"
|
||||
variant="custom"
|
||||
className="button bg-selected-frame active"
|
||||
onPress={unsetModal}
|
||||
>
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -13,7 +13,6 @@ import * as aria from '#/components/aria'
|
||||
import * as ariaComponents from '#/components/AriaComponents'
|
||||
import Modal from '#/components/Modal'
|
||||
import Button from '#/components/styled/Button'
|
||||
import ButtonRow from '#/components/styled/ButtonRow'
|
||||
import FocusArea from '#/components/styled/FocusArea'
|
||||
import FocusRing from '#/components/styled/FocusRing'
|
||||
|
||||
@ -123,19 +122,14 @@ export default function UpsertSecretModal(props: UpsertSecretModalProps) {
|
||||
)}
|
||||
</FocusArea>
|
||||
</div>
|
||||
<ButtonRow>
|
||||
<ariaComponents.Button
|
||||
size="small"
|
||||
variant="submit"
|
||||
isDisabled={!canSubmit}
|
||||
onPress={doSubmit}
|
||||
>
|
||||
<ariaComponents.ButtonGroup>
|
||||
<ariaComponents.Button variant="submit" isDisabled={!canSubmit} onPress={doSubmit}>
|
||||
{isCreatingSecret ? getText('create') : getText('update')}
|
||||
</ariaComponents.Button>
|
||||
<ariaComponents.Button size="small" variant="cancel" onPress={unsetModal}>
|
||||
<ariaComponents.Button variant="cancel" onPress={unsetModal}>
|
||||
{getText('cancel')}
|
||||
</ariaComponents.Button>
|
||||
</ButtonRow>
|
||||
</ariaComponents.ButtonGroup>
|
||||
</form>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
@ -598,9 +598,6 @@ inset 0 -36px 51px -51px #00000014`,
|
||||
'.text-subheading': {
|
||||
'@apply text-xl leading-snug py-0.5': '',
|
||||
},
|
||||
'.settings-value': {
|
||||
'@apply leading-cozy h-text py-px px-2': '',
|
||||
},
|
||||
},
|
||||
{
|
||||
respectPrefix: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user