status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fiddle 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-08-16 10:29:27 +02:00
parent be9cd1b050
commit b0db4c6354
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
85 changed files with 1073 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -176,3 +176,8 @@ status-modules/resources
## coverage
/.nyc_output
/coverage-report
## fiddle
/fiddle/node_modules/
/fiddle/target/
/fiddle/resources/public/images/

0
src/status_im/react_native/resources.cljs → components/src/status_im/react_native/resources.cljs
View File

5
fiddle/README.md Normal file
View File

@ -0,0 +1,5 @@
`cd fiddle`
`yarn install`
`clj -A:dev`

18
fiddle/deps.edn Normal file
View File

@ -0,0 +1,18 @@
{:deps {org.clojure/clojurescript {:mvn/version "1.10.520"}
com.bhauman/figwheel-main {:mvn/version "0.2.0"}
org.clojure/core.async {:mvn/version "0.4.474"}
reagent {:mvn/version "0.8.1" :exclusions [cljsjs/react cljsjs/react-dom]}
re-frame {:git/url "https://github.com/status-im/re-frame"
:sha "b0d3b0f016f217c6a397a54e5eba9486471fb172"
:deps/manifest :deps}
com.andrewmcveigh/cljs-time {:mvn/version "0.5.2"}
status-im/timbre {:mvn/version "4.10.0-2-status"}
com.taoensso/encore {:mvn/version "2.94.0"}
hickory {:mvn/version "0.7.1"}
com.cognitect/transit-cljs {:mvn/version "0.8.248"}
status-im/pluto {:mvn/version "iteration-4-9"}}
:paths ["src" "../src" "resources" "target" "../resources"]
:aliases {:dev {:extra-deps {re-frisk {:mvn/version "0.5.4.1"}}
:main-opts ["-m" "figwheel.main" "-b" "dev" "-r"]}}}

10
fiddle/dev.cljs.edn Normal file
View File

@ -0,0 +1,10 @@
{:main fiddle.core
:output-to "resources/public/js/main.js"
:preloads [re-frisk.preload]
:infer-externs true
:npm-deps false
:foreign-libs [{:file "dist/index_bundle.js"
:provides ["react" "react-dom" "react-native-web"]
:global-exports {react React
react-dom ReactDOM
react-native-web ReactNativeWeb}}]}

38
fiddle/dist/index_bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
fiddle/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-native-web": "^0.11.6",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.6"
}
}

18
fiddle/prepare.clj Normal file
View File

@ -0,0 +1,18 @@
(ns prepare
(:require [clojure.string :as str]
[clojure.java.io :as io]))
;;TODO copy dirs to have images
;(io/copy (io/file "../resources/images") (io/file "./resources/public/images"))
(let [fls (file-seq (java.io.File. "../android/app/src/main/res/drawable-mdpi"))]
(spit "./resources/public/icons.edn"
(pr-str
(remove nil?
(map
(fn [fl]
(let [n (first (str/split (.getName fl) #".png"))]
(when (.isFile fl)
(io/copy (io/file (.getPath fl)) (io/file (str "./resources/public/" n)))
n)))
fls)))))

0
fiddle/resources/config/fleets-les.json Normal file
View File

0
fiddle/resources/config/fleets.json Normal file
View File

0
fiddle/resources/mapview/mapview.html Normal file
View File

28
fiddle/resources/public/index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content="ie=edge" http-equiv="x-ua-compatible" />
<title>Fiddle</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="app" class="app"></div>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">
fiddle.core.init();
</script>
</body>
</html>

17
fiddle/src/fiddle/core.cljs Normal file
View File

@ -0,0 +1,17 @@
(ns ^:figwheel-hooks fiddle.core
(:require [reagent.core :as reagent]
[re-frame.core :as re-frame]
[fiddle.views.main :as main]
fiddle.subs
fiddle.events))
(defn mount-root []
(reagent/render [main/main] (js/document.getElementById "app")))
(defn ^:export init []
(re-frame/dispatch-sync [:initialize-db])
(re-frame/dispatch [:load-icons])
(mount-root))
(defn ^:after-load on-reload []
(mount-root))

43
fiddle/src/fiddle/events.cljs Normal file
View File

@ -0,0 +1,43 @@
(ns fiddle.events
(:require [re-frame.core :as re-frame]
[fiddle.views.colors :as colors]
[fiddle.views.screens :as screens]
[fiddle.views.typography :as typography]
[fiddle.views.icons :as icons]
[fiddle.views.list-items :as list-items]
[cljs.reader :as reader]))
(re-frame/reg-event-fx
:initialize-db
(fn [_ _]
{:db {:view-id :colors
:views {:colors colors/colors
:icons icons/icons
:screens screens/screens
:typography typography/typography
:list-items list-items/list-items}}}))
(re-frame/reg-fx
:load-icons-fx
(fn []
(let [cl (js/XMLHttpRequest.)]
(.open cl "GET" "./icons.edn")
(set! (.-onreadystatechange cl) #(when (= (.-status cl) 200)
(re-frame/dispatch [:set :icons (reader/read-string (.-responseText cl))])))
(.send cl))))
(re-frame/reg-event-fx
:load-icons
(fn [_ _]
{:load-icons-fx nil}))
(re-frame/reg-event-fx
:set
(fn [{:keys [db]} [_ k v]]
{:db (assoc db k v)}))
(re-frame/reg-event-fx
:set-in
(fn [{:keys [db]} [_ path v]]
{:db (assoc-in db path v)}))

13
fiddle/src/fiddle/frame.cljs Normal file
View File

@ -0,0 +1,13 @@
(ns fiddle.frame
(:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame]))
(def width 375)
(def height 568) ;667
(re-frame/reg-sub :dimensions/window-width (fn [_] width))
(re-frame/reg-sub :dimensions/window (fn [_] {:width width :height height}))
(defn frame [content]
[react/view {:style {:width width :height height :border-color :black :border-width 1}}
content])

8
fiddle/src/fiddle/subs.cljs Normal file
View File

@ -0,0 +1,8 @@
(ns fiddle.subs
(:require [re-frame.core :as re-frame]))
(re-frame/reg-sub :view-id (fn [db] (get db :view-id)))
(re-frame/reg-sub :view (fn [db] (get-in db [:views (:view-id db)])))
(re-frame/reg-sub :icons (fn [db] (get db :icons)))

38
fiddle/src/fiddle/views/colors.cljs Normal file
View File

@ -0,0 +1,38 @@
(ns fiddle.views.colors
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]))
(defn color [name color color-name usage & [bg?]]
[react/view {:margin 10 :padding 10 :border-radius 8 :background-color (when bg? colors/blue)}
[react/text {:style {:typography :main-medium :color (when bg? colors/white)}} name]
[react/view {:margin-vertical 24 :width 156 :height 156 :border-radius 80 :background-color color
:border-width 1 :border-color colors/gray}]
[react/text {:style {:color (when bg? colors/white)}} color-name]
[react/text {:style {:color (when bg? colors/white)}} color]
[react/text {:style {:margin-top 6 :color (if bg? colors/white-transparent colors/gray) :font-size 12}} usage]])
(defn colors-arr [title colors]
[react/view
[react/text title]
[react/view {:flex-direction :row :flex-wrap :wrap :flex 1 :margin-vertical 24}
(for [color colors]
[react/view {:margin-left 10 :width 40 :height 40 :border-radius 20 :background-color color}])]])
(defn colors []
[react/scroll-view
[react/view {:flex-direction :row :flex-wrap :wrap :flex 1}
[color "Accent Blue" colors/blue "blue" "Links, buttons"]
[color "Light Blue" colors/blue-light "blue-light" "Button background"]
[color "White" colors/white "white" "Background, icons"]
[color "Dark Grey" colors/gray "gray" "Secondary text"]
[color "Light Grey" colors/gray-lighter "gray-lighter" "Background, inputs, dividers"]
[color "Black" colors/black "black" "Icons"]
[color "Red" colors/red "red" "Errors"]
[color "Green" colors/green "green" "Success"]
[color "40% of Dark Grey" colors/gray-transparent-40 "gray-transparent-40" "Chevrons in lists (>) "]
[color "10% of Black" colors/black-transparent "black-transparent" ""]
[color "70% of White" colors/white-transparent-70 "white-transparent-70" "Secondary text on blue background" true]
[color "40% of White" colors/white-transparent "white-transparent" "Chevrons in lists (>) on the\nblue background\nText in Wallet\n\n" true]
[color "10% of White" colors/white-transparent-10 "white-transparent-10" "Backgrounds behind icons" true]]
[colors-arr "Chat colors" colors/chat-colors]
[colors-arr "Account colors" colors/account-colors]])

