diff --git a/src/quo2/components/tabs/account_selector.cljs b/src/quo2/components/tabs/account_selector.cljs new file mode 100644 index 0000000000..7b4053fe0f --- /dev/null +++ b/src/quo2/components/tabs/account_selector.cljs @@ -0,0 +1,72 @@ +(ns quo2.components.tabs.account-selector + (:require + [quo.theme :as theme] + [quo.react-native :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.markdown.text :as quo2])) + +(def themes + {:light {:default {:bg colors/neutral-10 + :account-text colors/black + :label-text colors/neutral-50} + :transparent {:bg colors/neutral-80-opa-5 + :account-text colors/black + :label-text colors/neutral-80-opa-40}} + + :dark {:default {:bg colors/neutral-80-opa-80 + :account-text colors/white + :label-text colors/neutral-40} + :transparent {:bg colors/white-opa-5 + :account-text colors/white + :label-text colors/neutral-40}}}) + +(defn account-container-row [background-color] + {:padding-vertical 4 + :flex-direction :row + :align-items :center + :background-color background-color + :border-radius 12}) + +(def account-emoji + {:height 16 + :width 16}) + +(def account-emoji-container + {:background-color (colors/custom-color :purple 50) + :padding 8 + :justify-content :center + :align-items :center + :border-radius 10 + :margin-left 4 + :margin-right 8}) + +(defn get-color-by-type [type key] + (get-in themes [(theme/get-theme) type key])) + +(defn account-selector + "[account-selector opts] + opts + {:show-label? true/false ;; hide or show the label + :transparent? true/false ;; implement transparent background styles + :style style ;; any other styling can be passed + :label-text \"Label\" ;; content to show where the label should be shown + :account-text \"My Savings\" ;; content in place of account name + }" + [{:keys [show-label? account-text account-emoji transparent? label-text style]}] + (let [background-color (get-color-by-type (if transparent? :transparent :default) :bg) + account-text-color (get-color-by-type (if transparent? :transparent :default) :account-text) + label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text)] + [rn/view {:style style} + (when show-label? [quo2/text {:weight :medium + :size :paragraph-2 + :style {:color label-text-color + :margin-bottom 8}} + label-text]) + [rn/view {:style (account-container-row background-color)} + [rn/view {:style account-emoji-container} + [quo2/text account-emoji]] + [quo2/text {:weight :medium + :size :paragraph-1 + :style {:color account-text-color}} + account-text]]])) + diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 5bc6fb94e8..ad51df2be8 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -34,6 +34,7 @@ [quo2.screens.info.lowest-price :as lowest-price] [quo2.screens.avatars.channel-avatar :as channel-avatar] [quo2.screens.switcher.switcher-cards :as switcher-cards] + [quo2.screens.tabs.account-selector :as account-selector] [re-frame.core :as re-frame])) (def screens-categories @@ -93,7 +94,10 @@ :component segmented/preview-segmented} {:name :tabs :insets {:top false} - :component tabs/preview-tabs}] + :component tabs/preview-tabs} + {:name :account-selector + :insets {:top false} + :component account-selector/preview-this}] :tags [{:name :context-tags :insets {:top false} :component context-tags/preview-context-tags} diff --git a/src/quo2/screens/tabs/account_selector.cljs b/src/quo2/screens/tabs/account_selector.cljs new file mode 100644 index 0000000000..ad78544a42 --- /dev/null +++ b/src/quo2/screens/tabs/account_selector.cljs @@ -0,0 +1,69 @@ +(ns quo2.screens.tabs.account-selector + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [quo2.foundations.colors :as colors] + [quo2.components.tabs.account-selector :as quo2])) + +(def descriptor [{:label "Show Label?:" + :key :show-label? + :type :boolean} + {:label "Transparent Background?:" + :key :transparent? + :type :boolean} + {:label "Account Text" + :key :account-text + :type :text} + {:label "Label Text" + :key :label-text + :type :text}]) + +;; keeping this unused data structure in the code for now +;; will reference them when I introduce multiple account support +;; and allow passing lists of accounts instead of just 1 account +(def single-account + [{:account-text "My Savings" + :account-emoji "🍑" + :label-text "Label"}]) + +(def two-accounts + [{:account-text "My Savings" + :account-emoji "🍑" + :label-text "Label"} + {:account-text "My Current" + :account-emoji "🍎" + :label-text "Label 2"}]) + +(def many-accounts + [{:account-text "My Savings" + :account-emoji "🍑" + :label-text "Label"} + {:account-text "My Current" + :account-emoji "🍎" + :label-text "Label 2"} + {:account-text "My Reimbursment" + :account-emoji "🍟" + :label-text "Label 3"}]) + +(defn cool-preview [] + (let [state (reagent/atom {:show-label? true + :transparent? false + :style {:width :100%} + :account-text "My Savings" + :account-emoji "🍑" + :label-text "Label"})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [preview/customizer state descriptor] + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/account-selector @state]]]))) + +(defn preview-this [] + [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}]])