Replaced ButtonV2's with Button in entire codebase

public/locale/en.json

@@ -315,6 +315,7 @@
   "add_new_patient": "Add New Patient",
   "add_new_user": "Add New User",
   "add_notes": "Add notes",
+  "add_patient_updates": "Add Patient Updates",
   "add_policy": "Add Insurance Policy",
   "add_prescription_medication": "Add Prescription Medication",
   "add_prescription_to_consultation_note": "Add a new prescription to this consultation.",

src/CAREUI/display/Callout.tsx

@@ -2,10 +2,8 @@ import React from "react";
 
 import { cn } from "@/lib/utils";
 
-import { ButtonVariant } from "@/components/Common/ButtonV2";
-
 interface CalloutProps {
-  variant?: ButtonVariant;
+  variant?: "primary" | "secondary" | "warning" | "alert" | "danger";
   className?: string;
   badge: string;
   children: React.ReactNode;

src/CAREUI/display/PopupModal.tsx

@@ -1,7 +1,8 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import DialogModal from "@/components/Common/Dialog";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
@@ -41,9 +42,13 @@ export default function PopupModal(props: Props) {
       <div className="space-y-6">
         {props.children}
         <div className="cui-form-button-group px-4">
-          <Cancel onClick={props.onHide} label={t("close")} shadow={false} />
+          <Button variant="outline" onClick={props.onHide}>
+            <span>{t("close")}</span>
+          </Button>
           {props.onSubmit && (
-            <Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
+            <Button variant="primary" onClick={props.onSubmit}>
+              <span>{t("save")}</span>
+            </Button>
           )}
         </div>
       </div>
@@ -141,9 +146,13 @@ const DesktopView = (props: Props) => {
     >
       {children}
       <div className="flex w-full items-center justify-end gap-2 rounded-b-lg border-t border-t-secondary-300 bg-secondary-100 p-2">
-        <Cancel onClick={props.onHide} label={t("close")} shadow={false} />
+        <Button variant="outline" onClick={props.onHide}>
+          <span>{t("close")}</span>
+        </Button>
         {props.onSubmit && (
-          <Submit onClick={props.onSubmit} label={t("save")} shadow={false} />
+          <Button variant="primary" onClick={props.onSubmit}>
+            <span>{t("save")}</span>
+          </Button>
         )}
       </div>
     </div>

src/CAREUI/interactive/FiltersSlideover.tsx

@@ -6,8 +6,6 @@ import SlideOver from "@/CAREUI/interactive/SlideOver";
 
 import { Button } from "@/components/ui/button";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
-
 import useFilters from "@/hooks/useFilters";
 
 type AdvancedFilter = ReturnType<typeof useFilters>["advancedFilter"];
@@ -35,18 +33,13 @@ export default function FiltersSlideover({
         <div className="flex items-center justify-between">
           <span className="text-lg font-bold">{t("filters")}</span>
           <div className="mr-2 flex items-center justify-end gap-1">
-            <ButtonV2
-              variant="danger"
-              ghost
-              onClick={onClear}
-              id="clear-filter"
-            >
+            <Button variant="warning" onClick={onClear} id="clear-filter">
               <CareIcon icon="l-filter-slash" className="text-lg" />
               <span>{t("clear")}</span>
-            </ButtonV2>
-            <ButtonV2 ghost onClick={onApply} id="apply-filter">
+            </Button>
+            <Button variant="alert" onClick={onApply} id="apply-filter">
               {t("apply")}
-            </ButtonV2>
+            </Button>
           </div>
         </div>
       }

src/CAREUI/interactive/Zoom.tsx

@@ -2,7 +2,7 @@ import { ReactNode, createContext, useContext, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
 
 type ProviderValue = {
   scale: number;
@@ -69,31 +69,25 @@ export const ZoomControls = (props: { disabled?: boolean }) => {
 
   return (
     <div className="absolute bottom-8 right-8 flex flex-col items-center justify-center gap-1 rounded-full border border-secondary-400 bg-white p-0.5 shadow-lg md:flex-row-reverse md:gap-2">
-      <ButtonV2
+      <Button
         disabled={props.disabled}
-        circle
-        variant="secondary"
-        size="small"
-        shadow={false}
-        className="p-2.5"
+        variant="ghost"
+        className="p-2.5 rounded-full"
         onClick={ctx.zoomIn}
       >
         <CareIcon icon="l-search-plus" className="text-lg" />
-      </ButtonV2>
+      </Button>
       <span className="text-sm font-semibold text-secondary-800">
         {Math.round(ctx.scale * 100)}%
       </span>
-      <ButtonV2
+      <Button
         disabled={props.disabled}
-        circle
-        variant="secondary"
-        size="small"
-        shadow={false}
-        className="p-2.5"
+        variant="ghost"
+        className="p-2.5 rounded-full"
         onClick={ctx.zoomOut}
       >
         <CareIcon icon="l-search-minus" className="text-lg" />
-      </ButtonV2>
+      </Button>
     </div>
   );
 };

src/CAREUI/misc/PaginatedList.tsx

@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2, { CommonButtonProps } from "@/components/Common/ButtonV2";
+import { Button, ButtonProps } from "@/components/ui/button";
+
 import Pagination from "@/components/Common/Pagination";
 
 import { PaginatedResponse, QueryRoute } from "@/Utils/request/types";
@@ -118,13 +119,16 @@ const WhenLoading = <TItem extends object>(props: WhenEmptyProps) => {
 
 PaginatedList.WhenLoading = WhenLoading;
 
+interface CommonButtonProps extends ButtonProps {
+  label?: string;
+}
+
 const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
   const { loading, refetch } = useContextualized<object>();
 
   return (
-    <ButtonV2
+    <Button
       variant="secondary"
-      border
       {...props}
       onClick={() => refetch()}
       disabled={loading}
@@ -134,7 +138,7 @@ const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
         className={classNames("text-lg", loading && "animate-spin")}
       />
       <span>{label}</span>
-    </ButtonV2>
+    </Button>
   );
 };
 

src/components/Auth/ResetPassword.tsx

@@ -2,7 +2,8 @@ import { navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { validateRule } from "@/components/Users/UserFormValidations";
 
@@ -173,8 +174,20 @@ const ResetPassword = (props: ResetPasswordProps) => {
                 )}
             </div>
             <div className="grid p-4 sm:flex sm:justify-between">
-              <Cancel onClick={() => navigate("/login")} />
-              <Submit onClick={(e) => handleSubmit(e)} label="reset" />
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => navigate("/login")}
+              >
+                <span>{t("cancel")}</span>
+              </Button>
+              <Button
+                variant="primary"
+                type="submit"
+                onClick={(e) => handleSubmit(e)}
+              >
+                <span>{t("reset")}</span>
+              </Button>
             </div>
           </form>
         </div>