From 9a09558f51dc0342b18715590fffa3e07be9cd57 Mon Sep 17 00:00:00 2001
From: Kanika Bansal <kanika.bansal@juspay.in>
Date: Thu, 30 Jan 2025 17:52:29 +0530
Subject: [PATCH] fix: ui-fixes

---
 public/hyperswitch/icons/solid.svg                     |  9 +++++++++
 src/components/DatePicker.res                          |  2 +-
 src/components/LoadedTable.res                         |  2 +-
 src/components/PopUpConfirm.res                        |  2 +-
 .../AuthModule/TwoFaAuth/TotpRecoveryCodes.res         |  2 +-
 src/entryPoints/SidebarValues.res                      | 10 ++++++----
 .../ApplePay/ApplePayIntegrationHelper.res             |  4 ++--
 .../Connectors/PaymentProcessor/ConnectorPreview.res   |  4 +---
 .../Developer/APIKeys/PublishableAndHashKeySection.res |  2 ++
 .../Developer/PaymentSettings/PaymentSettings.res      |  5 ++---
 src/screens/Helpers/HelperComponents.res               |  4 ++--
 src/screens/OMPSwitch/OMPSwitchHelper.res              | 10 +++++-----
 src/screens/OMPSwitch/OrgSwitch.res                    |  2 +-
 src/screens/Routing/ActiveRouting.res                  |  1 +
 src/screens/Routing/CustomModal.res                    |  2 +-
 src/screens/RoutingRevamp/AdvancedRouting.res          |  2 +-
 .../HSwitchSandboxOnboarding/UserOnboardingUIUtils.res |  2 +-
 .../HSwitchProfile/TwoFaSettings/RegenerateRC.res      |  2 +-
 src/screens/Sidebar/OrgSidebar.res                     |  4 ++--
 src/screens/Transaction/Order/HSwitchOrderUtils.res    |  7 +++----
 tailwind.config.js                                     |  3 +++
 21 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/public/hyperswitch/icons/solid.svg b/public/hyperswitch/icons/solid.svg
index 3be1077fc..9adff768d 100644
--- a/public/hyperswitch/icons/solid.svg
+++ b/public/hyperswitch/icons/solid.svg
@@ -9171,4 +9171,13 @@ License)
       stroke-linejoin="round"
     />
   </symbol>
+
+<symbol id="nd-arrow-right" width="11" height="8" viewBox="0 0 11 8" fill="none">
+<path d="M7.21687 0.75C8.35621 1.5926 9.37951 2.57692 10.2615 3.67808C10.3372 3.77254 10.375 3.88627 10.375 4M7.21687 7.25C8.35621 6.4074 9.37951 5.42308 10.2615 4.32192C10.3372 4.22746 10.375 4.11373 10.375 4M10.375 4L0.625 4" stroke="currentColor" stroke-width="1.08333" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="nd-plus" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<path d="M7.99992 13.1667V8.5M7.99992 8.5V3.83333M7.99992 8.5L3.33325 8.5M7.99992 8.5L12.6666 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
 </svg>
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 24c74d182..2714b96fb 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -245,7 +245,7 @@ let make = (
           calendarElement
         </BottomModal>
       } else {
-        <div className={`absolute flex w-max z-10  ${fullLengthWidthClass} ${styleClass}`}>
+        <div className={`absolute flex w-max z-10 bg-white ${fullLengthWidthClass} ${styleClass}`}>
           calendarElement
         </div>
       }}
