NTP-8564 | Add on screen styling changes (#13424)

Co-authored-by: Sandeep Kumar <sandeep.ku@navi.com>

android/navi-insurance/src/main/java/com/navi/insurance/common/custom_view/QuoteFooterView.kt

@@ -10,6 +10,7 @@ package com.navi.insurance.common.custom_view
 import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
+import android.graphics.Paint
 import android.text.Spannable
 import android.text.SpannableString
 import android.text.style.TextAppearanceSpan
@@ -27,6 +28,7 @@ import com.navi.insurance.R
 import com.navi.insurance.databinding.QuoteFooterViewBinding
 import com.navi.insurance.models.response.QuoteFooterInfoData
 import com.navi.naviwidgets.extensions.setTextFieldData
+import com.navi.naviwidgets.extensions.showWhenDataIsAvailable
 import com.navi.naviwidgets.models.response.OfferInfo
 import com.navi.naviwidgets.utils.FORWARD_SLASH
 import com.navi.naviwidgets.utils.INVALID_INDEX
@@ -62,6 +64,8 @@ class QuoteFooterView(context: Context?, attrs: AttributeSet? = null) :
             binding.roundedTopBorder.visibility = View.VISIBLE
         }
         setSpannableTextForPremiumAmount(quoteFooterInfoData.ctaTitle)
