From 38af9e82d8d4a16c3089cf95188f8b3cf2d46334 Mon Sep 17 00:00:00 2001 From: Andrea Maria Piana Date: Wed, 29 Jun 2022 16:38:59 +0100 Subject: [PATCH] Add status-tags component --- resources/images/icons/pending-dark12@2x.png | Bin 0 -> 253 bytes resources/images/icons/pending-dark12@3x.png | Bin 0 -> 296 bytes resources/images/icons/pending12@2x.png | Bin 0 -> 255 bytes resources/images/icons/pending12@3x.png | Bin 0 -> 306 bytes .../images/icons/untrustworthy-dark12@2x.png | Bin 0 -> 542 bytes .../images/icons/untrustworthy-dark12@3x.png | Bin 0 -> 748 bytes resources/images/icons/untrustworthy12@2x.png | Bin 0 -> 549 bytes resources/images/icons/untrustworthy12@3x.png | Bin 0 -> 753 bytes resources/images/icons/verified-dark12@2x.png | Bin 0 -> 734 bytes resources/images/icons/verified-dark12@3x.png | Bin 0 -> 962 bytes resources/images/icons/verified12@2x.png | Bin 0 -> 746 bytes resources/images/icons/verified12@3x.png | Bin 0 -> 989 bytes src/quo2/components/icon.cljs | 14 +++- src/quo2/components/status_tags.cljs | 79 ++++++++++++++++++ src/quo2/screens/main.cljs | 4 + src/quo2/screens/status_tags.cljs | 45 ++++++++++ src/status_im/multiaccounts/create/core.cljs | 2 +- translations/en.json | 7 +- 18 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 resources/images/icons/pending-dark12@2x.png create mode 100644 resources/images/icons/pending-dark12@3x.png create mode 100644 resources/images/icons/pending12@2x.png create mode 100644 resources/images/icons/pending12@3x.png create mode 100644 resources/images/icons/untrustworthy-dark12@2x.png create mode 100644 resources/images/icons/untrustworthy-dark12@3x.png create mode 100644 resources/images/icons/untrustworthy12@2x.png create mode 100644 resources/images/icons/untrustworthy12@3x.png create mode 100644 resources/images/icons/verified-dark12@2x.png create mode 100644 resources/images/icons/verified-dark12@3x.png create mode 100644 resources/images/icons/verified12@2x.png create mode 100644 resources/images/icons/verified12@3x.png create mode 100644 src/quo2/components/status_tags.cljs create mode 100644 src/quo2/screens/status_tags.cljs diff --git a/resources/images/icons/pending-dark12@2x.png b/resources/images/icons/pending-dark12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..061b20bfffb5f407d9e5f18bfd24068d86a9a8a6 GIT binary patch literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG z)gIe|>NB+LKGlFP*bw76TKaMR4=G8DdovzeSf{W>wz)`c6FR>d=sE^ZS3j3^P6|k1|%Oc%$NbBI14-?iy0UcEkKyjb(&!UP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{$5WP$B+ufx05z<9WoGcjlZ+yg+dcYX+hz~ z|Mf=~dbfMIF6oZ4Iu`Ar&@#Qld-t8qHhD!H;-6eN6k7zG)Q&#UTe~&AXL5J1;j>j1 z>^*zCW#_mRUX#!kXSdM*xm`eRCrhf0sN8C%3-ee{_pjxf_kRs9UDtOaxM>@ nQ`rCK`q!0zL6&pOY}9|S$(VbQ%z{-wk1%+;`njxgN@xNA@XK-l literal 0 HcmV?d00001 diff --git a/resources/images/icons/pending12@2x.png b/resources/images/icons/pending12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..94542fecd71a5a9a13ef90d04f05316c3a338ae9 GIT binary patch literal 255 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9E$svykh8Km+7D9BhG zcOhXMp#+3hEa++vY-+z_;3 z>m}12Mdc5;*5v5${B%6m%qe-O`3h(8g9E8u<amz+8GV`sR|$JL*e?|p1B z{Z}&YA?x=W33>9-E?jv#4(i&m9nJRHy65qNZna%4J)$aV;%e)C*7iFLEmAto)zu#}>wmS#vK4ADy~=(G#Hi7(8A5T-G@yGywqWs9)Ux literal 0 HcmV?d00001 diff --git a/resources/images/icons/pending12@3x.png b/resources/images/icons/pending12@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..d33c99b9ffcb017aebc5993366fa431fb0272164 GIT binary patch literal 306 zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbBI14-?iy0UcEkKyjb(&!UP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{&7zi$B+ufx07tS4><_9Tz~Jx&8oAM9b8EZmBe1=h(1qYet4sMZq%7(_U+||?}=$UaVWM3dN##LF-@82Jr|K6eF z%8uC;r8y}=>)%Pw^kAC8`$hN^Ta->)=RkTA@jNimon}& x$o^SQHj~F}dq6I5I#K_D>DpOosmB64?0{Zk@O1TaS?83{1OSivar*!O literal 0 HcmV?d00001 diff --git a/resources/images/icons/untrustworthy-dark12@2x.png b/resources/images/icons/untrustworthy-dark12@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c1f02b18044b2a4a4c1b3b60171cfb05a2212900 GIT binary patch literal 542 zcmV+(0^$9MP)Iu}u#3gtF=m}(NVj?%NU`*VBx^g8)V9lya4R*%& zS|tjlRA|4XVFEM%>&%Yq<};^0VZx-AUXTRi&L#jm~Uyt8Jc^_Yx>SnBPRH7@x!KqXkiT`t>5)}?py$V za|PW-1}NaN;@!8W0r<>$i!`(rE!r%VuycJAj$bd%@i87J#qbp-+nkdy2b9oelK2W( zd`Wm9`RzGL$QZsPe9dVGri0ulHe><1hMXYneW@X~kP}?}oa8K%JBuxmGaO)q{O}C{ zJ)%6=%Vxe)VLcyL@gFD$LrIqVgq+Y&T{f|gGZ*cjmx(0&4pU|@?G7`g>fB*cI` zkP*ohNEKA^@t%DqO>4J4J8ArrET4U6-(Pp{?!9*chV(tp0Y;t$EGeKvuWWrW5uic= z5srWlz_IW8??V_M$~NqK>sutEt3?=~1~J4-*MGZPruBt_`rd<%gm^_o2lWVJ;MqmO zM6r;LZQ)u^LG56QP=_x@_(j5ksGvSi%za0q^_r@eF&k*Kj@>-_68U1*lgun5h4M{_F4-G*;E=kjUXO@uLAV&`2pgGvQ%4{?TTcTmG zpa{(&YM3C3$H}qnk}v6^0Z@qhhF94DjUf(5kmaK>w0-INKIKs=z}!&-){;bwBZxg| zoNuMnix|gn?#B0IAJVx}hzit=7&T#*ugS4O^%!%46UeM=Wre-3-@@+gTh}QsUxNwc z5s!Whad>cm!!Mt4G#nazP6I({_PgiVb8E7?^^}@WIHF1iY-}@C?FNaNaGzr)d>L7J z6hm&HqCJ_4iD9|iCyE4VQAxwuisBQIL`-svZ! zb5M_vS27uJa9$&$11s9mw}oMbLLqXXXycvQfz?@I>5-mDk^|+CKzbe@>8UiFArbh* eezIt4iuec2{^|2~^0Wc~00000o(u?&VLZL&^J=iQ~Rs{2uT3c2}pOJpoKs^vgvKC%~}cbb+E|? zdMyr(I~^#}AP~p?aA0$Sv#M7hwYu<`%M^%?y1P1evqa;BBHfQ{y14%AcjmcFnGh;) z07y`YKRs910!ZdILLGv@rqV_8rM?UxXD-LWry1S!juwl-`D4wozaC038;!Pwu*NvO zmYTRVAg#R3`9FwqO&Ve-Cwndu1W&SW7*RztEd?QQY)^{{72ZNfAi|B}|NRO=19d5K zki}hrbOj-!xXlL;9#({fYQTo>w^JHxXk=kedWr}-5Ed-wYN8^+=#K|7D^$WXEwYp^w|%a%Tn0IXQ|eqB#F5 n>3$mUadal|T~C;;jX%f_jw!1heWTHT00000NkvXXu0mjfH8AB3 literal 0 HcmV?d00001 diff --git a/resources/images/icons/untrustworthy12@3x.png b/resources/images/icons/untrustworthy12@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..b4f70efde863feb4c3d2d8af56a715462a0761c9 GIT binary patch literal 753 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 LNkvXXu0mjf$`rDp literal 0 HcmV?d00001 diff --git a/src/quo2/components/icon.cljs b/src/quo2/components/icon.cljs index 0d160f8d3a..b655095f64 100644 --- a/src/quo2/components/icon.cljs +++ b/src/quo2/components/icon.cljs @@ -1,5 +1,7 @@ (ns quo2.components.icon - (:require [status-im.ui.components.icons.icons :as icons])) + (:require + [quo.theme :as theme] + [status-im.ui.components.icons.icons :as icons])) (defn icon ([icon-name] (icon icon-name nil)) @@ -7,4 +9,12 @@ (let [size (or size 20)] [icons/icon (str (name icon-name) size) (merge props {:width size - :height size})]))) \ No newline at end of file + :height size})]))) +(defn theme-icon + ([icon-name] + (theme-icon icon-name nil)) + ([icon-name props] + (let [theme-icon-name (if (theme/dark?) + (str (name icon-name) "-dark") + icon-name)] + (icon theme-icon-name props)))) diff --git a/src/quo2/components/status_tags.cljs b/src/quo2/components/status_tags.cljs new file mode 100644 index 0000000000..828e2df38d --- /dev/null +++ b/src/quo2/components/status_tags.cljs @@ -0,0 +1,79 @@ +(ns quo2.components.status-tags + (:require [status-im.i18n.i18n :as i18n] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as icon] + [quo2.components.text :as text] + [quo.react-native :as rn])) + +(def default-container-style + {:border-radius 20 + :border-width 1}) + +(def small-container-style + (merge default-container-style + {:padding-horizontal 7 + :padding-vertical 3})) + +(def large-container-style + (merge default-container-style + {:padding-horizontal 11 + :padding-vertical 4})) + +(defn base-tag [_] + (fn [{:keys [size + border-color + background-color + icon + text-color + label]}] + (let [paragraph-size (if (= size :small) :paragraph-2 :paragraph-1)] + [rn/view + (assoc (if (= size :small) + small-container-style + large-container-style) + :border-color border-color + :background-color background-color) + [text/text {:size paragraph-size} + [icon/theme-icon icon {:color :none + :size 12}] + [text/text {:size paragraph-size + :style {:color text-color}} (str " " label)]]]))) + +(defn positive [_] + (fn [size] + [base-tag {:size size + :background-color colors/success-50-opa-10 + :icon :verified + :border-color colors/success-50-opa-20 + :text-color (colors/theme-colors colors/success-50 + colors/success-60) + :label (i18n/label :positive)}])) + +(defn negative [_] + (fn [size] + [base-tag {:size size + :icon :untrustworthy + :background-color colors/danger-50-opa-10 + :border-color colors/danger-50-opa-20 + :text-color (colors/theme-colors colors/danger-50 + colors/danger-60) + :label (i18n/label :negative)}])) + +(defn pending [_] + (fn [size] + [base-tag {:size size + :icon :pending + :background-color (colors/theme-colors colors/neutral-10 + colors/neutral-80) + :border-color (colors/theme-colors colors/neutral-20 + colors/neutral-70) + :text-color colors/neutral-50 + :label (i18n/label :pending)}])) + +(defn status-tag [_] + (fn [{:keys [status size]}] + [(case status + :positive positive + :negative negative + :pending pending + nil) size])) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index b92da32453..6ccce368ac 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -6,6 +6,7 @@ [quo2.screens.button :as button] [quo2.screens.text :as text] [quo2.screens.tabs :as tabs] + [quo2.screens.status-tags :as status-tags] [quo2.screens.counter :as counter] [quo2.screens.segmented :as segmented] [quo.core :as quo])) @@ -16,6 +17,9 @@ {:name :quo2-button :insets {:top false} :component button/preview-button} + {:name :quo2-status-tags + :insets {:top false} + :component status-tags/preview-status-tags} {:name :quo2-tabs :insets {:top false} :component tabs/preview-tabs} diff --git a/src/quo2/screens/status_tags.cljs b/src/quo2/screens/status_tags.cljs new file mode 100644 index 0000000000..29b4da7011 --- /dev/null +++ b/src/quo2/screens/status_tags.cljs @@ -0,0 +1,45 @@ +(ns quo2.screens.status-tags + (:require [reagent.core :as reagent] + [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo2.foundations.colors :as colors] + [quo2.components.status-tags :as quo2])) + +(def descriptor [{:label "Status" + :key :status + :type :select + :options [{:value "Positive" + :key :positive} + {:value "Negative" + :key :negative} + {:value "Pending" + :key :pending}]} + {:label "Size" + :key :size + :type :select + :options [{:value "Small" + :key :small} + {:value "Large" + :key :large}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:status :positive + :size :small})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo2/status-tag @state]]]))) + +(defn preview-status-tags [] + [rn/view {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im/multiaccounts/create/core.cljs b/src/status_im/multiaccounts/create/core.cljs index fc6e021976..96f195fe68 100644 --- a/src/status_im/multiaccounts/create/core.cljs +++ b/src/status_im/multiaccounts/create/core.cljs @@ -144,7 +144,7 @@ :color colors/blue-persist :wallet true :path constants/path-default-wallet - :name (i18n/label :t/ethereum-account)}) + :name (i18n/label :t/main-account)}) (let [{:keys [public-key address name identicon]} (get-in multiaccount [:derived constants/path-whisper-keyword])] {:public-key public-key diff --git a/translations/en.json b/translations/en.json index 97c056a962..cc57582d36 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1513,7 +1513,7 @@ "once-enabled-share-metadata": "Once enabled, links posted in the chat may share your metadata with the site", "external-storage-denied": "Access to external storage is denied", "timeline": "Timeline", - "ethereum-account": "Ethereum account", + "main-account": "Main account", "ethereum-address":"Ethereum address", "default-assets": "Default ERC20 and ERC721", "increase-gas": "Increase Gas", @@ -1753,5 +1753,8 @@ "contact-request-accepted": "Accepted ✓", "contact-request-pending": "Pending...", "removed-from-contacts": "Removed from contacts", - "mutual-contact-requests": "Mutual contact requests" + "mutual-contact-requests": "Mutual contact requests", + "pending": "Pending", + "negative": "Negative", + "positive": "Positive" }