diff --git a/.re-natal b/.re-natal index 32b3500b8e4..c69d936f9b2 100644 --- a/.re-natal +++ b/.re-natal @@ -43,7 +43,8 @@ "emojilib", "react-native-mapbox-gl", "bignumber.js", - "react-native-config" + "react-native-config", + "react-native-svg" ], "imageDirs": [ "resources/images" diff --git a/android/app/build.gradle b/android/app/build.gradle index 54d87f90146..62b7eb4988b 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -162,6 +162,7 @@ android { } dependencies { + compile project(':react-native-svg') compile 'com.android.support:multidex:1.0.1' compile project(':react-native-http-bridge') compile project(':nfc-react-native') diff --git a/android/app/src/main/java/im/status/ethereum/MainApplication.java b/android/app/src/main/java/im/status/ethereum/MainApplication.java index 53d9e345fbc..75a2d9f28fb 100644 --- a/android/app/src/main/java/im/status/ethereum/MainApplication.java +++ b/android/app/src/main/java/im/status/ethereum/MainApplication.java @@ -7,6 +7,7 @@ import com.cboy.rn.splashscreen.SplashScreenReactPackage; import com.centaurwarchief.smslistener.SmsListenerPackage; import com.facebook.react.ReactApplication; +import com.horcrux.svg.SvgPackage; import com.lugg.ReactNativeConfig.ReactNativeConfigPackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; @@ -43,6 +44,7 @@ public boolean getUseDeveloperSupport() { protected List getPackages() { List packages = new ArrayList(Arrays.asList( new MainReactPackage(), + new SvgPackage(), new HttpServerReactPackage(), new NfcReactNativePackage(), new SplashScreenReactPackage(), diff --git a/android/settings.gradle b/android/settings.gradle index 0d4c6e3eaa2..38e95ae881b 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'StatusIm' +include ':react-native-svg' +project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') include ':app' include ':react-native-http-bridge' diff --git a/ios/StatusIm.xcodeproj/project.pbxproj b/ios/StatusIm.xcodeproj/project.pbxproj index c35a6d5fe78..1987e02ac48 100644 --- a/ios/StatusIm.xcodeproj/project.pbxproj +++ b/ios/StatusIm.xcodeproj/project.pbxproj @@ -5,7 +5,6 @@ }; objectVersion = 46; objects = { - /* Begin PBXBuildFile section */ 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; @@ -74,6 +73,7 @@ EF2B5857B4A34E0C9707FB3F /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B3B19223008342D096AA356E /* Octicons.ttf */; }; F9238D6C1E5F055900C047B9 /* SF-UI-Text-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = F9238D6B1E5F055900C047B9 /* SF-UI-Text-Semibold.otf */; }; FD4F213C3873473CB703B1D2 /* libRNFS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 674B3D9595A047AB8D518F4E /* libRNFS.a */; }; + B957A49EB0DE44D9A31CAF2D /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AF2BF381BC7B4EB0887F0091 /* libRNSVG.a */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -520,6 +520,8 @@ F3548417D8DA4362B6796A54 /* RNInstabug.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNInstabug.xcodeproj; path = "../node_modules/instabug-reactnative/ios/RNInstabug.xcodeproj"; sourceTree = ""; }; F9238D6B1E5F055900C047B9 /* SF-UI-Text-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Semibold.otf"; sourceTree = ""; }; FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; + 1E74DC52A1E449A2BA858B14 /* RNSVG.xcodeproj */ = {isa = PBXFileReference; name = "RNSVG.xcodeproj"; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; }; + AF2BF381BC7B4EB0887F0091 /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -575,6 +577,7 @@ 9EE470511ED0079E0048FD10 /* Mapbox.framework in Frameworks */, 9EE470541ED007E10048FD10 /* libRCTMapboxGL.a in Frameworks */, 9EF0836B1F3B53AB00876A8F /* libReactNativeConfig.a in Frameworks */, + B957A49EB0DE44D9A31CAF2D /* libRNSVG.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -872,6 +875,7 @@ 439B6B4B407A4E2AACAFE5BE /* RCTStatus.xcodeproj */, 5E5A7625B76441D984EA8C0D /* RCTImageResizer.xcodeproj */, F3548417D8DA4362B6796A54 /* RNInstabug.xcodeproj */, + 1E74DC52A1E449A2BA858B14 /* RNSVG.xcodeproj */, ); name = Libraries; sourceTree = ""; @@ -1797,6 +1801,7 @@ "\"$(SRCROOT)/$(TARGET_NAME)\"", "\"$(SRCROOT)/$(TARGET_NAME)\"", "\"$(SRCROOT)/$(TARGET_NAME)\"", + "\"$(SRCROOT)/$(TARGET_NAME)\"", ); PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/StatusIm.app/StatusIm"; @@ -1835,6 +1840,7 @@ "\"$(SRCROOT)/$(TARGET_NAME)\"", "\"$(SRCROOT)/$(TARGET_NAME)\"", "\"$(SRCROOT)/$(TARGET_NAME)\"", + "\"$(SRCROOT)/$(TARGET_NAME)\"", ); PRODUCT_NAME = "$(TARGET_NAME)"; TEST_HOST = "$(BUILT_PRODUCTS_DIR)/StatusIm.app/StatusIm"; @@ -1876,6 +1882,7 @@ "$(SRCROOT)/../node_modules/instabug-reactnative/ios/RNInstabug", "$(SRCROOT)/../node_modules/react-native-splash-screen/ios", "$(SRCROOT)/../node_modules/react-native-config/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); INFOPLIST_FILE = StatusIm/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 8.0; @@ -1930,6 +1937,7 @@ "$(SRCROOT)/../node_modules/instabug-reactnative/ios/RNInstabug", "$(SRCROOT)/../node_modules/react-native-splash-screen/ios", "$(SRCROOT)/../node_modules/react-native-config/ios/**", + "$(SRCROOT)/../node_modules/react-native-svg/ios/**", ); INFOPLIST_FILE = StatusIm/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 8.0; diff --git a/package.json b/package.json index 8002fa8d10f..07e0a486a2e 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "react-native-randombytes": "^2.1.0", "react-native-sortable-listview": "^0.1.1", "react-native-splash-screen": "1.0.9", + "react-native-svg": "^4.6.1", "react-native-swiper": "1.5.3", "react-native-tcp": "^3.2.1", "react-native-udp": "^2.0.0", diff --git a/project.clj b/project.clj index c10d01e9288..73805671d83 100644 --- a/project.clj +++ b/project.clj @@ -11,7 +11,8 @@ [com.andrewmcveigh/cljs-time "0.5.0"] [tailrecursion/cljs-priority-map "1.2.0"] [com.taoensso/timbre "4.10.0"] - [com.google.guava/guava "21.0"]] + [com.google.guava/guava "21.0"] + [hickory "0.7.1"]] :plugins [[lein-cljsbuild "1.1.7"] [lein-figwheel "0.5.13"] [lein-re-frisk "0.4.8"]] diff --git a/react-native/src/status_im/react_native/js_dependencies.cljs b/react-native/src/status_im/react_native/js_dependencies.cljs index 4b904b0332e..decba6208f7 100644 --- a/react-native/src/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/status_im/react_native/js_dependencies.cljs @@ -31,5 +31,6 @@ (def swiper (js/require "react-native-swiper")) (def vector-icons (js/require "react-native-vector-icons/Ionicons")) (def webview-bridge (js/require "react-native-webview-bridge")) +(def svg (js/require "react-native-svg")) diff --git a/resources/icons/QR.svg b/resources/icons/QR.svg new file mode 100644 index 00000000000..90999f3bb3a --- /dev/null +++ b/resources/icons/QR.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/add.svg b/resources/icons/add.svg new file mode 100644 index 00000000000..b575ddf7618 --- /dev/null +++ b/resources/icons/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/add_wallet.svg b/resources/icons/add_wallet.svg new file mode 100644 index 00000000000..e169f6933e1 --- /dev/null +++ b/resources/icons/add_wallet.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/address.svg b/resources/icons/address.svg new file mode 100644 index 00000000000..7c5d9a95be9 --- /dev/null +++ b/resources/icons/address.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/arrow_left.svg b/resources/icons/arrow_left.svg new file mode 100644 index 00000000000..809d3229499 --- /dev/null +++ b/resources/icons/arrow_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/arrow_right.svg b/resources/icons/arrow_right.svg new file mode 100644 index 00000000000..04c94c00832 --- /dev/null +++ b/resources/icons/arrow_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/attach.svg b/resources/icons/attach.svg new file mode 100644 index 00000000000..c9a9d87d839 --- /dev/null +++ b/resources/icons/attach.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/back.svg b/resources/icons/back.svg new file mode 100644 index 00000000000..163aa80a042 --- /dev/null +++ b/resources/icons/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/bottom/chats_active.svg b/resources/icons/bottom/chats_active.svg new file mode 100644 index 00000000000..c9c992778e8 --- /dev/null +++ b/resources/icons/bottom/chats_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/bottom/chats_gray.svg b/resources/icons/bottom/chats_gray.svg new file mode 100644 index 00000000000..d1966c7dd86 --- /dev/null +++ b/resources/icons/bottom/chats_gray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/resources/icons/bottom/contacts_active.svg b/resources/icons/bottom/contacts_active.svg new file mode 100644 index 00000000000..d3021a98f8c --- /dev/null +++ b/resources/icons/bottom/contacts_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/bottom/contacts_gray.svg b/resources/icons/bottom/contacts_gray.svg new file mode 100644 index 00000000000..d9a15a611dc --- /dev/null +++ b/resources/icons/bottom/contacts_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/bottom/discover_active.svg b/resources/icons/bottom/discover_active.svg new file mode 100644 index 00000000000..b1a00592956 --- /dev/null +++ b/resources/icons/bottom/discover_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/bottom/discover_gray.svg b/resources/icons/bottom/discover_gray.svg new file mode 100644 index 00000000000..2c97c318678 --- /dev/null +++ b/resources/icons/bottom/discover_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/bottom/wallet_active.svg b/resources/icons/bottom/wallet_active.svg new file mode 100644 index 00000000000..65797b73da6 --- /dev/null +++ b/resources/icons/bottom/wallet_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/bottom/wallet_gray.svg b/resources/icons/bottom/wallet_gray.svg new file mode 100644 index 00000000000..06e9df51267 --- /dev/null +++ b/resources/icons/bottom/wallet_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/browse.svg b/resources/icons/browse.svg new file mode 100644 index 00000000000..ddc0c9793ad --- /dev/null +++ b/resources/icons/browse.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/chats.svg b/resources/icons/chats.svg new file mode 100644 index 00000000000..131296ad7e7 --- /dev/null +++ b/resources/icons/chats.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/close.svg b/resources/icons/close.svg new file mode 100644 index 00000000000..f3a8a38beac --- /dev/null +++ b/resources/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/commands_list.svg b/resources/icons/commands_list.svg new file mode 100644 index 00000000000..a2832a539ee --- /dev/null +++ b/resources/icons/commands_list.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/dots_horizontal.svg b/resources/icons/dots_horizontal.svg new file mode 100644 index 00000000000..d7f90d5e9c5 --- /dev/null +++ b/resources/icons/dots_horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/dots_vertical.svg b/resources/icons/dots_vertical.svg new file mode 100644 index 00000000000..eff62106e08 --- /dev/null +++ b/resources/icons/dots_vertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/dropdown.svg b/resources/icons/dropdown.svg new file mode 100644 index 00000000000..cf1310ae0f8 --- /dev/null +++ b/resources/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/dropdown_up.svg b/resources/icons/dropdown_up.svg new file mode 100644 index 00000000000..44432b5d9dc --- /dev/null +++ b/resources/icons/dropdown_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/forward.svg b/resources/icons/forward.svg new file mode 100644 index 00000000000..0ad3144ae49 --- /dev/null +++ b/resources/icons/forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/fullscreen.svg b/resources/icons/fullscreen.svg new file mode 100644 index 00000000000..6726e8607a9 --- /dev/null +++ b/resources/icons/fullscreen.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/grab.svg b/resources/icons/grab.svg new file mode 100644 index 00000000000..014533ba299 --- /dev/null +++ b/resources/icons/grab.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/group_big.svg b/resources/icons/group_big.svg new file mode 100644 index 00000000000..e8c3ca6cb41 --- /dev/null +++ b/resources/icons/group_big.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/group_chat.svg b/resources/icons/group_chat.svg new file mode 100644 index 00000000000..b00e1937a20 --- /dev/null +++ b/resources/icons/group_chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/hamburger.svg b/resources/icons/hamburger.svg new file mode 100644 index 00000000000..2c8715e5176 --- /dev/null +++ b/resources/icons/hamburger.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/hidden.svg b/resources/icons/hidden.svg new file mode 100644 index 00000000000..e666c9f0a5e --- /dev/null +++ b/resources/icons/hidden.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/resources/icons/mic.svg b/resources/icons/mic.svg new file mode 100644 index 00000000000..a190cce21b6 --- /dev/null +++ b/resources/icons/mic.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/ok.svg b/resources/icons/ok.svg new file mode 100644 index 00000000000..4bde42159e5 --- /dev/null +++ b/resources/icons/ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/public.svg b/resources/icons/public.svg new file mode 100644 index 00000000000..83c65dc28a4 --- /dev/null +++ b/resources/icons/public.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/public_chat.svg b/resources/icons/public_chat.svg new file mode 100644 index 00000000000..392a23aa5d6 --- /dev/null +++ b/resources/icons/public_chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/search.svg b/resources/icons/search.svg new file mode 100644 index 00000000000..1bc41c149a3 --- /dev/null +++ b/resources/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/smile.svg b/resources/icons/smile.svg new file mode 100644 index 00000000000..6b219e3c4b0 --- /dev/null +++ b/resources/icons/smile.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/speaker.svg b/resources/icons/speaker.svg new file mode 100644 index 00000000000..54072264fa7 --- /dev/null +++ b/resources/icons/speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/speaker_off.svg b/resources/icons/speaker_off.svg new file mode 100644 index 00000000000..16dd2e405fc --- /dev/null +++ b/resources/icons/speaker_off.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/transaction_history.svg b/resources/icons/transaction_history.svg new file mode 100644 index 00000000000..92fc7d336be --- /dev/null +++ b/resources/icons/transaction_history.svg @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/src/status_im/chat/new_chat/view.cljs b/src/status_im/chat/new_chat/view.cljs index 3ae686a0fb6..dc7f3116b80 100644 --- a/src/status_im/chat/new_chat/view.cljs +++ b/src/status_im/chat/new_chat/view.cljs @@ -17,17 +17,17 @@ (defn options-list [] [view actions-list - [action-button (label :t/new-group-chat) - :private_group_big - #(dispatch [:open-contact-toggle-list :chat-group])] + [action-button {:label (label :t/new-group-chat) + :icon [:icons/group_big {:color :blue}] + :on-press #(dispatch [:open-contact-toggle-list :chat-group])}] [action-separator] - [action-button (label :t/new-public-group-chat) - :public_group_big - #(dispatch [:navigate-to :new-public-chat])] + [action-button {:label (label :t/new-public-group-chat) + :icon [:icons/public {:color :blue}] + :on-press #(dispatch [:navigate-to :new-public-chat])}] [action-separator] - [action-button (label :t/add-new-contact) - :add_blue - #(dispatch [:navigate-to :new-contact])]]) + [action-button {:label (label :t/add-new-contact) + :icon [:icons/add {:color :blue}] + :on-press #(dispatch [:navigate-to :new-contact])}]]) (defn contact-list-row [] (fn [row _ _] diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 2231c5a0f5a..75dc332a329 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -4,11 +4,11 @@ [status-im.components.react :refer [view animated-view text - icon modal touchable-highlight list-view list-item]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.status-bar :refer [status-bar]] [status-im.components.chat-icon.screen :refer [chat-icon-view-action chat-icon-view-menu-item]] @@ -92,7 +92,7 @@ [touchable-highlight {:on-press #(dispatch [:set-chat-ui-props {:show-actions? false}])} [view st/action - [icon :up st/up-icon]]] + [vi/icon :icons/dropdown_up]]] [touchable-highlight {:on-press #(dispatch [:set-chat-ui-props {:show-actions? true}])} [view st/action diff --git a/src/status_im/chat/views/input/input.cljs b/src/status_im/chat/views/input/input.cljs index fe1d3bb52fb..bdd6629814e 100644 --- a/src/status_im/chat/views/input/input.cljs +++ b/src/status_im/chat/views/input/input.cljs @@ -19,11 +19,12 @@ [status-im.components.react :refer [view animated-view text + icon scroll-view text-input - icon touchable-highlight dismiss-keyboard!]] + [status-im.components.icons.vector-icons :as vi] [status-im.i18n :as i18n] [status-im.utils.platform :as platform])) @@ -46,8 +47,8 @@ (dispatch [:update-suggestions]))} [view style/commands-list-icon (if show-suggestions? - [icon :close_gray style/close-commands-list-icon] - [icon :input_list style/commands-list-icon])]]] + [vi/icon :icons/close] + [vi/icon :icons/commands_list])]]] [scroll-view {:horizontal true :showsHorizontalScrollIndicator false :keyboardShouldPersistTaps :always} @@ -200,7 +201,7 @@ {:on-press #(do (dispatch [:toggle-chat-ui-props :show-emoji?]) (dismiss-keyboard!))} [view - [icon :smile style/input-emoji-icon]]] + [vi/icon :icons/smile {:container-style style/input-emoji-icon}]]] (when-not single-line-input? [touchable-highlight {:on-press #(do (dispatch [:set-chat-input-text nil]) @@ -209,7 +210,7 @@ :validation-messages nil}]) (dispatch [:clear-seq-arguments]))} [view style/input-clear-container - [icon :close_gray style/input-clear-icon]]]))]))}))) + [vi/icon :icons/close]]]))]))}))) (defview input-container [{:keys [anim-margin]}] (letsubs [command-completion [:command-completion] diff --git a/src/status_im/components/action_button/action_button.cljs b/src/status_im/components/action_button/action_button.cljs index e9f2b0eca24..cc18a2d5608 100644 --- a/src/status_im/components/action_button/action_button.cljs +++ b/src/status_im/components/action_button/action_button.cljs @@ -1,27 +1,25 @@ (ns status-im.components.action-button.action-button (:require [status-im.components.action-button.styles :as st] [status-im.components.common.common :refer [list-separator]] - [status-im.components.react :refer [view - text - icon - touchable-highlight]])) + [status-im.components.icons.vector-icons :as vi] + [status-im.components.react :as rn])) -(defn action-button [label icon-key on-press & [{:keys [label-style cyrcle-color]}]] - [touchable-highlight {:on-press on-press} - [view st/action-button - [view (st/action-button-icon-container cyrcle-color) - [icon icon-key]] - [view st/action-button-label-container - [text {:style (merge st/action-button-label label-style)} +(defn action-button [{:keys [label icon on-press label-style cyrcle-color]}] + [rn/touchable-highlight {:on-press on-press} + [rn/view st/action-button + [rn/view (st/action-button-icon-container cyrcle-color) + ((comp vec flatten vector) vi/icon icon)] + [rn/view st/action-button-label-container + [rn/text {:style (merge st/action-button-label label-style)} label]]]]) -(defn action-button-disabled [label icon-key] - [view st/action-button - [view st/action-button-icon-container-disabled - [view {:opacity 0.4} - [icon icon-key]]] - [view st/action-button-label-container - [text {:style st/action-button-label-disabled} +(defn action-button-disabled [{:keys [label icon]}] + [rn/view st/action-button + [rn/view st/action-button-icon-container-disabled + [rn/view {:opacity 0.4} + ((comp vec flatten vector) vi/icon icon)]] + [rn/view st/action-button-label-container + [rn/text {:style st/action-button-label-disabled} label]]]) (defn action-separator [] diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index d8c2bbf1953..3d7a048537b 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -3,8 +3,7 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view text - image - icon]] + image]] [status-im.components.chat-icon.styles :as st] [status-im.components.styles :refer [default-chat-color]] [status-im.react-native.resources :as resources] diff --git a/src/status_im/components/common/common.cljs b/src/status_im/components/common/common.cljs index c054de9906f..e44131d4428 100644 --- a/src/status_im/components/common/common.cljs +++ b/src/status_im/components/common/common.cljs @@ -1,5 +1,6 @@ (ns status-im.components.common.common - (:require [status-im.components.react :refer [view text icon linear-gradient]] + (:require [status-im.components.react :refer [view text linear-gradient]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.context-menu :refer [context-menu]] [status-im.utils.platform :as p] [status-im.components.common.styles :as st])) @@ -52,7 +53,7 @@ (when extended? [view st/form-title-extend-container [context-menu - [icon :options_gray] + [vi/icon :icons/options] options nil st/form-title-extend-button]])] diff --git a/src/status_im/components/contact/contact.cljs b/src/status_im/components/contact/contact.cljs index 6e3f0d0ddb4..3f479591ed8 100644 --- a/src/status_im/components/contact/contact.cljs +++ b/src/status_im/components/contact/contact.cljs @@ -1,6 +1,7 @@ (ns status-im.components.contact.contact (:require-macros [status-im.utils.views :refer [defview]]) - (:require [status-im.components.react :refer [view icon touchable-highlight text]] + (:require [status-im.components.react :refer [view touchable-highlight text]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]] [status-im.components.context-menu :refer [context-menu]] [status-im.components.contact.styles :as st] @@ -35,7 +36,7 @@ (when (and extended? (not (empty? extend-options))) [view st/more-btn-container [context-menu - [icon :options_gray] + [vi/icon :icons/options] extend-options nil st/more-btn]])]]]) @@ -49,4 +50,4 @@ (when checked {:style st/selected-contact}))] [view (st/icon-check-container checked) (when checked - [icon :check_on st/check-icon])]]]]) + [vi/icon :icons/ok {:style st/check-icon}])]]]]) \ No newline at end of file diff --git a/src/status_im/components/drawer/view.cljs b/src/status_im/components/drawer/view.cljs index 8276dafb43a..25e9b4cfd6c 100644 --- a/src/status_im/components/drawer/view.cljs +++ b/src/status_im/components/drawer/view.cljs @@ -12,7 +12,6 @@ [status-im.components.react :refer [view text text-input - icon list-item list-view drawer-layout @@ -20,6 +19,7 @@ touchable-highlight touchable-opacity dismiss-keyboard!]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.status-view.view :as status-view] [status-im.i18n :as i18n] [status-im.ui.screens.profile.db :as profile.db] @@ -96,7 +96,7 @@ recipient-name (or (:name recipient) to)] [touchable-highlight {:on-press #(rf/dispatch [:navigate-to-modal :transaction-details transaction])} [view {:style st/transaction} - [icon :arrow_right_gray st/transaction-icon] + [vi/icon :icons/arrow_right {:container-style st/transaction-icon}] [view {:style st/transaction-info} [view {:style st/transaction-value-container} [text {:style st/transaction-value :font :medium} value] @@ -147,7 +147,7 @@ {:on-press (fn [] (close-drawer) (rf/dispatch [:navigate-to :my-profile]))} - [view [icon :options_gray]]]]) + [view [vi/icon :icons/options]]]]) (defn switch-account [] [view st/switch-account-container diff --git a/src/status_im/components/icons/vector_icons.cljs b/src/status_im/components/icons/vector_icons.cljs new file mode 100644 index 00000000000..c6e19d71fd9 --- /dev/null +++ b/src/status_im/components/icons/vector_icons.cljs @@ -0,0 +1,90 @@ +(ns status-im.components.icons.vector-icons + (:require-macros [status-im.utils.slurp :refer [slurp-svg]]) + (:require [reagent.core :as r] + [status-im.utils.platform :refer [ios?]] + [status-im.components.styles :as common] + [status-im.components.react :as rn] + [status-im.react-native.js-dependencies :as rn-dependencies])) + +(defn get-property [name] + (aget rn-dependencies/svg name)) + +(defn adapt-class [class] + (when class + (r/adapt-react-class class))) + +(defn get-class [name] + (adapt-class (get-property name))) + +(def svg (get-class "Svg")) +(def g (get-class "G")) +(def rect (get-class "Rect")) +(def path (get-class "Path")) +(def use-def (get-class "Use")) +(def defs (get-class "Defs")) + +(def icons {:icons/chats (slurp-svg "./resources/icons/bottom/chats_gray.svg") + :icons/chats_active (slurp-svg "./resources/icons/bottom/chats_active.svg") + :icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") + :icons/contacts_active (slurp-svg "./resources/icons/bottom/contacts_active.svg") + :icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") + :icons/discover_active (slurp-svg "./resources/icons/bottom/discover_active.svg") + :icons/wallet (slurp-svg "./resources/icons/bottom/wallet_gray.svg") + :icons/wallet_active (slurp-svg "./resources/icons/bottom/wallet_active.svg") + :icons/speaker (slurp-svg "./resources/icons/speaker.svg") + :icons/speaker_off (slurp-svg "./resources/icons/speaker_off.svg") + :icons/transaction_history (slurp-svg "./resources/icons/transaction_history.svg") + :icons/add (slurp-svg "./resources/icons/add.svg") + :icons/add_wallet (slurp-svg "./resources/icons/add_wallet.svg") + :icons/address (slurp-svg "./resources/icons/address.svg") + :icons/arrow_left (slurp-svg "./resources/icons/arrow_left.svg") + :icons/arrow_right (slurp-svg "./resources/icons/arrow_right.svg") + :icons/attach (slurp-svg "./resources/icons/attach.svg") + :icons/back (slurp-svg "./resources/icons/back.svg") + :icons/browse (slurp-svg "./resources/icons/browse.svg") + :icons/close (slurp-svg "./resources/icons/close.svg") + :icons/dots_horizontal (slurp-svg "./resources/icons/dots_horizontal.svg") + :icons/dots_vertical (slurp-svg "./resources/icons/dots_vertical.svg") + :icons/forward (slurp-svg "./resources/icons/forward.svg") + :icons/fullscreen (slurp-svg "./resources/icons/fullscreen.svg") + :icons/group_big (slurp-svg "./resources/icons/group_big.svg") + :icons/group_chat (slurp-svg "./resources/icons/group_chat.svg") + :icons/hamburger (slurp-svg "./resources/icons/hamburger.svg") + :icons/hidden (slurp-svg "./resources/icons/hidden.svg") + :icons/mic (slurp-svg "./resources/icons/mic.svg") + :icons/ok (slurp-svg "./resources/icons/ok.svg") + :icons/public (slurp-svg "./resources/icons/public.svg") + :icons/public_chat (slurp-svg "./resources/icons/public_chat.svg") + :icons/qr (slurp-svg "./resources/icons/QR.svg") + :icons/search (slurp-svg "./resources/icons/search.svg") + :icons/smile (slurp-svg "./resources/icons/smile.svg") + :icons/commands_list (slurp-svg "./resources/icons/commands_list.svg") + :icons/dropdown_up (slurp-svg "./resources/icons/dropdown_up.svg") + :icons/dropdown (slurp-svg "./resources/icons/dropdown.svg") + :icons/grab (slurp-svg "./resources/icons/grab.svg")}) + +(defn check-name [n] + (if (= n :icons/options) + (if ios? :icons/dots_horizontal :icons/dots_vertical) + n)) + +(defn icon [name & [opts]] + (let [{:keys [color container-style style]} opts] + [rn/view container-style + (into [] + (concat + [svg (merge {:width 24 :height 24 :viewBox "0 0 24 24"} style)] + ((get icons (check-name name)) + (case color + :dark common/icon-dark-color + :gray common/icon-gray-color + :blue common/color-light-blue + :active common/color-blue4 + :white common/color-white + :red common/icon-red-color + common/icon-dark-color))))])) + +(defn touchable-icon [n opts handler] + [rn/touchable-highlight {:on-press handler} + [rn/view + [icon n opts]]]) \ No newline at end of file diff --git a/src/status_im/components/image_button/view.cljs b/src/status_im/components/image_button/view.cljs index 1d6722acc12..ac2c599e9c5 100644 --- a/src/status_im/components/image_button/view.cljs +++ b/src/status_im/components/image_button/view.cljs @@ -4,22 +4,21 @@ text image touchable-highlight]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.styles :refer [icon-scan]] [status-im.i18n :refer [label]] [status-im.components.image-button.styles :as st])) -(defn image-button [{:keys [value style icon handler]}] +(defn image-button [{:keys [value style handler]}] [view st/image-button [touchable-highlight {:on-press handler} [view st/image-button-content - [image {:source {:uri (or icon :scan_blue)} - :style icon-scan}] + [vi/icon :icons/fullscreen {:color :blue :style icon-scan}] (when text [text {:style style} value])]]]) (defn scan-button [{:keys [show-label? handler]}] - [image-button {:icon :scan_blue - :value (if show-label? + [image-button {:value (if show-label? (label :t/scan-qr)) :style st/scan-button-text :handler handler}]) \ No newline at end of file diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs index 7436338f0f8..f7191d3a18b 100644 --- a/src/status_im/components/list/views.cljs +++ b/src/status_im/components/list/views.cljs @@ -19,6 +19,7 @@ (:require [reagent.core :as r] [status-im.components.list.styles :as lst] [status-im.components.react :as rn] + [status-im.components.icons.vector-icons :as vi] [status-im.utils.platform :as p])) (def flat-list-class (rn/get-class "FlatList")) @@ -37,8 +38,8 @@ [rn/touchable-highlight {:on-press handler} item]) -(defn item-icon [k] - [rn/icon k lst/item-image]) +(defn item-icon [k & [opts]] + [vi/icon k (merge opts {:style lst/item-image})]) (defn item-image [source] [rn/image {:source source diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 29edbe7c37e..7c67dd058c4 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -114,11 +114,6 @@ (merge {:underlay-color :transparent} props) content]) -(defn touchable-icon [n style handler] - [touchable-highlight {:on-press handler} - [view - [icon n style]]]) - (def picker-item (when-let [picker (get-react-property "Picker")] (adapt-class (.-Item picker)))) diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 2bc1a493e9f..49183f82e0a 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -17,6 +17,8 @@ (def color-gray4 "#939ba1") (def color-gray5 "#d9dae1") (def color-gray6 "#212121") +(def color-gray7 "#9fa3b4") +(def color-dark "#49545d") (def color-steel "#838b91") (def color-white "white") (def color-white-transparent "#ffffff66") @@ -46,6 +48,9 @@ (def text2-color color-gray) (def text3-color color-blue) (def text4-color color-gray4) +(def icon-dark-color color-dark) +(def icon-gray-color color-gray7) +(def icon-red-color color-red2) (def online-color color-light-blue) (def new-messages-count-color color-blue-transparent) (def chat-background color-light-gray) diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs index d1fbaaa3ef7..7734ef1fef4 100644 --- a/src/status_im/components/toolbar/view.cljs +++ b/src/status_im/components/toolbar/view.cljs @@ -1,7 +1,6 @@ (ns status-im.components.toolbar.view (:require [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view - icon text text-input image diff --git a/src/status_im/components/toolbar_new/actions.cljs b/src/status_im/components/toolbar_new/actions.cljs index 4fcce6530eb..064f421b036 100644 --- a/src/status_im/components/toolbar_new/actions.cljs +++ b/src/status_im/components/toolbar_new/actions.cljs @@ -3,62 +3,51 @@ [status-im.accessibility-ids :as id] [status-im.components.toolbar-new.styles :as st])) -(def nothing - {:image {:source nil - :style st/action-default}}) - (defn hamburger [handler] - {:image {:source {:uri :icon_hamburger_dark} - :style st/action-default} + {:icon :icons/hamburger :handler handler}) (defn add [handler] - {:image {:source {:uri :icon_add} - :style st/action-default} + {:icon :icons/add :handler handler}) (defn opts [options] - {:image {:source {:uri :icon_options_dark} - :style st/action-default} + {:icon :icons/options :options options}) (defn search [handler] - {:image {:source {:uri :icon_search_dark} - :style st/action-default} + {:icon :icons/search :handler handler}) (def search-icon - {:image {:source {:uri :icon_search_dark} - :style (merge st/action-default - {:opacity 0.4})}}) + {:icon [:icons/search + {:container-style {:opacity 0.4}}]}) (defn back [handler] - {:image {:source {:uri :icon_back_dark} - :style st/action-default} - :handler handler + {:icon :icons/back + :handler handler :accessibility-label id/toolbar-back-button}) (def default-back (back #(dispatch [:navigate-back]))) (defn back-white [handler] - {:image {:source {:uri :icon_back_white} - :style st/action-default} + {:icon [:icons/back + {:color :white}] :handler handler}) (defn close [handler] - {:image {:source {:uri :icon_close_dark} - :style st/action-default} + {:icon :icons/close :handler handler}) (defn close-white [handler] - {:image {:source {:uri :icon_close_white} - :style st/action-default} + {:icon [:icons/close + {:color :white}] :handler handler}) (defn list-white [handler] - {:image {:source {:uri :icon_list_white} - :style st/action-default} + {:icon [:icons/transaction_history + {:color :white :style {:viewBox "-108 65.9 24 24"}}] :handler handler}) (defn add-wallet [handler] diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index a1e8a1878de..f569c8f2b97 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -9,9 +9,6 @@ (def toolbar-icon-height 24) (def toolbar-icon-spacing 24) -(def toolbar-gradient - {:height 4}) - (defn toolbar-wrapper [background-color] {:backgroundColor (or background-color toolbar-background1) :elevation 2}) diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs index 64971916511..c6b9e686ad8 100644 --- a/src/status_im/components/toolbar_new/view.cljs +++ b/src/status_im/components/toolbar_new/view.cljs @@ -6,17 +6,23 @@ [status-im.components.context-menu :refer [context-menu]] [status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.styles :as tst] + [status-im.components.icons.vector-icons :as vi] [reagent.core :as r])) +(defn vec-icon [icon] + ((comp vec flatten vector) vi/icon icon)) + (defn nav-button - [{:keys [handler accessibility-label image]}] + [{:keys [handler accessibility-label image icon]}] [rn/touchable-highlight (merge {:style tst/toolbar-button :on-press handler} (when accessibility-label {:accessibility-label accessibility-label})) [rn/view - [rn/image image]]]) + (if icon + [vec-icon icon] + [rn/image image])]]) (defn text-action [handler title] [rn/text {:style tst/toolbar-right-action :onPress handler} @@ -46,14 +52,14 @@ title]]) [rn/view (tst/toolbar-actions-container (count actions) custom-action) (if actions - (for [{:keys [image options handler]} actions] + (for [{:keys [image icon options handler]} actions] (with-meta (cond (= image :blank) [rn/view tst/toolbar-action] options [context-menu - [rn/view tst/toolbar-action [rn/image image]] + [rn/view tst/toolbar-action [vec-icon icon]] options nil tst/toolbar-button] @@ -62,8 +68,10 @@ [rn/touchable-highlight {:style tst/toolbar-button :on-press handler} [rn/view tst/toolbar-action - [rn/image image]]]) - {:key (str "action-" image)})) + (if icon + [vec-icon icon] + [rn/image image])]]) + {:key (str "action-" (or icon image))})) custom-action)]] [sync-state-gradient-view] (when-not hide-border? diff --git a/src/status_im/ui/screens/accounts/login/views.cljs b/src/status_im/ui/screens/accounts/login/views.cljs index 41ed8baf201..5252ad8bdb1 100644 --- a/src/status_im/ui/screens/accounts/login/views.cljs +++ b/src/status_im/ui/screens/accounts/login/views.cljs @@ -19,7 +19,6 @@ :hide-border? true :title-style {:color :white} :nav-action (act/back-white #(dispatch [:navigate-back])) - :actions [{:image :blank}] :title (i18n/label :t/sign-in-to-status)}]) (def password-text-input (atom nil)) diff --git a/src/status_im/ui/screens/accounts/recover/views.cljs b/src/status_im/ui/screens/accounts/recover/views.cljs index c099e67b555..b13b53e63a1 100644 --- a/src/status_im/ui/screens/accounts/recover/views.cljs +++ b/src/status_im/ui/screens/accounts/recover/views.cljs @@ -47,8 +47,7 @@ (spec/valid? ::v/password password))] [keyboard-avoiding-view {:style st/screen-container} [status-bar] - [toolbar {:actions [{:image :blank}] - :title (i18n/label :t/recover-access)}] + [toolbar {:title (i18n/label :t/recover-access)}] [passphrase-input (or passphrase "")] [password-input (or password "")] [view {:flex 1}] diff --git a/src/status_im/ui/screens/accounts/views.cljs b/src/status_im/ui/screens/accounts/views.cljs index 0dfe510ada3..7ef01280b24 100644 --- a/src/status_im/ui/screens/accounts/views.cljs +++ b/src/status_im/ui/screens/accounts/views.cljs @@ -46,12 +46,16 @@ :renderSeparator #(list-item ^{:key %2} [view {:height 10}]) :renderRow #(list-item [account-view %])}]] [view st/bottom-actions-container - [action-button (i18n/label :t/create-new-account) - :add_white - #(dispatch [:create-new-account-handler]) - st/accounts-action-button] + [action-button (merge + {:label (i18n/label :t/create-new-account) + :icon [:icons/add + {:color :white}] + :on-press #(dispatch [:create-new-account-handler])} + st/accounts-action-button)] [common/separator st/accounts-separator st/accounts-separator-wrapper] - [action-button (i18n/label :t/recover-access) - :dots_horizontal_white - #(dispatch [:navigate-to :recover]) - st/accounts-action-button]]]) + [action-button (merge + {:label (i18n/label :t/recover-access) + :icon [:icons/dots_horizontal + {:color :white}] + :on-press #(dispatch [:navigate-to :recover])} + st/accounts-action-button)]]]) diff --git a/src/status_im/ui/screens/chats_list/views.cljs b/src/status_im/ui/screens/chats_list/views.cljs index 01bac17f36a..7a19a30d7f7 100644 --- a/src/status_im/ui/screens/chats_list/views.cljs +++ b/src/status_im/ui/screens/chats_list/views.cljs @@ -8,7 +8,6 @@ view animated-view text - icon image touchable-highlight]] [status-im.components.native-action-button :refer [native-action-button]] diff --git a/src/status_im/ui/screens/chats_list/views/inner_item.cljs b/src/status_im/ui/screens/chats_list/views/inner_item.cljs index 7c4cae2c43a..7d8c2c0d296 100644 --- a/src/status_im/ui/screens/chats_list/views/inner_item.cljs +++ b/src/status_im/ui/screens/chats_list/views/inner_item.cljs @@ -2,7 +2,8 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :refer [subscribe dispatch]] [clojure.string :as str] - [status-im.components.react :refer [view image icon text]] + [status-im.components.react :refer [view image text]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]] [status-im.components.context-menu :refer [context-menu]] [status-im.ui.screens.chats-list.styles :as st] @@ -92,7 +93,7 @@ :destructive? true}]] [view st/opts-btn-container [context-menu - [icon :options_gray] + [vi/icon :icons/options] options nil st/opts-btn]])) @@ -106,10 +107,10 @@ [view st/name-view (when public-group? [view st/public-group-icon-container - [icon :public_group st/public-group-icon]]) + [vi/icon :icons/public_chat {:style st/public-group-icon}]]) (when private-group? [view st/private-group-icon-container - [icon :private_group st/private-group-icon]]) + [vi/icon :icons/group_chat {:style st/private-group-icon}]]) [view {:flex-shrink 1} [text {:style st/name-text :number-of-lines 1} diff --git a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs index 175cbb78a56..35ba4fb6d51 100644 --- a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs @@ -27,20 +27,21 @@ (defn actions-view [action click-handler] [view actions-list - [action-button (label :t/enter-address) - :address_blue - #(do - (dispatch [:send-to-webview-bridge - {:event (name :webview-send-transaction)}]) - (dispatch [:navigate-back]))] + [action-button + {:label (label :t/enter-address) + :icon [:icons/address {:color :blue}] + :on-press #(do + (dispatch [:send-to-webview-bridge + {:event (name :webview-send-transaction)}]) + (dispatch [:navigate-back]))}] [action-separator] (if (= :request action) - [action-button (label :t/show-qr) - :q_r_blue - #(click-handler :qr-scan action)] - [action-button (label :t/scan-qr) - :fullscreen_blue - #(click-handler :qr-scan action)])]) + [action-button {:label (label :t/show-qr) + :icons [:icons/qr {:color :blue}] + :on-press #(click-handler :qr-scan action)}] + [action-button {:label (label :t/scan-qr) + :icon [:icons/fullscreen {:color :blue}] + :on-press #(click-handler :qr-scan action)}])]) (defn render-row [click-handler action params] (fn [row _ _] diff --git a/src/status_im/ui/screens/contacts/views.cljs b/src/status_im/ui/screens/contacts/views.cljs index 3bbc5dc57af..cd9b2ff31e4 100644 --- a/src/status_im/ui/screens/contacts/views.cljs +++ b/src/status_im/ui/screens/contacts/views.cljs @@ -2,7 +2,8 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :refer [dispatch]] [status-im.components.common.common :as common] - [status-im.components.react :refer [view text icon touchable-highlight scroll-view]] + [status-im.components.react :refer [view text touchable-highlight scroll-view]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.native-action-button :refer [native-action-button native-action-button-item]] [status-im.components.toolbar-new.view :refer [toolbar]] @@ -134,7 +135,7 @@ [contact-group-view {:group group :edit? edit?}])] [view st/empty-contact-groups - [icon :group_big st/empty-contacts-icon] + [vi/icon :icons/group_big {:style st/empty-contacts-icon}] [text {:style st/empty-contacts-text} (label :t/no-contacts)]])] (when (and android? (not edit?)) [contacts-action-button])])) diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index cc04d299b27..01f1f90093a 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -6,8 +6,8 @@ [status-im.components.react :refer [view scroll-view text - text-input - icon]] + text-input]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.toolbar-new.view :refer [toolbar-with-search]] [status-im.components.toolbar-new.actions :as act] [status-im.components.drawer.view :refer [open-drawer]] @@ -90,6 +90,6 @@ [discover-recent {:current-account current-account}]] [view contacts-st/empty-contact-groups ;; todo change icon - [icon :group_big contacts-st/empty-contacts-icon] + [vi/icon :icons/group_big {:style contacts-st/empty-contacts-icon}] [text {:style contacts-st/empty-contacts-text} (label :t/no-statuses-discovered)]])])) diff --git a/src/status_im/ui/screens/discover/views/search_results.cljs b/src/status_im/ui/screens/discover/views/search_results.cljs index a04725341fc..878d2b0b465 100644 --- a/src/status_im/ui/screens/discover/views/search_results.cljs +++ b/src/status_im/ui/screens/discover/views/search_results.cljs @@ -5,10 +5,10 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.react :refer [view text - icon list-view list-item scroll-view]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.toolbar.view :refer [toolbar]] [status-im.components.toolbar.actions :as act] [status-im.ui.screens.discover.views.discover-list-item :refer [discover-list-item]] @@ -49,7 +49,7 @@ (if (empty? discoveries) [view st/empty-view ;; todo change icon - [icon :group_big contacts-st/empty-contacts-icon] + [vi/icon :icons/group_big {:style contacts-st/empty-contacts-icon}] [text {:style contacts-st/empty-contacts-text} (label :t/no-statuses-found)]] [list-view {:dataSource datasource diff --git a/src/status_im/ui/screens/group/reorder/views.cljs b/src/status_im/ui/screens/group/reorder/views.cljs index 9dcedb2bd18..607c26d40ae 100644 --- a/src/status_im/ui/screens/group/reorder/views.cljs +++ b/src/status_im/ui/screens/group/reorder/views.cljs @@ -2,7 +2,8 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [reagent.core :as reagent] [re-frame.core :refer [dispatch dispatch-sync]] - [status-im.components.react :refer [view text icon list-item]] + [status-im.components.react :refer [view text list-item]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar]] @@ -26,7 +27,7 @@ (str cnt " " (label-pluralize cnt :t/contact-s))] [view {:flex 1}] [view styles/order-item-icon - [icon :grab_gray]]]])) + [vi/icon :icons/grab]]]])) (defn render-separator [last] (fn [_ row-id _] diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index 847b8dd5532..a83f6576db9 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -4,8 +4,9 @@ [status-im.ui.screens.contacts.styles :as cstyles] [status-im.components.common.common :as common] [status-im.components.action-button.action-button :refer [action-button action-separator]] - [status-im.components.react :refer [view text icon touchable-highlight + [status-im.components.react :refer [view text touchable-highlight keyboard-avoiding-view list-view list-item]] + [status-im.components.icons.vector-icons :as vi] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.components.status-bar :refer [status-bar]] [status-im.components.toolbar-new.view :refer [toolbar]] @@ -40,16 +41,16 @@ :default-value new-group-name}]])) (defn add-btn [on-press] - [action-button (label :t/add-members) - :add_blue - on-press]) + [action-button {:label (label :t/add-members) + :icon [:icons/add {:color :blue}] + :on-press on-press}]) (defn delete-btn [on-press] [view styles/settings-group-container [touchable-highlight {:on-press on-press} [view styles/settings-group-item [view styles/delete-icon-container - [icon :close_red styles/add-icon]] + [vi/icon :icons/close {:color :red}]] [view styles/settings-group-text-container [text {:style styles/delete-group-text} (label :t/delete-group)] @@ -62,19 +63,19 @@ [touchable-highlight {:on-press #()} [view styles/settings-group-item [view styles/settings-icon-container - [icon :speaker_blue styles/add-icon]] + [vi/icon :icons/speaker {:color :blue}]] [view styles/settings-group-text-container [text {:style styles/settings-group-text} (label :t/mute-notifications)]]]]] [action-separator] - [action-button (label :t/clear-history) - :close_blue - #(dispatch [:clear-history])] + [action-button {:label (label :t/clear-history) + :icon [:icons/close {:color :blue}] + :on-press #(dispatch [:clear-history])}] [action-separator] [touchable-highlight {:on-press #(dispatch [:leave-group-chat])} [view styles/settings-group-item [view styles/delete-icon-container - [icon :arrow_right_red styles/add-icon]] + [vi/icon :icons/arrow_right {:color :red}]] [view styles/settings-group-text-container [text {:style styles/delete-group-text} (label :t/leave-chat)]]]]]) diff --git a/src/status_im/ui/screens/profile/qr_code/views.cljs b/src/status_im/ui/screens/profile/qr_code/views.cljs index 197f3444401..28249fd2a43 100644 --- a/src/status_im/ui/screens/profile/qr_code/views.cljs +++ b/src/status_im/ui/screens/profile/qr_code/views.cljs @@ -3,6 +3,7 @@ [re-frame.core :refer [dispatch]] [status-im.components.qr-code :refer [qr-code]] [status-im.components.react :as react] + [status-im.components.icons.vector-icons :as vi] [status-im.components.status-bar :refer [status-bar]] [status-im.i18n :refer [label]] [status-im.ui.screens.profile.qr-code.styles :as styles]) @@ -26,7 +27,7 @@ [react/view styles/online-container [react/touchable-highlight {:onPress #(dispatch [:navigate-back])} [react/view styles/online-image-container - [react/icon :close_white]]]]]] + [vi/icon :icons/close {:color :white}]]]]]] [react/view {:style styles/qr-code :on-layout #(let [layout (.. % -nativeEvent -layout)] (dispatch [:set-in [:qr-modal :dimensions] {:width (.-width layout) diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index 947580d2175..9a8146d4153 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -12,6 +12,7 @@ [status-im.components.context-menu :refer [context-menu]] [status-im.components.list-selection :refer [share-options]] [status-im.components.react :as react] + [status-im.components.icons.vector-icons :as vi] [status-im.components.status-bar :refer [status-bar]] [status-im.components.styles :refer [color-blue]] [status-im.components.toolbar-new.actions :as actions] @@ -57,21 +58,20 @@ (defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id] [react/view actions-list (if pending? - [action-button (label :t/add-to-contacts) - :add_blue - #(dispatch [:add-pending-contact chat-id])] - [action-button-disabled (label :t/in-contacts) - :ok_dark]) + [action-button {:label (label :t/add-to-contacts) + :icon [:icons/add {:color :blue}] + :on-press #(dispatch [:add-pending-contact chat-id])}] + [action-button-disabled {:label (label :t/in-contacts) :icon :icons/ok}]) [action-separator] - [action-button (label :t/start-conversation) - :chats_blue - #(dispatch [:profile/send-message whisper-identity])] + [action-button {:label (label :t/start-conversation) + :icon [:icons/chats {:color :blue}] + :on-press #(dispatch [:profile/send-message whisper-identity])}] (when-not dapp? [react/view [action-separator] - [action-button (label :t/send-transaction) - :arrow_right_blue - #(dispatch [:profile/send-transaction chat-id])]])]) + [action-button {:label (label :t/send-transaction) + :icon [:icons/arrow_right {:color :blue}] + :on-press #(dispatch [:profile/send-transaction chat-id])}]])]) (defn profile-info-item [{:keys [label value options text-mode empty-value?]}] [react/view styles/profile-setting-item @@ -87,7 +87,7 @@ value]] (when options [context-menu - [react/icon :options_gray] + [vi/icon :icons/options] options nil styles/profile-info-item-button])]) @@ -186,9 +186,9 @@ [profile-status status true]] [form-spacer] [react/view actions-list - [action-button (label :t/show-qr) - :q_r_blue - (show-qr current-account :public-key)]] + [action-button {:label (label :t/show-qr) + :icon [:icons/qr {:color :blue}] + :on-press (show-qr current-account :public-key)}]] [form-spacer] [react/view styles/profile-info-container [my-profile-info current-account] diff --git a/src/status_im/ui/screens/wallet/history/views.cljs b/src/status_im/ui/screens/wallet/history/views.cljs index f30751c51e3..454ef603c65 100644 --- a/src/status_im/ui/screens/wallet/history/views.cljs +++ b/src/status_im/ui/screens/wallet/history/views.cljs @@ -43,7 +43,7 @@ :pending :dropdown_white :dropdown_white)) -(defn action-buttons [m ] +(defn action-buttons [m] [rn/view {:style st/action-buttons} [btn/primary-button {:text (i18n/label :t/transactions-sign) :on-press #(on-sign-transaction m)}] [btn/secondary-button {:text (i18n/label :t/transactions-delete) :on-press #(on-delete-transaction m)}]]) @@ -52,12 +52,12 @@ (defn render-transaction [{:keys [to state] {:keys [value symbol]} :content :as m}] [list/item - [list/item-icon :ok_blue] + [list/item-icon :icons/ok {:color :blue}] [list/item-content (str value " " symbol) (str (i18n/label :t/transactions-to) " " to) (if (unsigned? state) [action-buttons m])] - [list/item-icon :forward_gray]]) + [list/item-icon :icons/forward]]) (def dummy-transaction-data [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4909" :symbol "ETH"} :state :unsigned} @@ -126,30 +126,30 @@ (defn- token->icon [s] (case s - "GNO" :dollar_green - :ok_blue)) + "GNO" [:icons/ok {:color :green}] ;TODO :dollar + [:icons/ok {:color :blue}])) (defn item-tokens [{:keys [symbol label]}] [list/item - [list/item-icon (token->icon symbol)] - [list/item-content label symbol] + ((comp vec flatten vector) list/item-icon (token->icon symbol)) + [list/item-content label symbol]]) ;; TODO checkbox - ]) + (defn- type->icon [k] (case k - "incoming" :dollar_green - "outgoing" :ok_blue - "pending" :dollar_green - "postponed" :ok_blue - :ok_blue)) + "incoming" [:icon/ok {:color :blue}] ;TODO :dollar_green + "outgoing" [:icon/ok {:color :blue}] + "pending" [:icon/ok {:color :blue}] ;TODO :dollar_green + "postponed" [:icon/ok {:color :blue}] + [:icon/ok {:color :blue}])) (defn item-type [{:keys [id label]}] [list/item - [list/item-icon (type->icon id)] - [list/item-content label] + ((comp vec flatten vector) list/item-icon (type->icon id)) + [list/item-content label]]) ;; TODO checkbox - ]) + (def filter-data [{:title (i18n/label :t/transactions-filter-tokens) @@ -189,10 +189,10 @@ :tab-list tab-list}] [rn/swiper (merge tst/swiper {:index (get-tab-index @view-id) - :loop false + :loop false}) ;:ref #(reset! swiper %) ;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id) - }) + (doall (map-indexed (fn [index {screen :screen}] ^{:key index} [screen]) tab-list))]]) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 4d7b3eb1c0f..cd6c32c6833 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -7,6 +7,7 @@ [status-im.components.drawer.view :as drawer] [status-im.components.list.views :as list] [status-im.components.react :as rn] + [status-im.components.icons.vector-icons :as vi] [status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.actions :as act] [status-im.i18n :as i18n] @@ -26,12 +27,15 @@ [rn/text {:style st/toolbar-title-text :font :toolbar-title} (i18n/label :t/main-wallet)] - [rn/icon :dropdown_white st/toolbar-title-icon]]]) + [vi/icon + :icons/dropdown + {:container-style st/toolbar-title-icon + :color :white}]]]) (defn toolbar-buttons [] [rn/view {:style st/toolbar-buttons-container} - [rn/touchable-icon :dots_vertical_white st/toolbar-icon show-not-implemented!] - [rn/touchable-icon :qr_white st/toolbar-icon show-not-implemented!]]) + [vi/touchable-icon :icons/dots_vertical {:color :white} show-not-implemented!] + [vi/touchable-icon :icons/qr {:color :white} show-not-implemented!]]) (defn- show-wallet-transactions [] (if config/wallet-wip-enabled? @@ -75,7 +79,7 @@ [rn/text {:style st/asset-item-currency :uppercase? true} id]] - [list/item-icon :forward_gray]]]]) + [list/item-icon :icons/forward]]]]) (defn asset-section [eth] (let [assets [{:id "eth" :currency :eth :amount eth}]] diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index be0de42a7bf..1922a5adb90 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -2,6 +2,7 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :as rf] [status-im.components.react :as rn] + [status-im.components.icons.vector-icons :as vi] [status-im.components.toolbar-new.view :as toolbar] [status-im.ui.screens.wallet.send.styles :as cst])) @@ -13,8 +14,8 @@ (defn toolbar-buttons [] [rn/view {:style cst/toolbar-buttons-container} - [rn/icon :dots_vertical_white cst/toolbar-icon] - [rn/icon :qr_white cst/toolbar-icon]]) + [vi/icon :icons/dots_vertical {:color :white}] + [vi/icon :icons/qr {:color :white}]]) (defn toolbar-view [] [toolbar/toolbar {:style cst/toolbar diff --git a/src/status_im/utils/slurp.clj b/src/status_im/utils/slurp.clj index 867627dbe68..57f5107e8ad 100644 --- a/src/status_im/utils/slurp.clj +++ b/src/status_im/utils/slurp.clj @@ -1,6 +1,7 @@ (ns status-im.utils.slurp (:refer-clojure :exclude [slurp]) - (:require [clojure.string :as s])) + (:require [clojure.string :as string] + [hickory.core :as hickory])) (defmacro slurp [file] (clojure.core/slurp file)) @@ -10,6 +11,44 @@ (map (fn [file-name] (try (clojure.core/slurp - (s/join "/" ["resources/js/bots" (name bot-name) file-name])) + (string/join "/" ["resources/js/bots" (name bot-name) file-name])) (catch Exception _ "")))) (apply str))) + +(def svg-tags #{:g :rect :path :use :defs}) + +(defmacro slurp-svg [file] + "Reads svg file, and return function (fn [color] ..), which returns hiccup structure for react-native-svg lib + + Example + + SVG: + \n + \n + + + Result: + (fn [color] + [path {:fill color :fill-rule \"evenodd\" :d \"M13.5416667...\"}] + + Attention!!!: Please make sure svg file has fill field, and has structure like above + " + (let [svg (-> (clojure.core/slurp file) + (string/replace #"[\n]\s*" "")) + svg-hiccup (first (map hickory/as-hiccup (hickory/parse-fragment svg))) + color (gensym "args")] + `(fn [~color] + ~(into [] + (clojure.walk/prewalk + (fn [node] + (if (svg-tags node) + (if (= :use node) + (symbol "use-def") + (symbol (name node))) + (if (vector? node) + (let [[k v] node] + (if (and (= :fill k) v) + [k color] + node)) + node))) + (rest (rest svg-hiccup))))))) \ No newline at end of file diff --git a/test/cljs/status_im/react_native/js_dependencies.cljs b/test/cljs/status_im/react_native/js_dependencies.cljs index 91fe58cba6e..f9c92f94dac 100644 --- a/test/cljs/status_im/react_native/js_dependencies.cljs +++ b/test/cljs/status_im/react_native/js_dependencies.cljs @@ -37,5 +37,6 @@ (def swiper #js {}) (def vector-icons #js {:default #js {}}) (def webview-bridge #js {:default #js {}}) +(def svg #js {:default #js {}})