Skip to content

Commit

Permalink
chore: update uses of quo2 button to align with figma
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89
J-Son89 committed Jul 24, 2023
1 parent ab0fc11 commit 78aed34
Show file tree
Hide file tree
Showing 58 changed files with 418 additions and 444 deletions.
124 changes: 55 additions & 69 deletions src/quo2/components/buttons/button/properties.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,101 +3,87 @@

(defn custom-color-type
[customization-color icon-only?]
{:icon-color colors/white
:icon-secondary-color colors/white-opa-70
:label-color colors/white
:background-color (colors/custom-color customization-color 50)
:border-radius (when icon-only? 24)})
{:icon-color colors/white-opa-70
:label-color colors/white
:background-color (colors/custom-color customization-color 50)
:border-radius (when icon-only? 24)})

(defn grey-photo
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:blur-overlay-color (if pressed?
(colors/theme-colors colors/white-opa-50
colors/neutral-80-opa-50
theme)
(colors/theme-colors colors/white-opa-40
colors/neutral-80-opa-40
theme))
:blur-type (if (= theme :light) :light :dark)})
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:blur-overlay-color (if pressed?
(colors/theme-colors colors/white-opa-50
colors/neutral-80-opa-50
theme)
(colors/theme-colors colors/white-opa-40
colors/neutral-80-opa-40
theme))
:blur-type (if (= theme :light) :light :dark)})

(defn grey-blur
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})

(defn outline-blur
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})

(defn grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

(defn dark-grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (if pressed?
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})

(defn outline
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:border-color (if pressed?
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})

(defn ghost
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

(defn black
[pressed?]
{:icon-color colors/white
:label-color colors/white
{:label-color colors/white
:background-color (if pressed? colors/neutral-80 colors/neutral-95)})

(defn get-values
[{:keys [customization-color theme type background pressed? icon-only?]}]
(cond
(= type :primary) (custom-color-type customization-color icon-only?)
(= type :positive) (custom-color-type customization-color icon-only?)
(= type :danger) (custom-color-type customization-color icon-only?)
;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
(or (= type :blur-bg)
(and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
(= type :grey) (grey theme pressed?)
(= type :dark-grey) (dark-grey theme pressed?)
(= type :outline) (outline theme pressed?)
(= type :ghost) (ghost theme pressed?)
;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
(or (= type :shell) (= type :black)) (black pressed?)))
(= type :primary) (custom-color-type customization-color icon-only?)
(= type :positive) (custom-color-type customization-color icon-only?)
(= type :danger) (custom-color-type customization-color icon-only?)
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
(and (= :blur background) (= type :grey)) (grey-blur theme pressed?)
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
(= type :grey) (grey theme pressed?)
(= type :dark-grey) (dark-grey theme pressed?)
(= type :outline) (outline theme pressed?)
(= type :ghost) (ghost theme pressed?)
(= type :black) (black pressed?)))
59 changes: 34 additions & 25 deletions src/quo2/components/buttons/button/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,35 @@
:bottom 0})

(defn icon-style
[{:keys [icon-container-size icon-background-color icon-container-rounded?
[{:keys [icon-container-size icon-container-rounded?
icon-size margin-left margin-right]}]
(cond-> (merge {:margin-left margin-left
:margin-right margin-right
:align-items :center
:justify-content :center})
icon-container-size
(assoc :width icon-container-size :height icon-container-size)
icon-background-color
(assoc :background-color icon-background-color)
icon-container-rounded?
(assoc :border-radius (/ (or icon-container-size icon-size) 2))))

(defn icon-left-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
[{:keys [override-margins size icon-container-size icon-container-rounded?
icon-size]}]
(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-background-color icon-background-color
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size}))

(defn icon-right-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
[{:keys [override-margins size icon-container-size icon-container-rounded?
icon-size]}]
(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-background-color icon-background-color
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size}))

Expand All @@ -53,54 +49,67 @@
56 12
40 12
32 10
8))})
24 8
12))})

(defn style-container
[{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
[{:keys [size disabled? border-radius background-color border-color icon-only? icon-top
icon-left icon-right]}]
(merge {:height size
:align-items :center
:justify-content :center
:flex-direction (if icon-above :column :row)
:flex-direction (if icon-top :column :row)
:padding-horizontal (when-not (or icon-only? icon-left icon-right)
(case size
56 16
56 (if border-color 10 11)
40 16
32 12
8))
24 7
16))
:padding-left (when-not (or icon-only? icon-left)
(case size
56 16
56 nil
40 16
32 12
8))
24 8
16))
:padding-right (when-not (or icon-only? icon-right)
(case size
56 16
56 nil
40 16
32 12
8))
24 8
16))
:padding-top (when-not (or icon-only? icon-left icon-right)
(case size
56 0
40 9
32 5
3))
40 (if border-color 8 9)
32 (if border-color 4 5)
24 (if border-color 0 1)
(if border-color 8 9)))
:padding-bottom (when-not (or icon-only? icon-left icon-right)
(case size
56 0
40 9
32 5
4))
24 4
9))
:overflow :hidden
:background-color background-color}
(shape-style-container size border-radius)
(when width
{:width width})
:background-color background-color
:border-radius (if border-radius
border-radius
(case size
56 12
40 12
32 10
24 8
12))
:border-color border-color
:border-width (when border-color 1)}
(when icon-only?
{:width size})
(when border-color
{:border-color border-color
:border-width 1})
(when disabled
(when disabled?
{:opacity 0.3})))
Loading

0 comments on commit 78aed34

Please sign in to comment.