fix: casing across all settings pages (#5675)

web/ce/components/projects/settings/useProjectColumns.tsx

@@ -40,7 +40,7 @@ export const useProjectColumns = () => {
   const columns = [
     {
       key: "Full Name",
-      content: "Full Name",
+      content: "Full name",
       thClassName: "text-left",
       tdRender: (rowData: RowData) => (
         <NameColumn
@@ -54,13 +54,13 @@ export const useProjectColumns = () => {
     },
     {
       key: "Display Name",
-      content: "Display Name",
+      content: "Display name",
       tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
     },
 
     {
       key: "Account Type",
-      content: "Account Type",
+      content: "Account type",
       tdRender: (rowData: RowData) => (
         <AccountTypeColumn
           rowData={rowData}
@@ -72,7 +72,7 @@ export const useProjectColumns = () => {
     },
     {
       key: "Joining Date",
-      content: "Joining Date",
+      content: "Joining date",
       tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData?.member?.joining_date || "")}</div>,
     },
   ];

web/ce/components/workspace/billing/root.tsx

@@ -15,7 +15,7 @@ export const BillingRoot = () => (
         <h4 className="text-md mb-1 leading-6">Current plan</h4>
         <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
         <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
-          <Button variant="neutral-primary">View Plans</Button>
+          <Button variant="neutral-primary">View plans</Button>
         </a>
       </div>
     </div>

web/ce/components/workspace/delete-workspace-section.tsx

@@ -34,7 +34,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
             buttonClassName="flex w-full items-center justify-between py-4"
             title={
               <>
-                <span className="text-lg tracking-tight">Delete Workspace</span>
+                <span className="text-lg tracking-tight">Delete workspace</span>
                 {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
               </>
             }

web/core/components/automation/auto-close-automation.tsx

@@ -81,7 +81,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             <div className="">
               <h4 className="text-sm font-medium">Auto-close issues</h4>
               <p className="text-sm tracking-tight text-custom-text-200">
-                Plane will automatically close issue that haven{"'"}t been completed or canceled.
+                Plane will automatically close issues that haven{"'"}t been completed or canceled.
               </p>
             </div>
           </div>
@@ -134,7 +134,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                 </div>
 
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
-                  <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
+                  <div className="w-1/2 text-sm font-medium">Auto-close status</div>
                   <div className="w-1/2 ">
                     <CustomSearchSelect
                       value={currentProjectDetails?.default_state ?? defaultState}

web/core/components/estimates/create/modal.tsx

@@ -194,7 +194,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
           </Button>
           {estimatePoints && (
             <Button variant="primary" size="sm" onClick={handleCreateEstimate} disabled={buttonLoader}>
-              {buttonLoader ? `Creating` : `Create Estimate`}
+              {buttonLoader ? `Creating` : `Create estimate`}
             </Button>
           )}
         </div>

web/core/components/exporter/guide.tsx

@@ -114,7 +114,7 @@ const IntegrationGuide = observer(() => {
           <div>
             <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
               <div className="flex items-center gap-2">
-                <h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
+                <h3 className="flex gap-2 text-xl font-medium">Previous exports</h3>
 
                 <button
                   type="button"

web/core/components/onboarding/tour/root.tsx

@@ -176,7 +176,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                       toggleCreateProjectModal(true);
                     }}
                   >
-                    Create my first project
+                    Create your first project
                   </Button>
                 )}
               </div>

web/core/components/profile/notification/email-notification-form.tsx

@@ -79,7 +79,7 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6 pb-2">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">State Change</div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">State change</div>
             <div className="text-sm font-normal text-custom-text-300">
               Notify me when the issues moves to a different state
             </div>

web/core/components/project-states/create-update/form.tsx

@@ -94,7 +94,7 @@ export const StateForm: FC<TStateForm> = (props) => {
       />
 
       <Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
-        cancel
+        Cancel
       </Button>
 
       <Button type="submit" variant="primary" size="sm" disabled={buttonDisabled}>

web/core/components/project/delete-project-modal.tsx

@@ -118,7 +118,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete project</h3>
                     </span>
                   </div>
                   <span>
@@ -181,7 +181,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting..." : "Delete Project"}
+                      {isSubmitting ? "Deleting" : "Delete project"}
                     </Button>
                   </div>
                 </form>

web/core/components/project/form-loader.tsx

@@ -29,7 +29,7 @@ export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
     </div>
     <div className="my-8 flex flex-col gap-8">
       <div className="flex flex-col gap-1">
-        <h4 className="text-sm">Project Name</h4>
+        <h4 className="text-sm">Project name</h4>
         <Loader>
           <Loader.Item height="46px" width="100%" />
         </Loader>

web/core/components/project/form.tsx

@@ -213,7 +213,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       </div>
       <div className="my-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Project Name</h4>
+          <h4 className="text-sm">Project name</h4>
           <Controller
             control={control}
             name="name"
@@ -234,7 +234,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.name)}
                 className="rounded-md !p-3 font-medium"
-                placeholder="Project Name"
+                placeholder="Project name"
                 disabled={!isAdmin}
               />
             )}
@@ -290,7 +290,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     onChange={handleIdentifierChange}
                     ref={ref}
                     hasError={Boolean(errors.identifier)}
-                    placeholder="Enter Project ID"
+                    placeholder="Enter project ID"
                     className="w-full font-medium"
                     disabled={!isAdmin}
                   />

web/core/components/project/project-settings-member-defaults.tsx

@@ -115,7 +115,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
       <div className="flex w-full flex-col gap-2 pb-4">
         <div className="flex w-full items-center gap-4 py-4">
           <div className="flex w-1/2 flex-col gap-2">
-            <h4 className="text-sm">Project Lead</h4>
+            <h4 className="text-sm">Project lead</h4>
             <div className="">
               {currentProjectDetails ? (
                 <Controller
@@ -140,7 +140,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
           </div>
 
           <div className="flex w-1/2 flex-col gap-2">
-            <h4 className="text-sm">Default Assignee</h4>
+            <h4 className="text-sm">Default assignee</h4>
             <div className="">
               {currentProjectDetails ? (
                 <Controller

web/core/components/project/send-project-invitation-modal.tsx

@@ -210,7 +210,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Invite Members
+                      Invite members
                     </Dialog.Title>
                     <div className="mt-2">
                       <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>

web/core/components/project/settings/delete-project-section.tsx

@@ -21,7 +21,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
       {({ open }) => (
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
-            <span className="text-xl tracking-tight">Delete Project</span>
+            <span className="text-xl tracking-tight">Delete project</span>
             {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
           </Disclosure.Button>
 
@@ -37,8 +37,8 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
             <Disclosure.Panel>
               <div className="flex flex-col gap-8 pt-4">
                 <span className="text-sm tracking-tight">
-                  When deleting a project, all of the data and resources within that project will be
-                  permanently removed and cannot be recovered.
+                  When deleting a project, all of the data and resources within that project will be permanently removed
+                  and cannot be recovered.
                 </span>
                 <div>
                   {projectDetails ? (

web/core/components/workspace/delete-workspace-modal.tsx

@@ -124,7 +124,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                       <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Workspace</h3>
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete workspace</h3>
                     </span>
                   </div>
 
@@ -191,7 +191,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                       Cancel
                     </Button>
                     <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting..." : "Delete Workspace"}
+                      {isSubmitting ? "Deleting" : "Delete workspace"}
                     </Button>
                   </div>
                 </form>

web/core/components/workspace/settings/workspace-details.tsx

@@ -296,7 +296,7 @@ export const WorkspaceDetails: FC = observer(() => {
           {isAdmin && (
             <div className="flex items-center justify-between py-2">
               <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isLoading}>
-                {isLoading ? "Updating..." : "Update Workspace"}
+                {isLoading ? "Updating" : "Update workspace"}
               </Button>
             </div>
           )}

web/core/components/workspace/sidebar/quick-actions.tsx

@@ -36,7 +36,7 @@ export const SidebarQuickActions = observer(() => {
   const canCreateIssue = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
-  );  
+  );
   const disabled = joinedProjectIds.length === 0 || !canCreateIssue;
   const workspaceDraftIssue = workspaceSlug ? (storedValue?.[workspaceSlug] ?? undefined) : undefined;
 
@@ -121,7 +121,7 @@ export const SidebarQuickActions = observer(() => {
                       className="flex w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-3 py-[10px] text-sm text-custom-text-300 shadow"
                     >
                       <PenSquare size={16} className="mr-2 !text-lg !leading-4 text-custom-sidebar-text-300" />
-                      Last Drafted Issue
+                      Last drafted issue
                     </button>
                   </div>
                 </div>

web/core/constants/themes.ts

@@ -14,7 +14,7 @@ export interface I_THEME_OPTION {
 export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     value: "system",
-    label: "System Preference",
+    label: "System preference",
     type: "light",
     icon: {
       border: "#DEE2E6",
@@ -44,7 +44,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   },
   {
     value: "light-contrast",
-    label: "Light High Contrast",
+    label: "Light high contrast",
     type: "light",
     icon: {
       border: "#000000",
@@ -54,7 +54,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   },
   {
     value: "dark-contrast",
-    label: "Dark High Contrast",
+    label: "Dark high contrast",
     type: "dark",
     icon: {
       border: "#FFFFFF",
@@ -64,7 +64,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   },
   {
     value: "custom",
-    label: "Custom Theming",
+    label: "Custom theme",
     type: "light",
     icon: {
       border: "#FFC9C9",