Restyle org name change section

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx

@@ -3,9 +3,11 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { FormControl,Input } from "@app/components/v2";
+import { 
+    Button,
+    FormControl,
+    Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { 
     useGetOrgBillingDetails,
@@ -26,7 +28,7 @@ export const CompanyNameSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
     
     useEffect(() => {
         if (data) {
@@ -40,7 +42,7 @@ export const CompanyNameSection = () => {
         try {
             if (!currentOrg?._id) return;
             if (name === "") return;
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 name,
                 organizationId: currentOrg._id
             });
@@ -82,15 +84,13 @@ export const CompanyNameSection = () => {
                     name="name"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved company name")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx

@@ -3,9 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import Button from "@app/components/basic/buttons/Button";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
+  Button,
   FormControl,
   Input} from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -28,7 +28,7 @@ export const InvoiceEmailSection = () => {
         resolver: yupResolver(schema)
     });
     const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
-    const updateOrgBillingDetails = useUpdateOrgBillingDetails();
+    const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();
 
     useEffect(() => {
         if (data) {
@@ -43,7 +43,7 @@ export const InvoiceEmailSection = () => {
             if (!currentOrg?._id) return;
             if (email === "") return;
 
-            await updateOrgBillingDetails.mutateAsync({
+            await mutateAsync({
                 email,
                 organizationId: currentOrg._id
             });
@@ -85,15 +85,13 @@ export const InvoiceEmailSection = () => {
                     name="email"
                 />
             </div>
-            <div className="inline-block">
-                <Button
-                    text="Save"
-                    type="submit"
-                    color="mineshaft"
-                    size="md"
-                    onButtonPressed={() => console.log("Saved email address")}
-                />
-            </div>
+            <Button
+                type="submit"
+                colorSchema="secondary"
+                isLoading={isLoading}
+            >
+                Save
+            </Button>
         </form>
     );
 }

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx

@@ -1,6 +1,10 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useAddOrgPmtMethod } from "@app/hooks/api";
 
@@ -8,11 +12,11 @@ import { PmtMethodsTable } from "./PmtMethodsTable";
 
 export const PmtMethodsSection = () => {
     const { currentOrg } = useOrganization();
-    const addOrgPmtMethod = useAddOrgPmtMethod();
+    const { mutateAsync, isLoading } = useAddOrgPmtMethod();
     
     const handleAddPmtMethodBtnClick = async () => {
         if (!currentOrg?._id) return;
-        const url = await addOrgPmtMethod.mutateAsync({
+        const url = await mutateAsync({
             organizationId: currentOrg._id,
             success_url: window.location.href,
             cancel_url: window.location.href
@@ -27,16 +31,14 @@ export const PmtMethodsSection = () => {
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Payment Methods
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add method"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={handleAddPmtMethodBtnClick}
-                    />
-                </div>
+                <Button
+                    onClick={handleAddPmtMethodBtnClick}
+                    colorSchema="secondary"
+                    isLoading={isLoading}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <PmtMethodsTable />
         </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx

@@ -1,6 +1,9 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
-import Button from "@app/components/basic/buttons/Button";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "@app/components/v2";
+// import Button from "@app/components/basic/buttons/Button";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { TaxIDModal } from "./TaxIDModal";
@@ -17,16 +20,13 @@ export const TaxIDSection = () => {
                 <h2 className="text-xl font-semibold flex-1 text-white">
                     Tax ID
                 </h2>
-                <div className="inline-block">
-                    <Button
-                        text="Add Tax ID"
-                        type="submit"
-                        color="mineshaft"
-                        size="md"
-                        icon={faPlus}
-                        onButtonPressed={() => handlePopUpOpen("addTaxID")}
-                    />
-                </div>
+                <Button
+                    onClick={() => handlePopUpOpen("addTaxID")}
+                    colorSchema="secondary"
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add method
+                </Button>
             </div>
             <TaxIDTable />
             <TaxIDModal 

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -18,7 +18,6 @@ import {
   useGetOrgUsers,
   useGetUserWorkspaceMemberships,
   useGetUserWsKey,
-  useRenameOrg,
   useUpdateOrgUserRole,
   useUploadWsKey
 } from "@app/hooks/api";
@@ -47,7 +46,7 @@ export const OrgSettingsPage = () => {
   const { data: incidentContact, isLoading: IsIncidentContactLoading } =
     useGetOrgIncidentContact(orgId);
 
-  const renameOrg = useRenameOrg();
+  
   const removeUserOrgMembership = useDeleteOrgMembership();
   const addUserToOrg = useAddUserToOrg();
   const updateOrgUserRole = useUpdateOrgUserRole();
@@ -59,24 +58,6 @@ export const OrgSettingsPage = () => {
 
   const isMoreUsersNotAllowed = subscription?.memberLimit ? (subscription.membersUsed >= subscription.memberLimit) : false;
 
-  const onRenameOrg = async (name: string) => {
-    if (!currentOrg?._id) return;
-
-    try {
-      await renameOrg.mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
-      createNotification({
-        text: "Successfully renamed organization",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to rename organization",
-        type: "error"
-      });
-    }
-  };
-
   const onRemoveUserOrgMembership = async (membershipId: string) => {
     if (!currentOrg?._id) return;
 
@@ -216,7 +197,7 @@ export const OrgSettingsPage = () => {
         <p className="text-base font-normal text-gray-400">{t("settings.org.description")}</p>
       </div>
       <div className="max-w-8xl ml-6 mr-6 flex flex-col text-mineshaft-50">
-        <OrgNameChangeSection orgName={currentOrg?.name} onOrgNameChange={onRenameOrg} />
+        <OrgNameChangeSection />
         <div className="mb-6 w-full rounded-md bg-white/5 p-6">
           <p className="mr-4 mb-4 text-xl font-semibold text-white">
             {t("section.members.org-members")}

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -1,17 +1,13 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
-
-type Props = {
-  orgName?: string;
-  onOrgNameChange: (name: string) => Promise<void>;
-};
+import { useOrganization } from "@app/context";
+import { useRenameOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -19,33 +15,54 @@ const formSchema = yup.object({
 
 type FormData = yup.InferType<typeof formSchema>;
 
-export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.Element => {
+export const OrgNameChangeSection = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
   const {
     handleSubmit,
     control,
-    reset,
-    formState: { isDirty, isSubmitting }
+    reset
   } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-  const { t } = useTranslation();
+  const { mutateAsync, isLoading } = useRenameOrg();
 
   useEffect(() => {
-    reset({ name: orgName });
-  }, [orgName]);
+    if (currentOrg) {
+      reset({ name: currentOrg.name });
+    }
+  }, [currentOrg]);
 
   const onFormSubmit = async ({ name }: FormData) => {
-    await onOrgNameChange(name);
+    try {
+      if (!currentOrg?._id) return;
+      if (name === "") return;
+
+      await mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
+      createNotification({
+        text: "Successfully renamed organization",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename organization",
+        type: "error"
+      });
+    }
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
-        <p className="mb-4 mt-2 text-xl font-semibold">{t("common.display-name")}</p>
-        <div className="mb-2 w-full max-w-lg">
+    <form 
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 "
+    >
+        <p className="text-xl font-semibold text-mineshaft-100 mb-8">{t("common.display-name")}</p>
+        <div className="mb-2 max-w-md">
           <Controller
             defaultValue=""
             render={({ field, fieldState: { error } }) => (
               <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input placeholder="Type your org name" {...field} />
+                <Input placeholder="Acme Corp" {...field} />
               </FormControl>
             )}
             control={control}
@@ -53,17 +70,13 @@ export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.E
           />
         </div>
         <Button
-          isLoading={isSubmitting}
+          isLoading={isLoading}
           color="primary"
-          variant="outline_bg"
-          size="sm"
+          colorSchema="secondary"
           type="submit"
-          isDisabled={!isDirty || isSubmitting}
-          leftIcon={<FontAwesomeIcon icon={faCheck} />}
         >
-          {t("common.save-changes")}
+          Save
         </Button>
-      </div>
     </form>
   );
 };