dark mode
This commit is contained in:
Andrey Shovkoplyas
parent
efc2fa9cf2
commit
a447bed4ac
|
|
@ -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">
|
||||
<intent-filter>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
<item name="colorControlActivated">@color/primary</item>
|
||||
<item name="android:windowBackground">@color/background</item>
|
||||
<item name="android:textColor">#000000</item>
|
||||
<item name="android:forceDarkAllowed">true</item>
|
||||
</style>
|
||||
|
||||
</resources>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {}))
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -2,8 +2,6 @@
|
|||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>UIUserInterfaceStyle</key>
|
||||
<string>Light</string>
|
||||
<key>CFBundleBuildUrl</key>
|
||||
<string>????</string>
|
||||
<key>NSFaceIDUsageDescription</key>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Lsa-QA-3zn">
|
||||
<device id="retina4_7" orientation="portrait">
|
||||
<adaptation id="fullscreen"/>
|
||||
</device>
|
||||
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Lsa-QA-3zn">
|
||||
<device id="retina4_7" orientation="portrait" appearance="light"/>
|
||||
<dependencies>
|
||||
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
|
||||
<deployment identifier="iOS"/>
|
||||
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15510"/>
|
||||
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
|
||||
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
|
||||
</dependencies>
|
||||
|
|
@ -20,9 +19,10 @@
|
|||
<imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="launch_image" translatesAutoresizingMaskIntoConstraints="NO" id="cqW-9w-FC0">
|
||||
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
|
||||
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
|
||||
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
|
||||
</imageView>
|
||||
</subviews>
|
||||
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
|
||||
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
|
||||
<viewLayoutGuide key="safeArea" id="2aN-f8-qiu"/>
|
||||
</view>
|
||||
</viewController>
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
</scene>
|
||||
</scenes>
|
||||
<resources>
|
||||
<image name="launch_image" width="164" height="169"/>
|
||||
<image name="launch_image" width="90" height="101"/>
|
||||
</resources>
|
||||
</document>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {})
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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)}))))
|
||||
|
|
@ -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))))
|
||||
|
|
@ -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 []
|
||||
|
|
|
|||
|
|
@ -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 {})))
|
||||
|
|
@ -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"})
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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]]]
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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?]]
|
||||
|
|
|
|||
|
|
@ -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]]]]]))})))
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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)}])])
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
:width window-width})
|
||||
|
||||
(def text
|
||||
{:color :white
|
||||
{:color colors/white
|
||||
:font-size 14
|
||||
:top 8})
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)}]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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}))]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}}])])
|
||||
:background-color colors/white-persist}}])])
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}}]
|
||||
|
|
|
|||
|
|
@ -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}))})
|
||||
|
|
|
|||
|
|
@ -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?)
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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?))]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)]]]))
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue