create custom component for default inputs for easier refactoring

src/common/DefaultInput.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface DefaultInputProps {
+  customStyle?: React.CSSProperties;
+  width?: number | string;
+  textAlign?: "left" | "center" | "right";
+  type?: string;
+  value?: string | number;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+}
+
+const DefaultInput: React.FC<DefaultInputProps> = ({
+  customStyle,
+  width,
+  textAlign = "left",
+  type,
+  value,
+  onChange,
+  placeholder,
+}) => {
+  const baseStyle: React.CSSProperties = {
+    textAlign,
+    width: width || "100%",
+    boxShadow: "var(--shadow)",
+    ...customStyle,
+  };
+
+  return (
+    <input
+      className="default-input"
+      placeholder={placeholder}
+      style={baseStyle}
+      type={type}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default DefaultInput;

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.scss

@@ -36,11 +36,7 @@
     padding: 8px 18px;
     cursor: pointer;
   }
-  .default-input {
-    width: 100%;
-    padding: 8px 8px !important;
-    border-radius: 4px !important;
-  }
+
   .default-input::-webkit-inner-spin-button,
   .default-input::-webkit-outer-spin-button {
     -webkit-appearance: none;

src/components/GoalsComponents/GoalConfigModal/ConfigGoal.tsx

@@ -21,6 +21,7 @@ import { ILocationState } from "@src/Interfaces";
 import { useLocation, useNavigate } from "react-router-dom";
 import { suggestedGoalState } from "@src/store/SuggestedGoalState";
 import { getHistoryUptoGoal } from "@src/helpers/GoalProcessor";
+import DefaultInput from "@src/common/DefaultInput";
 import { colorPalleteList, calDays, convertOnFilterToArray, getSelectedLanguage } from "../../../utils";
 
 import "./ConfigGoal.scss";
@@ -429,14 +430,15 @@ const ConfigGoal = ({ type, goal, mode }: { type: TGoalCategory; mode: TGoalConf
               </div>
               <div className="place-middle justify-fs gap-16">
                 <span>{t("duration")}</span>
-                <input
+                <DefaultInput
                   type="number"
-                  style={{ textAlign: "center", maxWidth: 30, width: 20, boxShadow: "var(--shadow)" }}
-                  className="default-input"
                   value={tags.duration}
+                  width={20}
+                  textAlign="center"
                   onChange={(e) => {
                     setTags({ ...tags, duration: roundOffHours(e.target.value) });
                   }}
+                  customStyle={{ borderRadius: "4px", padding: "8px 8px" }}
                 />
                 <span>{t("dueDate")}</span>
                 <CustomDatePicker

src/components/MyTimeComponents/Focus.tsx/Focus.tsx

@@ -6,6 +6,7 @@ import { Progress } from "antd";
 import "./focus.scss";
 import { formatTimeDisplay } from "@src/utils";
 import { useTranslation } from "react-i18next";
+import DefaultInput from "@src/common/DefaultInput";
 
 export const Focus = () => {
   const { t } = useTranslation();
@@ -76,9 +77,7 @@ export const Focus = () => {
       />
       {editMode ? (
         <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-          <input
-            className="default-input"
-            style={{ textAlign: "center", maxWidth: 100 }}
+          <DefaultInput
             placeholder="minutes"
             value={userEnteredTime}
             onChange={(e) => setUserEnteredTime(e.target.value)}

src/global.scss

@@ -140,7 +140,6 @@ h6 {
   border-radius: 8px;
   outline: none;
   border: none;
-  color: black;
   background: var(--secondary-background);
 }
 

src/pages/InvitePage/InvitePage.tsx

@@ -8,6 +8,7 @@ import { acceptRelationship } from "@src/services/contact.service";
 import OnboardingLayout from "@src/layouts/OnboardingLayout";
 import { displayPartnerModeTour } from "@src/store/TourState";
 import { LocalStorageKeys } from "@src/constants/localStorageKeys";
+import DefaultInput from "@src/common/DefaultInput";
 
 const InvitePage = () => {
   const navigate = useNavigate();
@@ -60,11 +61,10 @@ const InvitePage = () => {
         <br />
         Add them to your contact list.
       </p>
-      <input
-        style={{ width: "100%", fontWeight: 500 }}
-        onChange={(e) => setNewContactName(e.target.value)}
-        className="default-input"
+      <DefaultInput
         placeholder="Contact name"
+        value={newContactName}
+        onChange={(e) => setNewContactName(e.target.value)}
       />
       {/* Make this button a component */}
       <button
@@ -73,7 +73,6 @@ const InvitePage = () => {
         style={{ alignSelf: "right" }}
         onClick={handleSubmit}
       >
-        {" "}
         Add to my contacts
       </button>
     </OnboardingLayout>