Merge pull request #524 from gini/IPC-318-payment-component-padding

fix(health-sdk): Fixed payment component styling
gini · Aug 12, 2024 · 2bc2f35 · 2bc2f35
2 parents 432e4e4 + ad6a138
commit 2bc2f35
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/health-sdk/sdk/src/doc/source/customization.rst b/health-sdk/sdk/src/doc/source/customization.rst
@@ -162,6 +162,17 @@ You can also view the UI customisation guide in Figma `here
 
     To copy text from Figma you need to have a Figma account. If you don't have one, you can create one for free.
 
+.. note::
+
+  To change the paddings for the gray bank selection button (the one which shows the bank icon) you can override the ``GiniHealthTheme.Widget.Button.PaymentProviderSelector`` style:
+
+  .. code-block:: xml
+
+      <style name="GiniHealthTheme.Widget.Button.PaymentProviderSelector" parent="Root.GiniHealthTheme.Widget.Button.PaymentProviderSelector">
+          <item name="android:paddingStart">5dp</item>
+          <item name="android:paddingEnd">5dp</item>
+      </style>
+
 .. raw:: html
 
     <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="600" height="450"

diff --git a/health-sdk/sdk/src/main/res/layout/ghs_view_payment_component.xml b/health-sdk/sdk/src/main/res/layout/ghs_view_payment_component.xml
@@ -57,7 +57,6 @@
             android:layout_marginHorizontal="@dimen/ghs_large"
             android:clickable="false"
             android:gravity="start|center_vertical"
-            android:paddingHorizontal="@dimen/ghs_large"
             android:contentDescription="@string/ghs_select_bank_content_description"
             app:layout_constraintHorizontal_chainStyle="spread_inside"
             app:layout_constraintHorizontal_weight="1"

diff --git a/health-sdk/sdk/src/main/res/values/styles.xml b/health-sdk/sdk/src/main/res/values/styles.xml
@@ -230,7 +230,10 @@
     <style name="Root.GiniHealthTheme.Widget.Button.PaymentProviderSelector" parent="GiniHealthTheme.Widget.Button.TransparentBackground">
         <item name="android:textAppearance">@style/GiniHealthTheme.Typography.Input</item>
     </style>
-    <style name="GiniHealthTheme.Widget.Button.PaymentProviderSelector" parent="Root.GiniHealthTheme.Widget.Button.PaymentProviderSelector"/>
+    <style name="GiniHealthTheme.Widget.Button.PaymentProviderSelector" parent="Root.GiniHealthTheme.Widget.Button.PaymentProviderSelector">
+        <item name="android:paddingStart">@dimen/ghs_large</item>
+        <item name="android:paddingEnd">@dimen/ghs_large</item>
+    </style>
 
     <style name="Root.GiniHealthTheme.Widget.Button.PaymentProviderPicker" parent="GiniHealthTheme.Widget.Button.TransparentBackground">
         <item name="android:textAppearance">@style/GiniHealthTheme.Typography.Body1</item>