fix: prod onboarding screen fix (#520)

juspay · Mar 18, 2024 · 11d355c · 11d355c
1 parent 5cba46b
commit 11d355c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/ChooseConnector.res b/src/screens/SelfServe/HSwitchProdOnboarding/ChooseConnector.res
@@ -1,10 +1,27 @@
 let headerTextStyle = "text-xl font-semibold text-grey-700"
+let connectorNameStyle = "text-md font-semibold text-grey-700"
 let subTextStyle = "text-base font-normal text-grey-700 opacity-50"
 let subheaderText = "text-base font-semibold text-grey-700"
 @react.component
 let make = (~selectedConnector, ~setSelectedConnector, ~pageView, ~setPageView) => {
-  let getBlockColor = connector =>
-    selectedConnector === connector ? "border border-blue-700 bg-blue-700 bg-opacity-10 " : "border"
+  let getBlockColor = connector => {
+    open ConnectorTypes
+    switch (selectedConnector, connector) {
+    | (Processors(selectedConnector), Processors(connector))
+      if selectedConnector === connector => "border border-blue-700 bg-blue-700 bg-opacity-10 "
+    | (_, _) => "border"
+    }
+  }
+
+  let selectedIconColor = connector => {
+    open ConnectorTypes
+    switch (selectedConnector, connector) {
+    | (Processors(selectedConnector), Processors(connector))
+      if selectedConnector === connector => "selected"
+    | (_, _) => "nonselected"
+    }
+  }
+
   <div className="flex flex-col gap-16 w-full p-10">
     <div className="flex justify-between items-center flex-wrap gap-4">
       <div>
@@ -28,15 +45,27 @@ let make = (~selectedConnector, ~setSelectedConnector, ~pageView, ~setPageView)
       ->Array.mapWithIndex((connector, index) => {
         let connectorInfo = connector->ConnectorUtils.getConnectorInfo
         let connectorName = connector->ConnectorUtils.getConnectorNameString
-
         <AddDataAttributes attributes=[("data-testid", connectorName)]>
           <div
             key={index->Int.toString}
             className={`py-4 px-6 flex flex-col gap-4 rounded-md cursor-pointer ${connector->getBlockColor}`}
             onClick={_ => setSelectedConnector(_ => connector)}>
-            <div className="flex justify-between items-center">
-              <div className="flex gap-2 items-center ">
-                <GatewayIcon gateway={connectorName->String.toUpperCase} className="w-8 h-8" />
+            <div className="flex flex-col justify-between items-start gap-4">
+              <div className="flex w-full flex-col gap-2">
+                <div className="flex w-full justify-between">
+                  <GatewayIcon
+                    gateway={connector->ConnectorUtils.getConnectorNameString->String.toUpperCase}
+                    className="w-10 h-10"
+                  />
+                  <Icon
+                    name={connector->selectedIconColor}
+                    size=20
+                    className="cursor-pointer !text-blue-800"
+                  />
+                </div>
+                <p className=connectorNameStyle>
+                  {connectorName->ConnectorUtils.getDisplayNameForConnector->React.string}
+                </p>
               </div>
               <p className=subTextStyle> {connectorInfo.description->React.string} </p>
             </div>

diff --git a/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res b/src/screens/SelfServe/HSwitchProdOnboarding/ProdOnboardingLanding.res
@@ -65,7 +65,7 @@ module CheckListSection = {
             name={value->getIndexFromVariant < pageView->getIndexFromVariant
               ? "green-check"
               : "nonselected"}
-            size=14
+            size=20
           />
           <p
             key={index->Int.toString}