diff --git a/src/components/LoadedTable.res b/src/components/LoadedTable.res
index bc0ac31a0..bd7c91333 100644
--- a/src/components/LoadedTable.res
+++ b/src/components/LoadedTable.res
@@ -20,7 +20,7 @@ let checkBoxPropDefaultVal: checkBoxProps = {
 
 let sortAtom: Recoil.recoilAtom<Dict.t<sortOb>> = Recoil.atom("sortAtom", Dict.make())
 
-let backgroundClass = "bg-gray-50 dark:bg-jp-gray-darkgray_background"
+let backgroundClass = "dark:bg-jp-gray-darkgray_background"
 
 let useSortedObj = (title: string, defaultSort) => {
   let (dict, setDict) = Recoil.useRecoilState(sortAtom)
diff --git a/src/components/PopUpConfirm.res b/src/components/PopUpConfirm.res
index d4fc214a3..819efdea3 100644
--- a/src/components/PopUpConfirm.res
+++ b/src/components/PopUpConfirm.res
@@ -128,7 +128,7 @@ let make = (
 
   <AddDataAttributes attributes=[("data-component", `popUpConfirm ${confirmType}`)]>
     <div
-      className={`${showModal} ${overlayStyle} fixed cursor-default h-screen w-screen z-100 inset-0 overflow-auto`}
+      className={`${showModal} ${overlayStyle} fixed cursor-default h-screen w-screen z-50 inset-0 overflow-auto`}
       onClick=handleOverlayClick>
       // <Reveal showReveal=showPopUp revealFrom=Reveal.Top>
       <div
diff --git a/src/entryPoints/AuthModule/TwoFaAuth/TotpRecoveryCodes.res b/src/entryPoints/AuthModule/TwoFaAuth/TotpRecoveryCodes.res
index 98db84be0..ff954fe62 100644
--- a/src/entryPoints/AuthModule/TwoFaAuth/TotpRecoveryCodes.res
+++ b/src/entryPoints/AuthModule/TwoFaAuth/TotpRecoveryCodes.res
@@ -65,7 +65,7 @@ let make = (~setTwoFaPageState, ~onClickDownload, ~setShowNewQR) => {
         </div>
         <div className="flex gap-4 justify-end">
           <Button
-            leftIcon={CustomIcon(<img alt="copy" src={`/assets/CopyToClipboard.svg`} />)}
+            leftIcon={CustomIcon(<Icon name="nd-copy" className="cursor-pointer" />)}
             text={"Copy"}
             buttonType={Secondary}
             buttonSize={Small}
diff --git a/src/entryPoints/SidebarValues.res b/src/entryPoints/SidebarValues.res
index 719b94394..f2b9e0d97 100644
--- a/src/entryPoints/SidebarValues.res
+++ b/src/entryPoints/SidebarValues.res
@@ -11,8 +11,10 @@ module GetProductionAccess = {
     let {isProdIntentCompleted, setShowProdIntentForm} = React.useContext(
       GlobalProvider.defaultContext,
     )
+    let {globalUIConfig: {sidebarColor: {borderColor}}} = React.useContext(
+      ThemeProvider.themeContext,
+    )
     let isProdIntent = isProdIntentCompleted->Option.getOr(false)
-    let backgroundColor = isProdIntent ? "bg-light_green" : "bg-light_blue"
     let cursorStyles = isProdIntent ? "cursor-default" : "cursor-pointer"
     let productionAccessString = isProdIntent
       ? "Production Access Requested"
@@ -21,7 +23,7 @@ module GetProductionAccess = {
     switch isProdIntentCompleted {
     | Some(_) =>
       <div
-        className={`flex items-center gap-2 ${backgroundColor} ${cursorStyles} px-4 py-3 whitespace-nowrap rounded`}
+        className={`flex items-center gap-2 border ${borderColor}  ${cursorStyles} px-3 py-10-px whitespace-nowrap rounded-lg justify-between`}
         onClick={_ => {
           isProdIntent
             ? ()
@@ -30,11 +32,11 @@ module GetProductionAccess = {
                 mixpanelEvent(~eventName="get_production_access")
               }
         }}>
-        <div className={`text-white ${textStyles} !font-semibold`}>
+        <div className={`text-nd_gray-700 ${textStyles} !font-semibold`}>
           {productionAccessString->React.string}
         </div>
         <RenderIf condition={!isProdIntent}>
-          <Icon name="thin-right-arrow" customIconColor="text-white" size=20 />
+          <Icon name="nd-arrow-right" size=20 className="pt-1" />
         </RenderIf>
       </div>
     | None =>
diff --git a/src/screens/Connectors/PaymentProcessor/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res b/src/screens/Connectors/PaymentProcessor/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
index 5efabe39d..b59794504 100644
--- a/src/screens/Connectors/PaymentProcessor/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
+++ b/src/screens/Connectors/PaymentProcessor/ConnectorMetaData/ApplePay/ApplePayIntegrationHelper.res
@@ -116,8 +116,8 @@ module SampleEmail = {
             {isTextVisible ? truncatedText->React.string : truncatedTextElement}
           </span>
         </div>
-        <img
-          src={`/assets/CopyToClipboard.svg`}
+        <Icon
+          name="nd-copy"
           className="cursor-pointer h-fit w-fit"
           onClick={_ => {
             Clipboard.writeText(emailContent)
diff --git a/src/screens/Connectors/PaymentProcessor/ConnectorPreview.res b/src/screens/Connectors/PaymentProcessor/ConnectorPreview.res
index 01dcbb343..c0423d2c6 100644
--- a/src/screens/Connectors/PaymentProcessor/ConnectorPreview.res
+++ b/src/screens/Connectors/PaymentProcessor/ConnectorPreview.res
@@ -29,9 +29,7 @@ module KeyAndCopyArea = {
           Clipboard.writeText(copyValue)
           showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess)
         }}>
-        <img
-          alt="copy-clipboard" className="w-1.1-rem h-1.1-rem" src={`/assets/CopyToClipboard.svg`}
-        />
+        <Icon name="nd-copy" className="cursor-pointer" />
       </div>
     </div>
   }
diff --git a/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res b/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
index 562a3a100..292bb437d 100644
--- a/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
+++ b/src/screens/Developer/APIKeys/PublishableAndHashKeySection.res
@@ -61,6 +61,7 @@ let make = () => {
               displayValue={merchantInfo.publishable_key}
               customTextCss="break-all text-sm truncate md:whitespace-normal font-semibold text-jp-gray-800 text-opacity-75"
               customParentClass="flex items-center gap-5"
+              customIconCss="text-jp-gray-700"
             />
           </div>
           <RenderIf condition={paymentResponsHashKey->String.length !== 0}>
@@ -72,6 +73,7 @@ let make = () => {
                 displayValue={paymentResponsHashKey}
                 customTextCss="break-all truncate md:whitespace-normal text-sm font-semibold text-jp-gray-800 text-opacity-75"
                 customParentClass="flex items-center gap-5"
+                customIconCss="text-jp-gray-700"
               />
             </div>
           </RenderIf>
diff --git a/src/screens/Developer/PaymentSettings/PaymentSettings.res b/src/screens/Developer/PaymentSettings/PaymentSettings.res
index d643c7397..4d8d66030 100644
--- a/src/screens/Developer/PaymentSettings/PaymentSettings.res
+++ b/src/screens/Developer/PaymentSettings/PaymentSettings.res
@@ -13,9 +13,8 @@ module InfoViewForWebhooks = {
       <div className="flex gap-2 break-all w-full items-start">
         <p className="font-medium text-fs-14 text-black opacity-50"> {subHeading->React.string} </p>
         <RenderIf condition={isCopy}>
-          <img
-            alt="copy-clipboard"
-            src={`/assets/CopyToClipboard.svg`}
+          <Icon
+            name="nd-copy"
             className="cursor-pointer"
             onClick={ev => {
               onCopyClick(ev)
diff --git a/src/screens/Helpers/HelperComponents.res b/src/screens/Helpers/HelperComponents.res
index 63308a9ee..a1af37ff1 100644
--- a/src/screens/Helpers/HelperComponents.res
+++ b/src/screens/Helpers/HelperComponents.res
@@ -6,7 +6,7 @@ module CopyTextCustomComp = {
     ~customTextCss="",
     ~customParentClass="flex items-center",
     ~customOnCopyClick=() => (),
-    ~customIconColor="",
+    ~customIconCss="text-jp-gray-700 w-4 h-4",
   ) => {
     let showToast = ToastState.useShowToast()
 
@@ -29,7 +29,7 @@ module CopyTextCustomComp = {
           onClick={ev => {
             onCopyClick(ev)
           }}
-          className={`${customIconColor}`}
+          className={`${customIconCss}`}
         />
       </div>
     } else {
diff --git a/src/screens/OMPSwitch/OMPSwitchHelper.res b/src/screens/OMPSwitch/OMPSwitchHelper.res
index 77fdc4420..3fe367942 100644
--- a/src/screens/OMPSwitch/OMPSwitchHelper.res
+++ b/src/screens/OMPSwitch/OMPSwitchHelper.res
@@ -348,7 +348,7 @@ module MerchantDropdownItem = {
           validateInput
           customInputStyle="!py-0 text-nd_gray-600"
           customIconComponent={<HelperComponents.CopyTextCustomComp
-            displayValue=" " copyValue=Some(merchantId) customIconColor="text-nd_gray-600"
+            displayValue=" " copyValue=Some(merchantId) customIconCss="text-nd_gray-600"
           />}
           customIconStyle={isActive ? "text-nd_gray-600" : ""}
           handleClick={_ => handleMerchantSwitch(currentId)}
@@ -464,7 +464,7 @@ module ProfileDropdownItem = {
           validateInput
           customInputStyle="!py-0 text-nd_gray-600"
           customIconComponent={<HelperComponents.CopyTextCustomComp
-            displayValue=" " copyValue=Some(profileId) customIconColor="text-nd_gray-600"
+            displayValue=" " copyValue=Some(profileId) customIconCss="text-nd_gray-600"
           />}
           customIconStyle={isActive ? "text-nd_gray-600" : ""}
           handleClick={_ => handleProfileSwitch(currentId)}
@@ -483,8 +483,8 @@ module ProfileDropdownItem = {
 
 let generateDropdownOptions: (
   array<OMPSwitchTypes.ompListTypes>,
-  ~customIconColor: string,
-) => array<SelectBox.dropdownOption> = (dropdownList, ~customIconColor) => {
+  ~customIconCss: string,
+) => array<SelectBox.dropdownOption> = (dropdownList, ~customIconCss) => {
   let options: array<SelectBox.dropdownOption> = dropdownList->Array.map((
     item
   ): SelectBox.dropdownOption => {
@@ -497,7 +497,7 @@ let generateDropdownOptions: (
           customStyle="!whitespace-nowrap"
           toolTipFor={<div className="cursor-pointer">
             <HelperComponents.CopyTextCustomComp
-              displayValue=" " copyValue=Some({item.id}) customIconColor
+              displayValue=" " copyValue=Some({item.id}) customIconCss
             />
           </div>}
           toolTipPosition=ToolTip.TopRight
diff --git a/src/screens/OMPSwitch/OrgSwitch.res b/src/screens/OMPSwitch/OrgSwitch.res
index 8e1027b2b..25b00a6a2 100644
--- a/src/screens/OMPSwitch/OrgSwitch.res
+++ b/src/screens/OMPSwitch/OrgSwitch.res
@@ -284,7 +284,7 @@ let make = () => {
       input
       deselectDisable=true
       customButtonStyle="!rounded-md"
-      options={orgList->generateDropdownOptions(~customIconColor="text-grey-200")}
+      options={orgList->generateDropdownOptions(~customIconCss="text-grey-200")}
       marginTop="mt-14"
       hideMultiSelectButtons=true
       addButton=false
diff --git a/src/screens/Routing/ActiveRouting.res b/src/screens/Routing/ActiveRouting.res
index 0024475a5..5e20616d6 100644
--- a/src/screens/Routing/ActiveRouting.res
+++ b/src/screens/Routing/ActiveRouting.res
@@ -35,6 +35,7 @@ module ActionButtons = {
       <ACLButton
         text={"Setup"}
         authorization={userHasAccess(~groupAccess=WorkflowsManage)}
+        customButtonStyle="mx-auto"
         buttonType=Primary
         buttonSize=Small
         onClick={_ => {
diff --git a/src/screens/Routing/CustomModal.res b/src/screens/Routing/CustomModal.res
index f37db2342..bc4fae9b8 100644
--- a/src/screens/Routing/CustomModal.res
+++ b/src/screens/Routing/CustomModal.res
@@ -13,7 +13,7 @@ module RoutingCustomModal = {
     <Modal
       showModal
       setShowModal
-      modalClass="w-full md:w-4/12 mx-auto my-40 border-t-8 border-t-orange-960 rounded-xl">
+      modalClass="w-full md:w-4/12 mx-auto my-auto border-t-8 border-t-orange-960 rounded-xl">
       <div className="relative flex items-start px-4 pb-10 pt-8 gap-4">
         <Icon name=leftIcon size=iconSize className="w-8" onClick={_ => setShowModal(_ => false)} />
         <div className="flex flex-col gap-5">
diff --git a/src/screens/RoutingRevamp/AdvancedRouting.res b/src/screens/RoutingRevamp/AdvancedRouting.res
index 342dfc6fa..79bdbb069 100644
--- a/src/screens/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/RoutingRevamp/AdvancedRouting.res
@@ -269,7 +269,7 @@ module Wrapper = {
             className={`flex flex-row gap-2 items-center justify-around p-2 ${copyBtnHover
                 ? "py-1"
                 : ""} bg-gray-100 dark:bg-jp-gray-970 rounded-full border border-jp-gray-600 cursor-pointer`}>
-            <Icon name="copy" className="text-jp-gray-700" size=12 />
+            <Icon name="nd-copy" className="text-jp-gray-700" size=12 />
             <RenderIf condition={copyBtnHover}>
               <div className="text-sm "> {React.string("Copy Rule")} </div>
             </RenderIf>
diff --git a/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res b/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
index 692ba07de..8e6361b0f 100644
--- a/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
+++ b/src/screens/SelfServe/HSwitchSandboxOnboarding/UserOnboardingUIUtils.res
@@ -176,7 +176,7 @@ module HeaderComponentView = {
             Clipboard.writeText(value)
             showToast(~message="Copied to Clipboard!", ~toastType=ToastSuccess)
           }}>
-          <img alt="copy-to-clipboard" src={`/assets/CopyToClipboard.svg`} />
+          <Icon name="nd-copy" className="cursor-pointer" />
           <p> {"Copy"->React.string} </p>
         </div>
       </div>
diff --git a/src/screens/Settings/HSwitchProfile/TwoFaSettings/RegenerateRC.res b/src/screens/Settings/HSwitchProfile/TwoFaSettings/RegenerateRC.res
index bcaf031cc..304f3d5cd 100644
--- a/src/screens/Settings/HSwitchProfile/TwoFaSettings/RegenerateRC.res
+++ b/src/screens/Settings/HSwitchProfile/TwoFaSettings/RegenerateRC.res
@@ -215,7 +215,7 @@ let make = (~checkTwoFaStatusResponse: TwoFaTypes.checkTwofaResponseType, ~check
           </div>
           <div className="flex gap-4 justify-end">
             <Button
-              leftIcon={CustomIcon(<img alt="image" src={`/assets/CopyToClipboard.svg`} />)}
+              leftIcon={CustomIcon(<Icon name="nd-copy" className="cursor-pointer" />)}
               text={"Copy"}
               buttonType={Secondary}
               buttonSize={Small}
diff --git a/src/screens/Sidebar/OrgSidebar.res b/src/screens/Sidebar/OrgSidebar.res
index ce70813ce..a21b84359 100644
--- a/src/screens/Sidebar/OrgSidebar.res
+++ b/src/screens/Sidebar/OrgSidebar.res
@@ -119,7 +119,7 @@ module OrgTile = {
               customStyle="!whitespace-nowrap"
               toolTipFor={<div className="cursor-pointer">
                 <HelperComponents.CopyTextCustomComp
-                  customIconColor={`${secondaryTextColor}`} displayValue=" " copyValue=Some({orgID})
+                  customIconCss={`${secondaryTextColor}`} displayValue=" " copyValue=Some({orgID})
                 />
               </div>}
               toolTipPosition=ToolTip.Right
@@ -358,7 +358,7 @@ let make = () => {
         <div
           onClick={_ => setShowAddOrgModal(_ => true)}
           className={`w-8 h-8 mt-2 flex items-center justify-center cursor-pointer 
-      rounded-md shadow-sm ${hoverColor}  border-${backgroundColor.sidebarSecondary}`}>
+      rounded-md border shadow-sm ${hoverColor}  border-${backgroundColor.sidebarSecondary}`}>
           <Icon name="plus" size=20 className={secondaryTextColor} />
         </div>
       </RenderIf>
diff --git a/src/screens/Transaction/Order/HSwitchOrderUtils.res b/src/screens/Transaction/Order/HSwitchOrderUtils.res
index 9b4ab0cd6..71e3eb8a1 100644
--- a/src/screens/Transaction/Order/HSwitchOrderUtils.res
+++ b/src/screens/Transaction/Order/HSwitchOrderUtils.res
@@ -167,10 +167,9 @@ module CopyLinkTableCell = {
               </span>
             </div>
           </RenderIf>
-          <img
-            alt="CopyToClipboard"
-            src={`/assets/CopyToClipboard.svg`}
-            className="cursor-pointer opacity-70 hover:opacity-100 py-1"
+          <Icon
+            name="nd-copy"
+            className="cursor-pointer  opacity-70 hover:opacity-100 py-1"
             onClick={ev => {
               onCopyClick(ev)
             }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 164b18660..fa2f103d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,6 +57,9 @@ module.exports = {
         "923-px": "923px",
         onBordingSupplier: "calc(100vh - 300px)",
       },
+      padding: {
+        "10-px": "10px",
+      },
       maxHeight: {
         "25-rem": "25rem",
       },