fix: Dashboard redesign ui issues

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>
       }}

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)

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

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}

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 =>

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)

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>
   }

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>

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)

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 {

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

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

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={_ => {

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">

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>

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>

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}

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>

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)
             }}

tailwind.config.js

@@ -57,6 +57,9 @@ module.exports = {
         "923-px": "923px",
         onBordingSupplier: "calc(100vh - 300px)",
       },
+      padding: {
+        "10-px": "10px",
+      },
       maxHeight: {
         "25-rem": "25rem",
       },