improvement: adjust commit modal wording and icons and autofocus commit message

This commit is contained in:
Scott Wilson
2025-08-12 14:08:17 -07:00
parent f16dca45d9
commit 1b40f5d475
2 changed files with 18 additions and 9 deletions
@@ -328,12 +328,12 @@ const Page = () => {
createNotification({ createNotification({
text: isProtectedBranch text: isProtectedBranch
? "Requested changes have been sent for review" ? "Requested changes have been sent for review"
: "Changes committed successfully", : "Changes saved successfully",
type: "success" type: "success"
}); });
} catch (error) { } catch (error) {
createNotification({ createNotification({
text: "Failed to commit changes", text: "Failed to save changes",
type: "error" type: "error"
}); });
console.error(error); console.error(error);
@@ -1,6 +1,14 @@
/* eslint-disable jsx-a11y/label-has-associated-control */ /* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useCallback, useState } from "react"; import React, { useCallback, useState } from "react";
import { faCodeCommit, faEye, faFolder, faKey } from "@fortawesome/free-solid-svg-icons"; import {
faClipboardCheck,
faClipboardList,
faCodeCommit,
faEye,
faFolder,
faKey,
faSave
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2"; import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
@@ -328,12 +336,12 @@ export const CommitForm: React.FC<CommitFormProps> = ({
</Button> </Button>
<Button <Button
variant="solid" variant="solid"
leftIcon={<FontAwesomeIcon icon={faEye} />} leftIcon={<FontAwesomeIcon icon={faSave} />}
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
isDisabled={totalChangesCount === 0} isDisabled={totalChangesCount === 0}
className="px-6" className="px-6"
> >
Review Changes Save Changes
</Button> </Button>
</div> </div>
</div> </div>
@@ -345,14 +353,14 @@ export const CommitForm: React.FC<CommitFormProps> = ({
<ModalContent <ModalContent
title={ title={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FontAwesomeIcon icon={faCodeCommit} className="text-mineshaft-400" /> <FontAwesomeIcon icon={faClipboardCheck} className="text-mineshaft-400" />
Commit Changes Review Changes
<Badge variant="primary" className="mt-[0.05rem]"> <Badge variant="primary" className="mt-[0.05rem]">
{totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""} {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
</Badge> </Badge>
</div> </div>
} }
subTitle={"Write a commit message and review the changes you&apos;re about to commit."} subTitle="Write a commit message and review the changes you're about to save."
className="max-h-[90vh] max-w-[95%] md:max-w-7xl" className="max-h-[90vh] max-w-[95%] md:max-w-7xl"
> >
<div className="space-y-6"> <div className="space-y-6">
@@ -413,6 +421,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
onChange={(e) => setCommitMessage(e.target.value)} onChange={(e) => setCommitMessage(e.target.value)}
placeholder="Describe your changes..." placeholder="Describe your changes..."
className="w-full" className="w-full"
autoFocus
required required
/> />
</div> </div>
@@ -435,7 +444,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
> >
{isCommitting ? "Committing..." : "Commit Changes"} {isCommitting ? "Save..." : "Save Changes"}
</Button> </Button>
</div> </div>
</div> </div>