[Android] The text within buttons is slightly visible when buttons ar… (#19461)

src/quo/components/buttons/button/style.cljs

@@ -1,4 +1,5 @@
-(ns quo.components.buttons.button.style)
+(ns quo.components.buttons.button.style
+  (:require [quo.foundations.colors :as colors]))
 
 (def blur-view
   {:position :absolute
@@ -9,11 +10,12 @@
 
 (defn icon-style
   [{:keys [icon-container-size icon-container-rounded?
-           icon-size margin-left margin-right]}]
+           icon-size margin-left margin-right disabled?]}]
   (cond-> (merge {:margin-left     margin-left
                   :margin-right    margin-right
                   :align-items     :center
-                  :justify-content :center})
+                  :justify-content :center
+                  :opacity         (when disabled? 0.3)})
     icon-container-size
     (assoc :width icon-container-size :height icon-container-size)
     icon-container-rounded?
@@ -21,24 +23,26 @@
 
 (defn icon-left-icon-style
   [{:keys [override-margins size icon-container-size icon-container-rounded?
-           icon-size]}]
+           icon-size disabled?]}]
   (icon-style
    {:margin-left             (or (get override-margins :left)
                                  (if (= size 40) 12 8))
     :margin-right            (or (get override-margins :right) 4)
     :icon-container-size     icon-container-size
     :icon-container-rounded? icon-container-rounded?
-    :icon-size               icon-size}))
+    :icon-size               icon-size
+    :disabled?               disabled?}))
 
 (defn icon-right-icon-style
   [{:keys [override-margins size icon-container-size icon-container-rounded?
-           icon-size]}]
+           icon-size disabled?]}]
   (icon-style {:margin-left             (or (get override-margins :left) 4)
                :margin-right            (or (get override-margins :right)
                                             (if (= size 40) 12 8))
                :icon-container-size     icon-container-size
                :icon-container-rounded? icon-container-rounded?
-               :icon-size               icon-size}))
+               :icon-size               icon-size
+               :disabled?               disabled?}))
 
 (defn shape-style-container
   [size border-radius]
@@ -95,7 +99,7 @@
                                   24 0
                                   9))
           :overflow           :hidden
-          :background-color   background-color
+          :background-color   (if disabled? (colors/alpha background-color 0.3) background-color)
           :border-radius      (if border-radius
                                 border-radius
                                 (case size
@@ -110,6 +114,4 @@
            {:width size})
          (when border-color
            {:border-color border-color
-            :border-width 1})
+            :border-width 1})))
-         (when disabled?
-           {:opacity 0.3})))

src/quo/components/buttons/button/view.cljs

@@ -92,14 +92,16 @@
        (when icon-top
          [rn/view
           [quo.icons/icon icon-top
-           {:container-style {:margin-bottom 2}
+           {:container-style {:margin-bottom 2
+                              :opacity       (when disabled? 0.3)}
             :color           icon-color
             :size            icon-size}]])
        (when icon-left
          [rn/view
           {:style (style/icon-left-icon-style
                    {:size      size
-                    :icon-size icon-size})}
+                    :icon-size icon-size
+                    :disabled? disabled?})}
           [quo.icons/icon icon-left
            {:color icon-color
             :size  icon-size}]])
@@ -115,7 +117,8 @@
            {:size            (when (#{56 24} size) :paragraph-2)
             :weight          :medium
             :number-of-lines 1
-            :style           {:color label-color}}
+            :style           {:color   label-color
+                              :opacity (when disabled? 0.3)}}
            children]
 
           (vector? children)
@@ -124,7 +127,8 @@
          [rn/view
           {:style (style/icon-right-icon-style
                    {:size      size
-                    :icon-size icon-size})}
+                    :icon-size icon-size
+                    :disabled? disabled?})}
           [quo.icons/icon icon-right
            {:color icon-color
             :size  icon-size}]])]]]))