+        binding.premiumDetailsText.paintFlags =
+            binding.premiumDetailsText.paintFlags or Paint.UNDERLINE_TEXT_FLAG
     }
 
     fun getBinding(): QuoteFooterViewBinding {
@@ -72,10 +76,12 @@ class QuoteFooterView(context: Context?, attrs: AttributeSet? = null) :
         binding.strikeOffTv.setTextFieldData(offerInfo.strikeOffData?.title)
         if (showOfferTag && offerInfo.offerTagInfo.isNotNull()) {
             binding.offerTagInfoCard.visibility = View.VISIBLE
-            binding.dividerDashLine.visibility = View.VISIBLE
+            binding.dividerDashLine.visibility = View.GONE
             binding.roundedTopBorder.visibility = View.GONE
             offerInfo.offerTagInfo.let { offerTagInfo ->
                 binding.offerTagInfoTv.setTextFieldData(offerTagInfo!!.title)
+                binding.offerTagInfoLeftTv.showWhenDataIsAvailable(offerTagInfo.leftTitle)
+                binding.offerTagInfoRightTv.showWhenDataIsAvailable(offerTagInfo.rightTitle)
                 if (isValidHexColor(offerTagInfo.backgroundColor)) {
                     binding.dividerDashLine.backgroundTintList =
                         ColorStateList.valueOf(Color.parseColor(offerTagInfo.backgroundColor))

android/navi-insurance/src/main/java/com/navi/insurance/common/models/FooterWithSlideUpAnimation.kt

@@ -48,6 +48,8 @@ data class BannerData(
     @SerializedName("lottieUrl") val lottieUrl: String? = null,
     @SerializedName("bgColor") val bgColor: BackgroundDrawableData? = null,
     @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("leftTitle") val leftTitle: TextFieldData? = null,
+    @SerializedName("rightTitle") val rightTitle: TextFieldData? = null,
     @SerializedName("animation") val animation: Int? = 0,
     @SerializedName("elevation") val elevation: Float? = 0f,
     @SerializedName("showDivider") val showDivider: Boolean? = false,

android/navi-insurance/src/main/java/com/navi/insurance/common/widgets/FooterWithTitleAndSubtitleLayout.kt

@@ -15,10 +15,10 @@ import androidx.databinding.ViewDataBinding
 import com.google.gson.reflect.TypeToken
 import com.navi.analytics.utils.NaviTrackEvent
 import com.navi.base.model.CtaData
+import com.navi.base.model.LineItem
 import com.navi.base.utils.isNull
 import com.navi.base.utils.orZero
-import com.navi.common.utils.disableView
-import com.navi.common.utils.enableView
+import com.navi.design.textview.NaviTextView
 import com.navi.design.utils.CornerRadius
 import com.navi.design.utils.dpToPx
 import com.navi.design.utils.getNaviDrawable
@@ -29,11 +29,15 @@ import com.navi.insurance.common.models.NaviWidgetData
 import com.navi.insurance.databinding.LayoutFooterWithTitleSubtitleBinding
 import com.navi.insurance.util.Constants.BUTTON_TITLE
 import com.navi.insurance.util.Constants.OFFER_DETAIL_BANNER
+import com.navi.insurance.util.Constants.OFFER_DETAIL_LEFT_BANNER
+import com.navi.insurance.util.Constants.OFFER_DETAIL_RIGHT_BANNER
 import com.navi.insurance.util.Constants.SUBTITLE_CLICK_CTA
 import com.navi.naviwidgets.extensions.addOnMultipleClicksHandler
 import com.navi.naviwidgets.extensions.getJsonObject
 import com.navi.naviwidgets.extensions.setTextFieldData
+import com.navi.naviwidgets.extensions.showWhenDataIsAvailable
 import com.navi.naviwidgets.models.response.TextFieldData
+import java.lang.reflect.Type
 
 class FooterWithTitleAndSubtitleLayout
 @JvmOverloads
@@ -83,7 +87,7 @@ constructor(context: Context, attrs: AttributeSet? = null) : BaseNaviWidgetView(
     private fun handleBannerData(bannerData: BannerData?) {
         bannerData?.let {
             binding?.banner?.lottieView?.isVisible = false
-            binding?.dividerDashLine?.isVisible = true
+            binding?.dividerDashLine?.isVisible = false
             binding?.banner?.bannerLayout?.isVisible = true
             binding?.banner?.bannerLayout?.background =
                 getNaviDrawable(
@@ -97,6 +101,11 @@ constructor(context: Context, attrs: AttributeSet? = null) : BaseNaviWidgetView(
                         )
                 )
             binding?.banner?.bannerTitle?.setTextFieldData(bannerData?.title)
+            binding?.banner?.bannerLeftTitle?.showWhenDataIsAvailable(bannerData.leftTitle)
+            binding
+                ?.banner
+                ?.bannerRightTitle
+                ?.showWhenDataIsAvailable(bannerData.rightTitle, clickListener = ctaDataCallback)
         }
             ?: run {
                 binding?.banner?.bannerLayout?.isVisible = false
@@ -150,6 +159,41 @@ constructor(context: Context, attrs: AttributeSet? = null) : BaseNaviWidgetView(
                     binding?.banner?.bannerTitle?.setTextFieldData(bannerData)
                 }
             }
+            if (lineItem.key == OFFER_DETAIL_LEFT_BANNER) {
+                updateBannerTitle(
+                    lineItem = lineItem,
+                    dataType = dataType,
+                    ctaDataCallback = ctaDataCallback,
+                    titleView = binding?.banner?.bannerLeftTitle
+                )
+            }
+            if (lineItem.key == OFFER_DETAIL_RIGHT_BANNER) {
+                updateBannerTitle(
+                    lineItem = lineItem,
+                    dataType = dataType,
+                    ctaDataCallback = ctaDataCallback,
+                    titleView = binding?.banner?.bannerRightTitle
+                )
+            }
+        }
+    }
+
+    private fun updateBannerTitle(
+        lineItem: LineItem,
+        dataType: Type,
+        ctaDataCallback: ((ctaData: CtaData) -> Unit)?,
+        titleView: NaviTextView?
+    ) {
+        val bannerData =
+            getJsonObject<TextFieldData>(
+                dataType,
+                lineItem.value,
+                onErrorOccured = { binding?.banner?.bannerRightTitle?.text = lineItem.value }
+            )
+        if (bannerData.isNull()) {
+            titleView?.text = lineItem.value
+        } else {
+            titleView?.setTextFieldData(bannerData, ctaDataCallback)
         }
     }
 
@@ -159,18 +203,9 @@ constructor(context: Context, attrs: AttributeSet? = null) : BaseNaviWidgetView(
 
     override fun enableLayout(isEnabled: Boolean, showLoader: Boolean) {
         if (isEnabled) {
-            binding?.button?.enableView()
+            binding?.loadingButton?.isVisible = false
         } else {
-            binding?.button?.disableView()
-        }
-        if (showLoader) {
-            binding?.loadingBubble?.isVisible = true
-            binding?.title?.isVisible = false
-            binding?.subTitle?.isVisible = false
-        } else {
-            binding?.loadingBubble?.isVisible = false
-            binding?.title?.isVisible = true
-            binding?.subTitle?.isVisible = true
+            binding?.loadingButton?.isVisible = true
         }
     }
 }

android/navi-insurance/src/main/java/com/navi/insurance/quoteredesign/fragments/PolicyAddonFragment.kt

@@ -176,6 +176,7 @@ class PolicyAddonFragment : BaseFragment(), WidgetCallback, View.OnClickListener
         binding.addonFooterView.getBinding().continueBtn.setOnClickListener(this)
         binding.addonFooterView.getBinding().premiumDetailsText.setOnClickListener(this)
         binding.addonFooterView.getBinding().viewPremiumDetailsView.setOnClickListener(this)
+        binding.addonFooterView.getBinding().offerTagInfoRightTv.setOnClickListener(this)
     }
 
     private fun initObservers() {
@@ -396,6 +397,17 @@ class PolicyAddonFragment : BaseFragment(), WidgetCallback, View.OnClickListener
                     ?.premiumDetailsV2Cta
                     ?.let { onClick(it) } ?: run { showPremiumDetailsBottomSheet() }
             }
+            R.id.offer_tag_info_right_tv -> {
+                sharedViewModel.quoteResponse.value
+                    ?.footerWidget
+                    ?.getOrNull(FIRST_ITEM)
+                    ?.premiumInfo
+                    ?.offerInfo
+                    ?.offerTagInfo
+                    ?.rightTitle
+                    ?.cta
+                    ?.let { onClick(it) } ?: run { showPremiumDetailsBottomSheet() }
+            }
         }
     }
 

android/navi-insurance/src/main/java/com/navi/insurance/quoteredesign/fragments/QuoteOfferFragment.kt

@@ -192,6 +192,7 @@ class QuoteOfferFragment : BaseFragment(), WidgetCallback, View.OnClickListener
         binding.quoteFooterView.getBinding().continueBtn.setOnClickListener(this)
         binding.quoteFooterView.getBinding().premiumDetailsText.setOnClickListener(this)
         binding.quoteFooterView.getBinding().viewPremiumDetailsView.setOnClickListener(this)
+        binding.quoteFooterView.getBinding().offerTagInfoRightTv.setOnClickListener(this)
     }
 
     override fun onAttach(context: Context) {
@@ -832,6 +833,17 @@ class QuoteOfferFragment : BaseFragment(), WidgetCallback, View.OnClickListener
                     ?.premiumDetailsV2Cta
                     ?.let { onClick(it) } ?: run { showPremiumDetailsBottomSheet() }
             }
+            R.id.offer_tag_info_right_tv -> {
+                quoteViewModel.quoteResponse.value
+                    ?.footerWidget
+                    ?.getOrNull(FIRST_ITEM)
+                    ?.premiumInfo
+                    ?.offerInfo
+                    ?.offerTagInfo
+                    ?.rightTitle
+                    ?.cta
+                    ?.let { onClick(it) } ?: run { showPremiumDetailsBottomSheet() }
+            }
         }
     }
 

