diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index c8eb1f5d2f..2895b74210 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -41,7 +41,7 @@ android:label="@string/app_name" android:screenOrientation="portrait" android:windowSoftInputMode="adjustResize" - android:configChanges="keyboard|keyboardHidden|orientation|screenSize" + android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:resizeableActivity="false" android:launchMode="singleTask"> diff --git a/android/app/src/main/res/drawable-mdpi/appearance.png b/android/app/src/main/res/drawable-mdpi/appearance.png new file mode 100644 index 0000000000..b4a9c88e07 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/appearance.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/appearance.png b/android/app/src/main/res/drawable-xhdpi/appearance.png new file mode 100644 index 0000000000..77aa276144 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/appearance.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/appearance.png b/android/app/src/main/res/drawable-xxhdpi/appearance.png new file mode 100644 index 0000000000..8908d6c48c Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/appearance.png differ diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml index 6e2ee577e4..cb7ffa0490 100644 --- a/android/app/src/main/res/values/styles.xml +++ b/android/app/src/main/res/values/styles.xml @@ -8,6 +8,7 @@ @color/primary @color/background #000000 + true diff --git a/clj-rn.conf.edn b/clj-rn.conf.edn index 3c8988bab0..f46bfacc6e 100644 --- a/clj-rn.conf.edn +++ b/clj-rn.conf.edn @@ -44,7 +44,8 @@ "react-native-shake" "@react-native-community/netinfo" "react-native-gesture-handler" - "react-native-safe-area-context"] + "react-native-safe-area-context" + "react-native-dark-mode"] ;; Desktop modules :desktop-modules ["buffer" "bignumber.js" diff --git a/components/src/status_im/react_native/resources.cljs b/components/src/status_im/react_native/resources.cljs index 98375fca5f..6d61492b71 100644 --- a/components/src/status_im/react_native/resources.cljs +++ b/components/src/status_im/react_native/resources.cljs @@ -1,34 +1,47 @@ -(ns status-im.react-native.resources) +(ns status-im.react-native.resources + (:require [status-im.ui.components.colors :as colors])) (def ui - {:empty-chats-header (js/require "./resources/images/ui/empty-chats-header.png") - :welcome (js/require "./resources/images/ui/welcome.jpg") - :intro1 (js/require "./resources/images/ui/intro1.jpg") - :intro2 (js/require "./resources/images/ui/intro2.jpg") - :intro3 (js/require "./resources/images/ui/intro3.jpg") - :sample-key (js/require "./resources/images/ui/sample-key.jpg") - :lock (js/require "./resources/images/ui/lock.png") - :tribute-to-talk (js/require "./resources/images/ui/tribute-to-talk.png") - :hardwallet-card (js/require "./resources/images/ui/hardwallet-card.png") - :keycard-lock (js/require "./resources/images/ui/keycard-lock.png") - :keycard (js/require "./resources/images/ui/keycard.png") - :keycard-logo (js/require "./resources/images/ui/keycard-logo.png") - :keycard-logo-blue (js/require "./resources/images/ui/keycard-logo-blue.png") - :keycard-logo-gray (js/require "./resources/images/ui/keycard-logo-gray.png") - :keycard-key (js/require "./resources/images/ui/keycard-key.png") - :keycard-empty (js/require "./resources/images/ui/keycard-empty.png") - :keycard-phone (js/require "./resources/images/ui/keycard-phone.png") - :keycard-connection (js/require "./resources/images/ui/keycard-connection.png") - :keycard-wrong (js/require "./resources/images/ui/keycard-wrong.png") - :not-keycard (js/require "./resources/images/ui/not-keycard.png") - :status-logo (js/require "./resources/images/ui/status-logo.png") - :warning-sign (js/require "./resources/images/ui/warning-sign.png") - :phone-nfc-on (js/require "./resources/images/ui/phone-nfc-on.png") - :phone-nfc-off (js/require "./resources/images/ui/phone-nfc-off.png") - :dapp-store (js/require "./resources/images/ui/dapp-store.png") - :ens-header (js/require "./resources/images/ui/ens-header.png") - :new-chat-header (js/require "./resources/images/ui/new-chat-header.png") - :onboarding-phone (js/require "./resources/images/ui/onboarding-phone.png")}) + {:empty-chats-header (js/require "./resources/images/ui/empty-chats-header.png") + :welcome (js/require "./resources/images/ui/welcome.jpg") + :welcome-dark (js/require "./resources/images/ui/welcome-dark.jpg") + :chat (js/require "./resources/images/ui/chat.jpg") + :wallet (js/require "./resources/images/ui/wallet.jpg") + :browser (js/require "./resources/images/ui/browser.jpg") + :chat-dark (js/require "./resources/images/ui/chat-dark.jpg") + :wallet-dark (js/require "./resources/images/ui/wallet-dark.jpg") + :browser-dark (js/require "./resources/images/ui/browser-dark.jpg") + :keys (js/require "./resources/images/ui/keys.jpg") + :keys-dark (js/require "./resources/images/ui/keys-dark.jpg") + :lock (js/require "./resources/images/ui/lock.png") + :tribute-to-talk (js/require "./resources/images/ui/tribute-to-talk.png") + :hardwallet-card (js/require "./resources/images/ui/hardwallet-card.png") + :keycard-lock (js/require "./resources/images/ui/keycard-lock.png") + :keycard (js/require "./resources/images/ui/keycard.png") + :keycard-logo (js/require "./resources/images/ui/keycard-logo.png") + :keycard-logo-blue (js/require "./resources/images/ui/keycard-logo-blue.png") + :keycard-logo-gray (js/require "./resources/images/ui/keycard-logo-gray.png") + :keycard-key (js/require "./resources/images/ui/keycard-key.png") + :keycard-empty (js/require "./resources/images/ui/keycard-empty.png") + :keycard-phone (js/require "./resources/images/ui/keycard-phone.png") + :keycard-connection (js/require "./resources/images/ui/keycard-connection.png") + :keycard-wrong (js/require "./resources/images/ui/keycard-wrong.png") + :not-keycard (js/require "./resources/images/ui/not-keycard.png") + :status-logo (js/require "./resources/images/ui/status-logo.png") + :warning-sign (js/require "./resources/images/ui/warning-sign.png") + :phone-nfc-on (js/require "./resources/images/ui/phone-nfc-on.png") + :phone-nfc-off (js/require "./resources/images/ui/phone-nfc-off.png") + :dapp-store (js/require "./resources/images/ui/dapp-store.png") + :ens-header (js/require "./resources/images/ui/ens-header.png") + :ens-header-dark (js/require "./resources/images/ui/ens-header-dark.png") + :new-chat-header (js/require "./resources/images/ui/new-chat-header.png") + :onboarding-phone (js/require "./resources/images/ui/onboarding-phone.png") + :theme-dark (js/require "./resources/images/ui/theme-dark.png") + :theme-light (js/require "./resources/images/ui/theme-light.png") + :theme-system (js/require "./resources/images/ui/theme-system.png")}) + +(defn get-theme-image [k] + (get ui (when (colors/dark?) (keyword (str (name k) "-dark"))) (get ui k))) (def loaded-images (atom {})) diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index c041b82e8c..90c769ac1b 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -171,7 +171,8 @@ [text {:style style} (i18n/label key)]) (defn icon - ([n] (icon n styles/icon-default)) + ([n] (icon n {:width 24 + :height 24})) ([n style] [image {:source {:uri (keyword (str "icon_" (name n)))} :resizeMode "contain" diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3e1a5461d8..215f71ffad 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -242,6 +242,8 @@ PODS: - React-cxxreact (= 0.61.5) - React-jsi (= 0.61.5) - ReactCommon/jscallinvoker (= 0.61.5) + - ReactNativeDarkMode (0.2.2): + - React - RNCMaskedView (0.1.6): - React - RNFS (2.14.1): @@ -311,6 +313,7 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`) - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" - RNFS (from `../node_modules/react-native-fs`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) @@ -400,6 +403,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/Libraries/Vibration" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + ReactNativeDarkMode: + :path: "../node_modules/react-native-dark-mode" RNCMaskedView: :path: "../node_modules/@react-native-community/masked-view" RNFS: @@ -459,6 +464,7 @@ SPEC CHECKSUMS: React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd + ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949 RNCMaskedView: a88953beefbd347a29072d9eba90e42945fe291e RNFS: a8fbe7060fa49157d819466404794ad9c58e58cf RNGestureHandler: 02905abe54e1f6e59c081a10b4bd689721e17aa6 diff --git a/ios/StatusIm/Images.xcassets/appearance.imageset/Contents.json b/ios/StatusIm/Images.xcassets/appearance.imageset/Contents.json new file mode 100644 index 0000000000..6390ab07a4 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/appearance.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "appearance.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "appearance@2x.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "appearance@3x.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/appearance.imageset/appearance.png b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance.png new file mode 100644 index 0000000000..b4a9c88e07 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance.png differ diff --git a/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@2x.png b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@2x.png new file mode 100644 index 0000000000..77aa276144 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@2x.png differ diff --git a/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@3x.png b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@3x.png new file mode 100644 index 0000000000..8908d6c48c Binary files /dev/null and b/ios/StatusIm/Images.xcassets/appearance.imageset/appearance@3x.png differ diff --git a/ios/StatusIm/Info.plist b/ios/StatusIm/Info.plist index 6a9fdcda33..8a0d2e5f8e 100644 --- a/ios/StatusIm/Info.plist +++ b/ios/StatusIm/Info.plist @@ -2,8 +2,6 @@ - UIUserInterfaceStyle - Light CFBundleBuildUrl ???? NSFaceIDUsageDescription diff --git a/ios/launch-image-universal.storyboard b/ios/launch-image-universal.storyboard index e2834bddeb..4f0a0c939d 100644 --- a/ios/launch-image-universal.storyboard +++ b/ios/launch-image-universal.storyboard @@ -1,10 +1,9 @@ - - - - + + - + + @@ -20,9 +19,10 @@ + - + @@ -32,6 +32,6 @@ - + diff --git a/mobile/js_files/package.json b/mobile/js_files/package.json index 1c50a54081..bdb08c3d83 100644 --- a/mobile/js_files/package.json +++ b/mobile/js_files/package.json @@ -28,6 +28,7 @@ "react-native-background-timer": "^2.1.1", "react-native-camera": "^3.3.3", "react-native-config": "git+https://github.com/status-im/react-native-config.git#0.11.2-1-status", + "react-native-dark-mode": "^0.2.2", "react-native-dialogs": "^1.0.4", "react-native-fetch-polyfill": "^1.1.2", "react-native-fs": "^2.14.1", diff --git a/mobile/js_files/yarn.lock b/mobile/js_files/yarn.lock index fcb6ee981d..c4e6ee6a7c 100644 --- a/mobile/js_files/yarn.lock +++ b/mobile/js_files/yarn.lock @@ -1056,6 +1056,11 @@ color "^3.1.2" react-native-iphone-x-helper "^1.2.1" +"@types/events@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" + integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -1076,6 +1081,26 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== + +"@types/react-native@*": + version "0.61.23" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.23.tgz#bff4e0311c229a5203eb37aacd4febf59f3e2980" + integrity sha512-upHmySsrVBDBokWWhYIKkKnpvadsHdioSjbBTu4xl7fjN0yb94KR5ngUOBXsyqAYqQzF+hP6qpvobG9M7Jr6hw== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "16.9.23" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.23.tgz#1a66c6d468ba11a8943ad958a8cb3e737568271c" + integrity sha512-SsGVT4E7L2wLN3tPYLiF20hmZTPGuzaayVunfgXzUn1x4uHVsKH6QDJQ/TdpHqwsTLd4CwrmQ2vOgxN7gE24gw== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" @@ -1974,6 +1999,11 @@ cross-spawn@^6.0.0: shebang-command "^1.2.0" which "^1.2.9" +csstype@^2.2.0: + version "2.6.9" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098" + integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q== + damerau-levenshtein@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414" @@ -2319,6 +2349,11 @@ eventemitter3@^3.0.0: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7" integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q== +events@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59" + integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg== + exec-sh@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b" @@ -4848,6 +4883,17 @@ react-native-camera@^3.3.3: version "0.11.2" resolved "git+https://github.com/status-im/react-native-config.git#f48d41012f812e1fc9dd6a78e874e3271e5e385e" +react-native-dark-mode@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/react-native-dark-mode/-/react-native-dark-mode-0.2.2.tgz#4faa335e36330bfca832ba8b3d2bd84c7b880381" + integrity sha512-2vhWOOimU7DRKYjCU/pdv0+JpnGKURq5+c7bre093Jtzk57HtlJfd+ViibbC9Y8zh0viIOyKtfL5mYhVhZ6Crw== + dependencies: + "@types/events" "*" + "@types/react" "*" + "@types/react-native" "*" + events "^3.0.0" + toolkit.ts "^0.0.2" + react-native-dialogs@^1.0.4: version "1.1.0" resolved "https://registry.yarnpkg.com/react-native-dialogs/-/react-native-dialogs-1.1.0.tgz#8f7ee7f9d96574fc878fb7c1be101611fb4af517" @@ -5900,6 +5946,11 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +toolkit.ts@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/toolkit.ts/-/toolkit.ts-0.0.2.tgz#91bde730e5e6ad1a22146cdaf83f4a52721cf3b2" + integrity sha512-yJJTVbCwiD6AfFgReewJCGJuODmyZUeL1sDjnxp33t0UBxnezgQrLbz/F9++RC28CTlk5u5pVji4TbeondYEkw== + tough-cookie@~2.4.3: version "2.4.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781" diff --git a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs index f9e28d482d..3579e4670c 100644 --- a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs @@ -38,3 +38,4 @@ (def async-storage #js {}) (def back-handler #js {:addEventListener (fn [])}) (def safe-area-context #js {}) +(def react-native-dark-mode #js {}) diff --git a/react-native/src/mobile/status_im/react_native/js_dependencies.cljs b/react-native/src/mobile/status_im/react_native/js_dependencies.cljs index 5bbb4e1dd7..95cccea835 100644 --- a/react-native/src/mobile/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/mobile/status_im/react_native/js_dependencies.cljs @@ -38,6 +38,7 @@ (def desktop-config #js {:addEventListener (fn [])}) (def desktop-shortcuts #js {:addEventListener (fn [])}) (def safe-area-context (js/require "react-native-safe-area-context")) +(def react-native-dark-mode (js/require "react-native-dark-mode")) (def react-navigation-native (js/require "@react-navigation/native")) (def react-navigation-stack (js/require "@react-navigation/stack")) diff --git a/resources/images/ui/browser-dark@2x.jpg b/resources/images/ui/browser-dark@2x.jpg new file mode 100755 index 0000000000..56ffbf1e99 Binary files /dev/null and b/resources/images/ui/browser-dark@2x.jpg differ diff --git a/resources/images/ui/browser-dark@3x.jpg b/resources/images/ui/browser-dark@3x.jpg new file mode 100755 index 0000000000..d2c4961d4a Binary files /dev/null and b/resources/images/ui/browser-dark@3x.jpg differ diff --git a/resources/images/ui/browser@2x.jpg b/resources/images/ui/browser@2x.jpg new file mode 100755 index 0000000000..e49bba0716 Binary files /dev/null and b/resources/images/ui/browser@2x.jpg differ diff --git a/resources/images/ui/browser@3x.jpg b/resources/images/ui/browser@3x.jpg new file mode 100755 index 0000000000..03db2a3a11 Binary files /dev/null and b/resources/images/ui/browser@3x.jpg differ diff --git a/resources/images/ui/chat-dark@2x.jpg b/resources/images/ui/chat-dark@2x.jpg new file mode 100755 index 0000000000..7332a89495 Binary files /dev/null and b/resources/images/ui/chat-dark@2x.jpg differ diff --git a/resources/images/ui/chat-dark@3x.jpg b/resources/images/ui/chat-dark@3x.jpg new file mode 100755 index 0000000000..eeb9eb5373 Binary files /dev/null and b/resources/images/ui/chat-dark@3x.jpg differ diff --git a/resources/images/ui/chat@2x.jpg b/resources/images/ui/chat@2x.jpg new file mode 100755 index 0000000000..7e671f02df Binary files /dev/null and b/resources/images/ui/chat@2x.jpg differ diff --git a/resources/images/ui/chat@3x.jpg b/resources/images/ui/chat@3x.jpg new file mode 100755 index 0000000000..9cb00ced8d Binary files /dev/null and b/resources/images/ui/chat@3x.jpg differ diff --git a/resources/images/ui/empty-chats-header.png b/resources/images/ui/empty-chats-header.png deleted file mode 100644 index 2f2c09bdfa..0000000000 Binary files a/resources/images/ui/empty-chats-header.png and /dev/null differ diff --git a/resources/images/ui/empty-chats-header@2x.png b/resources/images/ui/empty-chats-header@2x.png index 03b4a5deb0..807172e96c 100644 Binary files a/resources/images/ui/empty-chats-header@2x.png and b/resources/images/ui/empty-chats-header@2x.png differ diff --git a/resources/images/ui/empty-chats-header@3x.png b/resources/images/ui/empty-chats-header@3x.png index a73214e032..33105a4d3c 100644 Binary files a/resources/images/ui/empty-chats-header@3x.png and b/resources/images/ui/empty-chats-header@3x.png differ diff --git a/resources/images/ui/ens-header-dark@2x.png b/resources/images/ui/ens-header-dark@2x.png new file mode 100644 index 0000000000..758d43f0dd Binary files /dev/null and b/resources/images/ui/ens-header-dark@2x.png differ diff --git a/resources/images/ui/ens-header-dark@3x.png b/resources/images/ui/ens-header-dark@3x.png new file mode 100644 index 0000000000..7fdda6cbab Binary files /dev/null and b/resources/images/ui/ens-header-dark@3x.png differ diff --git a/resources/images/ui/ens-header.png b/resources/images/ui/ens-header.png deleted file mode 100644 index 3e8dfa4f2a..0000000000 Binary files a/resources/images/ui/ens-header.png and /dev/null differ diff --git a/resources/images/ui/intro1.jpg b/resources/images/ui/intro1.jpg deleted file mode 100644 index efa45e877e..0000000000 Binary files a/resources/images/ui/intro1.jpg and /dev/null differ diff --git a/resources/images/ui/intro2.jpg b/resources/images/ui/intro2.jpg deleted file mode 100644 index f44e3f86de..0000000000 Binary files a/resources/images/ui/intro2.jpg and /dev/null differ diff --git a/resources/images/ui/intro3.jpg b/resources/images/ui/intro3.jpg deleted file mode 100644 index 589afa05ab..0000000000 Binary files a/resources/images/ui/intro3.jpg and /dev/null differ diff --git a/resources/images/ui/keys-dark@2x.jpg b/resources/images/ui/keys-dark@2x.jpg new file mode 100755 index 0000000000..e3289ea47f Binary files /dev/null and b/resources/images/ui/keys-dark@2x.jpg differ diff --git a/resources/images/ui/keys-dark@3x.jpg b/resources/images/ui/keys-dark@3x.jpg new file mode 100755 index 0000000000..1976d39397 Binary files /dev/null and b/resources/images/ui/keys-dark@3x.jpg differ diff --git a/resources/images/ui/keys@2x.jpg b/resources/images/ui/keys@2x.jpg new file mode 100755 index 0000000000..daf9a3447a Binary files /dev/null and b/resources/images/ui/keys@2x.jpg differ diff --git a/resources/images/ui/keys@3x.jpg b/resources/images/ui/keys@3x.jpg new file mode 100755 index 0000000000..8d45da1959 Binary files /dev/null and b/resources/images/ui/keys@3x.jpg differ diff --git a/resources/images/ui/new-chat-header.png b/resources/images/ui/new-chat-header.png deleted file mode 100755 index 47197d44a4..0000000000 Binary files a/resources/images/ui/new-chat-header.png and /dev/null differ diff --git a/resources/images/ui/new-chat-header@2x.png b/resources/images/ui/new-chat-header@2x.png index 44abae5200..da6169b605 100755 Binary files a/resources/images/ui/new-chat-header@2x.png and b/resources/images/ui/new-chat-header@2x.png differ diff --git a/resources/images/ui/new-chat-header@3x.png b/resources/images/ui/new-chat-header@3x.png index 582d51c1d4..f112640152 100755 Binary files a/resources/images/ui/new-chat-header@3x.png and b/resources/images/ui/new-chat-header@3x.png differ diff --git a/resources/images/ui/sample-key.jpg b/resources/images/ui/sample-key.jpg deleted file mode 100644 index 71d3df7174..0000000000 Binary files a/resources/images/ui/sample-key.jpg and /dev/null differ diff --git a/resources/images/ui/theme-dark@2x.png b/resources/images/ui/theme-dark@2x.png new file mode 100644 index 0000000000..72a38e3905 Binary files /dev/null and b/resources/images/ui/theme-dark@2x.png differ diff --git a/resources/images/ui/theme-dark@3x.png b/resources/images/ui/theme-dark@3x.png new file mode 100644 index 0000000000..9532c23a2c Binary files /dev/null and b/resources/images/ui/theme-dark@3x.png differ diff --git a/resources/images/ui/theme-light@2x.png b/resources/images/ui/theme-light@2x.png new file mode 100644 index 0000000000..397fa406d6 Binary files /dev/null and b/resources/images/ui/theme-light@2x.png differ diff --git a/resources/images/ui/theme-light@3x.png b/resources/images/ui/theme-light@3x.png new file mode 100644 index 0000000000..a964bbdab3 Binary files /dev/null and b/resources/images/ui/theme-light@3x.png differ diff --git a/resources/images/ui/theme-system@2x.png b/resources/images/ui/theme-system@2x.png new file mode 100644 index 0000000000..f7ca890400 Binary files /dev/null and b/resources/images/ui/theme-system@2x.png differ diff --git a/resources/images/ui/theme-system@3x.png b/resources/images/ui/theme-system@3x.png new file mode 100644 index 0000000000..a81631498f Binary files /dev/null and b/resources/images/ui/theme-system@3x.png differ diff --git a/resources/images/ui/wallet-dark@2x.jpg b/resources/images/ui/wallet-dark@2x.jpg new file mode 100755 index 0000000000..fe1b27f1e2 Binary files /dev/null and b/resources/images/ui/wallet-dark@2x.jpg differ diff --git a/resources/images/ui/wallet-dark@3x.jpg b/resources/images/ui/wallet-dark@3x.jpg new file mode 100755 index 0000000000..a6ec1ba4a0 Binary files /dev/null and b/resources/images/ui/wallet-dark@3x.jpg differ diff --git a/resources/images/ui/wallet@2x.jpg b/resources/images/ui/wallet@2x.jpg new file mode 100755 index 0000000000..7891717dfc Binary files /dev/null and b/resources/images/ui/wallet@2x.jpg differ diff --git a/resources/images/ui/wallet@3x.jpg b/resources/images/ui/wallet@3x.jpg new file mode 100755 index 0000000000..7f49721541 Binary files /dev/null and b/resources/images/ui/wallet@3x.jpg differ diff --git a/resources/images/ui/welcome-dark@2x.jpg b/resources/images/ui/welcome-dark@2x.jpg new file mode 100755 index 0000000000..8ca95ec827 Binary files /dev/null and b/resources/images/ui/welcome-dark@2x.jpg differ diff --git a/resources/images/ui/welcome-dark@3x.jpg b/resources/images/ui/welcome-dark@3x.jpg new file mode 100755 index 0000000000..2ccb55c22c Binary files /dev/null and b/resources/images/ui/welcome-dark@3x.jpg differ diff --git a/resources/images/ui/welcome.jpg b/resources/images/ui/welcome.jpg deleted file mode 100644 index 91005a0aea..0000000000 Binary files a/resources/images/ui/welcome.jpg and /dev/null differ diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index 7d522ba822..5954653d6f 100644 --- a/src/status_im/constants.cljs +++ b/src/status_im/constants.cljs @@ -105,6 +105,7 @@ {:preview-privacy? config/blank-preview? :wallet/visible-tokens {:mainnet #{:SNT}} :currency :usd + :appearance 0 :log-level config/log-level-status-go}) (defn default-visible-tokens [chain] diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 35d776203e..acd234bc62 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -1174,3 +1174,10 @@ :gfycat-generated (fn [{:keys [db]} [_ path gfycat]] {:db (assoc-in db path gfycat)})) + +(handlers/register-handler-fx + :system-theme-mode-changed + (fn [{:keys [db]} [_ theme]] + (let [cur-theme (get-in db [:multiaccount :appearance])] + (when (or (nil? cur-theme) (zero? cur-theme)) + {::multiaccounts/switch-theme (if (= :dark theme) 2 1)})))) \ No newline at end of file diff --git a/src/status_im/init/core.cljs b/src/status_im/init/core.cljs index dab370a3fe..e966366221 100644 --- a/src/status_im/init/core.cljs +++ b/src/status_im/init/core.cljs @@ -5,10 +5,11 @@ [status-im.network.net-info :as network] [status-im.react-native.js-dependencies :as rn-dependencies] [status-im.ui.screens.db :refer [app-db]] - [status-im.ui.screens.navigation :as navigation] [status-im.utils.fx :as fx] [status-im.utils.platform :as platform] - [clojure.string :as string])) + [clojure.string :as string] + [status-im.utils.theme :as theme] + [status-im.ui.components.colors :as colors])) (defn restore-native-settings! [] (when platform/desktop? @@ -62,6 +63,7 @@ (fx/defn start-app [cofx] (fx/merge cofx {:get-supported-biometric-auth nil + ::init-theme nil ::init-keystore nil ::restore-native-settings nil ::open-multiaccounts #(re-frame/dispatch [::initialize-multiaccounts % {:logout? false}]) @@ -86,3 +88,10 @@ ::init-keystore (fn [] (status/init-keystore))) + +(re-frame/reg-fx + ::init-theme + (fn [] + (theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %])) + (when (theme/is-dark-mode) + (colors/set-theme :dark)))) \ No newline at end of file diff --git a/src/status_im/mailserver/core.cljs b/src/status_im/mailserver/core.cljs index bdee683492..5601f9fc8c 100644 --- a/src/status_im/mailserver/core.cljs +++ b/src/status_im/mailserver/core.cljs @@ -119,7 +119,6 @@ (re-frame/reg-fx :mailserver/update-mailservers (fn [[waku-enabled? enodes]] - (println "HERE" waku-enabled? enodes) (update-mailservers! waku-enabled? enodes))) (defn decrease-limit [] diff --git a/src/status_im/multiaccounts/core.cljs b/src/status_im/multiaccounts/core.cljs index ac383b3159..6c61a9ba8e 100644 --- a/src/status_im/multiaccounts/core.cljs +++ b/src/status_im/multiaccounts/core.cljs @@ -1,19 +1,15 @@ (ns status-im.multiaccounts.core (:require [re-frame.core :as re-frame] - [status-im.ethereum.ens :as ens] [status-im.ethereum.stateofus :as stateofus] - [status-im.i18n :as i18n] [status-im.multiaccounts.update.core :as multiaccounts.update] [status-im.native-module.core :as native-module] [status-im.notifications.core :as notifications] - [status-im.utils.build :as build] - [status-im.utils.config :as config] [status-im.utils.fx :as fx] [status-im.utils.handlers] [status-im.utils.gfycat.core :as gfycat] [status-im.utils.identicon :as identicon] - [status-im.utils.platform :as platform] - [status-im.utils.utils :as utils])) + [status-im.ui.components.colors :as colors] + [status-im.utils.theme :as theme])) (defn displayed-name "Use preferred name, name or alias in that order" @@ -102,3 +98,18 @@ [{:keys [db]}] (let [private? (get-in db [:multiaccount :preview-privacy?])] {::blank-preview-flag-changed private?})) + +(re-frame/reg-fx + ::switch-theme + (fn [theme] + (colors/set-theme + (if (or (= 2 theme) (and (= 0 theme) (theme/is-dark-mode))) + :dark + :light)))) + +(fx/defn switch-appearance + {:events [:multiaccounts.ui/appearance-switched]} + [cofx theme] + (fx/merge cofx + {::switch-theme theme} + (multiaccounts.update/multiaccount-update :appearance theme {}))) \ No newline at end of file diff --git a/src/status_im/multiaccounts/create/core.cljs b/src/status_im/multiaccounts/create/core.cljs index 473b754a65..1ca380d7be 100644 --- a/src/status_im/multiaccounts/create/core.cljs +++ b/src/status_im/multiaccounts/create/core.cljs @@ -211,7 +211,7 @@ (get-in multiaccount [:derived constants/path-default-wallet-keyword])] {:public-key public-key :address (eip55/address->checksum address) - :color colors/blue + :color colors/blue-persist :wallet true :path constants/path-default-wallet :name "Status account"}) diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs index 013a36029d..b99cef99e2 100644 --- a/src/status_im/multiaccounts/login/core.cljs +++ b/src/status_im/multiaccounts/login/core.cljs @@ -179,6 +179,9 @@ (.catch (fn [error] (log/error "Failed to initialize wallet")))))) +(fx/defn initialize-appearance [cofx] + {::multiaccounts/switch-theme (get-in cofx [:db :multiaccount :appearance])}) + (fx/defn get-settings-callback {:events [::get-settings-callback]} [{:keys [db] :as cofx} settings] @@ -201,6 +204,7 @@ (fn [accounts custom-tokens] (re-frame/dispatch [::initialize-wallet accounts custom-tokens])))) + (initialize-appearance) ;; NOTE: initializing mailserver depends on user mailserver ;; preference which is why we wait for config callback (protocol/initialize-protocol {:default-mailserver true}) diff --git a/src/status_im/network/ui/edit_network/styles.cljs b/src/status_im/network/ui/edit_network/styles.cljs index e358190789..ad20772333 100644 --- a/src/status_im/network/ui/edit_network/styles.cljs +++ b/src/status_im/network/ui/edit_network/styles.cljs @@ -1,6 +1,5 @@ (ns status-im.network.ui.edit-network.styles - (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :as styles])) + (:require [status-im.ui.components.styles :as styles])) (def edit-network-view {:flex 1 @@ -20,6 +19,4 @@ :margin-vertical 15}) (def container - (merge - styles/flex - {:background-color colors/white})) + styles/flex) diff --git a/src/status_im/network/ui/network_details/views.cljs b/src/status_im/network/ui/network_details/views.cljs index e72f568879..5ea37295d8 100644 --- a/src/status_im/network/ui/network_details/views.cljs +++ b/src/status_im/network/ui/network_details/views.cljs @@ -34,7 +34,7 @@ (i18n/label :t/connect)]] [react/i18n-text {:style st/connect-button-description :key :connecting-requires-login}]]]) - [react/view st/network-config-container + [react/view (st/network-config-container) [react/text {:style st/network-config-text :accessibility-label :network-details-text} config]]] diff --git a/src/status_im/network/ui/styles.cljs b/src/status_im/network/ui/styles.cljs index 4da2568d44..6cf30a741e 100644 --- a/src/status_im/network/ui/styles.cljs +++ b/src/status_im/network/ui/styles.cljs @@ -4,8 +4,7 @@ [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) + {:flex 1}) (def badge-name-text {:font-size 17}) @@ -31,7 +30,7 @@ :ios {:opacity 0.9}}) (def connect-button-label - {:color colors/white + {:color colors/white-persist :font-size 17}) (def connect-button-description @@ -39,7 +38,7 @@ :margin-top 8 :height 20}) -(styles/def network-config-container +(styles/defn network-config-container [] {:height 160 :margin-top 8 :padding-top 16 @@ -95,7 +94,6 @@ (styles/def network-item {:flex-direction :row - :background-color :white :align-items :center :padding-horizontal 16 :ios {:height 64} @@ -115,11 +113,10 @@ :margin-vertical 15}) (def delete-button - {:background-color colors/white}) + {:background-color colors/white-persist}) (def delete-button-text {:color colors/red}) (def container - (merge components.styles/flex - {:background-color colors/white})) + components.styles/flex) diff --git a/src/status_im/network/ui/views.cljs b/src/status_im/network/ui/views.cljs index 8d7582b96b..b82c4507a8 100644 --- a/src/status_im/network/ui/views.cljs +++ b/src/status_im/network/ui/views.cljs @@ -7,12 +7,13 @@ [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.topbar :as topbar]) + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.colors :as colors]) (:require-macros [status-im.utils.views :as views])) (defn- network-icon [connected? size] [react/view (styles/network-icon connected? size) - [vector-icons/icon :main-icons/network {:color (if connected? :white :gray)}]]) + [vector-icons/icon :main-icons/network {:color (if connected? colors/white-persist colors/gray)}]]) (defn network-badge [& [{:keys [name connected?]}]] [react/view styles/network-badge diff --git a/src/status_im/ui/components/badge.cljs b/src/status_im/ui/components/badge.cljs index c45c9e1f75..38077de2d5 100644 --- a/src/status_im/ui/components/badge.cljs +++ b/src/status_im/ui/components/badge.cljs @@ -13,7 +13,7 @@ :align-items :center}) [react/text {:style {:typography :caption :font-weight "500" - :color colors/white}} + :color colors/white-persist}} label]]) (defn message-counter [value & [small?]] diff --git a/src/status_im/ui/components/bottom_panel/views.cljs b/src/status_im/ui/components/bottom_panel/views.cljs index 304b85e81b..9f423c87b3 100644 --- a/src/status_im/ui/components/bottom_panel/views.cljs +++ b/src/status_im/ui/components/bottom_panel/views.cljs @@ -2,7 +2,8 @@ (:require-macros [status-im.utils.views :as views]) (:require [status-im.ui.components.react :as react] [status-im.ui.components.animation :as anim] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im.ui.components.colors :as colors])) (defn hide-panel-anim [bottom-anim-value alpha-value window-height] @@ -56,10 +57,10 @@ (when @current-obj [react/keyboard-avoiding-view {:style {:position :absolute :top 0 :bottom 0 :left 0 :right 0}} [react/view {:flex 1} - [react/animated-view {:flex 1 :background-color :black :opacity alpha-value}] + [react/animated-view {:flex 1 :background-color colors/black-persist :opacity alpha-value}] [react/animated-view {:style {:position :absolute :transform [{:translateY bottom-anim-value}] - :bottom 0 :left 0 :right 0}} + :bottom 0 :left 0 :right 0}} [react/view {:flex 1} [render @current-obj]]]]]))}))) diff --git a/src/status_im/ui/components/bottom_sheet/styles.cljs b/src/status_im/ui/components/bottom_sheet/styles.cljs index 29a741093f..7eb131dfa1 100644 --- a/src/status_im/ui/components/bottom_sheet/styles.cljs +++ b/src/status_im/ui/components/bottom_sheet/styles.cljs @@ -22,7 +22,7 @@ :right 0 :bottom 0 :opacity opacity-value - :background-color colors/black-transparent-40}) + :background-color colors/black-transparent-40-persist}) (defn content-container [window-height content-height bottom-value] diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index 2b98042c0b..6ee1340e09 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -104,7 +104,7 @@ :width 17 :height 17 :border-radius 11 - :background-color :white}) + :background-color colors/white}) (def online-view-menu-wrapper {:position :absolute @@ -113,7 +113,7 @@ :width 16 :height 16 :border-radius 8 - :background-color :white}) + :background-color colors/white}) (def online-view {:position :absolute @@ -219,7 +219,7 @@ :width size :position :absolute :z-index 1 - :background-color :black + :background-color colors/black :opacity 0.4 :border-radius 50}) @@ -232,5 +232,5 @@ :justify-content :center}) (def profile-icon-edit-text - {:color :white + {:color colors/white :background-color :transparent}) diff --git a/src/status_im/ui/components/checkbox/view.cljs b/src/status_im/ui/components/checkbox/view.cljs index fe9c01730b..3be6c64ac9 100644 --- a/src/status_im/ui/components/checkbox/view.cljs +++ b/src/status_im/ui/components/checkbox/view.cljs @@ -20,5 +20,5 @@ (if checked? [icons/tiny-icon :tiny-icons/tiny-check {:container-style (styles/icon-check-container true) - :color colors/white}] + :color colors/white-persist}] [react/view {:style (styles/icon-check-container false)}])]) diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 0e01d307c9..35f6970ae5 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -1,53 +1,77 @@ (ns status-im.ui.components.colors - (:require [clojure.string :as string])) + (:require [clojure.string :as string] + [reagent.core :as reagent])) (defn alpha [hex opacity] (let [hex (string/replace hex #"#" "") - r (js/parseInt (subs hex 0 2) 16) - g (js/parseInt (subs hex 2 4) 16) - b (js/parseInt (subs hex 4 6) 16)] + r (js/parseInt (subs hex 0 2) 16) + g (js/parseInt (subs hex 2 4) 16) + b (js/parseInt (subs hex 4 6) 16)] (str "rgba(" r "," g "," b "," opacity ")"))) +(def dark {:white "#141414" + :black "#ffffff" + :gray-lighter "#252528" + :blue "#6177E5" + :gray "#838C91" + :blue-light "#23252F" + :red "#FC5F5F"}) + +(def light {:white "#ffffff" + :black "#000000" + :gray-lighter "#eef2f5" + :blue "#4360df" + :gray "#939ba1" + :blue-light "#ECEFFC" + :red "#ff2d55"}) + +(def themes {:dark dark :light light}) + ;; TRANSPARENT (def transparent "transparent") ;; WHITE -(def white "#ffffff") -(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 white (:white light)) +(def white-persist (:white light)) ;; this doesn't with theme +(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 white-transparent-persist (alpha white 0.4)) (def white-transparent-70 (alpha white 0.7)) +(def white-transparent-70-persist (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 +(def red-light "#ffe5ea") ;; error tooltip 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 (:black light)) ;; Used as the default text color +(def black-persist (:black light)) ;; this doesn't with theme +(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 black-transparent-40-persist (alpha black 0.4)) (def black-transparent-50 (alpha black 0.5)) -(def black-light "#2d2d2d") ;; sign-with-keycard-button +(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 (:gray light)) ;; 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 +(def gray-lighter (:gray-lighter light)) ;; Light Grey, used as a background or shadow ;; ACCENT BLUE -(def blue "#4360df") ;; Accent blue, used as main wallet color, and ios home add button +(def blue (:blue light)) ;; Accent blue, used as main wallet color, and ios home add button +(def blue-persist (:blue light)) ;; LIGHT BLUE -(def blue-light "#ECEFFC") ;; Light Blue -(def blue-transparent-10 (alpha blue 0.1)) ;; unknown +(def blue-light (:blue-light light)) ;; Light Blue +(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)) ;;action-row ;; ttt finish +(def red (:red light)) ;; Used to highlight errors or "dangerous" actions +(def red-transparent-10 (alpha red 0.1)) ;;action-row ;; ttt finish ;; GREEN -(def green "#44d058") ;; icon for successful inboud transaction -(def green-transparent-10 (alpha green 0.1)) ;; icon for successful inboud transaction +(def green "#44d058") ;; icon for successful inboud transaction +(def green-transparent-10 (alpha green 0.1)) ;; icon for successful inboud transaction (def purple "#887af9") (def orange "#FE8F59") @@ -72,4 +96,36 @@ (def text black) (def text-gray gray) -(def default-chat-color "#a187d5") ;; legacy +(def default-chat-color "#a187d5") ;; legacy + +;; THEME + +(def theme (reagent/atom :light)) + +(defn dark? [] + (= :dark @theme)) + +(defn set-theme [type] + (when-not (= type @theme) + (let [colors (get themes type)] + (set! white (:white colors)) + (set! black (:black colors)) + (set! gray-lighter (:gray-lighter colors)) + (set! blue (:blue colors)) + (set! gray (:gray colors)) + (set! blue-light (:blue-light colors)) + (set! red (:red colors)) + (set! text black) + (set! white-transparent-10 (alpha white 0.1)) + (set! white-transparent (alpha white 0.4)) + (set! white-transparent-70 (alpha white 0.7)) + (set! black-transparent (alpha black 0.1)) + (set! black-transparent-20 (alpha black 0.2)) + (set! black-transparent-40 (alpha black 0.4)) + (set! black-transparent-50 (alpha black 0.5)) + (set! gray-transparent-10 (alpha gray 0.1)) + (set! gray-transparent-40 (alpha gray 0.4)) + (set! green-transparent-10 (alpha green 0.1)) + (set! red-transparent-10 (alpha red 0.1)) + (set! blue-transparent-10 (alpha blue 0.1))) + (reset! theme type))) diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index 29d9ceb4d1..acb83bb903 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -34,6 +34,7 @@ (defn logo [icon-size] {:width icon-size :height icon-size + :color :none :container-style {}}) (def bottom-button @@ -66,7 +67,7 @@ (defn counter-label [size] {:font-size (inc (/ size 2)) :typography :main-medium - :color colors/white + :color colors/white-persist :text-align :center}) (def image-contain diff --git a/src/status_im/ui/components/connectivity/styles.cljs b/src/status_im/ui/components/connectivity/styles.cljs index b5edfd4504..c5f8f26104 100644 --- a/src/status_im/ui/components/connectivity/styles.cljs +++ b/src/status_im/ui/components/connectivity/styles.cljs @@ -12,6 +12,6 @@ :width window-width}) (def text - {:color :white + {:color colors/white :font-size 14 :top 8}) \ No newline at end of file diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 3852cd194f..53bfad3c45 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -235,7 +235,7 @@ all connectivity views (we have at least one view in home and one in chat)" (let [loading-indicator? (:loading-indicator? ui-status-properties)] [react/view {:style {:flex 1} :on-layout #(reset! window-width (-> % .-nativeEvent .-layout .-width))} - [react/view {:style {:z-index 2 :background-color :white}} + [react/view {:style {:z-index 2 :background-color colors/white}} header [react/view (when (and loading-indicator? @status-hidden) diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 02e958f3ad..de1040a0e5 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -15,6 +15,7 @@ :active colors/blue :white colors/white :red colors/red + :none nil colors/black) (string? color) color @@ -44,7 +45,7 @@ resize-mode (assoc :resize-mode resize-mode) - color + :always (assoc :tint-color (match-color color))) :source (icon-source name)}]])) diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index aec295eabe..6bdb84eed8 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -258,46 +258,7 @@ {:sections (clj->js (map wrap-per-section-render-fn sections)) :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn) :style style})]) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn render-action [{:keys [label subtext accessibility-label icon action disabled?]} - {:keys [action-style action-label-style action-subtext-style icon-opts]}] - [react/touchable-highlight {:on-press action} - [react/view {:accessibility-label accessibility-label} - [item - (when icon - [item-icon {:icon icon - :style (merge styles/action - action-style - (when disabled? styles/action-disabled)) - :icon-opts (merge {:color :white} - icon-opts - (when disabled? {:color colors/gray}))}]) - (if-not subtext - [item-primary-only {:style (merge styles/action-label - (action-label-style false) - (when disabled? styles/action-label-disabled))} - label] - [item-content - [item-primary {:style (merge styles/action-label - (action-label-style true) - (when disabled? styles/action-label-disabled))} - label] - [item-secondary {:style (merge styles/action-label - action-subtext-style - (when disabled? styles/action-label-disabled))} - subtext]]) - item-icon-forward]]]) -;;TODO DEPRECATED, use status-im.ui.components.list-item.views -(defn action-list [actions {:keys [container-style action-separator-style] :as styles}] - [react/view (merge styles/action-list container-style) - [flat-list - {:separator (when platform/ios? - [react/view (merge styles/action-separator - action-separator-style)]) - :data actions - :key-fn (fn [_ i] (str i)) - :render-fn #(render-action % styles)}]]) ;;TODO DEPRECATED, use status-im.ui.components.list-item.views (defn list-with-label [{:keys [style]} label list] [react/view (merge styles/list-with-label-wrapper style) diff --git a/src/status_im/ui/components/list_item/views.cljs b/src/status_im/ui/components/list_item/views.cljs index d9c888c749..0a1f49299c 100644 --- a/src/status_im/ui/components/list_item/views.cljs +++ b/src/status_im/ui/components/list_item/views.cljs @@ -10,7 +10,7 @@ [status-im.utils.label :as utils.label] [status-im.ui.components.radio :as radio])) -(def divider +(defn divider [] [react/view {:height 1 :background-color colors/gray-lighter}]) (defn- icon-column [icon theme disabled?] @@ -26,7 +26,7 @@ {:container colors/gray-lighter :icon colors/gray-transparent-40} (if (= theme :action-destructive) - {:container colors/red-light + {:container colors/red-transparent-10 :icon colors/red} {:container nil :icon nil}))] diff --git a/src/status_im/ui/components/qr_code_viewer/styles.cljs b/src/status_im/ui/components/qr_code_viewer/styles.cljs index ea8ab0177f..e853f73f0e 100644 --- a/src/status_im/ui/components/qr_code_viewer/styles.cljs +++ b/src/status_im/ui/components/qr_code_viewer/styles.cljs @@ -14,7 +14,7 @@ :width width :height width :padding-horizontal 16 - :background-color colors/white + :background-color colors/white-persist :border-color colors/black-transparent :align-items :center :justify-content :center diff --git a/src/status_im/ui/components/radio.cljs b/src/status_im/ui/components/radio.cljs index aa2ab25e99..30fe09c9f3 100644 --- a/src/status_im/ui/components/radio.cljs +++ b/src/status_im/ui/components/radio.cljs @@ -7,4 +7,4 @@ :background-color (if selected? colors/blue colors/gray-lighter)}} (when selected? [react/view {:style {:width 12 :height 12 :border-radius 6 - :background-color colors/white}}])]) \ No newline at end of file + :background-color colors/white-persist}}])]) \ No newline at end of file diff --git a/src/status_im/ui/components/search_input/styles.cljs b/src/status_im/ui/components/search_input/styles.cljs index e9712af579..b7d0e8f411 100644 --- a/src/status_im/ui/components/search_input/styles.cljs +++ b/src/status_im/ui/components/search_input/styles.cljs @@ -9,7 +9,7 @@ (def search-input-height 56) -(def search-container +(defn search-container [] {:height search-input-height :flex-direction :row :padding-horizontal 16 @@ -17,7 +17,7 @@ :align-items :center :justify-content :center}) -(def search-input-container +(defn search-input-container [] {:background-color colors/gray-lighter :flex 1 :flex-direction :row diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs index 9fb6347063..6030b01b67 100644 --- a/src/status_im/ui/components/search_input/view.cljs +++ b/src/status_im/ui/components/search_input/view.cljs @@ -9,8 +9,8 @@ (let [input-ref (atom nil)] (fn [{:keys [on-cancel on-focus on-change search-active? search-container-style search-filter auto-focus]}] - [react/view {:style (or search-container-style styles/search-container)} - [react/view {:style styles/search-input-container} + [react/view {:style (or search-container-style (styles/search-container))} + [react/view {:style (styles/search-input-container)} [icons/icon :main-icons/search {:color colors/gray :container-style {:margin-left 6 :margin-right 2}}] diff --git a/src/status_im/ui/components/status_bar/styles.cljs b/src/status_im/ui/components/status_bar/styles.cljs index 67106afcc6..2b5dc5a1ef 100644 --- a/src/status_im/ui/components/status_bar/styles.cljs +++ b/src/status_im/ui/components/status_bar/styles.cljs @@ -8,12 +8,16 @@ :translucent translucent? :bar-style bar-style}) -(styles/def status-bar-default - {:ios (create-status-bar-style {:background-color colors/white - :bar-style "dark-content"}) - :android (create-status-bar-style {:translucent? true - :bar-style "dark-content"})}) +(styles/defn status-bar-default [] + {:ios (create-status-bar-style (when-not (colors/dark?) + {:bar-style "dark-content"})) + :android (create-status-bar-style (if (colors/dark?) + {:translucent? true} + {:translucent? true + :bar-style "dark-content"}))}) -(styles/def status-bar-black - {:ios (create-status-bar-style {:background-color colors/transparent}) - :android (create-status-bar-style {:background-color colors/black})}) +(styles/defn status-bar-black [] + {:ios (create-status-bar-style nil) + :android (create-status-bar-style (if (colors/dark?) + {:translucent? true} + {:background-color colors/black}))}) diff --git a/src/status_im/ui/components/status_bar/view.cljs b/src/status_im/ui/components/status_bar/view.cljs index 910a00032e..b235aa6b3d 100644 --- a/src/status_im/ui/components/status_bar/view.cljs +++ b/src/status_im/ui/components/status_bar/view.cljs @@ -30,8 +30,8 @@ network-activity-indicator-visible translucent]} (case type - :black styles/status-bar-black - styles/status-bar-default)] + :black (styles/status-bar-black) + (styles/status-bar-default))] (when bar-style (.setBarStyle react/status-bar-class (clj->js bar-style)) true) (when (and background-color platform/android?) diff --git a/src/status_im/ui/components/styles.cljs b/src/status_im/ui/components/styles.cljs index fa054c6426..d7474c1642 100644 --- a/src/status_im/ui/components/styles.cljs +++ b/src/status_im/ui/components/styles.cljs @@ -1,22 +1,6 @@ -(ns status-im.ui.components.styles - (:require [status-im.ui.components.colors :as colors])) +(ns status-im.ui.components.styles) (def flex {:flex 1}) -(def main-container - {:background-color colors/white - :flex 1}) - -(def modal - {:position :absolute - :left 0 - :top 0 - :right 0 - :bottom 0}) - (def border-radius 8) - -(def icon-default - {:width 24 - :height 24}) diff --git a/src/status_im/ui/components/tabbar/core.cljs b/src/status_im/ui/components/tabbar/core.cljs index 51e13f78a3..18864ff299 100644 --- a/src/status_im/ui/components/tabbar/core.cljs +++ b/src/status_im/ui/components/tabbar/core.cljs @@ -84,7 +84,7 @@ tabs.styles/counter)} [badge/message-counter (or (:other count) count) true]] (pos? (:public count)) - [react/view {:style tabs.styles/counter-public-container} + [react/view {:style (tabs.styles/counter-public-container)} [react/view {:style tabs.styles/counter-public :accessibility-label :public-unread-badge}]]))] (when-not platform/desktop? diff --git a/src/status_im/ui/components/tabbar/styles.cljs b/src/status_im/ui/components/tabbar/styles.cljs index 90c854442f..34de49d319 100644 --- a/src/status_im/ui/components/tabbar/styles.cljs +++ b/src/status_im/ui/components/tabbar/styles.cljs @@ -22,7 +22,7 @@ :top 0 :position :absolute}) -(def counter-public-container +(defn counter-public-container [] {:right 2 :top 0 :position :absolute @@ -31,7 +31,7 @@ :height 16 :justify-content :center :align-items :center - :background-color :white}) + :background-color colors/white}) (def counter-public {:background-color colors/blue @@ -86,7 +86,9 @@ :shadow-radius 4 :shadow-offset {:width 0 :height -5} :shadow-opacity 0.3 - :shadow-color "rgba(0, 9, 26, 0.12)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 9, 26, 0.12)") :elevation 8 :background-color :white :position :absolute @@ -100,7 +102,7 @@ :outputRange [0 tabs-diff]})}]}) (defn ios-titles-cover [inset] - {:background-color :white + {:background-color colors/white :position :absolute :height tabs-diff :align-self :stretch diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index a2d2469394..8ef9db38a0 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.components.toolbar.actions (:require [re-frame.core :as re-frame] - [status-im.ui.components.toolbar.styles :as styles])) + [status-im.ui.components.toolbar.styles :as styles] + [status-im.ui.components.colors :as colors])) (defn add [illuminated? handler] {:icon :main-icons/add @@ -28,7 +29,7 @@ (defn back-white [handler] {:icon :main-icons/back - :icon-opts {:color :white} + :icon-opts {:color colors/white} :handler handler :accessibility-label :back-button}) @@ -42,10 +43,10 @@ (defn close-white [handler] {:icon :main-icons/close - :icon-opts {:color :white} + :icon-opts {:color colors/white} :handler handler}) (defn list-white [handler] {:icon :main-icons/two-arrows - :icon-opts {:color :white} + :icon-opts {:color colors/white} :handler handler}) diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index 54ad2e5236..32647c0394 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -40,7 +40,9 @@ :shadow-radius 12 :shadow-offset {:width 0 :height 4} :shadow-opacity 0.16 - :shadow-color "rgba(0, 34, 51)"}) + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 34, 51)")}) (def bottom-tooltip-text-container {:flex-direction :row diff --git a/src/status_im/ui/components/tooltip/views.cljs b/src/status_im/ui/components/tooltip/views.cljs index e660d205c2..9f2c1fedd9 100644 --- a/src/status_im/ui/components/tooltip/views.cljs +++ b/src/status_im/ui/components/tooltip/views.cljs @@ -9,7 +9,7 @@ [reagent.core :as reagent])) (views/defview tooltip [label & [{:keys [bottom-value color font-size container-style] - :or {bottom-value 30 color :white font-size 15}}]] + :or {bottom-value 30 color colors/white font-size 15}}]] (views/letsubs [bottom-anim-value (animation/create-value bottom-value) opacity-value (animation/create-value 0)] {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value -10)} diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs index 7b763ab4bc..6bc8af099f 100644 --- a/src/status_im/ui/components/typography.cljs +++ b/src/status_im/ui/components/typography.cljs @@ -3,7 +3,7 @@ [status-im.ui.components.colors :as colors])) (def default-font-family "Inter") -(def default-style +(defn default-style [] {:color colors/black :font-weight "400" :font-size 15}) @@ -61,7 +61,7 @@ {:pre [(or (nil? typography) (contains? typography-styles typography))]} (let [{:keys [font-weight font-style font-size line-height] :as style} - (merge default-style + (merge (default-style) (get typography-styles typography) (dissoc style :typography :nested?))] diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 9b9080521b..5255af858f 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -41,16 +41,16 @@ (case state :searching [icon-wrapper colors/gray - [react/activity-indicator {:color colors/white}]] + [react/activity-indicator {:color colors/white-persist}]] :valid [react/touchable-highlight {:on-press #(debounce/dispatch-and-chill [:contact.ui/contact-code-submitted] 3000)} [icon-wrapper colors/blue - [vector-icons/icon :main-icons/arrow-right {:color colors/white}]]] + [vector-icons/icon :main-icons/arrow-right {:color colors/white-persist}]]] [icon-wrapper colors/gray - [vector-icons/icon :main-icons/arrow-right {:color colors/white}]])) + [vector-icons/icon :main-icons/arrow-right {:color colors/white-persist}]])) (defn get-validation-label [value] (case value @@ -72,7 +72,7 @@ {:title (i18n/label :t/new-contact) :handler :contact/qr-code-scanned}])}]}] [react/view add-new.styles/new-chat-container - [react/view add-new.styles/new-chat-input-container + [react/view (add-new.styles/new-chat-input-container) [react/text-input {:on-change-text #(do diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index 16dcbc7af4..41e90b68c4 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -15,8 +15,7 @@ (def group-container {:flex 1 - :flex-direction :column - :background-color colors/white}) + :flex-direction :column}) (def chat-name-container {:margin-top 10}) diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs index 475f994aec..102e109816 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs @@ -24,7 +24,7 @@ (defn- chat-name-input [topic error] [react/view - [react/view add-new.styles/input-container + [react/view (add-new.styles/input-container) [react/text {:style styles/topic-hash} "#"] [react/view common.styles/flex [text-input.view/text-input-with-label diff --git a/src/status_im/ui/screens/add_new/styles.cljs b/src/status_im/ui/screens/add_new/styles.cljs index 9d23af6bae..6dfb341b08 100644 --- a/src/status_im/ui/screens/add_new/styles.cljs +++ b/src/status_im/ui/screens/add_new/styles.cljs @@ -8,16 +8,16 @@ :padding-top 16 :padding-left 16}) -(def input-container +(defn input-container [] {:flex-direction :row :align-items :center :border-radius components.styles/border-radius :height 52 :background-color colors/gray-lighter}) -(def new-chat-input-container +(defn new-chat-input-container [] (merge - input-container + (input-container) {:flex 1})) (def button-container diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs index fb3399a89f..e8d75313f4 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -133,7 +133,7 @@ waku-bloom-filter-mode [:waku/bloom-filter-mode] current-log-level [:log-level/current-log-level] current-fleet [:fleets/current-fleet]] - [react/view {:flex 1 :background-color colors/white} + [react/view {:flex 1} [topbar/topbar {:title :t/advanced}] [list/flat-list {:data (flat-list-data diff --git a/src/status_im/ui/screens/appearance/views.cljs b/src/status_im/ui/screens/appearance/views.cljs new file mode 100644 index 0000000000..84da32628e --- /dev/null +++ b/src/status_im/ui/screens/appearance/views.cljs @@ -0,0 +1,30 @@ +(ns status-im.ui.screens.appearance.views + (:require-macros [status-im.utils.views :as views]) + (:require [re-frame.core :as re-frame] + [status-im.ui.components.react :as react] + [status-im.ui.components.topbar :as topbar] + [status-im.react-native.resources :as resources] + [status-im.ui.components.list-item.views :as list-item] + [status-im.ui.components.colors :as colors] + [status-im.i18n :as i18n])) + +(defn button [label icon theme selected?] + [react/touchable-highlight + {:on-press #(re-frame/dispatch [:multiaccounts.ui/appearance-switched theme])} + [react/view (merge {:align-items :center :padding 8 :border-radius 20} + (when selected? + {:background-color colors/blue-light})) + [react/image {:source (get resources/ui icon)}] + [react/text {:style {:margin-top 8}} + (i18n/label label)]]]) + +(views/defview appearance [] + (views/letsubs [{:keys [appearance]} [:multiaccount]] + [react/view {:flex 1} + [topbar/topbar {:title :t/appearance :show-border? true}] + [list-item/list-item {:type :section-header :title :t/preference :container-margin-top 8}] + [react/view {:flex-direction :row :flex 1 :padding-horizontal 8 + :justify-content :space-between :margin-top 16} + [button :t/light :theme-light 1 (= 1 appearance)] + [button :t/dark :theme-dark 2 (= 2 appearance)] + [button :t/system :theme-system 0 (= 0 appearance)]]])) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs index 30075e0a35..5b4445ed39 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs @@ -41,7 +41,7 @@ :ios {:opacity 0.9}}) (def button-label - {:color colors/white + {:color colors/white-persist :font-size 17}) (def delete-button @@ -49,6 +49,4 @@ :background-color colors/red)) (def container - (merge - components.styles/flex - {:background-color colors/white})) + components.styles/flex) diff --git a/src/status_im/ui/screens/bootnodes_settings/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/styles.cljs index a9f4c293c2..77b9a18de9 100644 --- a/src/status_im/ui/screens/bootnodes_settings/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/styles.cljs @@ -1,17 +1,14 @@ (ns status-im.ui.screens.bootnodes-settings.styles - (:require [status-im.ui.components.colors :as colors] - [status-im.utils.styles :as styles])) + (:require [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) + {:flex 1}) (def bootnode-item-inner {:padding-horizontal 16}) (styles/def bootnode-item {:flex-direction :row - :background-color :white :align-items :center :padding-horizontal 16 :ios {:height 64} @@ -22,5 +19,4 @@ (def switch-container {:height 50 - :background-color colors/white :padding-left 15}) diff --git a/src/status_im/ui/screens/browser/open_dapp/styles.cljs b/src/status_im/ui/screens/browser/open_dapp/styles.cljs index 618d80ec59..08774211aa 100644 --- a/src/status_im/ui/screens/browser/open_dapp/styles.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/styles.cljs @@ -3,7 +3,7 @@ [status-im.ui.components.styles :as components.styles] [status-im.utils.styles :as styles])) -(styles/def input +(styles/defn input [] {:border-radius components.styles/border-radius :background-color colors/gray-lighter :margin-horizontal 16 @@ -15,7 +15,7 @@ :width "100%"} :android {:padding 0}}) -(def browser-icon-container +(defn browser-icon-container [] {:width 40 :height 40 :border-radius 20 @@ -23,7 +23,7 @@ :align-items :center :justify-content :center}) -(def dapp-store-container +(defn dapp-store-container [] {:margin 16 :border-color colors/gray-lighter :margin-top 8 @@ -76,5 +76,7 @@ :shadow-offset {:width 0 :height 1} :shadow-radius 6 :shadow-opacity 1 - :shadow-color "rgba(0, 12, 63, 0.2)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 12, 63, 0.2)") :elevation 2}) diff --git a/src/status_im/ui/screens/browser/open_dapp/views.cljs b/src/status_im/ui/screens/browser/open_dapp/views.cljs index bfb907ff06..4e37ea3665 100644 --- a/src/status_im/ui/screens/browser/open_dapp/views.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/views.cljs @@ -42,7 +42,7 @@ :content-height 128}])) :title name :subtitle (or url :t/dapp) - :icon [react/view styles/browser-icon-container + :icon [react/view (styles/browser-icon-container) [vector-icons/icon :main-icons/browser {:color colors/gray}]]}]) (def dapp-image-data {:image (resources/get-image :dapp-store) :width 768 :height 333}) @@ -51,7 +51,7 @@ (defn list-header [empty?] [react/view (when empty? {:flex 1}) [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/open-url "https://dap.ps"])} - [react/view styles/dapp-store-container + [react/view (styles/dapp-store-container) [dapp-image nil dapp-image-data] [react/text {:style styles/open-dapp-store} (i18n/label :t/open-dapp-store)] [react/text {:style {:color colors/blue :font-size 13 :line-height 22}} "https://dap.ps ->"]]] @@ -79,12 +79,13 @@ {:content (accounts/accounts-list accounts dapps-account) :content-height (/ height 2)}])} [react/view (styles/dapps-account color) - [icons/icon :main-icons/account {:color colors/white}] + [icons/icon :main-icons/account {:color colors/white-persist}] [react/view {:flex-shrink 1} [react/text {:numberOfLines 1 - :style {:margin-horizontal 6 :color :white :typography :main-medium}} + :style {:margin-horizontal 6 :color colors/white-persist + :typography :main-medium}} name]] - [icons/icon :main-icons/dropdown {:color colors/white-transparent}]]]])) + [icons/icon :main-icons/dropdown {:color colors/white-transparent-persist}]]]])) (views/defview open-dapp [] (views/letsubs [browsers [:browser/browsers-vals] @@ -95,7 +96,7 @@ :placeholder (i18n/label :t/enter-url) :auto-capitalize :none :auto-correct false - :style styles/input + :style (styles/input) :accessibility-label :dapp-url-input :return-key-type :go}] [components/separator] diff --git a/src/status_im/ui/screens/browser/permissions/views.cljs b/src/status_im/ui/screens/browser/permissions/views.cljs index 9c7b77fe83..48b7b1bada 100644 --- a/src/status_im/ui/screens/browser/permissions/views.cljs +++ b/src/status_im/ui/screens/browser/permissions/views.cljs @@ -103,7 +103,7 @@ [chat-icon.screen/custom-icon-view-list (:name dapps-account) (:color dapps-account)] [react/view styles/permissions-panel-wallet-icon-container (when icon - [icons/icon icon {:color :white}])])] + [icons/icon icon {:color colors/white}])])] [react/text {:style styles/permissions-panel-title-label :number-of-lines 2} (str "\"" dapp-name "\" " title)] (when (= :wallet type) diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index 9be1a7ff31..adf8778b2e 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -18,8 +18,8 @@ :ios {:margin-top 4} :android {:font-size 13}}) -(def navbar - {:background-color :white +(defn navbar [] + {:background-color colors/white :height 51 :flex-direction :row :align-items :center @@ -52,7 +52,7 @@ (def web-view-error-text {:color colors/gray}) -(def toolbar-content +(defn toolbar-content [] {:flex-direction :row :flex 1 :border-radius 8 @@ -105,7 +105,7 @@ :left 0 :bottom 0 :align-items :center - :background-color :white + :background-color colors/white :border-top-left-radius 8 :border-top-right-radius 8}) diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index 88f9990693..dcc1f1ad96 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -29,7 +29,7 @@ (defn toolbar-content [url url-original {:keys [secure?]} url-editing?] (let [url-text (atom url)] - [react/view styles/toolbar-content + [react/view (styles/toolbar-content) [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/lock-pressed secure?])} (if secure? [icons/tiny-icon :tiny-icons/tiny-lock {:color colors/green}] @@ -75,7 +75,7 @@ (views/defview navigation [url can-go-back? can-go-forward? dapps-account] (views/letsubs [height [:dimensions/window-height] accounts [:accounts-without-watch-only]] - [react/view styles/navbar + [react/view (styles/navbar) [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/previous-page-button-pressed]) :disabled (not can-go-back?) :style (when-not can-go-back? styles/disabled-button) diff --git a/src/status_im/ui/screens/chat/extensions/views.cljs b/src/status_im/ui/screens/chat/extensions/views.cljs index f381b00c1f..913039a179 100644 --- a/src/status_im/ui/screens/chat/extensions/views.cljs +++ b/src/status_im/ui/screens/chat/extensions/views.cljs @@ -33,7 +33,7 @@ bottom-anim-value (anim/create-value @panel-height) alpha-value (anim/create-value 0)] {:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)} - [react/animated-view {:style {:background-color :white + [react/animated-view {:style {:background-color colors/white :height panel-height :transform [{:translateY bottom-anim-value}] :opacity alpha-value}} diff --git a/src/status_im/ui/screens/chat/group.cljs b/src/status_im/ui/screens/chat/group.cljs index 7fcbcc9543..f478670b19 100644 --- a/src/status_im/ui/screens/chat/group.cljs +++ b/src/status_im/ui/screens/chat/group.cljs @@ -70,7 +70,7 @@ (when (not public?) (if pending-invite-inviter-name [react/nested-text {:style style/intro-header-description} - [{:style {:color :black}} pending-invite-inviter-name] + [{:style {:color colors/black}} pending-invite-inviter-name] (i18n/label :t/join-group-chat-description {:username "" :group-name chat-name})] @@ -79,7 +79,7 @@ (i18n/label :t/joined-group-chat-description {:username "" :group-name chat-name}) - [{:style {:color :black}} inviter-name]] + [{:style {:color colors/black}} inviter-name]] [react/text {:style style/intro-header-description} (i18n/label :t/created-group-chat-description {:group-name chat-name})])))))) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/input/send_button.cljs b/src/status_im/ui/screens/chat/input/send_button.cljs index 8acdc1bb4e..42eca48f2c 100644 --- a/src/status_im/ui/screens/chat/input/send_button.cljs +++ b/src/status_im/ui/screens/chat/input/send_button.cljs @@ -3,7 +3,8 @@ (:require [clojure.string :as string] [status-im.ui.screens.chat.styles.input.send-button :as style] [status-im.ui.components.react :as react] - [status-im.ui.components.icons.vector-icons :as vector-icons])) + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.colors :as colors])) (defn sendable? [input-text disconnected? login-processing?] (let [trimmed (string/trim input-text)] @@ -20,4 +21,4 @@ [vector-icons/icon :main-icons/arrow-up {:container-style style/send-message-container :accessibility-label :send-message-button - :color :white}]]))) \ No newline at end of file + :color colors/white-persist}]]))) \ No newline at end of file diff --git a/src/status_im/ui/screens/chat/message/command.cljs b/src/status_im/ui/screens/chat/message/command.cljs index b5f48acae0..6303a19ce6 100644 --- a/src/status_im/ui/screens/chat/message/command.cljs +++ b/src/status_im/ui/screens/chat/message/command.cljs @@ -215,7 +215,7 @@ (case direction :outgoing :border-bottom-right-radius :incoming :border-bottom-left-radius) 4 - :background-color :white} + :background-color colors/white} [react/text {:style {:font-size 13 :line-height 18 :font-weight "500" diff --git a/src/status_im/ui/screens/chat/message/datemark.cljs b/src/status_im/ui/screens/chat/message/datemark.cljs index 48e42a30be..5a846ab9a8 100644 --- a/src/status_im/ui/screens/chat/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/message/datemark.cljs @@ -11,5 +11,5 @@ [:chat.ui/set-chat-ui-props {:input-bottom-sheet nil}]) (react/dismiss-keyboard!))} [react/view style/datemark-mobile - [react/text {:style style/datemark-text} + [react/text {:style (style/datemark-text)} (string/capitalize value)]]]) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index 9c8549c73a..9d104a4ade 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -24,12 +24,11 @@ (defn message-timestamp ([message] [message-timestamp message false]) - ([{:keys [timestamp-str outgoing content content-type]} justify-timestamp?] + ([{:keys [timestamp-str outgoing content]} justify-timestamp?] [react/text {:style (style/message-timestamp-text justify-timestamp? outgoing - (:rtl? content) - (= content-type constants/content-type-emoji))} timestamp-str])) + (:rtl? content))} timestamp-str])) (defn message-bubble-wrapper [message message-content appender] @@ -60,7 +59,7 @@ (conj acc literal) "code" - (conj acc [react/text-class style/inline-code-style literal]) + (conj acc [react/text-class (style/inline-code-style) literal]) "emph" (conj acc [react/text-class (style/emph-style outgoing) literal]) @@ -72,7 +71,7 @@ (conj acc [react/text-class {:style - {:color (if outgoing colors/white colors/blue) + {:color (if outgoing colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(when (and (security/safe-link? destination) @@ -93,7 +92,7 @@ #(re-frame/dispatch [:chat.ui/start-chat literal {:navigation-reset? true}]))} [mention-element literal]]) "status-tag" (conj acc [react/text-class - {:style {:color (if outgoing colors/white colors/blue) + {:style {:color (if outgoing colors/white-persist colors/blue) :text-decoration-line :underline} :on-press #(re-frame/dispatch @@ -105,10 +104,10 @@ (defview message-content-status [{:keys [content content-type]}] [react/view style/status-container - [react/text {:style style/status-text} + [react/text {:style (style/status-text)} (reduce (fn [acc e] (render-inline (:text content) false content-type acc e)) - [react/text-class {:style style/status-text}] + [react/text-class {:style (style/status-text)}] (-> content :parsed-text peek :children))]]) (defn render-block [{:keys [content outgoing content-type]} acc diff --git a/src/status_im/ui/screens/chat/sheets.cljs b/src/status_im/ui/screens/chat/sheets.cljs index 0bfe088bd0..7e63c2896e 100644 --- a/src/status_im/ui/screens/chat/sheets.cljs +++ b/src/status_im/ui/screens/chat/sheets.cljs @@ -20,7 +20,7 @@ [react/text {:style {:font-weight "500" :line-height 22 :font-size 15 - :color :black}} + :color colors/black}} name] [react/text {:style {:line-height 22 :font-size 15 diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 0573cd5f0c..57352db5db 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -144,7 +144,7 @@ bottom-anim-value (anim/create-value @panel-height) alpha-value (anim/create-value 0)] {:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)} - [react/animated-view {:style {:background-color :white + [react/animated-view {:style {:background-color colors/white :height panel-height :transform [{:translateY bottom-anim-value}] :opacity alpha-value}} @@ -157,7 +157,7 @@ (re-frame/dispatch [:stickers/load-packs]) (re-frame/dispatch [:navigate-to :stickers])) :selected? false :background-color colors/blue} - [vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white}]] + [vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white-persist}]] [react/view {:width 2}] [react/scroll-view {:horizontal true :style {:padding-left 2}} [react/view diff --git a/src/status_im/ui/screens/chat/styles/input/gap.cljs b/src/status_im/ui/screens/chat/styles/input/gap.cljs index c83df2ba5a..80a2e80c05 100644 --- a/src/status_im/ui/screens/chat/styles/input/gap.cljs +++ b/src/status_im/ui/screens/chat/styles/input/gap.cljs @@ -10,8 +10,7 @@ :justify-content :center :border-color colors/black-transparent :border-top-width 1 - :border-bottom-width 1 - :background-color :white}) + :border-bottom-width 1}) (def label-container {:flex 1 diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index b31b9d3f71..1821930918 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -48,7 +48,7 @@ :right 16 :height height}) -(def add-contact +(defn add-contact [] {:flex-direction :row :align-items :center :justify-content :center @@ -95,7 +95,7 @@ :opacity 0.8 :line-height 72}) -(def intro-header-chat-name +(defn intro-header-chat-name [] {:font-size 22 :font-weight "700" :line-height 28 diff --git a/src/status_im/ui/screens/chat/styles/message/datemark.cljs b/src/status_im/ui/screens/chat/styles/message/datemark.cljs index 477edfe85f..f348e8e402 100644 --- a/src/status_im/ui/screens/chat/styles/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/styles/message/datemark.cljs @@ -15,5 +15,5 @@ :margin-top 16 :height 22}) -(def datemark-text +(defn datemark-text [] {:color colors/gray}) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 1b92e56d05..5806224a1b 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -9,7 +9,7 @@ (defn style-message-text [outgoing] - {:color (if outgoing colors/white colors/text)}) + {:color (if outgoing colors/white-persist colors/text)}) (defn last-message-padding [{:keys [first? typing]}] @@ -45,11 +45,11 @@ colors/blue-light))) (defn message-timestamp-text - [justify-timestamp? outgoing rtl? emoji?] + [justify-timestamp? outgoing rtl?] (merge message-timestamp {:line-height 10 :color (if outgoing - colors/white-transparent-70 + colors/white-transparent-70-persist colors/gray)} (when justify-timestamp? {:position :absolute :bottom 9 ; 6 Bubble bottom, 3 message baseline @@ -172,7 +172,7 @@ (def status-container {:padding-horizontal 5}) -(def status-text +(defn status-text [] {:margin-top 9 :font-size 14 :color colors/gray}) @@ -218,28 +218,28 @@ :line-height 18 :font-weight "500" :color (if outgoing - colors/white-transparent-70 + colors/white-transparent-70-persist colors/gray))) (defn quoted-message-text [outgoing] {:font-size 14 :color (if outgoing - colors/white-transparent-70 + colors/white-transparent-70-persist colors/gray)}) ;; Markdown styles -(def default-text-style +(defn default-text-style [] {:max-font-size-multiplier react/max-font-size-multiplier - :style (assoc typography/default-style + :style (assoc (typography/default-style) :line-height 22)}) -(def outgoing-text-style - (update default-text-style :style - assoc :color colors/white)) +(defn outgoing-text-style [] + (update (default-text-style) :style + assoc :color colors/white-persist)) -(def system-text-style - (update default-text-style :style assoc +(defn system-text-style [] + (update (default-text-style) :style assoc :color colors/gray :line-height 20 :font-size 14 @@ -248,45 +248,45 @@ (defn text-style [outgoing content-type] (cond - (= content-type constants/content-type-system-text) system-text-style - outgoing outgoing-text-style - :else default-text-style)) + (= content-type constants/content-type-system-text) (system-text-style) + outgoing (outgoing-text-style) + :else (default-text-style))) -(def emph-text-style - (update default-text-style :style +(defn emph-text-style [] + (update (default-text-style) :style assoc :font-style :italic)) -(def outgoing-emph-text-style - (update emph-text-style :style - assoc :color colors/white)) +(defn outgoing-emph-text-style [] + (update (emph-text-style) :style + assoc :color colors/white-persist)) (defn emph-style [outgoing] (if outgoing - outgoing-emph-text-style - emph-text-style)) + (outgoing-emph-text-style) + (emph-text-style))) -(def strong-text-style - (update default-text-style :style +(defn strong-text-style [] + (update (default-text-style) :style assoc :font-weight "700")) -(def outgoing-strong-text-style - (update strong-text-style :style - assoc :color colors/white)) +(defn outgoing-strong-text-style [] + (update (strong-text-style) :style + assoc :color colors/white-persist)) (defn strong-style [outgoing] (if outgoing - outgoing-strong-text-style - strong-text-style)) + (outgoing-strong-text-style) + (strong-text-style))) (def monospace-fonts (if platform/ios? "Courier" "monospace")) (def code-block-background "#2E386B") -(def inline-code-style - (update default-text-style :style +(defn inline-code-style [] + (update (default-text-style) :style assoc :font-family monospace-fonts - :color colors/white + :color colors/white-persist :background-color code-block-background)) (def codeblock-style {:style {:padding 10 @@ -294,7 +294,7 @@ :border-radius 4}}) (def codeblock-text-style - (update default-text-style :style + (update (default-text-style) :style assoc :font-family monospace-fonts :color colors/white)) @@ -315,7 +315,7 @@ default-blockquote-style)) (def default-blockquote-text-style - (update default-text-style :style + (update (default-text-style) :style assoc :line-height 19 :font-size 14 @@ -324,7 +324,7 @@ (def outgoing-blockquote-text-style (update default-blockquote-text-style :style assoc - :color colors/white-transparent-70)) + :color colors/white-transparent-70-persist)) (defn blockquote-text-style [outgoing] (if outgoing diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 7848f0cde0..8f5a1c5d34 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -46,7 +46,7 @@ {:on-press #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key]) :accessibility-label :add-to-contacts-button} - [react/view {:style style/add-contact} + [react/view {:style (style/add-contact)} [vector-icons/icon :main-icons/add {:color colors/blue}] [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]]) @@ -84,7 +84,7 @@ :default-chat-icon-text style/intro-header-icon-text :size 120}]] ;; Chat title section - [react/text {:style style/intro-header-chat-name} + [react/text {:style (style/intro-header-chat-name)} (if group-chat chat-name intro-name)] ;; Description section (if group-chat @@ -120,18 +120,17 @@ :footer [chat-intro-header-container chat (empty? messages)] :data messages :inverted true - :render-fn (fn [{:keys [outgoing] :as message} idx] - (let [type (:type message)] - (if (= type :datemark) - [message-datemark/chat-datemark (:value message)] - (if (= type :gap) - [gap/gap message idx messages-list-ref] - ; message content - [message/chat-message - (assoc message - :incoming-group (and group-chat (not outgoing)) - :group-chat group-chat - :current-public-key current-public-key)])))) + :render-fn (fn [{:keys [outgoing type] :as message} idx] + (if (= type :datemark) + [message-datemark/chat-datemark (:value message)] + (if (= type :gap) + [gap/gap message idx messages-list-ref] + ; message content + [message/chat-message + (assoc message + :incoming-group (and group-chat (not outgoing)) + :group-chat group-chat + :current-public-key current-public-key)]))) :on-viewable-items-changed on-viewable-items-changed :on-end-reached #(re-frame/dispatch [:chat.ui/load-more-messages]) :on-scroll-to-index-failed #() ;;don't remove this diff --git a/src/status_im/ui/screens/currency_settings/styles.cljs b/src/status_im/ui/screens/currency_settings/styles.cljs index c1a178d549..27aaf1835a 100644 --- a/src/status_im/ui/screens/currency_settings/styles.cljs +++ b/src/status_im/ui/screens/currency_settings/styles.cljs @@ -4,12 +4,11 @@ (def wrapper {:flex 1 - :background-color :white}) + :background-color colors/white}) (styles/def currency-item {:flex-direction :row :justify-content :space-between - :background-color :white :align-items :center :padding-horizontal 16 :ios {:height 64} diff --git a/src/status_im/ui/screens/currency_settings/views.cljs b/src/status_im/ui/screens/currency_settings/views.cljs index 13cd4f431c..c715be3fee 100644 --- a/src/status_im/ui/screens/currency_settings/views.cljs +++ b/src/status_im/ui/screens/currency_settings/views.cljs @@ -46,6 +46,5 @@ vals (sort #(compare (:code %1) (:code %2)))) :key-fn :code - :separator (profile.components/settings-item-separator) :render-fn (render-currency currency-id) :keyboardShouldPersistTaps :always}]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/ens/views.cljs b/src/status_im/ui/screens/ens/views.cljs index 1d0c77e9bd..4bf4b6f6a0 100644 --- a/src/status_im/ui/screens/ens/views.cljs +++ b/src/status_im/ui/screens/ens/views.cljs @@ -87,7 +87,7 @@ (:taken :error) :main-icons/cancel :main-icons/username) - {:color colors/white}]]) + {:color colors/white-persist}]]) (defn- toolbar [] [topbar/topbar {:title :t/ens-your-username}]) @@ -112,16 +112,16 @@ (case state :searching [icon-wrapper colors/gray - [react/activity-indicator {:color colors/white}]] + [react/activity-indicator {:color colors/white-persist}]] (:available :connected :connected-with-different-key :owned) [react/touchable-highlight {:on-press #(debounce/dispatch-and-chill [::ens/input-icon-pressed] 3000)} [icon-wrapper colors/blue - [vector-icons/icon :main-icons/arrow-right {:color colors/white}]]] + [vector-icons/icon :main-icons/arrow-right {:color colors/white-persist}]]] [icon-wrapper colors/gray - [vector-icons/icon :main-icons/arrow-right {:color colors/white}]])) + [vector-icons/icon :main-icons/arrow-right {:color colors/white-persist}]])) (defn help-message-text-element ([label] @@ -279,7 +279,6 @@ (defn- registration-bottom-bar [checked? amount-label] [react/view {:style {:height 60 - :background-color colors/white :border-top-width 1 :border-top-color colors/gray-lighter}} [react/view {:style {:margin-horizontal 16 @@ -565,7 +564,7 @@ (defn- welcome [] [react/view {:style {:flex 1}} [react/scroll-view {:content-container-style {:align-items :center}} - [react/image {:source (resources/get-image :ens-header) + [react/image {:source (resources/get-theme-image :ens-header) :style {:margin-top 32}}] [react/text {:style {:margin-top 32 :margin-bottom 8 :typography :header}} (i18n/label :t/ens-get-name)] diff --git a/src/status_im/ui/screens/fleet_settings/styles.cljs b/src/status_im/ui/screens/fleet_settings/styles.cljs index dae449f0c9..a6bd851b4f 100644 --- a/src/status_im/ui/screens/fleet_settings/styles.cljs +++ b/src/status_im/ui/screens/fleet_settings/styles.cljs @@ -4,15 +4,13 @@ [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) + {:flex 1}) (def fleet-item-inner {:padding-horizontal 16}) (styles/def fleet-item {:flex-direction :row - :background-color :white :align-items :center :padding-horizontal 16 :ios {:height 64} @@ -38,4 +36,4 @@ (defn fleet-icon [current?] (hash-map (if platform/desktop? :tint-color :color) - (if current? :white :gray))) + (if current? colors/white-persist colors/gray))) diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index d14a1b4e4c..eca2f041c9 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -20,7 +20,7 @@ [status-im.ui.screens.group.styles :as styles])) (views/defview group-name-view [new-group-name] - [react/view add-new.styles/input-container + [react/view (add-new.styles/input-container) [react/text-input {:auto-focus true :on-change-text #(re-frame/dispatch [:set :new-chat-name %]) diff --git a/src/status_im/ui/screens/hardwallet/settings/views.cljs b/src/status_im/ui/screens/hardwallet/settings/views.cljs index 65a1fc6955..fb11c8a81f 100644 --- a/src/status_im/ui/screens/hardwallet/settings/views.cljs +++ b/src/status_im/ui/screens/hardwallet/settings/views.cljs @@ -53,7 +53,7 @@ [react/view {:flex 1} [topbar/topbar {:title :t/reset-card}] [react/view {:flex 1 - :background-color :white} + :background-color colors/white} [react/view {:margin-top 71 :flex 1 :align-items :center} @@ -90,7 +90,7 @@ [react/view {:flex 1} [topbar/topbar {:title :t/status-keycard}] [react/view {:flex 1 - :background-color :white} + :background-color colors/white} [react/view {:margin-top 47 :flex 1 :align-items :center} diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 0f83559270..f528ae5290 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -29,7 +29,7 @@ :align-items :center :line-height 12}) -(def chat-tooltip +(defn chat-tooltip [] {:align-items :center :border-color colors/gray-lighter :border-width 1 @@ -74,7 +74,7 @@ :width 40 :height 40}) -(def action-button +(defn action-button [] {:width 40 :height 40 :background-color colors/blue @@ -84,14 +84,16 @@ :shadow-offset {:width 0 :height 1} :shadow-radius 6 :shadow-opacity 1 - :shadow-color "rgba(0, 12, 63, 0.2)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 12, 63, 0.2)") :elevation 2}) (def empty-chats-header-container {:align-items :center :justify-content :center}) -(def hr-wrapper +(defn hr-wrapper [] {:position :absolute :width "100%" :height 1 @@ -99,7 +101,7 @@ :border-top-width 1 :border-color colors/gray-lighter}) -(def or-text +(defn or-text [] {:width 40 :background-color colors/white :font-size 12 @@ -110,7 +112,7 @@ {:margin-top 10 :margin-bottom 18}) -(def close-icon-container +(defn close-icon-container [] {:width 24 :height 24 :border-radius 12 diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 8aa6f154fd..bc4e747314 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -29,7 +29,7 @@ :flex 1}} (let [padding 0 image-size (- (min (:width @dimensions) (:height @dimensions)) padding)] - [react/image {:source (resources/get-image :welcome) + [react/image {:source (resources/get-theme-image :welcome) :resize-mode :contain :style {:width image-size :height image-size}}])]))) @@ -46,27 +46,29 @@ :label (i18n/label :t/lets-go)}]]]) (defn home-tooltip-view [] - [react/view styles/chat-tooltip + [react/view (styles/chat-tooltip) [react/view {:style {:flex-direction :row}} [react/view {:flex 1} [react/view {:style styles/empty-chats-header-container} - [react/image {:source (resources/get-image :empty-chats-header) - :style {:width 60 :height 50 :position :absolute :top -6}}]] + [react/view {:style {:width 66 :position :absolute :top -6 :background-color colors/white + :align-items :center}} + [react/image {:source (resources/get-image :empty-chats-header) + :style {:width 50 :height 50}}]]] [react/touchable-highlight {:style {:position :absolute :right 0 :top 0 :width 44 :height 44 :align-items :center :justify-content :center} :on-press #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip]) :accessibility-label :hide-home-button} - [react/view {:style styles/close-icon-container} - [icons/icon :main-icons/close {:color colors/white}]]]]] + [react/view {:style (styles/close-icon-container)} + [icons/icon :main-icons/close {:color colors/white-persist}]]]]] [react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}] [react/view {:align-items :center :margin-top 16} [button/button {:label :t/invite-friends :on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) :accessibility-label :invite-friends-button}]] [react/view {:align-items :center :margin-top 16} - [react/view {:style styles/hr-wrapper}] - [react/i18n-text {:style styles/or-text :key :or}]] + [react/view {:style (styles/hr-wrapper)}] + [react/i18n-text {:style (styles/or-text) :key :or}]] [react/view {:margin-top 16} [react/i18n-text {:style {:margin-horizontal 16 :text-align :center} @@ -121,11 +123,11 @@ {:accessibility-label :new-chat-button :on-press (when-not logging-in? #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))} - [react/view styles/action-button + [react/view (styles/action-button) (if logging-in? - [react/activity-indicator {:color :white + [react/activity-indicator {:color colors/white-persist :animating true}] - [icons/icon :main-icons/add {:color :white}])]]])) + [icons/icon :main-icons/add {:color colors/white-persist}])]]])) (defn home [] [react/keyboard-avoiding-view {:style styles/home-container} diff --git a/src/status_im/ui/screens/intro/styles.cljs b/src/status_im/ui/screens/intro/styles.cljs index 529ca26e11..de85329d03 100644 --- a/src/status_im/ui/screens/intro/styles.cljs +++ b/src/status_im/ui/screens/intro/styles.cljs @@ -105,7 +105,7 @@ {:margin-bottom 24 :margin-top 16}) -(def bottom-arrow +(defn bottom-arrow [] {:flex-direction :row :justify-content :flex-end :align-self :stretch diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs index 8dfd67f66f..e97b3d9fb0 100644 --- a/src/status_im/ui/screens/intro/views.cljs +++ b/src/status_im/ui/screens/intro/views.cljs @@ -81,13 +81,13 @@ (defview intro [] (letsubs [{window-height :height} [:dimensions/window]] [react/view {:style styles/intro-view} - [intro-viewer [{:image (:intro1 resources/ui) + [intro-viewer [{:image (resources/get-theme-image :chat) :title :intro-title1 :text :intro-text1} - {:image (:intro2 resources/ui) + {:image (resources/get-theme-image :wallet) :title :intro-title2 :text :intro-text2} - {:image (:intro3 resources/ui) + {:image (resources/get-theme-image :browser) :title :intro-title3 :text :intro-text3}] window-height] [react/view styles/buttons-container @@ -115,7 +115,7 @@ :flex 1}} (let [padding 40 image-size (- (min (:width @dimensions) (:height @dimensions)) padding)] - [react/image {:source (resources/get-image :sample-key) + [react/image {:source (resources/get-theme-image :keys) :resize-mode :contain :style {:width image-size :height image-size}}])]))) @@ -289,7 +289,7 @@ :background? false}] :else - [react/view {:style styles/bottom-arrow} + [react/view {:style (styles/bottom-arrow)} [react/view {:style {:margin-right 10}} [components.common/bottom-button {:on-press #(re-frame/dispatch [forward-action]) :accessibility-label :onboarding-next-button @@ -363,11 +363,11 @@ :align-self :stretch :justify-content :center :align-items :center} - :container {:background-color :white + :container {:background-color colors/white :flex 1 :justify-content :center :align-items :center} - :style (merge {:background-color :white + :style (merge {:background-color colors/white :text-align :center :text-align-vertical :center :min-width 40 diff --git a/src/status_im/ui/screens/keycard/components/keycard_animation.cljs b/src/status_im/ui/screens/keycard/components/keycard_animation.cljs index 53189a5f5b..837f15be9d 100644 --- a/src/status_im/ui/screens/keycard/components/keycard_animation.cljs +++ b/src/status_im/ui/screens/keycard/components/keycard_animation.cljs @@ -39,7 +39,7 @@ :elevation 8 :shadow-opacity 0.1 :shadow-color "gba(0, 9, 26, 0.12)" - :background-color :white + :background-color colors/white :opacity anim :transform [{:scale (animation/interpolate anim @@ -80,16 +80,16 @@ :chip-color "#F0CC73"} (:connected :processing) {:card-color colors/blue - :key-color :white - :chip-color :white} + :key-color colors/white + :chip-color colors/white} :success {:card-color colors/green - :key-color :white - :chip-color :white} + :key-color colors/white + :chip-color colors/white} :error {:card-color colors/red - :key-color :white - :chip-color :white} + :key-color colors/white + :chip-color colors/white} nil)) (defn card [{:keys [card-scale state indicator-value animation-value]}] diff --git a/src/status_im/ui/screens/keycard/onboarding/views.cljs b/src/status_im/ui/screens/keycard/onboarding/views.cljs index bc48d79e7a..6152d2da2c 100644 --- a/src/status_im/ui/screens/keycard/onboarding/views.cljs +++ b/src/status_im/ui/screens/keycard/onboarding/views.cljs @@ -348,8 +348,8 @@ :placeholder nil :auto-correct false :keyboard-type "visible-password" - :container {:background-color :white} - :style {:background-color :white + :container {:background-color colors/white} + :style {:background-color colors/white :text-align :center :height 52 :typography :header}}] diff --git a/src/status_im/ui/screens/keycard/recovery/views.cljs b/src/status_im/ui/screens/keycard/recovery/views.cljs index a00fc42c84..577276e973 100644 --- a/src/status_im/ui/screens/keycard/recovery/views.cljs +++ b/src/status_im/ui/screens/keycard/recovery/views.cljs @@ -143,8 +143,8 @@ :auto-focus true :on-submit-editing #(re-frame/dispatch [:keycard.onboarding.pair.ui/input-submitted]) :placeholder nil - :container {:background-color :white} - :style {:background-color :white + :container {:background-color colors/white} + :style {:background-color colors/white :height 24 :typography :header}}] [react/view {:margin-top 5 diff --git a/src/status_im/ui/screens/keycard/views.cljs b/src/status_im/ui/screens/keycard/views.cljs index 996c79e113..4ffb07a564 100644 --- a/src/status_im/ui/screens/keycard/views.cljs +++ b/src/status_im/ui/screens/keycard/views.cljs @@ -275,7 +275,7 @@ :position :absolute :right 0 :bottom 0 - :background-color :white + :background-color colors/white :border-width 1 :border-color colors/black-transparent} [react/image {:source (resources/get-image :keycard-key) diff --git a/src/status_im/ui/screens/log_level_settings/styles.cljs b/src/status_im/ui/screens/log_level_settings/styles.cljs index 0488fdc1db..b591f2c982 100644 --- a/src/status_im/ui/screens/log_level_settings/styles.cljs +++ b/src/status_im/ui/screens/log_level_settings/styles.cljs @@ -4,15 +4,13 @@ [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) + {:flex 1}) (def log-level-item-inner {:padding-horizontal 16}) (styles/def log-level-item {:flex-direction :row - :background-color :white :align-items :center :padding-horizontal 16 :ios {:height 64} @@ -21,11 +19,6 @@ (def log-level-item-name-text {:typography :title}) -(def log-level-item-connected-text - {:color colors/gray - :font-size 14 - :margin-top 6}) - (defn log-level-icon-container [current?] {:width 40 :height 40 @@ -38,4 +31,4 @@ (defn log-level-icon [current?] (hash-map (if platform/desktop? :tint-color :color) - (if current? :white :gray))) + (if current? colors/white-persist colors/gray))) diff --git a/src/status_im/ui/screens/mobile_network_settings/style.cljs b/src/status_im/ui/screens/mobile_network_settings/style.cljs index 042c1cb6d6..db00c5628b 100644 --- a/src/status_im/ui/screens/mobile_network_settings/style.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/style.cljs @@ -1,26 +1,22 @@ (ns status-im.ui.screens.mobile-network-settings.style - (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.styles :as common-styles])) + (:require [status-im.ui.components.colors :as colors])) (def container - {:flex 1 - :background-color colors/white}) + {:flex 1}) (def switch-container - {:height 52 - :background-color colors/white}) + {:height 52}) (def details {:margin-right 16 :margin-left 16 :margin-top 8 - :margin-bottom 16 - :background-color colors/white}) + :margin-bottom 16}) (def use-mobile-data-text {:color colors/gray}) -(def settings-separator +(defn settings-separator [] {:align-self :stretch :height 1 :background-color colors/gray-lighter}) diff --git a/src/status_im/ui/screens/mobile_network_settings/view.cljs b/src/status_im/ui/screens/mobile_network_settings/view.cljs index 4dc9c25a8a..3744135d8a 100644 --- a/src/status_im/ui/screens/mobile_network_settings/view.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/view.cljs @@ -12,7 +12,7 @@ (defn settings-separator [] [react/view - {:style styles/settings-separator}]) + {:style (styles/settings-separator)}]) (views/defview mobile-network-settings [] (views/letsubs @@ -21,8 +21,6 @@ [:multiaccount]] [react/view {:style styles/container} [topbar/topbar {:title :t/mobile-network-settings}] - (when platform/ios? - [settings-separator]) [react/view {:style styles/switch-container} [profile.components/settings-switch-item {:label-kw :t/mobile-network-use-mobile diff --git a/src/status_im/ui/screens/multiaccounts/login/styles.cljs b/src/status_im/ui/screens/multiaccounts/login/styles.cljs index 1b04d50131..92a49e3ffa 100644 --- a/src/status_im/ui/screens/multiaccounts/login/styles.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/styles.cljs @@ -24,7 +24,7 @@ :align-self :center :flex-direction :row}) -(def bottom-button-container +(defn bottom-button-container [] {:flex-direction :row :padding-horizontal 12 :padding-vertical 8 diff --git a/src/status_im/ui/screens/multiaccounts/login/views.cljs b/src/status_im/ui/screens/multiaccounts/login/views.cljs index ee8d11d412..fa6c5fa90e 100644 --- a/src/status_im/ui/screens/multiaccounts/login/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/login/views.cljs @@ -89,7 +89,7 @@ [react/view styles/processing-view [react/activity-indicator {:animating true}] [react/i18n-text {:style styles/processing :key :processing}]]) - [react/view {:style styles/bottom-button-container} + [react/view {:style (styles/bottom-button-container)} [components.common/button {:label (i18n/label :t/access-key) :button-style styles/bottom-button diff --git a/src/status_im/ui/screens/multiaccounts/styles.cljs b/src/status_im/ui/screens/multiaccounts/styles.cljs index 237419753f..cc903396a4 100644 --- a/src/status_im/ui/screens/multiaccounts/styles.cljs +++ b/src/status_im/ui/screens/multiaccounts/styles.cljs @@ -1,6 +1,5 @@ (ns status-im.ui.screens.multiaccounts.styles - (:require [status-im.ui.components.styles :as common] - [status-im.ui.components.colors :as colors])) + (:require [status-im.ui.components.colors :as colors])) (def multiaccounts-view {:flex 1}) @@ -16,7 +15,7 @@ (def multiaccount-image-size 40) (def multiaccount-title-text - {:color :black + {:color colors/black :font-size 17}) (def multiaccounts-list-container @@ -24,8 +23,7 @@ :padding-bottom 8}) (def multiaccount-view - {:background-color :white - :flex-direction :row + {:flex-direction :row :align-items :center :padding-horizontal 16 :height 64}) @@ -49,7 +47,7 @@ :align-self :center :flex-direction :row}) -(def bottom-button-container +(defn bottom-button-container [] {:flex-direction :row :padding-horizontal 12 :padding-vertical 8 diff --git a/src/status_im/ui/screens/multiaccounts/views.cljs b/src/status_im/ui/screens/multiaccounts/views.cljs index 6eeca2fef3..42738a595e 100644 --- a/src/status_im/ui/screens/multiaccounts/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/views.cljs @@ -37,7 +37,7 @@ :width 32 :height 32 :border-radius 24 - :background-color :white + :background-color colors/white :border-width 1 :border-color colors/black-transparent} [react/image {:source (resources/get-image :keycard-key) @@ -59,7 +59,7 @@ [list/flat-list {:data (vals multiaccounts) :key-fn :address :render-fn (fn [multiaccount] [multiaccount-view multiaccount])}]] - [react/view {:style styles/bottom-button-container} + [react/view {:style (styles/bottom-button-container)} [button/button {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]) :type :secondary :label (i18n/label :t/access-key)}]]]])) diff --git a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs index 8ebb39875b..ec255a9d96 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs @@ -4,15 +4,13 @@ [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) + {:flex 1}) (def mailserver-item-inner {:padding-horizontal 16}) (styles/defn mailserver-item [pinned?] {:flex-direction :row - :background-color :white :align-items :center :opacity (if pinned? 1 @@ -36,7 +34,7 @@ (defn mailserver-icon [connected?] (hash-map (if platform/desktop? :tint-color :color) - (if connected? :white :gray))) + (if connected? colors/white-persist colors/gray))) (def mailserver-pinned {:padding-horizontal 16 diff --git a/src/status_im/ui/screens/pairing/styles.cljs b/src/status_im/ui/screens/pairing/styles.cljs index 7d9051364a..468549aa0c 100644 --- a/src/status_im/ui/screens/pairing/styles.cljs +++ b/src/status_im/ui/screens/pairing/styles.cljs @@ -4,23 +4,16 @@ [status-im.utils.styles :as styles])) (def wrapper - {:flex 1 - :background-color :white}) - -(def installation-item-inner - {:flex 1 - :flex-direction :row}) + {:flex 1}) (styles/def installation-item {:flex-direction :row - :background-color :white :align-items :center :ios {:height 64} :android {:height 56}}) (def installation-list - {:background-color :white - :padding-horizontal 16 + {:padding-horizontal 16 :flex 1}) (def edit-installation @@ -37,8 +30,7 @@ (def pair-this-device {:height 80 :padding-horizontal 16 - :padding-top 12 - :background-color :white}) + :padding-top 12}) (def info-section {:padding-horizontal 16 diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs index 6ffed47b64..077eef79a4 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -191,7 +191,7 @@ (views/letsubs [installations [:pairing/installations]] [react/view {:flex 1} [topbar/topbar {:title :t/devices}] - [react/scroll-view {:style {:background-color :white}} + [react/scroll-view (if (string/blank? (-> installations first :name)) [edit-installation-name] [react/view diff --git a/src/status_im/ui/screens/popover/views.cljs b/src/status_im/ui/screens/popover/views.cljs index 8a9e2806c1..b556c587b4 100644 --- a/src/status_im/ui/screens/popover/views.cljs +++ b/src/status_im/ui/screens/popover/views.cljs @@ -10,7 +10,8 @@ [status-im.ui.screens.profile.user.views :as profile.user] [status-im.ui.screens.multiaccounts.recover.views :as multiaccounts.recover] [status-im.react-native.js-dependencies :as js-dependencies] - [status-im.ui.screens.biometric.views :as biometric])) + [status-im.ui.screens.biometric.views :as biometric] + [status-im.ui.components.colors :as colors])) (defn hide-panel-anim [bottom-anim-value alpha-value window-height] @@ -88,7 +89,7 @@ (let [{:keys [view style]} @current-popover] [react/view {:position :absolute :top 0 :bottom 0 :left 0 :right 0} [react/animated-view - {:style {:flex 1 :background-color :black :opacity alpha-value}}] + {:style {:flex 1 :background-color colors/black-persist :opacity alpha-value}}] [react/animated-view {:style {:position :absolute :height window-height @@ -98,7 +99,7 @@ [react/touchable-highlight {:style {:flex 1 :align-items :center :justify-content :center} :on-press request-close} - [react/view (merge {:background-color :white + [react/view (merge {:background-color colors/white :border-radius 16 :margin 32 :shadow-offset {:width 0 :height 2} diff --git a/src/status_im/ui/screens/profile/contact/styles.cljs b/src/status_im/ui/screens/profile/contact/styles.cljs index b8823942eb..08f09b10d5 100644 --- a/src/status_im/ui/screens/profile/contact/styles.cljs +++ b/src/status_im/ui/screens/profile/contact/styles.cljs @@ -34,8 +34,7 @@ :margin-left 16}) (def contact-profile-details-container - {:padding-top 26 - :background-color colors/white}) + {:padding-top 26}) (def contact-profile-detail-share-icon {:color colors/gray-transparent-40}) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 34d382e731..ce0f4aeb73 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -122,13 +122,15 @@ (and ens-verified name) (assoc :usernames [name]))) content - [[list/action-list (actions contact) - {:container-style styles/action-container - :action-style styles/action - :action-label-style styles/action-label - :action-subtext-style styles/action-subtext - :action-separator-style styles/action-separator - :icon-opts styles/action-icon-opts}] + [[react/view {:padding-top 12} + (for [{:keys [label subtext accessibility-label icon action disabled?]} (actions contact)] + [list-item/list-item {:theme :action + :title label + :subtitle subtext + :icon icon + :accessibility-label accessibility-label + :disabled? disabled? + :on-press action}])] [react/view styles/contact-profile-details-container [profile-details (cond-> contact (and ens-verified name) diff --git a/src/status_im/ui/screens/profile/photo_capture/styles.cljs b/src/status_im/ui/screens/profile/photo_capture/styles.cljs index ab8f473a17..8c6d8b16e7 100644 --- a/src/status_im/ui/screens/profile/photo_capture/styles.cljs +++ b/src/status_im/ui/screens/profile/photo_capture/styles.cljs @@ -1,8 +1,9 @@ -(ns status-im.ui.screens.profile.photo-capture.styles) +(ns status-im.ui.screens.profile.photo-capture.styles + (:require [status-im.ui.components.colors :as colors])) (def container {:flex 1 - :background-color :white}) + :background-color colors/white}) (def button-container {:align-items :center}) diff --git a/src/status_im/ui/screens/profile/photo_capture/views.cljs b/src/status_im/ui/screens/profile/photo_capture/views.cljs index deeb9ec297..b47ac8905d 100644 --- a/src/status_im/ui/screens/profile/photo_capture/views.cljs +++ b/src/status_im/ui/screens/profile/photo_capture/views.cljs @@ -8,7 +8,8 @@ [status-im.utils.image-processing :as image-processing] [taoensso.timbre :as log] [status-im.ui.components.icons.vector-icons :as icons] - [status-im.ui.components.topbar :as topbar])) + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.colors :as colors])) (defn image-captured [data] (let [path (.-uri data) @@ -39,4 +40,4 @@ (.then image-captured) (.catch #(log/debug "Error capturing image: " %)))))} [react/view - [icons/icon :main-icons/camera {:color :white}]]]]]])) + [icons/icon :main-icons/camera {:color colors/white}]]]]]])) diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index e920aa0ac4..133ad6e2e7 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -61,7 +61,6 @@ :margin-bottom 16 :flex-direction :row :border-radius 8 - :background-color colors/white :border-width 1 :border-color colors/gray-lighter}) @@ -99,7 +98,7 @@ :justify-content :center}) (def ok-icon - {:color :white + {:color colors/white :width 41 :height 41}) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index f6131beebb..5b02769517 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -145,6 +145,11 @@ [(when mnemonic [components.common/counter {:size 22} 1]) :chevron] :on-press #(re-frame/dispatch [:navigate-to :privacy-and-security])} + {:icon :main-icons/appearance + :title :t/appearance + :accessibility-label :appearance-settings-button + :accessories [:chevron] + :on-press #(re-frame/dispatch [:navigate-to :appearance])} (when (and platform/android? config/local-notifications?) {:icon :main-icons/notification diff --git a/src/status_im/ui/screens/qr_scanner/views.cljs b/src/status_im/ui/screens/qr_scanner/views.cljs index 3389bec019..2269336c8e 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/src/status_im/ui/screens/qr_scanner/views.cljs @@ -12,19 +12,19 @@ [topbar/toolbar {:transparent? true} [topbar/nav-text - {:style {:color colors/white :margin-left 16} + {:style {:color colors/white-persist :margin-left 16} :handler #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])} (i18n/label :t/cancel)] - [topbar/content-title {:color :white} + [topbar/content-title {:color colors/white-persist} (or title (i18n/label :t/scan-qr))] #_[topbar/actions [{:icon (if (= :on camera-flashlight) :main-icons/flash-active :main-icons/flash-inactive) - :icon-opts {:color :white} + :icon-opts {:color colors/white} :handler #(re-frame/dispatch [:wallet/toggle-flashlight])}]]]) (defn corner [border1 border2 corner] - [react/view (assoc {:border-color :white :width 60 :height 60} border1 5 border2 5 corner 32)]) + [react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)]) (defn- viewfinder [size] [react/view {:style styles/viewfinder-port} @@ -45,7 +45,7 @@ camera-flashlight [:wallet.send/camera-flashlight] opts [:get-screen-params]] [react/safe-area-view {:style {:flex 1 - :background-color colors/black}} + :background-color colors/black-persist}} [topbar camera-flashlight opts] [react/with-activity-indicator {} diff --git a/src/status_im/ui/screens/routing/core.cljs b/src/status_im/ui/screens/routing/core.cljs index 07506f7572..9cf3f9a82d 100644 --- a/src/status_im/ui/screens/routing/core.cljs +++ b/src/status_im/ui/screens/routing/core.cljs @@ -6,7 +6,8 @@ [taoensso.timbre :as log] [status-im.utils.platform :as platform] [oops.core :refer [ocall oget]] - [status-im.react-native.js-dependencies :as js-dependencies])) + [status-im.react-native.js-dependencies :as js-dependencies] + [status-im.ui.components.colors :as colors])) (defonce native js-dependencies/react-navigation-native) (defonce stack js-dependencies/react-navigation-stack) @@ -47,7 +48,7 @@ (defn wrapped-screen-style [{:keys [insets style]} insets-obj] (merge - {:background-color :white + {:background-color colors/white :flex 1} style (when (get insets :bottom) diff --git a/src/status_im/ui/screens/routing/profile_stack.cljs b/src/status_im/ui/screens/routing/profile_stack.cljs index ca98abe132..429b5826f8 100644 --- a/src/status_im/ui/screens/routing/profile_stack.cljs +++ b/src/status_im/ui/screens/routing/profile_stack.cljs @@ -36,7 +36,8 @@ [status-im.ui.screens.hardwallet.pin.views :as hardwallet.pin] [status-im.ui.screens.hardwallet.settings.views :as hardwallet.settings] [status-im.ui.components.tabbar.styles :as tabbar.styles] - [status-im.ui.screens.routing.core :as navigation])) + [status-im.ui.screens.routing.core :as navigation] + [status-im.ui.screens.appearance.views :as appearance])) (defonce stack (navigation/create-stack)) @@ -78,6 +79,8 @@ :component dapps-permissions/dapps-permissions} {:name :privacy-and-security :component privacy-and-security/privacy-and-security} + {:name :appearance + :component appearance/appearance} {:name :language-settings :component language-settings/language-settings} {:name :notifications-settings diff --git a/src/status_im/ui/screens/signing/styles.cljs b/src/status_im/ui/screens/signing/styles.cljs index 31e7d724b8..b252128010 100644 --- a/src/status_im/ui/screens/signing/styles.cljs +++ b/src/status_im/ui/screens/signing/styles.cljs @@ -19,7 +19,7 @@ :margin-bottom 19}) (def message - {:background-color :white + {:background-color colors/white :border-top-right-radius 16 :border-top-left-radius 16 :padding-bottom 40}) @@ -34,8 +34,8 @@ :border-width 1 :padding 8}) -(def sheet - {:background-color :white +(defn sheet [] + {:background-color colors/white :border-top-right-radius 16 :border-top-left-radius 16 :padding-bottom 40}) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index dde54588bf..9133fc4030 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -242,7 +242,7 @@ mainnet? [:mainnet?]] (let [display-symbol (wallet.utils/display-symbol token) fee-display-symbol (wallet.utils/display-symbol (tokens/native-currency chain))] - [react/view styles/sheet + [react/view (styles/sheet) [header sign tx display-symbol fee fee-display-symbol] [separator] (if sign diff --git a/src/status_im/ui/screens/stickers/styles.cljs b/src/status_im/ui/screens/stickers/styles.cljs index 702b00a5e4..d860b97117 100644 --- a/src/status_im/ui/screens/stickers/styles.cljs +++ b/src/status_im/ui/screens/stickers/styles.cljs @@ -2,8 +2,7 @@ (:require [status-im.ui.components.colors :as colors])) (def screen - {:flex 1 - :background-color colors/white}) + {:flex 1}) (defn sticker-image [sticker-icon-size] {:margin 16 diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs index aa930d4d29..f0488359e0 100644 --- a/src/status_im/ui/screens/stickers/views.cljs +++ b/src/status_im/ui/screens/stickers/views.cljs @@ -19,7 +19,7 @@ (defn- installed-icon [] [react/view styles/installed-icon - [icons/icon :main-icons/check {:color colors/white :height 20 :width 20}]]) + [icons/icon :main-icons/check {:color colors/white-persist :height 20 :width 20}]]) (defview price-badge [price id owned? pending] (letsubs [chain [:ethereum/chain-keyword] @@ -34,11 +34,11 @@ :else (re-frame/dispatch [:stickers/buy-pack id price]))} [react/view (styles/price-badge (and (not (or owned? (zero? price))) (or no-snt? not-enough-snt?))) (when (and (not (zero? price)) (not owned?)) - [icons/tiny-icon :tiny-icons/tiny-snt {:color colors/white :container-style {:margin-right 6}}]) + [icons/tiny-icon :tiny-icons/tiny-snt {:color colors/white-persist :container-style {:margin-right 6}}]) (if pending [react/activity-indicator {:animating true - :color colors/white}] - [react/text {:style {:color colors/white} + :color colors/white-persist}] + [react/text {:style {:color colors/white-persist} :accessibility-label :sticker-pack-price} (cond owned? (i18n/label :t/install) (zero? price) (i18n/label :t/free) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index cc61adc2bf..176cacfb89 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -23,7 +23,8 @@ status-im.ui.screens.wallet.collectibles.cryptostrikers.views status-im.ui.screens.wallet.collectibles.cryptokitties.views status-im.ui.screens.wallet.collectibles.superrare.views - status-im.ui.screens.wallet.collectibles.kudos.views)) + status-im.ui.screens.wallet.collectibles.kudos.views + [status-im.ui.components.colors :as colors])) (defview bottom-sheet [] (letsubs [{:keys [show? view]} [:bottom-sheet]] @@ -106,8 +107,9 @@ :reagent-render (fn [] [react/safe-area-provider + ^{:key @colors/theme} [react/view {:flex 1 - :background-color :black} + :background-color colors/black-persist} [navigation/navigation-container (merge {:ref (fn [r] (navigation/set-navigator-ref r)) diff --git a/src/status_im/ui/screens/wallet/account/styles.cljs b/src/status_im/ui/screens/wallet/account/styles.cljs index 99c47a35e6..52d1bb11bc 100644 --- a/src/status_im/ui/screens/wallet/account/styles.cljs +++ b/src/status_im/ui/screens/wallet/account/styles.cljs @@ -8,16 +8,20 @@ :shadow-offset {:width 0 :height 2} :shadow-radius 8 :shadow-opacity 1 - :shadow-color "rgba(0, 9, 26, 0.12)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 9, 26, 0.12)") :elevation 2 :border-radius 8 :justify-content :space-between}) -(def divider +(defn divider [] {:height 52 :width 1 :background-color colors/black-transparent-20 :shadow-offset {:width 0 :height 2} :shadow-radius 8 :shadow-opacity 1 - :shadow-color "rgba(0, 9, 26, 0.12)"}) \ No newline at end of file + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 9, 26, 0.12)")}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 33c594eb92..c034fa1863 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -32,8 +32,8 @@ [react/touchable-highlight {:on-press handler :style {:flex 1}} [react/view {:flex 1 :align-items :center :justify-content :center} [react/view {:flex-direction :row :align-items :center} - [icons/icon icon {:color colors/white}] - [react/text {:style {:margin-left 8 :color colors/white}} label]]]]) + [icons/icon icon {:color colors/white-persist}] + [react/text {:style {:margin-left 8 :color colors/white-persist}} label]]]]) (views/defview account-card [{:keys [address color type] :as account}] (views/letsubs [currency [:wallet/currency] @@ -41,32 +41,32 @@ window-width [:dimensions/window-width]] [react/view {:style (styles/card window-width color)} [react/view {:padding 16 :padding-bottom 12 :flex 1 :justify-content :space-between} - [react/nested-text {:style {:color colors/white-transparent :line-height 38 + [react/nested-text {:style {:color colors/white-transparent-persist :line-height 38 :font-weight "600" :font-size 32}} - [{:style {:color colors/white}} portfolio-value] + [{:style {:color colors/white-persist}} portfolio-value] " " (:code currency)] [react/text {:number-of-lines 1 :ellipsize-mode :middle :style {:width (/ window-width 3) :line-height 22 :font-size 13 :font-family "monospace" - :color colors/white-transparent-70}} + :color colors/white-transparent-70-persist}} (ethereum/normalized-hex 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 + [icons/icon :main-icons/share {:color colors/white-persist :accessibility-label :share-wallet-address-icon}]]] [react/view {:height 52 :background-color colors/black-transparent-20 :border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} (if (= type :watch) [react/view {:flex 1 :align-items :center :justify-content :center} - [react/text {:style {:margin-left 8 :color colors/white}} + [react/text {:style {:margin-left 8 :color colors/white-persist}} (i18n/label :t/watch-only)]] [button (i18n/label :t/wallet-send) :main-icons/send #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])]) - [react/view {:style styles/divider}] + [react/view {:style (styles/divider)}] [button (i18n/label :t/receive) :main-icons/receive diff --git a/src/status_im/ui/screens/wallet/accounts/styles.cljs b/src/status_im/ui/screens/wallet/accounts/styles.cljs index 0e95c56287..e417a05dc8 100644 --- a/src/status_im/ui/screens/wallet/accounts/styles.cljs +++ b/src/status_im/ui/screens/wallet/accounts/styles.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.accounts.styles (:require [status-im.ui.components.colors :as colors])) -(def card-common +(defn card-common [] {:margin-vertical 16 :margin-horizontal 8 :width 156 @@ -9,20 +9,22 @@ :shadow-offset {:width 0 :height 2} :shadow-radius 8 :shadow-opacity 1 - :shadow-color "rgba(0, 9, 26, 0.12)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 9, 26, 0.12)") :elevation 3 :border-radius 8}) (defn card [color] - (merge card-common + (merge (card-common) {:background-color color :justify-content :space-between :padding-horizontal 12 :padding-top 12 :padding-bottom 6})) -(def add-card - (merge card-common +(defn add-card [] + (merge (card-common) {:background-color colors/white :justify-content :center :align-items :center})) @@ -37,7 +39,7 @@ :bottom 16 :height 40}) -(def send-button +(defn send-button [] {:width 40 :height 40 :background-color colors/blue @@ -47,5 +49,7 @@ :shadow-offset {:width 0 :height 1} :shadow-radius 6 :shadow-opacity 1 - :shadow-color "rgba(0, 12, 63, 0.2)" + :shadow-color (if (colors/dark?) + "rgba(0, 0, 0, 0.75)" + "rgba(0, 12, 63, 0.2)") :elevation 2}) diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index 71bde33d74..f4f39e4163 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -27,25 +27,28 @@ :content-height 130}])} [react/view {:style (styles/card color)} [react/view {:flex-direction :row :align-items :center :justify-content :space-between} - [react/nested-text {:style {:color colors/white-transparent :font-weight "500" :flex-shrink 1}} - [{:style {:color colors/white}} portfolio-value] + [react/nested-text {:style {:color colors/white-transparent-persist + :font-weight "500" :flex-shrink 1}} + [{:style {:color colors/white-persist}} portfolio-value] " " (:code currency)] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])} - [icons/icon :main-icons/share {:color colors/white}]]] + [react/touchable-highlight + {:on-press #(re-frame/dispatch [:show-popover + {:view :share-account :address address}])} + [icons/icon :main-icons/share {:color colors/white-persist}]]] [react/view - [react/text {:style {:color colors/white :font-weight "500" :line-height 22}} name] + [react/text {:style {:color colors/white-persist :font-weight "500" :line-height 22}} name] [react/text {:number-of-lines 1 :ellipsize-mode :middle :style {:line-height 22 :font-size 13 :font-family "monospace" - :color colors/white-transparent-70}} + :color colors/white-transparent-70-persist}} address]]]])) (defn add-card [] [react/touchable-highlight {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/add-account :content-height 260}])} - [react/view {:style styles/add-card} + [react/view {:style (styles/add-card)} [react/view {:width 40 :height 40 :justify-content :center :border-radius 20 :align-items :center :background-color colors/blue-transparent-10 :margin-bottom 8} [icons/icon :main-icons/add {:color colors/blue}]] @@ -142,14 +145,14 @@ :justify-content :center} [icons/icon :main-icons/more {:accessibility-label :accounts-more-options}]]]])) -(views/defview send-button [] +(views/defview send-button [] (views/letsubs [account [:multiaccount/default-account]] [react/view styles/send-button-container [react/touchable-highlight {:accessibility-label :send-transaction-button :on-press #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])} - [react/view styles/send-button - [icons/icon :main-icons/send {:color :white}]]]])) + [react/view (styles/send-button) + [icons/icon :main-icons/send {:color colors/white-persist}]]]])) (views/defview accounts [] (views/letsubs [accounts [:multiaccount/accounts]] diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index 809c8fe5ee..81967964d6 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -5,6 +5,6 @@ {:flex 1 :background-color colors/white}) -(def separator +(defn separator [] {:height 1 :background-color colors/gray-lighter}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 4f3d07485f..99a39cbcd3 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -12,7 +12,7 @@ (:require-macros [status-im.utils.views :as views])) (defn separator [] - [react/view styles/separator]) + [react/view (styles/separator)]) (defn- recipient-topbar [content] [topbar/toolbar {:transparent? true} diff --git a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs index 69f0025e32..0ac9e669b0 100644 --- a/src/status_im/ui/screens/wallet/custom_tokens/views.cljs +++ b/src/status_im/ui/screens/wallet/custom_tokens/views.cljs @@ -24,7 +24,7 @@ (defview add-custom-token [] (letsubs [{:keys [contract name symbol balance decimals in-progress? error error-name error-symbol]} [:wallet/custom-token-screen]] - [react/keyboard-avoiding-view {:flex 1 :background-color :white} + [react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [topbar/topbar {:title :t/add-custom-token}] [react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}} [react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}} @@ -103,7 +103,7 @@ (defview custom-token-details [] (letsubs [{:keys [address name symbol decimals custom?] :as token} [:get-screen-params]] - [react/keyboard-avoiding-view {:flex 1 :background-color :white} + [react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [topbar/topbar {:title name}] [react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8}} diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index 4e5876c8b6..d346434c92 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -1,7 +1,8 @@ -(ns status-im.ui.screens.wallet.send.styles) +(ns status-im.ui.screens.wallet.send.styles + (:require [status-im.ui.components.colors :as colors])) (defn sheet [small-screen?] - {:background-color :white + {:background-color colors/white :border-top-right-radius 16 :border-top-left-radius 16 :padding-bottom (if small-screen? 40 60)}) diff --git a/src/status_im/ui/screens/wallet/settings/views.cljs b/src/status_im/ui/screens/wallet/settings/views.cljs index ea9694f8b6..84165eb2ad 100644 --- a/src/status_im/ui/screens/wallet/settings/views.cljs +++ b/src/status_im/ui/screens/wallet/settings/views.cljs @@ -8,7 +8,8 @@ [status-im.ui.components.list-item.views :as list-item] [reagent.core :as reagent] [status-im.ui.components.topbar :as topbar] - [status-im.ui.components.search-input.view :as search-input]) + [status-im.ui.components.search-input.view :as search-input] + [status-im.ui.components.colors :as colors]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defonce search-active? (reagent/atom false)) @@ -78,7 +79,7 @@ {:component-will-unmount #(do (re-frame/dispatch [:search/token-filter-changed nil]) (reset! search-active? false))} - [react/view (merge components.styles/flex {:background-color :white}) + [react/view (merge components.styles/flex {:background-color colors/white}) [toolbar] [react/view {:style components.styles/flex} [search-input/search-input diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 435d63df31..b63479b230 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -33,7 +33,7 @@ (def transactions {:flex 1 - :background-color :white}) + :background-color colors/white}) (def forward {:color colors/gray}) @@ -203,4 +203,4 @@ (def transactions-view {:flex 1 - :background-color :white}) + :background-color colors/white}) diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 58371c402c..ab60e98cce 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -153,7 +153,7 @@ :accessories [{:label :t/transactions-filter-select-all :handler on-touch-select-all}]}] [react/view - {:style (merge {:background-color :white} components.styles/flex)} + {:style (merge {:background-color colors/white} components.styles/flex)} [list/section-list {:sections [{:title (i18n/label :t/type) :key :type @@ -254,7 +254,7 @@ toolbar-old/default-nav-back [toolbar-old/content-title (i18n/label :t/transaction-details)] (when transaction [toolbar-old/actions (details-action hash url)])] - [react/scroll-view {:style components.styles/main-container} + [react/scroll-view {:style components.styles/flex} [details-header date type amount-text currency-text] [details-confirmations confirmations confirmations-progress (= :failed type)] [react/view {:style styles/details-separator}] diff --git a/src/status_im/utils/theme.cljs b/src/status_im/utils/theme.cljs new file mode 100644 index 0000000000..d21444b157 --- /dev/null +++ b/src/status_im/utils/theme.cljs @@ -0,0 +1,13 @@ +(ns status-im.utils.theme + (:require [status-im.react-native.js-dependencies :as js-dependencies] + [oops.core :refer [oget ocall]])) + +(def event-emitter (oget js-dependencies/react-native-dark-mode "eventEmitter")) +(def initial-mode (atom (oget js-dependencies/react-native-dark-mode "initialMode"))) + +(defn add-mode-change-listener [callback] + (ocall event-emitter "on" "currentModeChanged" #(do (reset! initial-mode %) + (callback (keyword %))))) + +(defn is-dark-mode [] + (= @initial-mode "dark")) \ 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 6e709bdd23..badaf2b389 100644 --- a/test/cljs/status_im/react_native/js_dependencies.cljs +++ b/test/cljs/status_im/react_native/js_dependencies.cljs @@ -55,6 +55,7 @@ (def net-info #js {}) (def touchid #js {}) (def safe-area-context #js {}) +(def react-native-dark-mode #js {"eventEmitter" {} "initialMode" {}}) (def back-handler #js {:addEventListener identity :removeEventListener identity}) diff --git a/translations/en.json b/translations/en.json index 2a59c401e9..93d44a5da3 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1098,5 +1098,10 @@ "add-private-key-account": "Add account from private key", "user-not-found": "User not found", "waku-enabled": "Waku enabled", - "waku-bloom-filter-mode": "Waku bloom filter mode" + "waku-bloom-filter-mode": "Waku bloom filter mode", + "appearance": "Appearance", + "preference": "Preference", + "light": "Light", + "dark": "Dark", + "system": "System" }