16
fiddle/src/fiddle/views/icons.cljs Normal file
View File

@ -0,0 +1,16 @@
(ns fiddle.views.icons
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.colors :as colors]))
(views/defview icons []
(views/letsubs [icons [:icons]]
(if icons
[react/view {:flex-direction :row :flex-wrap :wrap :flex 1 :background-color colors/gray-transparent-40}
(for [icon icons]
[react/view {:padding 20}
[react/text {:srtle {:margin-bottom 5}} icon]
[vector-icons/icon icon]])]
[react/view
[react/text "To see all icons please run `clj prepare.clj` command in terminal"]])))

128
fiddle/src/fiddle/views/list_items.cljs Normal file
View File

@ -0,0 +1,128 @@
(ns fiddle.views.list-items
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list-item.views :as list-item]
[fiddle.frame :as frame]))
(defn item [name content]
[react/view
[react/text {:style {:color colors/gray :margin-bottom 10 :margin-top 40}} name]
[react/view {:background-color :white :width frame/width}
content]])
(defn list-items []
[react/view {:background-color colors/gray-lighter :flex 1 :padding 20 :flex-direction :row :flex-wrap :wrap}
[react/view {:margin-right 10}
[item "Default with Image"
[list-item/list-item {:title "George"
:on-press #()
:image [react/view {:width 40 :height 40 :border-radius 20
:background-color colors/green}]}]]
[item "Default with Image, icon"
[list-item/list-item {:title "George"
:on-press #()
:image [react/view {:width 40 :height 40 :border-radius 20
:background-color colors/green}]
:accessories [:more]}]]
[item "With radio button (TODO!)"
[list-item/list-item {:title "George"
:on-press #()
:image [react/view {:width 40 :height 40 :border-radius 20
:background-color colors/green}]}]]]
[react/view {:margin-right 10}
[item "Default wIth icon in circle"
[list-item/list-item {:title "Clear History"
:theme :action
:icon :main-icons/close
:on-press #()}]]
[item "Default wIth icon in circle, chevron"
[list-item/list-item {:title "Get a ENS username?"
:icon :main-icons/address
:on-press #()
:accessories [:chevron]}]]
[item "Default wIth icon in circle, chevron and accessory"
[list-item/list-item {:title "Contacts"
:icon :main-icons/in_contacts
:on-press #()
:accessories [[react/text {:style {:color colors/gray}} "4"]
:chevron]}]]
[item "Default wIth icon in circle, chevron and badge"
[list-item/list-item {:title "Privacy and Security"
:icon :main-icons/profile
:on-press #()
:accessories [[react/view {:width 22 :height 22 :border-radius 11
:background-color colors/blue :align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]
[item "Default wIth icon in circle, switch (TODO!)"
[list-item/list-item {:title "Notifications"
:icon :main-icons/notification
:on-press #()
:accessories [[react/view {:width 22 :height 22 :border-radius 11
:background-color colors/blue :align-items :center
:justify-content :center}]]}]]
[item "Default wIth icon in circle, red"
[list-item/list-item {:title "Delete and Leave"
:theme :action-red
:icon :main-icons/delete
:on-press #()}]]]
[react/view {:margin-right 10}
[item "Two lines with icon in circle, chevron"
[list-item/list-item {:title "alex.stateofus.eth"
:subtitle "ENS name"
:icon :main-icons/address
:accessories [:chevron]
:on-press #()}]]
[item "Two lines with icon in circle"
[list-item/list-item {:title "alex.stateofus.eth"
:subtitle "ENS name"
:icon :main-icons/address
:on-press #()}]]
[item "Two lines with icon in circle, blue title"
[list-item/list-item {:title "Add or Create a Profile"
:subtitle "Requires signout"
:theme :action
:icon :main-icons/address
:on-press #()}]]
[item "Two lines with dapp icon,title and subtitle"
[list-item/list-item {:title "CryptoKitties"
:subtitle "https://cryptokitties.co"
:image [react/view {:width 40 :height 40 :border-radius 20
:background-color colors/green}]
:on-press #()}]]]
[react/view {:margin-right 10}
[item "Default Small"
[list-item/list-item {:title "Everybody"
:type :small
:on-press #()}]]
[item "Default Small button"
[list-item/list-item {:title "Change Passcode"
:type :small
:theme :action
:on-press #()}]]
[item "Default Small red button"
[list-item/list-item {:title "Delete all Contacts"
:type :small
:theme :action-red
:on-press #()}]]
[item "Default Small with chevron"
[list-item/list-item {:title "Recovery Phrase"
:type :small
:on-press #()
:accessories [:chevron]}]]
[item "Default Small with chevron and accessory"
[list-item/list-item {:title "Main Currency"
:type :small
:on-press #()
:accessories [[react/text {:style {:color colors/gray}} "USD"]
:chevron]}]]
[item "Default Small with chevron, badge"
[list-item/list-item {:title "Recovery Phrase"
:type :small
:on-press #()
:accessories [[react/view {:width 22 :height 22 :border-radius 11
:background-color colors/blue :align-items :center
:justify-content :center}
[react/text {:style {:color colors/white :font-size 12}} "1"]]
:chevron]}]]]])

25
fiddle/src/fiddle/views/main.cljs Normal file
View File

@ -0,0 +1,25 @@
(ns fiddle.views.main
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.button.view :as button]
[re-frame.core :as re-frame]))
(defn btn [id label view-id]
[button/primary-button
{:disabled? (= id view-id)
:style {:margin-top 5}
:on-press #(re-frame/dispatch [:set :view-id id])}
label])
(views/defview main []
(views/letsubs [view-id [:view-id]
view [:view]]
[react/view {:flex 1 :flex-direction :row :padding 10}
[react/view {:padding-right 20}
[btn :colors "Colors" view-id]
[btn :icons "Icons" view-id]
[btn :typography "Typography" view-id]
[btn :list-items "List items" view-id]
[btn :screens "Screens" view-id]]
(when view
[view])]))

24
fiddle/src/fiddle/views/screens.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns fiddle.views.screens
(:require [re-frame.core :as re-frame]
[status-im.ui.components.react :as react]
[status-im.ui.screens.intro.views :as intro]
[status-im.ui.screens.wallet.add-new.views :as add-new]
[fiddle.frame :as frame]))
;:generate-key
;:choose-key
;:select-key-storage
;:create-code
;:confirm-code
;:enable-fingerprint
;:enable-notifications
(re-frame/reg-sub :intro-wizard (fn [_] {:step :generate-key :generating-keys? false}))
(defn screens []
[react/view {:flex-direction :row}
[frame/frame
[intro/intro]]
[frame/frame
[intro/wizard]]
[frame/frame
[add-new/add-account]]])

21
fiddle/src/fiddle/views/typography.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns fiddle.views.typography
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.typography :as typography]))
(defn typo [name key]
[react/view {:flex-direction :row :align-items :center :margin-bottom 40}
[react/text {:style {:typography key :margin-right 20 :width 200}} name]
[react/text {:style {:margin-right 20 :width 200}} (str key)]
[react/text {:style {:color colors/gray}} (get typography/typography-styles key)]])
(defn typography []
[react/view {:flex-direction :row :flex 1}
[react/view {:padding 20}
[typo "Header" :header]
[typo "Title Bold" :title-bold]
[typo "Title" :title]
[typo "Main Medium" :main-medium]
[typo "Main" nil]
[typo "Caption" :caption]
[typo "TIMESTAMP" :timestamp]]])

6
fiddle/src/js/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
window.deps = {'react-native-web' : require('react-native-web') };
window.React = React;
window.ReactDOM = ReactDOM;
window.ReactNativeWeb = window.deps['react-native-web'];

20
fiddle/src/status_im/i18n_resources.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns status-im.i18n-resources
(:require-macros [status-im.i18n :as i18n])
(:require [status-im.utils.types :as types]
[clojure.string :as string]))
(def default-device-language
:en)
;; translations
(def translations-by-locale
(->> (i18n/translations [:en :es_419 :fa :ko :ms :pl :ru :zh_Hans_CN])
(map (fn [[k t]]
(let [k' (-> (name k)
(string/replace "_" "-")
keyword)]
[k' (types/json->clj t)])))
(into {})))
;; API compatibility
(defn load-language [lang])

57
fiddle/src/status_im/react_native/js_dependencies.cljs Normal file
View File

@ -0,0 +1,57 @@
(ns status-im.react-native.js-dependencies)
(def action-button (fn [] #js {:default #js {:Item #js {}}}))
(def config (fn [] #js {:default #js {}}))
(def camera (fn [] #js {:default #js {:constants #js {}}}))
(def dialogs (fn [] #js {}))
(def dismiss-keyboard (fn [] #js {}))
(def emoji-picker (fn [] #js {:default #js {}}))
(def fs (fn [] #js {}))
(def http-bridge (fn [] #js {}))
(def i18n #js {:locale "en"})
(def react-native-languages #js {:language "en", :addEventListener (fn []), :removeEventListener (fn [])})
(def image-crop-picker (fn [] #js {}))
(def image-resizer (fn [] #js {}))
(def qr-code (fn [] #js {}))
(def react-native
#js {:NativeModules #js {}
:Animated #js {:View #js {}
:Text #js {}}
:DeviceEventEmitter #js {:addListener (fn [])}
:Dimensions #js {:get (fn [])}})
(def realm #js {:schemaVersion (fn [])
:defaultPath "/tmp/realm"
:close (fn [])})
(def vector-icons (fn [] #js {:default #js {}}))
(def webview-bridge (fn [] #js {:default #js {}}))
(def webview (fn [] #js {:WebView #js {}}))
(def touchid (fn [] #js {}))
(def svg (fn [] #js {:default #js {}}))
(def status-keycard (fn [] #js {:default #js {}}))
(defrecord Notification [])
(def react-native-firebase (fn [] #js {:default #js {:notifications #js {:Notification Notification}}}))
(def desktop-linking #js {:addEventListener (fn [])})
(def desktop-shortcuts #js {:addEventListener (fn [])})
(def snoopy (fn [] #js {:default #js {}}))
(def snoopy-filter (fn [] #js {:default #js {}}))
(def snoopy-bars (fn [] #js {:default #js {}}))
(def snoopy-buffer (fn [] #js {:default #js {}}))
(def fetch (fn [] #js {}))
(def background-timer (fn [] #js {:setTimeout js/setTimeout
:setInterval js/setInterval
:clearTimeout js/clearTimeout
:clearInterval js/clearInterval}))
(def keychain (fn [] #js {:setGenericPassword (constantly (.resolve js/Promise true))}))
(def secure-random (fn [] #(.resolve js/Promise (clj->js (range 0 %)))))
(def react-navigation #js {:NavigationActions #js {}})
(def desktop-menu #js {})
(def desktop-config #js {})
(def react-native-mail (fn [] #js {:mail #js {}}))
(def react-native-navigation-twopane #js {})

44
fiddle/src/status_im/react_native/resources.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns status-im.react-native.resources
(:require-macros [status-im.utils.js-require :as js-require]))
(def ui
{:empty-hashtags "images/ui/empty-hashtags.png"
:empty-recent "images/ui/empty-recent.png"
:analytics-image "images/ui/analytics-image.png"
:welcome-image "images/ui/welcome-image.png"
:intro1 "images/ui/intro1.png"
:intro2 "images/ui/intro2.png"
:intro3 "images/ui/intro3.png"
:sample-key "images/ui/sample-key.png"
:lock "images/ui/lock.png"
:tribute-to-talk "images/ui/tribute-to-talk.png"
:wallet-welcome "images/ui/wallet-welcome.png"
:hardwallet-card "images/ui/hardwallet-card.png"
:secret-keys "images/ui/secret-keys.png"
:keycard-lock "images/ui/keycard-lock.png"
:keycard "images/ui/keycard.png"
:keycard-logo "images/ui/keycard-logo.png"
:keycard-logo-blue "images/ui/keycard-logo-blue.png"
:keycard-logo-gray "images/ui/keycard-logo-gray.png"
:keycard-key "images/ui/keycard-key.png"
:keycard-empty "images/ui/keycard-empty.png"
:keycard-phone "images/ui/keycard-phone.png"
:keycard-connection "images/ui/keycard-connection.png"
:keycard-nfc-on "images/ui/keycard-nfc-on.png"
:keycard-wrong "images/ui/keycard-wrong.png"
:not-keycard "images/ui/not-keycard.png"
:status-logo "images/ui/status-logo.png"
:hold-card-animation "images/ui/hold-card-animation.gif"
:warning-sign "images/ui/warning-sign.png"
:phone-nfc-on "images/ui/phone-nfc-on.png"
:phone-nfc-off "images/ui/phone-nfc-off.png"
:dapp-store "images/ui/dapp-store.png"
:ens-header "images/ui/ens-header.png"})
(def loaded-images (atom {}))
(defn get-image [k]
(if (contains? @loaded-images k)
(get @loaded-images k)
(get (swap! loaded-images assoc k
(get ui k)) k)))

332
fiddle/src/status_im/ui/components/react.cljs Normal file
View File

@ -0,0 +1,332 @@
(ns status-im.ui.components.react
(:require-macros [status-im.utils.views :as views])
(:require [goog.object :as object]
[reagent.core :as reagent]
[status-im.ui.components.styles :as styles]
[status-im.utils.utils :as utils]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.typography :as typography]
[status-im.utils.platform :as platform]
[react-native-web :as rnw]))
(defn adapt-class [class]
(when class
(reagent/adapt-react-class class)))
(defn get-web-class [name]
(fn []
(adapt-class (goog.object/get rnw name))))
(defn get-class [name] (get-web-class name))
(def device-event-emitter nil)
(defn dismiss-keyboard! [] ())
(def splash-screen nil)
;; React Components
(def app-registry nil)
(def app-state nil)
(def net-info nil)
(def view-class ((get-web-class "View")))
(defn view [& props]
(into []
(concat
[view-class]
(cond-> (into [] props)
(and (map? (first props)) (not (contains? (first props) :style)))
(assoc 0 {:style (first props)})))))
(def safe-area-view (get-web-class "SafeAreaView"))
(def progress-bar (get-web-class "ProgressBarAndroid"))
(def status-bar-class (get-web-class "StatusBar"))
(def scroll-view-class (get-web-class "ScrollView"))
(def web-view nil)
(def keyboard-avoiding-view-class (get-web-class "KeyboardAvoidingView"))
(def refresh-control nil)
(def text-class ((get-web-class "Text")))
(def text-input-class (get-web-class "TextInput"))
(def image-class (get-web-class "Image"))
(def picker-obj nil)
(defn picker-class [] )
(defn picker-item-class [] )
(defn valid-source? [source]
(or (not (map? source))
(not (contains? source :uri))
(and (contains? source :uri)
(:uri source))))
(defn image [{:keys [source] :as props}]
(when (valid-source? source)
(let [source (if (fn? source) (source) source)]
[(image-class) (assoc props :source source)])))
(def switch-class (get-web-class "Switch"))
(defn switch [props]
[(switch-class) props])
(def touchable-highlight ((get-web-class "TouchableOpacity")))
(def touchable-opacity-class (get-web-class "TouchableOpacity"))
(def activity-indicator-class (get-web-class "ActivityIndicator"))
(defn activity-indicator [props]
[(activity-indicator-class) props])
(def modal nil)
(def pan-responder nil)
(def animated (get-web-class "Animated"))
(defn animated-view-class []
(reagent/adapt-react-class (.-View (animated))))
(defn animated-view [props & content]
(vec (conj content props (animated-view-class))))
(def dimensions nil)
(def keyboard nil)
(def linking nil)
(def desktop-notification nil)
(def max-font-size-multiplier 1.25)
(defn prepare-text-props [props]
(-> props
(update :style typography/get-style)
(assoc :max-font-size-multiplier max-font-size-multiplier)))
(defn prepare-nested-text-props [props]
(-> props
(update :style typography/get-nested-style)
(assoc :parseBasicMarkdown true)
(assoc :nested? true)))
;; Accessor methods for React Components
(defn text
"For nested text elements, use nested-text instead"
([text-element]
(text {} text-element))
([options text-element]
[text-class (prepare-text-props options) text-element]))
(defn nested-text
"Returns nested text elements with proper styling and typography
Do not use the nested? option, it is for internal usage of the function only"
[options & nested-text-elements]
(let [options-with-style (if (:nested? options)
(prepare-nested-text-props options)
(prepare-text-props options))]
(reduce (fn [acc text-element]
(conj acc
(if (string? text-element)
text-element
(let [[options & nested-text-elements] text-element]
(apply nested-text (prepare-nested-text-props options)
nested-text-elements)))))
[text-class (dissoc options-with-style :nested?)]
nested-text-elements)))
(defn text-input
[options text]
[(text-input-class)
(merge
{:underline-color-android :transparent
:max-font-size-multiplier max-font-size-multiplier
:placeholder-text-color colors/text-gray
:placeholder (i18n/label :t/type-a-message)
:value text}
(-> options
(update :style typography/get-style)
(update :style dissoc :line-height)))])
(defn i18n-text
[{:keys [style key]}]
[text {:style style} (i18n/label key)])
(defn icon
([n] (icon n styles/icon-default))
([n style]
[image {:source {:uri (keyword (str "icon_" (name n)))}
:resizeMode "contain"
:style style}]))
(defn touchable-opacity [props content]
[(touchable-opacity-class) props content])
#_(defn touchable-highlight [props content]
[(touchable-highlight-class)
(merge {:underlay-color :transparent} props)
content])
(defn touchable-without-feedback [props content]
nil)
(defn get-dimensions [name]
(js->clj (.get (dimensions) name) :keywordize-keys true))
(defn list-item [component]
(reagent/as-element component))
(defn value->picker-item [{:keys [value label]}]
[(picker-item-class) {:value (or value "") :label (or label value "")}])
(defn picker [{:keys [style on-change selected enabled data]}]
(into
[(picker-class) (merge (when style {:style style})
(when enabled {:enabled enabled})
(when on-change {:on-value-change on-change})
(when selected {:selected-value selected}))]
(map value->picker-item data)))
;; Image picker
(def image-picker-class nil)
(defn show-access-error [o]
(when (= "E_PERMISSION_MISSING" (object/get o "code"))
(utils/show-popup (i18n/label :t/error)
(i18n/label :t/photos-access-error))))
(defn show-image-picker
([images-fn]
(show-image-picker images-fn nil))
([images-fn media-type]
(let [image-picker (.-default (image-picker-class))]
(-> image-picker
(.openPicker (clj->js {:multiple false :mediaType (or media-type "any")}))
(.then images-fn)
(.catch show-access-error)))))
;; Clipboard
(def sharing
nil)
(defn copy-to-clipboard [text]
nil)
(defn get-from-clipboard [clbk]
nil)
;; HTTP Bridge
(def http-bridge nil)
;; KeyboardAvoidingView
(defn keyboard-avoiding-view [props & children]
(let [view-element (if platform/ios?
[(keyboard-avoiding-view-class) (merge {:behavior :padding} props)]
[view props])]
(vec (concat view-element children))))
(defn scroll-view [props & children]
(vec (conj children props (scroll-view-class))))
(views/defview with-activity-indicator
[{:keys [timeout style enabled? preview]} comp]
(views/letsubs
[loading (reagent/atom true)]
{:component-did-mount (fn []
(if (or (nil? timeout)
(> 100 timeout))
(reset! loading false)
(utils/set-timeout #(reset! loading false)
timeout)))}
(if (and (not enabled?) @loading)
(or preview
[view {:style (or style {:justify-content :center
:align-items :center})}
[activity-indicator {:animating true}]])
comp)))
(defn navigation-wrapper
"Wraps component so that it will be shown only when current-screen is one of views"
[{:keys [component views current-view hide?]
:or {hide? false}}]
(let [current-view? (if (set? views)
(views current-view)
(= views current-view))
style (if current-view?
{:flex 1
:zIndex 0}
{:opacity 0
:flex 0
:zIndex -1})
component' (if (fn? component) [component] component)]
(when (or (not hide?) (and hide? current-view?))
(if hide?
component'
[view style (if (fn? component) [component] component)]))))
(defn with-empty-preview [comp]
[with-activity-indicator
{:preview [view {}]}
comp])
;; Platform-specific View
(defmulti create-main-screen-view #(cond
platform/iphone-x? :iphone-x
platform/ios? :ios
platform/android? :android))
(defmethod create-main-screen-view :iphone-x [current-view]
(fn [props & children]
(let [props (merge props
{:background-color
(case current-view
(:wallet-send-transaction
:wallet-request-transaction
:wallet-send-assets
:wallet-request-assets
:choose-recipient
:recent-recipients
:select-account
:wallet-send-transaction-request
:contact-code
:wallet-settings-hook)
colors/blue
(:qr-viewer
:recipient-qr-code)
"#2f3031"
colors/white)})
bottom-background (when (#{:recent-recipients
:select-account
:wallet-send-assets
:wallet-request-assets} current-view)
[view {:background-color colors/white
:position :absolute
:bottom 0
:right 0
:left 0
:height 100
:z-index -1000}])
children (conj children bottom-background)]
(apply vector (safe-area-view) props children))))
(defmethod create-main-screen-view :default [_]
view)
(views/defview main-screen-modal-view [current-view & components]
(views/letsubs []
(let [main-screen-view (create-main-screen-view current-view)]
[main-screen-view styles/flex
[(if (= current-view :chat-modal)
view
keyboard-avoiding-view)
{:flex 1 :flex-direction :column}
(apply vector view styles/flex components)]])))

6
fiddle/webpack.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'index_bundle.js'
}
}

10
src/status_im/chat/commands/impl/transactions/styles.cljs
View File

@ -29,7 +29,7 @@
(def asset-separator
{:height 1
:background-color colors/gray-light
:background-color colors/black-transparent
:margin-left 56})
(def command-send-status-container
@ -91,11 +91,11 @@
(defn command-request-currency-text [outgoing]
{:font-size 22
:color (if outgoing colors/wild-blue-yonder colors/gray)})
:color (if outgoing colors/white-transparent colors/gray)})
(defn command-request-timestamp-text [outgoing]
{:font-size 12
:color (if outgoing colors/wild-blue-yonder colors/gray)})
:color (if outgoing colors/white-transparent colors/gray)})
(def command-send-fiat-amount
{:flex-direction :column
@ -145,7 +145,7 @@
(defn command-request-header-text [outgoing]
{:font-size 12
:color (if outgoing colors/wild-blue-yonder colors/gray)})
:color (if outgoing colors/white-transparent colors/gray)})
(def command-request-row
{:flex-direction :row
@ -156,7 +156,7 @@
:color (if outgoing colors/white colors/black)})
(def command-request-separator-line
{:background-color colors/gray-light
{:background-color colors/black-transparent
:height 1
:border-radius 8
:margin-top 10})

2
src/status_im/extensions/ui/styles.cljs
View File

@ -12,7 +12,7 @@
:border-radius 20
:background-color (if connected?
colors/blue
colors/gray-light)
colors/black-transparent)
:align-items :center
:justify-content :center})

2
src/status_im/ui/components/action_button/action_button.cljs
View File

@ -9,7 +9,7 @@
(defn action-button [{:keys [label accessibility-label icon icon-opts image image-opts on-press label-style cyrcle-color]}]
[rn/touchable-highlight (merge {:on-press on-press
:underlay-color (colors/alpha colors/gray 0.15)}
:underlay-color colors/gray-transparent-10}
(when accessibility-label
{:accessibility-label accessibility-label}))
[rn/view {:style st/action-button}

6
src/status_im/ui/components/action_button/styles.cljs
View File

@ -22,8 +22,10 @@
{:padding-left 16})
(def action-button-label
{:color colors/blue
:font-size 16})
{:color colors/blue})
(def action-button-label-red
{:color colors/red})
(defstyle actions-list
{:background-color colors/white

2
src/status_im/ui/components/bottom_buttons/styles.cljs
View File

@ -10,7 +10,7 @@
(def border
{:margin-horizontal 16
:border-top-width 1
:border-color colors/white-light-transparent})
:border-color colors/white-transparent-10})
(def container
{:flex-direction :row

8
src/status_im/ui/components/button/styles.cljs
View File

@ -4,8 +4,8 @@
[status-im.ui.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def border-color colors/white-light-transparent)
(def border-color-high colors/white-light-transparent)
(def border-color colors/white-transparent-10)
(def border-color-high colors/white-transparent-10)
(def buttons-container {:flex-direction :row})
@ -56,7 +56,7 @@
(defn primary-button [disabled?]
(merge
button-borders
{:background-color (if disabled? (colors/alpha colors/gray 0.1) colors/blue)}))
{:background-color (if disabled? colors/gray-transparent-10 colors/blue)}))
(def primary-button-text {:color colors/white})
@ -74,7 +74,7 @@
:height 42
:margin-horizontal 16
:border-radius styles/border-radius
:background-color (colors/alpha colors/blue 0.1)})
:background-color colors/blue-transparent-10})
(def button-with-icon-text-container
{:padding-left 16

25
src/status_im/ui/components/colors.cljs
View File

@ -13,21 +13,24 @@
;; WHITE
(def white "#ffffff")
(def white-light-transparent (alpha white 0.1)) ;; Used as icon background color for a dark foreground
(def white-transparent-10 (alpha white 0.1)) ;; Used as icon background color for a dark foreground
(def white-transparent (alpha white 0.4)) ;; Used as icon color on dark background and input placeholder color
(def wild-blue-yonder white-transparent) ;; Text color for outgoing messages timestamp
(def white-transparent-70 (alpha white 0.7))
(def red-light "#ffe5ea") ;; error tooltip TODO (andrey) should be white, but shadow needed
(def tooltip-green "#e9f6e6") ;; fading tooltip background color TODO (andrey) should be white, but shadow needed
;; BLACK
(def black "#000000") ;; Used as the default text color
(def black-transparent (alpha black 0.1)) ;; Used as background color for rounded button on dark background and as background color for containers like "Backup recovery phrase"
(def black-transparent-20 (alpha black 0.2)) ; accounts divider
(def black-transparent-40 (alpha black 0.4))
(def gray-light black-transparent) ;; Used as divider color
(def black-light "#2d2d2d")
(def black-light "#2d2d2d") ;; sign-with-keycard-button
;; DARK GREY
(def gray "#939ba1") ;; Dark grey, used as a background for a light foreground and as section header and secondary text color
(def gray-transparent-10 (alpha gray 0.1))
(def gray-transparent-40 (alpha gray 0.4))
;; LIGHT GREY
(def gray-lighter "#eef2f5") ;; Light Grey, used as a background or shadow
@ -36,11 +39,11 @@
(def blue "#4360df") ;; Accent blue, used as main wallet color, and ios home add button
;; LIGHT BLUE
(def blue-light "#ECEFFC") ;; Light Blue
(def gray-background blue-light) ;; TODO (andrey) should be refactored later by Dmitry
(def blue-transparent-10 (alpha blue 0.1)) ;; unknown
;; RED
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
(def red-transparent-10 (alpha red 0.1))
(def red-transparent-10 (alpha red 0.1)) ;;action-row ;; ttt finish
;; GREEN
(def green "#44d058") ;; icon for successful inboud transaction
@ -53,11 +56,6 @@
"#fe8f59"
"#d37ef4"])
(def text black)
(def text-gray gray)
(def default-chat-color "#a187d5") ;; legacy
(def account-colors ["#9B832F"
"#D37EF4"
"#1D806F"
@ -65,3 +63,8 @@
"#7CDA00"
"#887AF9"
"#8B3131"])
(def text black)
(def text-gray gray)
(def default-chat-color "#a187d5") ;; legacy

4
src/status_im/ui/components/common/styles.cljs
View File

@ -27,7 +27,7 @@
(defstyle separator
{:android {:height 0}
:ios {:height 1
:background-color colors/gray-light
:background-color colors/black-transparent
:opacity 0.5}})
(def list-separator
@ -115,7 +115,7 @@
:background-color (cond disabled?
colors/gray-lighter
background?
(colors/alpha colors/blue 0.1))}
colors/blue-transparent-10)}
style))
(def button-label

8
src/status_im/ui/components/list/styles.cljs
View File

@ -44,7 +44,7 @@
:height image-size
:margin-right 16
:border-radius (/ image-size 2)
:border-color (colors/alpha colors/gray 0.1)
:border-color colors/gray-transparent-10
:border-width 1})
(def icon-size 24)
@ -139,7 +139,7 @@
(def base-separator
{:height 1
:background-color colors/gray-light})
:background-color colors/black-transparent})
(def separator
(merge
@ -164,7 +164,7 @@
{:background-color colors/blue})
(def action
{:background-color colors/white-light-transparent
{:background-color colors/white-transparent-10
:border-radius 50})
(def action-disabled
@ -178,7 +178,7 @@
(def action-separator
{:height 1
:background-color colors/white-light-transparent
:background-color colors/white-transparent-10
:margin-left 64})
(def list-with-label-wrapper

2
src/status_im/ui/components/list/views.cljs
View File

@ -162,7 +162,7 @@
:number-of-lines 1}
(str accessory-value)])
(when-not hide-chevron?
[vector-icons/icon :main-icons/next {:color (colors/alpha colors/gray 0.4)}])]])
[vector-icons/icon :main-icons/next {:color colors/gray-transparent-40}])]])
(defn- wrap-render-fn [f]
(fn [data]

5
src/status_im/ui/components/list_item/styles.cljs
View File

@ -5,14 +5,13 @@
{:height (if small? 52 64)
:align-items :center
:flex-direction :row
:padding-right 8
:background-color :white})
(defn title [small? subtitle]
(merge (when-not small?
{:font-size 17})
{:typography :title})
(when subtitle
{:font-weight "500"})))
{:typography :main-medium})))
(def subtitle
{:margin-top 4

22
src/status_im/ui/components/list_item/views.cljs
View File

@ -9,9 +9,9 @@
; type - optional :default , :small
; accessories - optional vector of :chevron, :check or component or string
; accessories - optional vector of :chevron, :check, :more or component or string
; theme - optional :default, :wallet, :action
; theme - optional :default, :wallet, :action, :action-red
(defn list-item [{:keys [title subtitle accessories image image-path icon type theme on-press error content] :or {type :default theme :default}}]
(let [small? (= :small type)]
@ -26,10 +26,8 @@
;;Icon
(when icon
[react/view {:margin-left 16}
[react/view (when (= theme :action) (st/action-button-icon-container nil))
[icons/icon icon (if (= theme :action)
st/action-button-label
{:color colors/gray-transparent-40})]]])
[react/view (st/action-button-icon-container (when (= theme :action-red) colors/red-transparent-10))
[icons/icon icon (if (= theme :action-red) st/action-button-label-red st/action-button-label)]]])
(when image-path
[react/view {:margin-left 16}
[react/image {:source (utils.image/source image-path)
@ -38,7 +36,8 @@
(when title
[react/view {:style {:margin-left 16 :margin-right 16}}
[react/text {:style (merge (styles/title small? subtitle)
(when (= theme :action) st/action-button-label))
(when (= theme :action) st/action-button-label)
(when (= theme :action-red) st/action-button-label-red))
:number-of-lines 1
:ellipsize-mode :tail}
title]
@ -60,13 +59,16 @@
(with-meta
(cond
(= :chevron accessory)
[react/view
[react/view {:margin-right 8}
[icons/icon :main-icons/next {:color colors/gray-transparent-40}]]
(= :check accessory)
[react/view
[react/view {:margin-right 16}
[icons/icon :main-icons/check {:color colors/gray}]]
(= :more accessory)
[react/view {:margin-right 16}
[icons/icon :main-icons/more]]
:else
[react/view {:margin-right 8 :flex-shrink 1}
[react/view {:margin-right 16 :flex-shrink 1}
(cond
(string? accessory)
[react/text {:style styles/accessory-text :number-of-lines 1}

4
src/status_im/ui/components/qr_code_viewer/styles.cljs
View File

@ -14,7 +14,7 @@
{:align-self :center
:width (+ width qr-code-padding qr-code-padding)
:background-color colors/white
:border-color colors/gray-light
:border-color colors/black-transparent
:border-width 1
:border-radius 8
:padding qr-code-padding})
@ -49,7 +49,7 @@
(def hash-value-text
{:align-self :stretch
:border-color colors/gray-light
:border-color colors/black-transparent
:border-width 1
:margin-horizontal 16
:padding-horizontal 8

2
src/status_im/ui/components/toolbar/styles.cljs
View File

@ -58,7 +58,7 @@
{:width 24
:height 24
:color colors/blue
:container-style {:background-color (colors/alpha colors/blue 0.12)
:container-style {:background-color colors/blue-transparent-10
:border-radius 28
:display :flex
:justify-content :center

2
src/status_im/ui/screens/chat/message/message.cljs
View File

@ -70,7 +70,7 @@
(letsubs [username [:contacts/contact-name-by-identity from]]
[react/view {:style (style/quoted-message-container outgoing)}
[react/view {:style style/quoted-message-author-container}
[vector-icons/tiny-icon :tiny-icons/tiny-reply {:color (if outgoing colors/wild-blue-yonder colors/gray)}]
[vector-icons/tiny-icon :tiny-icons/tiny-reply {:color (if outgoing colors/white-transparent colors/gray)}]
(chat.utils/format-reply-author from username current-public-key (partial style/quoted-message-author outgoing))]
[react/text {:style (style/quoted-message-text outgoing)

2
src/status_im/ui/screens/chat/styles/input/gap.cljs
View File

@ -8,7 +8,7 @@
:height 48
:align-items :center
:justify-content :center
:border-color colors/gray-light
:border-color colors/black-transparent
:border-top-width 1
:border-bottom-width 1
:background-color :white})

4
src/status_im/ui/screens/chat/styles/input/input.cljs
View File

@ -13,7 +13,7 @@
:margin-bottom margin-bottom
:flex-direction :column
:border-top-width border-height
:border-top-color colors/gray-light
:border-top-color colors/black-transparent
:elevation 2})
(def reply-message
@ -21,7 +21,7 @@
:align-items :flex-start
:border-width 1
:border-radius 10
:border-color colors/gray-light
:border-color colors/black-transparent
:padding-top 10
:padding-bottom 10
:padding-right 14

2
src/status_im/ui/screens/chat/styles/input/parameter_box.cljs
View File

@ -3,6 +3,6 @@
(def root
{:background-color colors/white
:border-bottom-color colors/gray-light
:border-bottom-color colors/black-transparent
:border-bottom-width 1})

4
src/status_im/ui/screens/chat/styles/input/suggestions.cljs
View File

@ -7,7 +7,7 @@
(def root
{:background-color colors/white
:border-top-color colors/gray-light
:border-top-color colors/black-transparent
:border-top-width 1})
(def item-suggestion-container
@ -15,7 +15,7 @@
:align-items :center
:height item-height
:padding-horizontal 14
:border-top-color colors/gray-light
:border-top-color colors/black-transparent
:border-top-width border-height})
(def item-suggestion-description

10
src/status_im/ui/screens/chat/styles/message/message.cljs
View File

@ -45,7 +45,7 @@
[justify-timestamp? outgoing rtl? emoji?]
(merge message-timestamp
{:color (if (and outgoing (not emoji?))
(colors/alpha colors/white 0.7)
colors/white-transparent-70
colors/gray)}
(when justify-timestamp? {:position :absolute
:bottom 7
@ -185,8 +185,8 @@
{:margin-bottom 6
:padding-bottom 6
:border-bottom-color (if outgoing
colors/white-light-transparent
(colors/alpha colors/black 0.1))
colors/white-transparent-10
colors/black-transparent)
:border-bottom-width 2
:border-bottom-left-radius 2
:border-bottom-right-radius 2})
@ -202,13 +202,13 @@
:padding-top 4
:padding-left 6
:color (if outgoing
(colors/alpha colors/white 0.7)
colors/white-transparent-70
colors/gray)))
(defn quoted-message-text [outgoing]
{:font-size 14
:color (if outgoing
(colors/alpha colors/white 0.7)
colors/white-transparent-70
colors/gray)})
(def extension-container

10
src/status_im/ui/screens/desktop/main/chat/styles.cljs
View File

@ -30,7 +30,7 @@
(def message-command-container
{:align-self :flex-start
:border-radius 8
:border-color colors/gray-light
:border-color colors/black-transparent
:border-width 1
:padding-horizontal 12
:padding-vertical 10
@ -78,7 +78,7 @@
:height 38})
(def member-photo-container
{:border-color colors/gray-light
{:border-color colors/black-transparent
:border-width 1
:align-items :center
:justify-content :center
@ -189,7 +189,7 @@
:margin-bottom 10})
(def chat-profile-icon-container
{:background-color (colors/alpha colors/blue 0.1)
{:background-color colors/blue-transparent-10
:justify-content :center
:align-items :center
:border-radius 15
@ -230,7 +230,7 @@
:align-items :flex-start
:border-width 1
:border-radius 10
:border-color colors/gray-light
:border-color colors/black-transparent
:margin 10})
(def reply-content-container
@ -265,7 +265,7 @@
(def separator
{:height 1
:background-color colors/gray-light})
:background-color colors/black-transparent})
(def quoted-message-container
{:margin 6

2
src/status_im/ui/screens/desktop/main/styles.cljs
View File

@ -11,7 +11,7 @@
(def pane-separator
{:width 1
:background-color colors/gray-light})
:background-color colors/black-transparent})
(def absolute
{:position :absolute

2
src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs
View File

@ -45,7 +45,7 @@
(def chat-list-separator
{:height 1
:background-color colors/gray-light})
:background-color colors/black-transparent})
(def chat-name-box
{:flex-direction :row

4
src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
View File

@ -63,7 +63,7 @@
:margin-horizontal 50
:margin-bottom 48
:border-radius 8
:background-color (colors/alpha colors/blue 0.1)})
:background-color colors/blue-transparent-10})
(def share-contact-code-text-container
{:margin-left 32
@ -181,7 +181,7 @@
{:height 1
:margin-top 16
:margin-bottom 8
:background-color colors/gray-light})
:background-color colors/black-transparent})
(defn adv-settings-row-text [color]
{:color color

2
src/status_im/ui/screens/fleet_settings/styles.cljs
View File

@ -32,7 +32,7 @@
:border-radius 20
:background-color (if current?
colors/blue
colors/gray-light)
colors/black-transparent)
:align-items :center
:justify-content :center})

4
src/status_im/ui/screens/hardwallet/connect/styles.cljs
View File

@ -24,7 +24,7 @@
(defn bottom-action-container [nfc-enabled?]
{:background-color (if nfc-enabled?
colors/gray-background
colors/blue-light
colors/gray-lighter)
:width 369
:height 80
@ -64,7 +64,7 @@
{:height 52
:justify-content :center
:border-top-width 1
:border-color colors/gray-light})
:border-color colors/black-transparent})
(def product-info-container
{:flex-direction :row

4
src/status_im/ui/screens/hardwallet/pin/styles.cljs
View File

@ -50,7 +50,7 @@
:height 8
:background-color (if pressed?
colors/blue
colors/gray-light)
colors/black-transparent)
:border-radius 50
:margin-horizontal 5})
@ -74,7 +74,7 @@
:justify-content :center
:flex-direction :row
:border-radius 50
:background-color colors/gray-background})
:background-color colors/blue-light})
(def numpad-delete-button
(assoc numpad-button :background-color colors/white))

2
src/status_im/ui/screens/hardwallet/settings/views.cljs
View File

@ -75,7 +75,7 @@
:width "100%"
:height 68
:border-top-width 1
:border-color colors/gray-light}
:border-color colors/black-transparent}
[react/view {:flex 1}]
[reset-card-next-button disabled?]]]]))

10
src/status_im/ui/screens/hardwallet/setup/styles.cljs
View File

@ -117,10 +117,10 @@
:justify-content :center
:align-items :center
:border-top-width 1
:border-color colors/gray-light})
:border-color colors/black-transparent})
(def bottom-button-container
{:background-color colors/gray-background
{:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -129,7 +129,7 @@
:border-radius 10})
(def begin-button-container
{:background-color colors/gray-background
{:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -149,7 +149,7 @@
:width "100%"
:height 52
:border-top-width 1
:border-color colors/gray-light})
:border-color colors/black-transparent})
(def back-and-next-buttons-container
{:flex-direction :row
@ -320,7 +320,7 @@
(def remaining-step-row-text
{:border-width 1
:border-radius 16
:border-color colors/gray-light
:border-color colors/black-transparent
:align-items :center
:justify-content :center
:width 32

2
src/status_im/ui/screens/hardwallet/success/styles.cljs
View File

@ -49,7 +49,7 @@
:padding-top 20})
(def bottom-action-container
{:background-color colors/gray-background
{:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row

2
src/status_im/ui/screens/home/views.cljs
View File

@ -131,7 +131,7 @@
window-width)]
[react/view (merge {:flex 1 :width home-width}
(when two-pane-ui-enabled?
{:border-right-width 1 :border-right-color colors/gray-light}))
{:border-right-width 1 :border-right-color colors/black-transparent}))
[status-bar/status-bar {:type :main}]
[react/keyboard-avoiding-view {:style {:flex 1}
:on-layout (fn [e]

2
src/status_im/ui/screens/intro/styles.cljs
View File

@ -66,7 +66,7 @@
:height 40
:border-radius 20
:border-width 1
:border-color (colors/alpha colors/black 0.1)})
:border-color colors/black-transparent})
(def welcome-text-description
{:margin-top 8

4
src/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -71,7 +71,7 @@
:margin-top 15}
[react/view {:border-width 1
:border-radius 20
:border-color colors/gray-light
:border-color colors/black-transparent
:align-items :center
:justify-content :center
:width 40
@ -91,7 +91,7 @@
[react/view {:margin-bottom 40}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.onboarding.intro.ui/begin-setup-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row

8
src/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -61,7 +61,7 @@
[react/view {:margin-bottom 50}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.recovery.intro.ui/begin-recovery-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -233,7 +233,7 @@
:height 61
:border-radius 30
:border-width 1
:border-color (colors/alpha colors/black 0.1)}}]]
:border-color colors/black-transparent}}]]
[react/text {:style {:text-align :center
:color colors/black
:font-weight "500"}
@ -250,7 +250,7 @@
[react/view {:margin-bottom 50}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.recovery.success/finish-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -302,7 +302,7 @@
[react/view {:margin-bottom 50}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.recovery.no-key.ui/generate-key-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row

16
src/status_im/ui/screens/keycard/views.cljs
View File

@ -208,7 +208,7 @@
[react/view {:margin-bottom 32}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.ui/got-it-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -247,7 +247,7 @@
[react/view {:margin-bottom 32}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.ui/got-it-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -288,7 +288,7 @@
:align-items :center}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.ui/pair-card-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -343,7 +343,7 @@
[react/view {:margin-bottom 32}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.ui/got-it-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row
@ -399,7 +399,7 @@
:height 61
:border-radius 30
:border-width 1
:border-color (colors/alpha colors/black 0.1)}}]
:border-color colors/black-transparent}}]
[react/view {:justify-content :center
:align-items :center
:width 24
@ -410,7 +410,7 @@
:bottom 0
:background-color :white
:border-width 1
:border-color (colors/alpha colors/black 0.1)}
:border-color colors/black-transparent}
[react/image {:source (resources/get-image :keycard-key)
:style {:width 8
:height 14}}]]]]
@ -479,7 +479,7 @@
:height 61
:border-radius 30
:border-width 1
:border-color (colors/alpha colors/black 0.1)}}]
:border-color colors/black-transparent}}]
[react/view {:justify-content :center
:align-items :center
:width 24
@ -490,7 +490,7 @@
:bottom 0
:background-color :white
:border-width 1
:border-color (colors/alpha colors/black 0.1)}
:border-color colors/black-transparent}
[react/image {:source (resources/get-image :keycard-key)
:style {:width 8
:height 14}}]]]]

2
src/status_im/ui/screens/log_level_settings/styles.cljs
View File

@ -32,7 +32,7 @@
:border-radius 20
:background-color (if current?
colors/blue
colors/gray-light)
colors/black-transparent)
:align-items :center
:justify-content :center})

4
src/status_im/ui/screens/multiaccounts/recover/views.cljs
View File

@ -254,7 +254,7 @@
:height 61
:border-radius 30
:border-width 1
:border-color (colors/alpha colors/black 0.1)}}]]
:border-color colors/black-transparent}}]]
[react/text {:style {:text-align :center
:color colors/black
:font-weight "500"}
@ -271,7 +271,7 @@
[react/view {:margin-bottom 50}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:recover.success.ui/re-encrypt-pressed])}
[react/view {:background-color colors/gray-background
[react/view {:background-color colors/blue-light
:align-items :center
:justify-content :center
:flex-direction :row

4
src/status_im/ui/screens/multiaccounts/views.cljs
View File

@ -38,11 +38,11 @@
:border-radius 24
:background-color :white
:border-width 1
:border-color (colors/alpha colors/black 0.1)}
:border-color colors/black-transparent}
[react/image {:source (resources/get-image :keycard-key)
:style {:width 11
:height 19}}]])
[icons/icon :main-icons/next {:color (colors/alpha colors/gray 0.4)}]]])
[icons/icon :main-icons/next {:color colors/gray-transparent-40}]]])
(defview multiaccounts []
(letsubs [multiaccounts [:multiaccounts/multiaccounts]]

2
src/status_im/ui/screens/offline_messaging_settings/styles.cljs
View File

@ -31,7 +31,7 @@
:border-radius 20
:background-color (if connected?
colors/blue
colors/gray-light)
colors/black-transparent)
:align-items :center
:justify-content :center})

2
src/status_im/ui/screens/profile/components/styles.cljs
View File

@ -36,7 +36,7 @@
:ios {:margin-top 1
:height 45
:border-bottom-width 1
:border-bottom-color colors/gray-light}
:border-bottom-color colors/black-transparent}
:android {:border-bottom-width 2
:border-bottom-color colors/blue}})

6
src/status_im/ui/screens/profile/contact/styles.cljs
View File

@ -28,7 +28,7 @@
{:background-color colors/white})
(def action
{:background-color (colors/alpha colors/blue 0.1)
{:background-color colors/blue-transparent-10
:border-radius 50})
(defn action-label [with-subtext?]
@ -45,14 +45,14 @@
(def action-separator
{:height 0
:background-color colors/gray-light
:background-color colors/black-transparent
:margin-left 50})
(def action-icon-opts
{:color colors/blue})
(def block-action
{:background-color (colors/alpha colors/red 0.1)
{:background-color colors/red-transparent-10
:border-radius 50})
(defn block-action-label [with-subtext?]

4
src/status_im/ui/screens/profile/group_chat/styles.cljs
View File

@ -6,7 +6,7 @@
:padding-top 24})
(def action
{:background-color (colors/alpha colors/blue 0.1)
{:background-color colors/blue-transparent-10
:border-radius 50})
; Action label style is expected to be a fn
@ -15,7 +15,7 @@
(def action-separator
{:height 1
:background-color colors/gray-light
:background-color colors/black-transparent
:margin-left 50})
(def action-icon-opts

2
src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs
View File

@ -233,7 +233,7 @@
:justify-content :center
:align-items :center
:background-color (if pending?
(colors/alpha colors/black 0.1)
colors/black-transparent
colors/green)})
(def payment-status-text

2
src/status_im/ui/screens/profile/tribute_to_talk/views.cljs
View File

@ -226,7 +226,7 @@
[:tribute-to-talk.ui/remove-pressed])
:style styles/remove-view}
[react/view {:style {:flex-direction :row}}
[react/view {:style (styles/icon-view (colors/alpha colors/red 0.1))}
[react/view {:style (styles/icon-view colors/red-transparent-10)}
[icons/icon :main-icons/logout {:color colors/red}]]
[react/view {:style {:justify-content :center
:align-items :center}}

2
src/status_im/ui/screens/profile/user/styles.cljs
View File

@ -53,7 +53,7 @@
:padding-right 12
:padding-vertical 6
:border-radius 18
:background-color (colors/alpha colors/blue 0.1)})
:background-color colors/blue-transparent-10})
(def advanced-button-row
{:flex-direction :row

2
src/status_im/ui/screens/wallet/account/styles.cljs
View File

@ -16,7 +16,7 @@
(def divider
{:height 52
:width 1
:background-color (colors/alpha colors/black 0.2)
:background-color colors/black-transparent-20
:shadow-offset {:width 0 :height 2}
:shadow-radius 8
:shadow-opacity 1

4
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -54,13 +54,13 @@
:style {:width (/ window-width 3)
:line-height 22 :font-size 13
:font-family "monospace"
:color (colors/alpha colors/white 0.7)}}
:color colors/white-transparent-70}}
(ethereum/normalized-address address)]]
[react/view {:position :absolute :top 12 :right 12}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])}
[icons/icon :main-icons/share {:color colors/white
:accessibility-label :share-wallet-address-icon}]]]
[react/view {:height 52 :background-color (colors/alpha colors/black 0.2)
[react/view {:height 52 :background-color colors/black-transparent-20
:border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row}
[button (i18n/label :t/wallet-send) :main-icons/send #(re-frame/dispatch [:navigate-to :wallet-send-transaction address])]
[react/view {:style styles/divider}]

2
src/status_im/ui/screens/wallet/accounts/sheets.cljs
View File

@ -31,7 +31,7 @@
:icon :main-icons/security
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color (colors/alpha colors/red 0.1)
:cyrcle-color colors/red-transparent-10
:accessibility-label :wallet-backup-recovery-title
:on-press #(hide-sheet-and-dispatch [:navigate-to :backup-seed])}])]))

4
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -44,7 +44,7 @@
[react/text {:number-of-lines 1 :ellipsize-mode :middle
:style {:line-height 22 :font-size 13
:font-family "monospace"
:color (colors/alpha colors/white 0.7)}}
:color colors/white-transparent-70}}
address]]]]))
(defn add-card []
@ -53,7 +53,7 @@
:content-height 130}])}
[react/view {:style styles/add-card}
[react/view {:width 40 :height 40 :justify-content :center :border-radius 20
:align-items :center :background-color (colors/alpha colors/blue 0.1) :margin-bottom 8}
:align-items :center :background-color colors/blue-transparent-10 :margin-bottom 8}
[icons/icon :main-icons/add {:color colors/blue}]]
[react/text {:style {:color colors/blue}} (i18n/label :t/add-account)]]])

16
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -20,8 +20,8 @@
:padding-right 8}
(if disabled?
{:border-width 1
:border-color colors/white-light-transparent}
{:background-color colors/white-light-transparent})))
:border-color colors/white-transparent-10}
{:background-color colors/white-transparent-10})))
(def cartouche-icon-wrapper
{:flex 1
@ -64,14 +64,14 @@
:height 27
:border-radius 100
:border-width 1
:border-color colors/white-light-transparent
:border-color colors/white-transparent-10
:align-items :center
:justify-content :center})
(def asset-container
{:margin-top 8
:height 52
:background-color colors/white-light-transparent
:background-color colors/white-transparent-10
:justify-content :center
:padding-left 14
:padding-vertical 14
@ -81,7 +81,7 @@
(def asset-container-read-only
{:margin-top 8
:height 52
:border-color colors/white-light-transparent
:border-color colors/white-transparent-10
:border-width 1
:justify-content :center
:padding-left 14
@ -118,7 +118,7 @@
(defstyle container-disabled
{:border-width 1
:border-color colors/white-light-transparent
:border-color colors/white-transparent-10
:background-color nil
:border-radius 8})
@ -127,7 +127,7 @@
:margin-top 8
:height 52
:border-width 1
:border-color colors/white-light-transparent
:border-color colors/white-transparent-10
:align-items :center
:padding 14
:border-radius 8})
@ -176,7 +176,7 @@
(def separator
{:height 1
:margin-horizontal 15
:background-color colors/white-light-transparent})
:background-color colors/white-transparent-10})
(def button-text
{:color colors/white})

4
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -51,7 +51,7 @@
([props title] (toolbar props default-action title))
([props action title] (toolbar props action title nil))
([props action title options]
[toolbar/toolbar (assoc-in props [:style :border-bottom-color] colors/white-light-transparent)
[toolbar/toolbar (assoc-in props [:style :border-bottom-color] colors/white-transparent-10)
[toolbar/nav-button action]
[toolbar/content-title {:color colors/white
:font-weight "700"}
@ -239,7 +239,7 @@
(let [content (reagent/atom nil)]
(fn []
[simple-screen {:avoid-keyboard? true}
[toolbar {:style {:border-bottom-color colors/white-light-transparent}}
[toolbar {:style {:border-bottom-color colors/white-transparent-10}}
default-action
(i18n/label :t/recipient)]
[react/view components.styles/flex

2
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -146,5 +146,5 @@
:icon :main-icons/delete
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color (colors/alpha colors/red 0.1)
:cyrcle-color colors/red-transparent-10
:on-press #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]]))

2
src/status_im/ui/screens/wallet/request/styles.cljs
View File

@ -6,7 +6,7 @@
(def footer
{:color colors/white
:border-color colors/white-light-transparent})
:border-color colors/white-transparent-10})
(def bottom-buttons
{:background-color colors/blue})

2
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -33,7 +33,7 @@
(i18n/label :t/transactions-sign-transaction)
[vector-icons/icon :main-icons/next {:color (if sign-enabled?
colors/white
colors/white-light-transparent)}]]])
colors/white-transparent-10)}]]])
(defn- render-send-transaction-view [{:keys [chain transaction scroll all-tokens amount-input network-status]}]
(let [{:keys [from amount amount-text amount-error asset-error to to-name sufficient-funds? symbol]} transaction

4
src/status_im/ui/screens/wallet/settings/views.cljs
View File

@ -39,7 +39,7 @@
:icon :main-icons/delete
:icon-opts {:color colors/red}
:label-style {:color colors/red}
:cyrcle-color (colors/alpha colors/red 0.1)
:cyrcle-color colors/red-transparent-10
:on-press #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])]))
(defn- render-token [{:keys [symbol name icon color custom? checked?] :as token}]
@ -89,7 +89,7 @@
[react/keyboard-avoiding-view {:style {:flex 1 :background-color colors/blue}}
[status-bar/status-bar {:type :wallet}]
[toolbar/toolbar
{:style {:border-bottom-color colors/white-light-transparent}}
{:style {:border-bottom-color colors/white-transparent-10}}
[toolbar/nav-button
(actions/back-white
#(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed

2
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -179,7 +179,7 @@
:margin-vertical 2})
(def details-separator
{:background-color colors/gray-light
{:background-color colors/black-transparent
:height 1
:margin-vertical 10})

8
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -38,16 +38,16 @@
[k]
(case k
:inbound (transaction-icon :main-icons/arrow-left
(colors/alpha colors/green 0.2)
colors/green-transparent-10
colors/green)
:outbound (transaction-icon :main-icons/arrow-right
(colors/alpha colors/blue 0.1)
colors/blue-transparent-10
colors/blue)
:failed (transaction-icon :main-icons/warning
colors/gray-light
colors/black-transparent
colors/red)
:pending (transaction-icon :main-icons/arrow-right
colors/gray-light colors/gray)
colors/black-transparent colors/gray)
(throw (str "Unknown transaction type: " k))))
(defn render-transaction