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
2024-12-23 18:34:03 +03:00 · 2024-07-09 00:32:24 +10:00 · 2024-07-09 00:32:24 +10:00 · 30d97750bf
commit 30d97750bf
parent 4c0647ea29
22 changed files with 178 additions and 343 deletions
--- a/app/ide-desktop/lib/dashboard/src/components/styled/ButtonRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/styled/ButtonRow.tsx
@ -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>
-  )
-}
--- a/app/ide-desktop/lib/dashboard/src/components/styled/HorizontalMenuBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/styled/HorizontalMenuBar.tsx
@ -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>
-  )
-}
--- a/app/ide-desktop/lib/dashboard/src/components/styled/SettingsInput.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/styled/SettingsInput.tsx
@ -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,
--- a/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersion.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/AssetVersions/AssetVersion.tsx
@ -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}
--- a/app/ide-desktop/lib/dashboard/src/layouts/Drive.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Drive.tsx
@ -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) {
--- a/app/ide-desktop/lib/dashboard/src/layouts/DriveBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/DriveBar.tsx
@ -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>
      )
    }
  }
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/ChangePasswordForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/ChangePasswordForm.tsx
@ -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>
  )
 }
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
@ -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
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/MembersSettingsSection.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/MembersSettingsSection.tsx
@ -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>
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupsSettingsSection.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupsSettingsSection.tsx
@ -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(
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
@ -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>
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
@ -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
--- a/app/ide-desktop/lib/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/CaptureKeyboardShortcutModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/ConfirmDeleteModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/ConfirmDeleteModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/ConfirmDeleteUserModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/ConfirmDeleteUserModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/DuplicateAssetsModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/DuplicateAssetsModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/ManageLabelsModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/ManageLabelsModal.tsx
@ -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>
              )}
--- a/app/ide-desktop/lib/dashboard/src/modals/NewLabelModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/NewLabelModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/NewUserGroupModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/NewUserGroupModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/UpsertDatalinkModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/UpsertDatalinkModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/src/modals/UpsertSecretModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/UpsertSecretModal.tsx
@ -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>
  )
--- a/app/ide-desktop/lib/dashboard/tailwind.config.js
+++ b/app/ide-desktop/lib/dashboard/tailwind.config.js
@ -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,