android/navi-insurance/src/main/java/com/navi/insurance/util/Constants.kt

@@ -263,6 +263,8 @@ object Constants {
     const val SUBTITLE_CLICK_CTA = "subTitleClickCta"
     const val BUTTON_TITLE = "buttonTitle"
     const val OFFER_DETAIL_BANNER = "offerDetailBanner"
+    const val OFFER_DETAIL_LEFT_BANNER = "offerDetailLeftBanner"
+    const val OFFER_DETAIL_RIGHT_BANNER = "offerDetailRightBanner"
     const val PAYMENT_FALLBACK_CTA = "paymentFallbackCta"
     const val REQUIRED_ARGS_NULL = "required args for opening activity or fragment are null"
     const val PAYMENT_METHOD_ARGS_NULL = "payment method select args are null"

android/navi-insurance/src/main/res/layout/layout_footer_with_title_subtitle.xml

@@ -45,14 +45,14 @@
 
         <com.navi.design.textview.NaviTextView
             android:id="@+id/title"
-            android:layout_marginTop="@dimen/sp_4"
             style="@style/MediumTextSemiBoldGreyFontStyle"
             android:layout_width="wrap_content"
             android:layout_height="0dp"
             android:layout_marginStart="@dimen/dp_16"
             android:fontFamily="@font/tt_medium"
             android:textColor="@color/eerie_black"
-            android:textSize="@dimen/payu_dimen_18sp"
+            android:textSize="@dimen/payu_dimen_20sp"
+            android:lineHeight="@dimen/sp_28"
             android:visibility="visible"
             app:layout_constraintBottom_toTopOf="@+id/subtitle"
             app:layout_constraintTop_toTopOf="@id/button"
@@ -61,6 +61,7 @@
 
         <com.navi.design.textview.NaviTextView
             android:id="@+id/sub_title"
+            android:layout_marginTop="@dimen/sp_8"
             android:layout_marginBottom="@dimen/sp_4"
             style="@style/MediumTextSemiBoldGreyFontStyle"
             android:layout_width="wrap_content"
@@ -69,6 +70,7 @@
             android:textColor="@color/eerie_black"
             android:textStyle="bold"
             android:textSize="@dimen/sp_12"
+            android:lineHeight="@dimen/sp_16"
             android:visibility="visible"
             app:layout_constraintTop_toBottomOf="@id/title"
             app:layout_constraintBottom_toBottomOf="@id/button"

android/navi-insurance/src/main/res/layout/layout_reward_banner.xml

@@ -2,11 +2,12 @@
 <layout xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools">
 
-    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    <LinearLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/banner_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingVertical="@dimen/dp_8"
+        android:paddingVertical="@dimen/dp_4"
         android:gravity="center"
         android:orientation="horizontal">
 
@@ -19,15 +20,54 @@
             android:visibility="gone"
             app:lottie_repeatCount="@integer/integer_3000" />
 
-        <com.navi.design.textview.NaviTextView
-            android:id="@+id/banner_title"
-            android:layout_width="wrap_content"
-            android:visibility="visible"
-            android:layout_height="wrap_content"
-            android:lineSpacingExtra="@dimen/sp_4"
-            android:textColor="@color/grey_charcoal"
-            android:textSize="@dimen/sp_14"
-            tools:text="Win upto ₹1000 cashback" />
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/banner_leftTitle"
+                android:layout_width="wrap_content"
+                android:visibility="visible"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/tt_semi_bold"
+                android:textSize="@dimen/sp_12"
+                android:textColor="@color/dark_green"
+                android:lineHeight="@dimen/sp_18"
+                tools:text="discount"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                android:paddingLeft="@dimen/sp_16"/>
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/banner_title"
+                android:layout_width="wrap_content"
+                android:visibility="visible"
+                android:layout_height="wrap_content"
+                android:lineSpacingExtra="@dimen/sp_4"
+                android:textColor="@color/grey_charcoal"
+                android:textSize="@dimen/sp_14"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                tools:text="Win upto ₹1000 cashback" />
+
+            <com.navi.design.textview.NaviTextView
+                android:id="@+id/banner_rightTitle"
+                android:layout_width="wrap_content"
+                android:visibility="visible"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/tt_medium"
+                android:textSize="@dimen/sp_12"
+                android:textColor="@color/color_3C0050"
+                android:lineHeight="@dimen/sp_18"
+                tools:text="Know more"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                android:paddingRight="@dimen/sp_16"/>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
         <com.airbnb.lottie.LottieAnimationView
             android:id="@+id/lottie_view_right"

android/navi-insurance/src/main/res/layout/quote_footer_view.xml

@@ -49,7 +49,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:orientation="horizontal"
-                android:paddingTop="@dimen/dp_1"
+                android:paddingTop="@dimen/dp_16"
                 app:layout_constraintBottom_toBottomOf="parent">
 
                 <com.navi.naviwidgets.views.BubbleLoader
@@ -59,7 +59,7 @@
                     android:layout_marginStart="@dimen/dp_20"
                     android:visibility="gone"
                     app:animation_duration="800"
-                    app:color="@color/blueberry"
+                    app:color="@color/dark_purple"
                     app:layout_constraintBottom_toBottomOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toTopOf="parent" />
@@ -80,9 +80,9 @@
                         android:layout_height="wrap_content"
                         android:fontFamily="@font/tt_semi_bold"
                         android:text="@{quoteFooterInfoModel.ctaTitle}"
-                        android:textColor="#22D081"
-                        android:textSize="@dimen/sp_16"
-                        android:lineHeight="@dimen/sp_24"
+                        android:textColor="#191919"
+                        android:textSize="@dimen/sp_20"
+                        android:lineHeight="@dimen/sp_28"
                         app:layout_constraintStart_toStartOf="parent"
                         app:layout_constraintTop_toTopOf="parent"
                         tools:text="$355" />
@@ -92,11 +92,11 @@
                         android:id="@+id/strike_off_tv"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:layout_marginStart="@dimen/dp_4"
+                        android:layout_marginStart="@dimen/dp_5"
                         android:fontFamily="@font/tt_regular"
                         android:textColor="@color/dim_grey"
-                        android:textSize="@dimen/sp_12"
-                        android:lineHeight="@dimen/sp_18"
+                        android:textSize="@dimen/sp_14"
+                        android:lineHeight="@dimen/sp_22"
                         app:layout_constraintBottom_toBottomOf="@+id/offer_premium_amount"
                         app:layout_constraintStart_toEndOf="@+id/offer_premium_amount"
                         app:layout_constraintTop_toTopOf="@+id/offer_premium_amount"
@@ -112,9 +112,9 @@
                         android:text="@string/emi_button_placeholder"
                         android:textColor="@color/dim_grey"
                         android:fontFamily="@font/tt_regular"
-                        android:textSize="@dimen/sp_12"
-                        android:lineHeight="@dimen/sp_18"
-                        android:layout_marginStart="@dimen/dp_2"/>
+                        android:textSize="@dimen/sp_14"
+                        android:lineHeight="@dimen/sp_22"
+                        android:layout_marginStart="@dimen/dp_1"/>
 
                     <com.navi.design.textview.NaviTextView
 
@@ -122,12 +122,14 @@
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_marginEnd="@dimen/dp_20"
+                        android:layout_marginTop="@dimen/dp_4"
                         android:drawablePadding="@dimen/dp_6"
-                        android:fontFamily="@font/tt_semi_bold"
+                        android:fontFamily="@font/tt_medium"
                         android:gravity="end"
                         android:text="@string/view_payment_details"
                         android:textColor="@color/dark_purple"
                         android:textSize="@dimen/sp_12"
+                        android:lineHeight="@dimen/sp_16"
                         app:layout_constraintTop_toBottomOf="@+id/offer_premium_amount"
                         app:layout_constraintStart_toStartOf="parent" />
 
@@ -139,7 +141,7 @@
                         app:layout_constraintStart_toEndOf="@id/premium_details_text"
                         app:layout_constraintTop_toTopOf="@id/premium_details_text"
                         app:layout_constraintBottom_toBottomOf="@id/premium_details_text"
-                        android:layout_marginStart="@dimen/dp_5"
+                        android:layout_marginStart="@dimen/dp_4"
                         android:layout_marginTop="@dimen/dp_2"/>
 
 
@@ -171,7 +173,7 @@
             </androidx.constraintlayout.widget.ConstraintLayout>
         </androidx.constraintlayout.widget.ConstraintLayout>
 
-        <LinearLayout
+        <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/offer_tag_info_card"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
@@ -185,6 +187,23 @@
             app:layout_constraintTop_toTopOf="parent"
             tools:visibility="visible">
 
+            <com.navi.design.textview.NaviTextView
+
+                android:id="@+id/offer_tag_info_left_tv"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/dp_8"
+                android:fontFamily="@font/tt_semi_bold"
+                android:textSize="@dimen/sp_12"
+                android:textColor="@color/dark_green"
+                android:lineHeight="@dimen/sp_18"
+                android:gravity="center"
+                tools:text="10% + 10% discount applied"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                android:paddingLeft="@dimen/sp_16"/>
+
             <com.navi.design.textview.NaviTextView
 
                 android:id="@+id/offer_tag_info_tv"
@@ -195,9 +214,29 @@
                 android:textSize="@dimen/sp_12"
                 android:gravity="center"
                 tools:text="Yay! 25% off will now be applicable"
-                android:paddingHorizontal="@dimen/dp_12"/>
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"/>
 
-        </LinearLayout>
+            <com.navi.design.textview.NaviTextView
+
+                android:id="@+id/offer_tag_info_right_tv"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/dp_8"
+                android:fontFamily="@font/tt_medium"
+                android:textSize="@dimen/sp_12"
+                android:textColor="@color/color_3C0050"
+                android:lineHeight="@dimen/sp_18"
+                android:gravity="center"
+                tools:text="Know more"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                android:paddingRight="@dimen/sp_16"/>
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
         <View
             android:id="@+id/rounded_top_border"

android/navi-widgets/src/main/java/com/navi/naviwidgets/models/response/PreferenceInfoWidget.kt

@@ -1,6 +1,6 @@
 /*
  *
- *  * Copyright © 2022-2023 by Navi Technologies Limited
+ *  * Copyright © 2022-2024 by Navi Technologies Limited
  *  * All rights reserved. Strictly confidential
  *
  */
@@ -80,6 +80,8 @@ data class StrikeOffData(@SerializedName("title") val title: TextFieldData? = nu
 @Parcelize
 data class OfferTagInfo(
     @SerializedName("title") val title: TextFieldData? = null,
+    @SerializedName("leftTitle") val leftTitle: TextFieldData? = null,
+    @SerializedName("rightTitle") val rightTitle: TextFieldData? = null,
     @SerializedName("backgroundColor") val backgroundColor: String? = null
 ) : Parcelable
 

android/navi-widgets/src/main/res/layout/layout_check_box_radio_button_card_item.xml

@@ -54,7 +54,7 @@
                 android:layout_width="@dimen/dp_0"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="@dimen/dp_16"
-                android:layout_marginTop="@dimen/dp_16"
+                android:layout_marginTop="@dimen/dp_24"
                 android:paddingBottom="@dimen/dp_8"
                 android:layout_marginEnd="@dimen/dp_12"
                 android:fontFamily="@font/tt_regular"