dialog button consistency

This commit is contained in:
Josh Hawkins 2026-04-20 07:53:58 -05:00
parent 37e37b21c4
commit b17fbeecbe
3 changed files with 18 additions and 19 deletions

View File

@ -113,18 +113,19 @@ export function DebugReplayContent({
{isDesktop && <SelectSeparator className="my-4 bg-secondary" />} {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
<DialogFooter <DialogFooter
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"} className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
> >
<div <Button
className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`} className={isDesktop ? "" : "w-full"}
aria-label={t("button.cancel", { ns: "common" })}
variant="outline"
onClick={onCancel} onClick={onCancel}
> >
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</div> </Button>
<Button <Button
className={isDesktop ? "" : "w-full"} className={isDesktop ? "" : "w-full"}
variant="select" variant="select"
size="sm"
disabled={isStarting} disabled={isStarting}
onClick={() => { onClick={() => {
if (selectedOption === "timeline") { if (selectedOption === "timeline") {

View File

@ -1043,20 +1043,21 @@ export function ExportContent({
{isDesktop && <SelectSeparator className="my-4 bg-secondary" />} {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
<DialogFooter <DialogFooter
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"} className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
> >
<div <Button
className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`} className={isDesktop ? "" : "w-full"}
aria-label={t("button.cancel", { ns: "common" })}
variant="outline"
onClick={onCancel} onClick={onCancel}
> >
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</div> </Button>
{activeTab === "export" ? ( {activeTab === "export" ? (
<Button <Button
className={isDesktop ? "" : "w-full"} className={isDesktop ? "" : "w-full"}
aria-label={t("export.selectOrExport")} aria-label={t("export.selectOrExport")}
variant="select" variant="select"
size="sm"
disabled={isStartingExport} disabled={isStartingExport}
onClick={async () => { onClick={async () => {
if (selectedOption == "timeline") { if (selectedOption == "timeline") {

View File

@ -197,24 +197,21 @@ export function ShareTimestampContent({
{isDesktop && <Separator className="my-4 bg-secondary" />} {isDesktop && <Separator className="my-4 bg-secondary" />}
<DialogFooter <DialogFooter
className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-4")} className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
> >
{onCancel && ( {onCancel && (
<button <Button
type="button" className={cn(!isDesktop && "w-full")}
className={cn( aria-label={t("button.cancel", { ns: "common" })}
"cursor-pointer p-2 text-center", variant="outline"
!isDesktop && "w-full",
)}
onClick={onCancel} onClick={onCancel}
> >
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
</button> </Button>
)} )}
<Button <Button
className={cn(!isDesktop && "w-full")} className={cn(!isDesktop && "w-full")}
variant="select" variant="select"
size="sm"
onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))} onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
> >
{t("recording.shareTimestamp.button", { ns: "components/dialog" })} {t("recording.shareTimestamp.button", { ns: "components/dialog" })}