[design] use Inter font on Android

- implement typography component
- replace InterUI font by Inter font (renaming)

Signed-off-by: yenda <eric@status.im>
This commit is contained in:
yenda 2019-03-14 20:51:54 +01:00
parent 403f327c34
commit 496f3f1cc7
No known key found for this signature in database
GPG Key ID: 0095623C0069DCE6
170 changed files with 850 additions and 1190 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -5,10 +5,12 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.styles :as styles] [status-im.ui.components.styles :as styles]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.utils.core :as utils.core]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[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])) [status-im.ui.components.colors :as colors]
[status-im.ui.components.typography :as typography]))
(defn get-react-property [name] (defn get-react-property [name]
(if js-dependencies/react-native (if js-dependencies/react-native
@ -84,44 +86,48 @@
(def desktop-notification (.-DesktopNotification (.-NativeModules js-dependencies/react-native))) (def desktop-notification (.-DesktopNotification (.-NativeModules js-dependencies/react-native)))
(def slider (get-class "Slider")) (def slider (get-class "Slider"))
;; Accessor methods for React Components ;; Accessor methods for React Components
(def default-font {:font-family "Inter UI"})
(defn add-font-style [style-key opts]
(let [style (get opts style-key)]
(-> opts
(dissoc :font)
(assoc style-key (merge default-font style)))))
(defn transform-to-uppercase [{:keys [uppercase? force-uppercase?]} ts]
(if (or force-uppercase? (and uppercase? platform/android?))
(vec (map #(when % (string/upper-case %)) ts))
ts))
(defn text (defn text
([t] "For nested text elements, use nested-text instead"
[text-class t]) ([text-element]
([opts t & ts] [text {} text-element])
(->> (conj ts t) ([options text-element]
(transform-to-uppercase opts) [text-class (update options :style typography/get-style) text-element]))
(concat [text-class (add-font-style :style opts)])
(vec))))
(defn text-input [{:keys [style] :as opts} text] (defn nested-text
[text-input-class (merge ([options & nested-text-elements]
{:underline-color-android :transparent (let [options-with-style (update options :style typography/get-style)]
:placeholder-text-color colors/text-gray (reduce (fn [acc text-element]
:placeholder (i18n/label :t/type-a-message) (conj acc
:value text} (cond
(-> opts (string? text-element)
(dissoc :font) [text-class options-with-style text-element]
(assoc :style (merge default-font style))))])
(vector? text-element)
(let [[options nested-text-elements] text-element]
[nested-text (update (utils.core/deep-merge options-with-style
options)
:style typography/get-style)
nested-text-elements]))))
[text-class options-with-style]
nested-text-elements))))
(defn text-input
[options text]
[text-input-class
(merge
{:underline-color-android :transparent
:placeholder-text-color colors/text-gray
:placeholder (i18n/label :t/type-a-message)
:value text}
(-> options
(update :style typography/get-style)
(update :style dissoc :line-height)))])
(defn i18n-text (defn i18n-text
[{:keys [style key]}] [{:keys [style key]}]
(let [default-style {:font-size 14}] [text {:style style} (i18n/label key)])
[text {:style (merge default-style style)} (i18n/label key)]))
(defn icon (defn icon
([n] (icon n styles/icon-default)) ([n] (icon n styles/icon-default))

View File

@ -23,9 +23,24 @@
"node_modules/google-breakpad" "node_modules/google-breakpad"
], ],
"desktopFonts": [ "desktopFonts": [
"../../../../../resources/fonts/Inter-UI-Bold.otf", "../../../../../resources/fonts/Inter-BlackItalic.otf",
"../../../../../resources/fonts/Inter-UI-Medium.otf", "../../../../../resources/fonts/Inter-Black.otf",
"../../../../../resources/fonts/Inter-UI-Regular.otf" "../../../../../resources/fonts/Inter-BoldItalic.otf",
"../../../../../resources/fonts/Inter-Bold.otf",
"../../../../../resources/fonts/Inter-ExtraBoldItalic.otf",
"../../../../../resources/fonts/Inter-ExtraBold.otf",
"../../../../../resources/fonts/Inter-ExtraLight-BETA.otf",
"../../../../../resources/fonts/Inter-ExtraLightItalic-BETA.otf",
"../../../../../resources/fonts/Inter-Italic.otf",
"../../../../../resources/fonts/Inter-Light-BETA.otf",
"../../../../../resources/fonts/Inter-LightItalic-BETA.otf",
"../../../../../resources/fonts/Inter-MediumItalic.otf",
"../../../../../resources/fonts/Inter-Medium.otf",
"../../../../../resources/fonts/Inter-Regular.otf",
"../../../../../resources/fonts/Inter-SemiBoldItalic.otf",
"../../../../../resources/fonts/Inter-SemiBold.otf",
"../../../../../resources/fonts/Inter-Thin-BETA.otf",
"../../../../../resources/fonts/Inter-ThinItalic-BETA.otf"
], ],
"dependencies": { "dependencies": {
"assert": "1.4.1", "assert": "1.4.1",

View File

@ -29,9 +29,6 @@
3E15DFEC1F6F4D7CAE088F49 /* libTcpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */; }; 3E15DFEC1F6F4D7CAE088F49 /* libTcpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */; };
475D202F20B7450D00879A77 /* libRNFirebase.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 475D1FC020B7413500879A77 /* libRNFirebase.a */; }; 475D202F20B7450D00879A77 /* libRNFirebase.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 475D1FC020B7413500879A77 /* libRNFirebase.a */; };
4C16DE0C1F89508700AA10DB /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */; }; 4C16DE0C1F89508700AA10DB /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */; };
55C386232185E83600B7A324 /* Inter-UI-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 55C386202185E83600B7A324 /* Inter-UI-Medium.otf */; };
55C386242185E83600B7A324 /* Inter-UI-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 55C386212185E83600B7A324 /* Inter-UI-Regular.otf */; };
55C386252185E83600B7A324 /* Inter-UI-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 55C386222185E83600B7A324 /* Inter-UI-Bold.otf */; };
74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; }; 74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
81C6E6AE0AA739BE9D87C1D0 /* libPods-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */; }; 81C6E6AE0AA739BE9D87C1D0 /* libPods-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
@ -57,6 +54,24 @@
CE4E31B31D8695250033ED64 /* Statusgo.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = CE4E31B21D8695250033ED64 /* Statusgo.framework */; }; CE4E31B31D8695250033ED64 /* Statusgo.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = CE4E31B21D8695250033ED64 /* Statusgo.framework */; };
E0AD9E8F495A4907B65104BF /* libRCTImageResizer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2BEE3436791D42248F853999 /* libRCTImageResizer.a */; }; E0AD9E8F495A4907B65104BF /* libRCTImageResizer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2BEE3436791D42248F853999 /* libRCTImageResizer.a */; };
FD4F213C3873473CB703B1D2 /* libRNFS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 674B3D9595A047AB8D518F4E /* libRNFS.a */; }; FD4F213C3873473CB703B1D2 /* libRNFS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 674B3D9595A047AB8D518F4E /* libRNFS.a */; };
D2356A41DAE14CB683EAEE59 /* Inter-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = 0BD3B115C8A64478B8577A90 /* Inter-Black.otf */; };
B190FBFB6A9B43EAAF396CD7 /* Inter-BlackItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 2006E199700F423E84885CD9 /* Inter-BlackItalic.otf */; };
D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */; };
D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B321D25F4493470980039457 /* Inter-BoldItalic.otf */; };
42B30EAD0EED4C72BB96D1AB /* Inter-ExtraBold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6B145D55D500476BB45C2232 /* Inter-ExtraBold.otf */; };
E5A39B2530D54142B8C03B94 /* Inter-ExtraBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1BF670316EE6470584BB715B /* Inter-ExtraBoldItalic.otf */; };
F0C362ACB0B24A2DB9AD29AC /* Inter-ExtraLight-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = 17787D310A644038B9357960 /* Inter-ExtraLight-BETA.otf */; };
DC3316E4BB514C6F80B60D84 /* Inter-ExtraLightItalic-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = EBCA9155761E4EBCB2EAFE9A /* Inter-ExtraLightItalic-BETA.otf */; };
393D26E3080B443A998F4A2F /* Inter-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */; };
54BD2CE922134B6291FE1BFD /* Inter-Light-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6864A92FD6844B928C52F5C1 /* Inter-Light-BETA.otf */; };
D29CD440D58B486FA2DE76C1 /* Inter-LightItalic-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = 03A16CE52D934E92A3DDCBA4 /* Inter-LightItalic-BETA.otf */; };
D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */; };
57C854A7993C47A3B1AECD32 /* Inter-MediumItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */; };
70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1426DF592BA248FC81D955CB /* Inter-Regular.otf */; };
3870E1E692E24133A80B07DE /* Inter-SemiBold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */; };
8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
5977C1355932428EBABA85A7 /* Inter-Thin-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = 0A89F8F23C9847FFABBB253A /* Inter-Thin-BETA.otf */; };
0C13D5C5E4EB4D518C95FCD0 /* Inter-ThinItalic-BETA.otf in Resources */ = {isa = PBXBuildFile; fileRef = 8077F6B47C6C491A9351E836 /* Inter-ThinItalic-BETA.otf */; };
/* End PBXBuildFile section */ /* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */ /* Begin PBXContainerItemProxy section */
@ -528,9 +543,6 @@
4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
4E586E1B0E544F64AA9F5BD1 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; }; 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
5535217F57E44D77AA9CF083 /* libRCTOrientation.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTOrientation.a; sourceTree = "<group>"; }; 5535217F57E44D77AA9CF083 /* libRCTOrientation.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTOrientation.a; sourceTree = "<group>"; };
55C386202185E83600B7A324 /* Inter-UI-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Medium.otf"; path = "fonts/Inter-UI-Medium.otf"; sourceTree = "<group>"; };
55C386212185E83600B7A324 /* Inter-UI-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Regular.otf"; path = "fonts/Inter-UI-Regular.otf"; sourceTree = "<group>"; };
55C386222185E83600B7A324 /* Inter-UI-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Bold.otf"; path = "fonts/Inter-UI-Bold.otf"; sourceTree = "<group>"; };
5E5A7625B76441D984EA8C0D /* RCTImageResizer.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTImageResizer.xcodeproj; path = "../node_modules/react-native-image-resizer/ios/RCTImageResizer.xcodeproj"; sourceTree = "<group>"; }; 5E5A7625B76441D984EA8C0D /* RCTImageResizer.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTImageResizer.xcodeproj; path = "../node_modules/react-native-image-resizer/ios/RCTImageResizer.xcodeproj"; sourceTree = "<group>"; };
674B3D9595A047AB8D518F4E /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = "<group>"; }; 674B3D9595A047AB8D518F4E /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = "<group>"; };
74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; }; 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
@ -575,6 +587,24 @@
F090E261B9854867A728CE4F /* RealmReact.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RealmReact.xcodeproj; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; }; F090E261B9854867A728CE4F /* RealmReact.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RealmReact.xcodeproj; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; };
F9238D6B1E5F055900C047B9 /* SF-UI-Text-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Semibold.otf"; sourceTree = "<group>"; }; F9238D6B1E5F055900C047B9 /* SF-UI-Text-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Semibold.otf"; sourceTree = "<group>"; };
FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
0BD3B115C8A64478B8577A90 /* Inter-Black.otf */ = {isa = PBXFileReference; name = "Inter-Black.otf"; path = "../resources/fonts/Inter-Black.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
2006E199700F423E84885CD9 /* Inter-BlackItalic.otf */ = {isa = PBXFileReference; name = "Inter-BlackItalic.otf"; path = "../resources/fonts/Inter-BlackItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */ = {isa = PBXFileReference; name = "Inter-Bold.otf"; path = "../resources/fonts/Inter-Bold.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
B321D25F4493470980039457 /* Inter-BoldItalic.otf */ = {isa = PBXFileReference; name = "Inter-BoldItalic.otf"; path = "../resources/fonts/Inter-BoldItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
6B145D55D500476BB45C2232 /* Inter-ExtraBold.otf */ = {isa = PBXFileReference; name = "Inter-ExtraBold.otf"; path = "../resources/fonts/Inter-ExtraBold.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
1BF670316EE6470584BB715B /* Inter-ExtraBoldItalic.otf */ = {isa = PBXFileReference; name = "Inter-ExtraBoldItalic.otf"; path = "../resources/fonts/Inter-ExtraBoldItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
17787D310A644038B9357960 /* Inter-ExtraLight-BETA.otf */ = {isa = PBXFileReference; name = "Inter-ExtraLight-BETA.otf"; path = "../resources/fonts/Inter-ExtraLight-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
EBCA9155761E4EBCB2EAFE9A /* Inter-ExtraLightItalic-BETA.otf */ = {isa = PBXFileReference; name = "Inter-ExtraLightItalic-BETA.otf"; path = "../resources/fonts/Inter-ExtraLightItalic-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */ = {isa = PBXFileReference; name = "Inter-Italic.otf"; path = "../resources/fonts/Inter-Italic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
6864A92FD6844B928C52F5C1 /* Inter-Light-BETA.otf */ = {isa = PBXFileReference; name = "Inter-Light-BETA.otf"; path = "../resources/fonts/Inter-Light-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
03A16CE52D934E92A3DDCBA4 /* Inter-LightItalic-BETA.otf */ = {isa = PBXFileReference; name = "Inter-LightItalic-BETA.otf"; path = "../resources/fonts/Inter-LightItalic-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */ = {isa = PBXFileReference; name = "Inter-Medium.otf"; path = "../resources/fonts/Inter-Medium.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */ = {isa = PBXFileReference; name = "Inter-MediumItalic.otf"; path = "../resources/fonts/Inter-MediumItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
1426DF592BA248FC81D955CB /* Inter-Regular.otf */ = {isa = PBXFileReference; name = "Inter-Regular.otf"; path = "../resources/fonts/Inter-Regular.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */ = {isa = PBXFileReference; name = "Inter-SemiBoldItalic.otf"; path = "../resources/fonts/Inter-SemiBoldItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
0A89F8F23C9847FFABBB253A /* Inter-Thin-BETA.otf */ = {isa = PBXFileReference; name = "Inter-Thin-BETA.otf"; path = "../resources/fonts/Inter-Thin-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
8077F6B47C6C491A9351E836 /* Inter-ThinItalic-BETA.otf */ = {isa = PBXFileReference; name = "Inter-ThinItalic-BETA.otf"; path = "../resources/fonts/Inter-ThinItalic-BETA.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */ /* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */ /* Begin PBXFrameworksBuildPhase section */
@ -752,13 +782,28 @@
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
B492460F2225D86900DE94D5 /* mapview */, B492460F2225D86900DE94D5 /* mapview */,
55C386222185E83600B7A324 /* Inter-UI-Bold.otf */,
55C386202185E83600B7A324 /* Inter-UI-Medium.otf */,
55C386212185E83600B7A324 /* Inter-UI-Regular.otf */,
983F07442119C9D2004133ED /* message.wav */, 983F07442119C9D2004133ED /* message.wav */,
2028E0111D4275BD00227DCD /* SF */, 2028E0111D4275BD00227DCD /* SF */,
B23B48FE1E76917B006D4535 /* RobotoMono-Medium.ttf */, B23B48FE1E76917B006D4535 /* RobotoMono-Medium.ttf */,
74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */, 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */,
0BD3B115C8A64478B8577A90 /* Inter-Black.otf */,
2006E199700F423E84885CD9 /* Inter-BlackItalic.otf */,
CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */,
B321D25F4493470980039457 /* Inter-BoldItalic.otf */,
6B145D55D500476BB45C2232 /* Inter-ExtraBold.otf */,
1BF670316EE6470584BB715B /* Inter-ExtraBoldItalic.otf */,
17787D310A644038B9357960 /* Inter-ExtraLight-BETA.otf */,
EBCA9155761E4EBCB2EAFE9A /* Inter-ExtraLightItalic-BETA.otf */,
B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */,
6864A92FD6844B928C52F5C1 /* Inter-Light-BETA.otf */,
03A16CE52D934E92A3DDCBA4 /* Inter-LightItalic-BETA.otf */,
B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */,
C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */,
1426DF592BA248FC81D955CB /* Inter-Regular.otf */,
693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */,
A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */,
0A89F8F23C9847FFABBB253A /* Inter-Thin-BETA.otf */,
8077F6B47C6C491A9351E836 /* Inter-ThinItalic-BETA.otf */,
); );
name = Resources; name = Resources;
sourceTree = "<group>"; sourceTree = "<group>";
@ -1691,13 +1736,28 @@
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
B49246102225D86900DE94D5 /* mapview in Resources */, B49246102225D86900DE94D5 /* mapview in Resources */,
55C386232185E83600B7A324 /* Inter-UI-Medium.otf in Resources */,
983F077E2119C9D2004133ED /* message.wav in Resources */, 983F077E2119C9D2004133ED /* message.wav in Resources */,
74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */, 74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
55C386252185E83600B7A324 /* Inter-UI-Bold.otf in Resources */,
55C386242185E83600B7A324 /* Inter-UI-Regular.otf in Resources */,
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */, B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
92A0DF7D1F4DE3A4002051BC /* GoogleService-Info.plist in Resources */, 92A0DF7D1F4DE3A4002051BC /* GoogleService-Info.plist in Resources */,
D2356A41DAE14CB683EAEE59 /* Inter-Black.otf in Resources */,
B190FBFB6A9B43EAAF396CD7 /* Inter-BlackItalic.otf in Resources */,
D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */,
D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
42B30EAD0EED4C72BB96D1AB /* Inter-ExtraBold.otf in Resources */,
E5A39B2530D54142B8C03B94 /* Inter-ExtraBoldItalic.otf in Resources */,
F0C362ACB0B24A2DB9AD29AC /* Inter-ExtraLight-BETA.otf in Resources */,
DC3316E4BB514C6F80B60D84 /* Inter-ExtraLightItalic-BETA.otf in Resources */,
393D26E3080B443A998F4A2F /* Inter-Italic.otf in Resources */,
54BD2CE922134B6291FE1BFD /* Inter-Light-BETA.otf in Resources */,
D29CD440D58B486FA2DE76C1 /* Inter-LightItalic-BETA.otf in Resources */,
D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */,
57C854A7993C47A3B1AECD32 /* Inter-MediumItalic.otf in Resources */,
70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */,
3870E1E692E24133A80B07DE /* Inter-SemiBold.otf in Resources */,
8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */,
5977C1355932428EBABA85A7 /* Inter-Thin-BETA.otf in Resources */,
0C13D5C5E4EB4D518C95FCD0 /* Inter-ThinItalic-BETA.otf in Resources */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };

View File

@ -98,9 +98,24 @@
<true/> <true/>
<key>UIAppFonts</key> <key>UIAppFonts</key>
<array> <array>
<string>Inter-UI-Bold.otf</string> <string>Inter-Bold.otf</string>
<string>Inter-UI-Medium.otf</string> <string>Inter-Medium.otf</string>
<string>Inter-UI-Regular.otf</string> <string>Inter-Regular.otf</string>
<string>Inter-Black.otf</string>
<string>Inter-BlackItalic.otf</string>
<string>Inter-BoldItalic.otf</string>
<string>Inter-ExtraBold.otf</string>
<string>Inter-ExtraBoldItalic.otf</string>
<string>Inter-ExtraLight-BETA.otf</string>
<string>Inter-ExtraLightItalic-BETA.otf</string>
<string>Inter-Italic.otf</string>
<string>Inter-Light-BETA.otf</string>
<string>Inter-LightItalic-BETA.otf</string>
<string>Inter-MediumItalic.otf</string>
<string>Inter-SemiBold.otf</string>
<string>Inter-SemiBoldItalic.otf</string>
<string>Inter-Thin-BETA.otf</string>
<string>Inter-ThinItalic-BETA.otf</string>
</array> </array>
<key>ITSEncryptionExportComplianceCode</key> <key>ITSEncryptionExportComplianceCode</key>
<string>1aa92c4d-6194-4d7d-b70a-16b48256b87e</string> <string>1aa92c4d-6194-4d7d-b70a-16b48256b87e</string>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -39,9 +39,9 @@ external_modules_dir=( \
) )
external_fonts=( \ external_fonts=( \
'../../../../../resources/fonts/Inter-UI-Bold.otf' \ '../../../../../resources/fonts/Inter-Bold.otf' \
'../../../../../resources/fonts/Inter-UI-Medium.otf' \ '../../../../../resources/fonts/Inter-Medium.otf' \
'../../../../../resources/fonts/Inter-UI-Regular.otf' \ '../../../../../resources/fonts/Inter-Regular.otf' \
) )
source "$SCRIPTPATH/lib/setup/path-support.sh" source "$SCRIPTPATH/lib/setup/path-support.sh"

View File

@ -9,7 +9,6 @@
[status-im.ui.components.react :as react] [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] [status-im.ui.components.colors :as colors]
[status-im.ui.components.chat-preview :as chat-preview]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.animation :as animation] [status-im.ui.components.animation :as animation]
[status-im.ui.components.svgimage :as svgimage] [status-im.ui.components.svgimage :as svgimage]
@ -39,8 +38,7 @@
[react/view transactions-styles/asset-main [react/view transactions-styles/asset-main
[react/image {:source (-> asset :icon :source) [react/image {:source (-> asset :icon :source)
:style transactions-styles/asset-icon}] :style transactions-styles/asset-icon}]
[react/text {:style transactions-styles/asset-symbol} [react/text (wallet.utils/display-symbol asset)]
(wallet.utils/display-symbol asset)]
[react/text {:style transactions-styles/asset-name} name]] [react/text {:style transactions-styles/asset-name} name]]
;;TODO(goranjovic) : temporarily disabled to fix https://github.com/status-im/status-react/issues/4963 ;;TODO(goranjovic) : temporarily disabled to fix https://github.com/status-im/status-react/issues/4963
;;until the resolution of https://github.com/status-im/status-react/issues/4972 ;;until the resolution of https://github.com/status-im/status-react/issues/4972
@ -54,7 +52,7 @@
[react/view transactions-styles/asset-main [react/view transactions-styles/asset-main
[react/image {:source (-> asset :icon :source) [react/image {:source (-> asset :icon :source)
:style transactions-styles/asset-icon}] :style transactions-styles/asset-icon}]
[react/text {:style transactions-styles/asset-symbol} name]] [react/text name]]
[react/text {:style {:font-size 16 [react/text {:style {:font-size 16
:color colors/gray :color colors/gray
:padding-right 14}} :padding-right 14}}
@ -84,7 +82,7 @@
(defn personal-send-request-short-preview (defn personal-send-request-short-preview
[label-key {:keys [content]}] [label-key {:keys [content]}]
(let [{:keys [amount coin]} (:params content)] (let [{:keys [amount coin]} (:params content)]
[chat-preview/text {} [react/text {:number-of-lines 1}
(i18n/label label-key {:amount (i18n/label-number amount) (i18n/label label-key {:amount (i18n/label-number amount)
:asset (wallet.utils/display-symbol coin)})])) :asset (wallet.utils/display-symbol coin)})]))
@ -120,7 +118,7 @@
:margin-left 20 :margin-left 20
:margin-right 20} :margin-right 20}
:source {:uri image_url}}] :source {:uri image_url}}]
[react/text {} name]]]) [react/text name]]])
collectible-tokens)]))) collectible-tokens)])))
(defview nft-token [{{:keys [name image_url]} :token}] (defview nft-token [{{:keys [name image_url]} :token}]
@ -129,7 +127,7 @@
[svgimage/svgimage {:style {:width 100 [svgimage/svgimage {:style {:width 100
:height 100} :height 100}
:source {:uri image_url}}] :source {:uri image_url}}]
[react/text {} name]]) [react/text name]])
;;TODO(goranjovic): currently we only allow tokens which are enabled in Manage assets here ;;TODO(goranjovic): currently we only allow tokens which are enabled in Manage assets here
;; because balances are only fetched for them. Revisit this decision with regard to battery/network consequences ;; because balances are only fetched for them. Revisit this decision with regard to battery/network consequences
@ -209,13 +207,11 @@
[react/view [react/view
[react/view transactions-styles/command-send-amount-row [react/view transactions-styles/command-send-amount-row
[react/view transactions-styles/command-send-amount [react/view transactions-styles/command-send-amount
[react/text {:style (transactions-styles/command-send-amount-text outgoing) [react/nested-text {:style (transactions-styles/command-send-amount-text outgoing)}
:font :medium}
amount amount
[react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} [{:style (transactions-styles/command-amount-currency-separator outgoing)}
"."] "."]
[react/text {:style (transactions-styles/command-send-currency-text outgoing) [{:style (transactions-styles/command-send-currency-text outgoing)}
:font :default}
(wallet.utils/display-symbol token)]]]] (wallet.utils/display-symbol token)]]]]
(when (and fiat-amount (when (and fiat-amount
platform/mobile? platform/mobile?
@ -409,13 +405,11 @@
[react/text {:style (transactions-styles/command-request-header-text outgoing)} [react/text {:style (transactions-styles/command-request-header-text outgoing)}
(i18n/label :transaction-request)]] (i18n/label :transaction-request)]]
[react/view transactions-styles/command-request-row [react/view transactions-styles/command-request-row
[react/text {:style (transactions-styles/command-request-amount-text outgoing) [react/nested-text {:style (transactions-styles/command-request-amount-text outgoing)}
:font :medium}
amount amount
[react/text {:style (transactions-styles/command-amount-currency-separator outgoing)} [{:style (transactions-styles/command-amount-currency-separator outgoing)}
"."] "."]
[react/text {:style (transactions-styles/command-request-currency-text outgoing) [{:style (transactions-styles/command-request-currency-text outgoing)}
:font :default}
asset]]] asset]]]
(when (and platform/mobile? (when (and platform/mobile?
;;NOTE(goranjovic) - have to hide cross network asset fiat value until we can support ;;NOTE(goranjovic) - have to hide cross network asset fiat value until we can support

View File

@ -19,9 +19,6 @@
:margin-left 14 :margin-left 14
:margin-right 12}) :margin-right 12})
(def asset-symbol
{:color colors/black})
(def asset-name (def asset-name
{:color colors/gray {:color colors/gray
:padding-left 4}) :padding-left 4})
@ -39,7 +36,8 @@
{:margin-top 6 {:margin-top 6
:flex-direction :row}) :flex-direction :row})
(defn command-send-status-icon [outgoing] (defn command-send-status-icon
[outgoing]
{:background-color (if outgoing {:background-color (if outgoing
colors/black-transparent colors/black-transparent
colors/blue-light) colors/blue-light)
@ -49,12 +47,14 @@
:padding-top 4 :padding-top 4
:padding-left 4}) :padding-left 4})
(defnstyle command-send-status-text [outgoing] (defn command-send-status-text
{:color (if outgoing colors/white-transparent colors/blue) [outgoing]
:android {:margin-top 3} {:typography :caption
:ios {:margin-top 4} :color (if outgoing
:margin-left 6 colors/white-transparent
:font-size 12}) colors/blue)
:margin-top 4
:margin-left 6})
(def command-send-message-view (def command-send-message-view
{:flex-direction :column {:flex-direction :column
@ -71,8 +71,10 @@
(defn command-send-amount-text (defn command-send-amount-text
[outgoing] [outgoing]
{:font-size 22 {:font-size 22
:color (if outgoing colors/white colors/blue)}) :line-height 28
:font-weight "600"
:color (if outgoing colors/white colors/blue)})
(def command-send-currency (def command-send-currency
{:flex-direction :column {:flex-direction :column
@ -101,13 +103,12 @@
:margin-top 6}) :margin-top 6})
(defn command-send-fiat-amount-text [outgoing] (defn command-send-fiat-amount-text [outgoing]
{:font-size 12 {:typography :caption
:color (if outgoing colors/white colors/black)}) :color (if outgoing colors/white colors/black)})
(def command-send-recipient-text (def command-send-recipient-text
{:color colors/blue {:color colors/blue
:font-size 14 :font-size 14})
:line-height 18})
(defn command-send-timestamp [outgoing] (defn command-send-timestamp [outgoing]
{:color (if outgoing colors/white-transparent colors/gray) {:color (if outgoing colors/white-transparent colors/gray)
@ -165,8 +166,7 @@
:padding-top 8}) :padding-top 8})
(defn command-request-button-text [answered?] (defn command-request-button-text [answered?]
{:font-size 15 {:color (if answered? colors/gray colors/blue)})
:color (if answered? colors/gray colors/blue)})
(def command-request-fiat-amount-row (def command-request-fiat-amount-row
{:margin-top 6}) {:margin-top 6})
@ -177,8 +177,7 @@
(def command-request-recipient-text (def command-request-recipient-text
{:color colors/blue {:color colors/blue
:font-size 14 :font-size 14})
:line-height 18})
(def command-request-network-text (def command-request-network-text
{:color colors/red}) {:color colors/red})

View File

@ -1,22 +0,0 @@
(ns status-im.chat.commands.styles.validation
(:require [status-im.ui.components.colors :as colors]))
(defn root [bottom]
{:flex-direction :column
:left 0
:right 0
:bottom bottom
:position :absolute})
(def message-container
{:background-color colors/red
:padding 16})
(def message-title
{:color colors/white
:font-size 12})
(def message-description
{:color colors/white
:font-size 12
:opacity 0.9})

View File

@ -420,7 +420,7 @@
(defn text [o & children] (defn text [o & children]
(if (map? o) (if (map? o)
(into [react/text o] (map wrap-text-child children)) (into [react/text o] (map wrap-text-child children))
(into [react/text {} o] (map wrap-text-child children)))) (into [react/text o] (map wrap-text-child children))))
(defn- wrap-view-child [child] (defn- wrap-view-child [child]
(if (vector? child) child [text {} child])) (if (vector? child) child [text {} child]))

View File

@ -33,9 +33,9 @@
(defnstyle tab-title [active?] (defnstyle tab-title [active?]
{:ios {:font-size 11} {:ios {:font-size 11}
:android {:font-size 12} :android {:font-size 11}
:desktop {:font-size 12 :desktop {:font-size 12
:font-weight (if active? "600" :normal)} :font-weight (if active? "600" "400")}
:text-align :center :text-align :center
:color (if active? :color (if active?
colors/blue colors/blue

View File

@ -39,10 +39,8 @@
(border position))) (border position)))
(def button-text (def button-text
{:font-weight :normal {:color colors/white
:color colors/white
:padding-horizontal 16 :padding-horizontal 16
:font-size 15
:padding-vertical 10}) :padding-vertical 10})
(defstyle button-text-disabled (defstyle button-text-disabled
@ -87,8 +85,7 @@
:align-items :center}) :align-items :center})
(def button-with-icon-text (def button-with-icon-text
{:color colors/blue {:color colors/blue})
:font-size 15})
(def button-with-icon-image-container (def button-with-icon-image-container
{:border-radius 50 {:border-radius 50

View File

@ -18,9 +18,7 @@
[react/text {:style (merge styles/button-text [react/text {:style (merge styles/button-text
text-style text-style
(when disabled? (when disabled?
{:opacity 0.4})) {:opacity 0.4}))}
:font (if platform/android? :medium :default)
:uppercase? true}
label] label]
icon]]) icon]])
@ -40,8 +38,7 @@
[react/touchable-highlight {:on-press on-press} [react/touchable-highlight {:on-press on-press}
[react/view (merge styles/button-with-icon-container style) [react/view (merge styles/button-with-icon-container style)
[react/view styles/button-with-icon-text-container [react/view styles/button-with-icon-text-container
[react/text {:style styles/button-with-icon-text [react/text {:style styles/button-with-icon-text}
:uppercase? true}
label]] label]]
[react/view {:style styles/button-with-icon-image-container [react/view {:style styles/button-with-icon-image-container
:accessibility-label accessibility-label} :accessibility-label accessibility-label}

View File

@ -43,8 +43,8 @@
(def default-chat-icon-text (def default-chat-icon-text
{:color colors/white {:color colors/white
:font-size 20 :font-size 20
:opacity 0.8 :font-weight "700"
:line-height 24}) :opacity 0.8})
(def message-status-icon-text (def message-status-icon-text
{:margin-top -2 {:margin-top -2

View File

@ -1,13 +0,0 @@
(ns status-im.ui.components.chat-preview
(:require [status-im.ui.components.react :as components]
[status-im.ui.screens.home.styles :as home.styles]
[status-im.utils.core :as utils]))
(def default-attributes
{:style home.styles/last-message-text
:number-of-lines 1})
(defn text [attributes s]
(-> default-attributes
(utils/deep-merge attributes)
(components/text s)))

View File

@ -34,12 +34,10 @@
[react/view [react/view
[react/view styles/form-title-container [react/view styles/form-title-container
[react/view styles/form-title-inner-container [react/view styles/form-title-inner-container
[react/text {:style styles/form-title [react/text {:style styles/form-title}
:font :medium}
label] label]
(when-not (nil? count-value) (when-not (nil? count-value)
[react/text {:style styles/form-title-count [react/text {:style styles/form-title-count}
:font :medium}
count-value])]] count-value])]]
[top-shadow]]) [top-shadow]])
@ -69,27 +67,23 @@
disabled? disabled?
on-press on-press
forward? forward?
back? back?]}]
uppercase?]
:or {uppercase? true}}]
[react/touchable-highlight {:on-press on-press :disabled disabled?} [react/touchable-highlight {:on-press on-press :disabled disabled?}
[react/view (styles/bottom-button disabled?) [react/view (styles/bottom-button disabled?)
(when back? (when back?
[vector-icons/icon :main-icons/back {:color colors/blue [vector-icons/icon :main-icons/back {:color colors/blue
:container-style {:align-self :baseline}}]) :container-style {:align-self :baseline}}])
[react/text {:style styles/bottom-button-label [react/text {:style styles/bottom-button-label
:accessibility-label accessibility-label :accessibility-label accessibility-label}
:uppercase? uppercase?}
(or label (i18n/label :t/next))] (or label (i18n/label :t/next))]
(when forward? (when forward?
[vector-icons/icon :main-icons/next {:color colors/blue}])]]) [vector-icons/icon :main-icons/next {:color colors/blue}])]])
(defn button [{:keys [on-press label background? uppercase? button-style label-style disabled?] :or {background? true uppercase? true disabled false}}] (defn button [{:keys [on-press label background? button-style label-style disabled?] :or {background? true disabled false}}]
[react/touchable-highlight {:style (styles/button button-style background? disabled?) [react/touchable-highlight {:style (styles/button button-style background? disabled?)
:on-press on-press :on-press on-press
:disabled disabled?} :disabled disabled?}
[react/text {:uppercase? uppercase? [react/text {:style (merge styles/button-label label-style)}
:style (merge styles/button-label label-style)}
label]]) label]])
(defn red-button [props] (defn red-button [props]
@ -103,8 +97,7 @@
([{:keys [size accessibility-label] :or {size 18}} value] ([{:keys [size accessibility-label] :or {size 18}} value]
(let [more-than-9 (> value 9)] (let [more-than-9 (> value 9)]
[react/view {:style (styles/counter-container size)} [react/view {:style (styles/counter-container size)}
[react/text (cond-> {:style (styles/counter-label size) [react/text (cond-> {:style (styles/counter-label size)}
:font :toolbar-title}
accessibility-label accessibility-label
(assoc :accessibility-label accessibility-label)) (assoc :accessibility-label accessibility-label))
(if more-than-9 (i18n/label :t/counter-9-plus) value)]]))) (if more-than-9 (i18n/label :t/counter-9-plus) value)]])))

View File

@ -88,8 +88,7 @@
:justify-content :center}) :justify-content :center})
(def label-action-text (def label-action-text
{:color colors/blue {:color colors/blue})
:font-size 15})
(defn logo-container [size] (defn logo-container [size]
{:width size {:width size
@ -110,8 +109,7 @@
:opacity (if disabled? 0.4 1)}) :opacity (if disabled? 0.4 1)})
(def bottom-button-label (def bottom-button-label
{:font-size 15 {:color colors/blue})
:color colors/blue})
(defn button [style background? disabled?] (defn button [style background? disabled?]
(merge (merge
@ -125,8 +123,7 @@
style)) style))
(def button-label (def button-label
{:font-size 15 {:text-align :center
:text-align :center
:color colors/blue}) :color colors/blue})
(defn counter-container [size] (defn counter-container [size]
@ -137,10 +134,9 @@
:align-items :center :align-items :center
:justify-content :center}) :justify-content :center})
(defnstyle counter-label [size] (defn counter-label [size]
{:font-size (/ size 2) {:font-size (/ size 2)
:color colors/white :color colors/white
:android {:line-height (+ (/ size 2) 2)}
:text-align :center}) :text-align :center})
(def image-contain (def image-contain

View File

@ -105,15 +105,15 @@
[react/activity-indicator {:animated true [react/activity-indicator {:animated true
:color colors/white :color colors/white
:margin-right 6}]) :margin-right 6}])
[react/text {:style styles/text (if (= message :mobile-network)
:on-press on-press-fn} [react/nested-text {:style styles/text
(if (= message :mobile-network) :on-press on-press-fn}
[react/text {} (i18n/label :t/waiting-for-wifi) " "
(i18n/label :t/waiting-for-wifi) " " [{:style {:text-decoration-line :underline}}
[react/text (i18n/label :t/waiting-for-wifi-change)]]
{:style {:text-decoration-line :underline}} [react/text {:style styles/text
(i18n/label :t/waiting-for-wifi-change)]] :on-press on-press-fn}
(i18n/label message))]]))}))) (i18n/label message)])]))})))
(defview connectivity-view [] (defview connectivity-view []
(letsubs [status-properties [:connectivity/status-properties] (letsubs [status-properties [:connectivity/status-properties]

View File

@ -18,7 +18,7 @@
[react/touchable-highlight [react/touchable-highlight
{:on-press action} {:on-press action}
[react/view {} [react/view {}
[react/text {} label]]]))]) [react/text label]]]))])
(defn contact-view (defn contact-view
[{:keys [style contact extended? on-press extend-options extend-title [{:keys [style contact extended? on-press extend-options extend-title

View File

@ -38,8 +38,7 @@
(def sticky-button-label-style (def sticky-button-label-style
{:color colors/white {:color colors/white
:font-size 17 :font-size 17})
:line-height 20})
(defn sticky-button [label on-press] (defn sticky-button [label on-press]
[react/touchable-highlight {:on-press on-press} [react/touchable-highlight {:on-press on-press}
@ -49,9 +48,8 @@
(defn button-label-style (defn button-label-style
[enabled?] [enabled?]
{:color colors/blue {:color colors/blue
:font-size 15 :opacity (if enabled? 1 0.3)})
:opacity (if enabled? 1 0.3)})
(defn button [label enabled? on-press] (defn button [label enabled? on-press]
[react/touchable-highlight {:on-press on-press :disabled (not enabled?)} [react/touchable-highlight {:on-press on-press :disabled (not enabled?)}
@ -66,9 +64,7 @@
label]]]) label]]])
(def text-button-label-style (def text-button-label-style
{:color colors/white {:color colors/white})
:height 23
:font-size 15})
(defn text-button [label on-press] (defn text-button [label on-press]
[react/touchable-highlight {:on-press on-press} [react/touchable-highlight {:on-press on-press}
@ -81,4 +77,4 @@
[react/touchable-highlight {:on-press on-press} [react/touchable-highlight {:on-press on-press}
[react/view {:style {:flex-direction :row :align-items :center}} [react/view {:style {:flex-direction :row :align-items :center}}
[icons/icon :main-icons/back {:color :white}] [icons/icon :main-icons/back {:color :white}]
[react/text {:style {:margin-left 16 :font-size 15 :color :white}} "Back"]]]]) [react/text {:style {:margin-left 16 :color colors/white}} "Back"]]]])

View File

@ -19,8 +19,7 @@
:justify-content :center}) :justify-content :center})
(def primary-text-base (def primary-text-base
{:font-size 16 {:font-size 16})
:color colors/black})
(def primary-text (def primary-text
primary-text-base) primary-text-base)
@ -100,11 +99,10 @@
(defn settings-item-text (defn settings-item-text
[color] [color]
{:flex 1 {:typography :title
:flex-wrap :nowrap :flex 1
:line-height 20 :flex-wrap :nowrap
:font-size 17 :color color})
:color color})
(def settings-item-text-container (def settings-item-text-container
{:flex 1 {:flex 1
@ -116,24 +114,14 @@
:height 18 :height 18
:align-items :center}) :align-items :center})
(defn settings-item-text-new
[color]
(assoc (settings-item-text color)
:font-weight "500"
:line-height 22
:font-size 15))
(def settings-item-subtext (def settings-item-subtext
{:line-height 22 {:margin-top 2
:font-size 15
:margin-top 2
:color colors/gray}) :color colors/gray})
(def settings-item-value (def settings-item-value
{:flex-wrap :nowrap {:flex-wrap :nowrap
:text-align :right :text-align :right
:padding-right 10 :padding-right 10
:font-size 15
:color colors/gray}) :color colors/gray})
(def new-label (def new-label
@ -149,7 +137,7 @@
:margin-left 6 :margin-left 6
:margin-right 4 :margin-right 4
:font-size 11 :font-size 11
:font-weight :bold}) :font-weight "700"})
(def base-separator (def base-separator
{:height 1 {:height 1

View File

@ -136,7 +136,7 @@
[react/view {:style styles/new-label} [react/view {:style styles/new-label}
[react/text {:style styles/new-label-text} [react/text {:style styles/new-label-text}
(string/upper-case (i18n/label :t/new))]]) (string/upper-case (i18n/label :t/new))]])
[react/text {:style (styles/settings-item-text-new text-color)} [react/text {:style (styles/settings-item-text text-color)}
text]] text]]
[react/view {:style {:margin-top 2 [react/view {:style {:margin-top 2
:justify-content :flex-start}} :justify-content :flex-start}}
@ -148,8 +148,7 @@
text]) text])
(when accessory-value (when accessory-value
[react/text {:style styles/settings-item-value [react/text {:style styles/settings-item-value
:number-of-lines 1 :number-of-lines 1}
:uppercase? true}
(str accessory-value)]) (str accessory-value)])
(when-not hide-chevron? (when-not hide-chevron?
[vector-icons/icon :main-icons/next {:color (colors/alpha colors/gray 0.4)}])]]) [vector-icons/icon :main-icons/next {:color (colors/alpha colors/gray 0.4)}])]])

View File

@ -9,22 +9,17 @@
:background-color :white}) :background-color :white})
(defn title [small? subtitle] (defn title [small? subtitle]
(cond-> (if small? (merge (when-not small?
{:line-height 22 :font-size 15} {:font-size 17})
{:line-height 20 :font-size 17}) (when subtitle
subtitle {:font-weight "500"})))
(assoc :font-weight "500" :font-size 15)))
(def subtitle (def subtitle
{:margin-top 4 {:margin-top 4
:line-height 22
:font-size 15
:color colors/gray}) :color colors/gray})
(def accessory-text (def accessory-text
{:line-height 22 {:color colors/gray
:font-size 15
:color colors/gray
:margin-right 8}) :margin-right 8})
(defn radius [size] (/ size 2)) (defn radius [size] (/ size 2))
@ -32,4 +27,4 @@
(defn photo [size] (defn photo [size]
{:border-radius (radius size) {:border-radius (radius size)
:width size :width size
:height size}) :height size})

View File

@ -44,9 +44,7 @@
:margin-bottom 3}) :margin-bottom 3})
(defn item-title [color] (defn item-title [color]
(merge common-styles/text-main-medium {:color (get-color color)})
{:color (get-color color)}))
(def item-details (def item-details
(merge common-styles/text-main {:color colors/gray})
{:color colors/gray}))

View File

@ -26,8 +26,7 @@
:android {:margin-left 15}}) :android {:margin-left 15}})
(def name-text (def name-text
{:color colors/black {:font-size 17})
:font-size 17})
(def address-text (def address-text
{:color colors/white {:color colors/white
@ -48,22 +47,15 @@
{:flex-grow 1 {:flex-grow 1
:align-items :center}) :align-items :center})
(def hash-value-type
{:color colors/black
:padding-bottom 5})
(def hash-value-text (def hash-value-text
{:color colors/black {:align-self :stretch
:align-self :stretch
:border-color colors/gray-light :border-color colors/gray-light
:border-width 1 :border-width 1
:margin-horizontal 16 :margin-horizontal 16
:padding-horizontal 8 :padding-horizontal 8
:padding-vertical 6 :padding-vertical 6
:border-radius 8 :border-radius 8
:text-align :center :text-align :center})
:font-size 15
:line-height 20})
(def done-button-text (def done-button-text
{:color colors/white}) {:color colors/white})

View File

@ -20,14 +20,3 @@
(def icon-default (def icon-default
{:width 24 {:width 24
:height 24}) :height 24})
(def text-title-bold
{:font-size 17
:font-weight "700"})
(def text-main
{:font-size 15})
(def text-main-medium
{:font-size 15
:font-weight "500"})

View File

@ -4,8 +4,7 @@
[status-im.utils.platform :as p])) [status-im.utils.platform :as p]))
(def label (def label
{:font-size 14 {:font-size 14})
:color colors/black})
(defn input-container [height] (defn input-container [height]
{:padding 16 {:padding 16
@ -16,10 +15,8 @@
:background-color colors/gray-lighter}) :background-color colors/gray-lighter})
(defstyle input (defstyle input
{:font-size 15 {:padding 0
:color colors/black :desktop {:height 52}})
:padding 0
:desktop {:height 52}})
(defn error [label?] (defn error [label?]
{:bottom-value (if label? -20 0) {:bottom-value (if label? -20 0)

View File

@ -18,10 +18,8 @@
:margin-left 6}) :margin-left 6})
(def toolbar-title-text (def toolbar-title-text
{:color colors/black {:typography :title-bold
:font-size 17 :text-align :center})
:font-weight :bold
:text-align :center})
(defn toolbar-actions-container [actions-count custom] (defn toolbar-actions-container [actions-count custom]
(merge {:flex-direction :row} (merge {:flex-direction :row}
@ -40,16 +38,16 @@
:height 24}) :height 24})
(def item-text (def item-text
{:color colors/blue {:color colors/blue})
:font-size 15})
(defstyle item-text-action (defstyle item-text-action
{:color colors/blue {:color colors/blue})
:font-size 15})
(def toolbar-text-action-disabled {:color colors/gray}) (def toolbar-text-action-disabled
{:color colors/gray})
(def item-text-white-background {:color colors/blue}) (def item-text-white-background
{:color colors/blue})
(def icon-add (def icon-add
{:width 24 {:width 24

View File

@ -62,7 +62,6 @@
([title-style title subtitle-style subtitle additional-text-props] ([title-style title subtitle-style subtitle additional-text-props]
[react/view {:style styles/toolbar-title-container} [react/view {:style styles/toolbar-title-container}
[react/text (merge {:style (merge styles/toolbar-title-text title-style) [react/text (merge {:style (merge styles/toolbar-title-text title-style)
:font :toolbar-title
:numberOfLines 1 :numberOfLines 1
:ellipsizeMode :tail} :ellipsizeMode :tail}
additional-text-props) title] additional-text-props) title]

View File

@ -46,8 +46,7 @@
:font-size font-size}) :font-size font-size})
(def bottom-tooltip-text (def bottom-tooltip-text
{:color colors/white {:color colors/white})
:font-size 15})
(def tooltip-triangle (def tooltip-triangle
{:width 16 {:width 16
@ -55,4 +54,4 @@
(def close-icon (def close-icon
{:margin-right 4 {:margin-right 4
:margin-left 10}) :margin-left 10})

View File

@ -0,0 +1,82 @@
(ns status-im.ui.components.typography
(:require [status-im.utils.platform :as platform]
[status-im.ui.components.colors :as colors]))
(def default-font-family "Inter")
(def default-style
{:color colors/black
:font-weight "400"
:font-size 15})
(defn get-line-height
[font-size]
(get {10 14
11 15
12 16
13 17
14 19
15 21
16 22
17 23
18 23
19 24
20 26
21 27
22 28
23 30
24 31
25 32
26 34
27 35
28 35
29 36
30 37
31 38
32 40
33 41
34 42
40 50}
font-size))
(def typography-styles
{:header {:font-weight "700"
:font-size 22}
:title-bold {:font-weight "700"
:font-size 17}
:title {:font-size 17}
:main-semibold {:font-weight "600"}
:main-medium {:font-weight "500"}
:caption {:font-size 12}
:timestamp {:font-size 10
:letter-spacing 1
:text-transform :uppercase}})
(defn get-style
[{:keys [typography] :as style}]
{:pre [(or (nil? typography) (contains? typography-styles typography))]}
(let [{:keys [font-weight font-style font-size line-height]
:or {line-height (get-line-height font-size)}
:as style}
(merge default-style
(get typography-styles
typography)
(dissoc style :typography))]
(assoc style
:font-family (if platform/desktop?
default-font-family
(str default-font-family "-"
(case font-weight
"400" (when-not (= font-style :italic)
"Regular")
"500" "Medium"
"600" "SemiBold"
"700" "Bold")
(when (= font-style :italic)
"Italic")))
:line-height line-height)))

View File

@ -7,8 +7,7 @@
:padding-horizontal 16}) :padding-horizontal 16})
(def peer-text (def peer-text
{:font-size 10 {:font-size 10})
:color colors/black})
(def about-title (def about-title
{:background-color colors/white {:background-color colors/white
@ -17,5 +16,4 @@
:padding-horizontal 16}) :padding-horizontal 16})
(def about-title-text (def about-title-text
{:font-size 20 {:font-size 20})
:color colors/black})

View File

@ -16,9 +16,7 @@
(def account-creating-text (def account-creating-text
{:font-size 14 {:font-size 14
:line-height 21
:text-align :center :text-align :center
:color colors/black
:margin-top 16}) :margin-top 16})
(def logo-container (def logo-container
@ -35,8 +33,7 @@
(def input-description (def input-description
{:font-size 14 {:font-size 14
:color colors/gray :color colors/gray})
:line-height 21})
(def bottom-container (def bottom-container
{:flex-direction :row {:flex-direction :row

View File

@ -16,9 +16,8 @@
:justify-content :center}) :justify-content :center})
(def sign-you-in (def sign-you-in
{:margin-top 16 {:margin-top 16
:font-size 13 :font-size 13})
:color colors/black})
(def bottom-button-container (def bottom-button-container
{:flex-direction :row {:flex-direction :row
@ -32,9 +31,7 @@
(def login-badge-image-size 56) (def login-badge-image-size 56)
(def login-badge-name (def login-badge-name
{:font-size 15 {:margin-top 8})
:color colors/black
:margin-top 8})
(def password-container (def password-container
{:margin-top 24 {:margin-top 24

View File

@ -24,8 +24,7 @@
(def sign-you-in (def sign-you-in
{:margin-top 16 {:margin-top 16
:font-size 13 :font-size 13})
:color colors/black})
(def recover-release-warning (def recover-release-warning
{:margin-top 16 {:margin-top 16

View File

@ -39,8 +39,7 @@
:flex-shrink 1}) :flex-shrink 1})
(def account-badge-text (def account-badge-text
{:font-size 17 {:font-size 17})
:color colors/black})
(def account-badge-pub-key-text (def account-badge-pub-key-text
{:font-size 14 {:font-size 14

View File

@ -4,8 +4,7 @@
(def group-chat-name-input (def group-chat-name-input
{:font-size 17 {:font-size 17
:padding-bottom 0 :padding-bottom 0})
:color colors/black})
(def topic-hash (def topic-hash
(merge group-chat-name-input (merge group-chat-name-input
@ -36,8 +35,9 @@
:justify-content :center}) :justify-content :center})
(def public-chat-icon-symbol (def public-chat-icon-symbol
{:font-size 20 {:font-size 20
:color colors/white}) :text-transform :uppercase
:color colors/white})
(def input-container (def input-container
{:padding 0 {:padding 0

View File

@ -39,8 +39,7 @@
(defn- public-chat-icon [topic] (defn- public-chat-icon [topic]
[react/view styles/public-chat-icon [react/view styles/public-chat-icon
[react/text {:uppercase? true [react/text {:style styles/public-chat-icon-symbol}
:style styles/public-chat-icon-symbol}
(first topic)]]) (first topic)]])
(defn- render-topic [topic] (defn- render-topic [topic]
@ -66,13 +65,11 @@
[toolbar/simple-toolbar [toolbar/simple-toolbar
(i18n/label :t/public-chat)] (i18n/label :t/public-chat)]
[react/view styles/chat-name-container [react/view styles/chat-name-container
[react/text {:style styles/section-title [react/text {:style styles/section-title}
:font :medium}
(i18n/label :t/public-group-topic)] (i18n/label :t/public-group-topic)]
[chat-name-input topic error]] [chat-name-input topic error]]
[react/view styles/chat-name-container [react/view styles/chat-name-container
[react/text {:style styles/section-title [react/text {:style styles/section-title}
:font :medium}
(i18n/label :t/selected)]] (i18n/label :t/selected)]]
[list/flat-list {:data default-public-chats [list/flat-list {:data default-public-chats
:key-fn identity :key-fn identity

View File

@ -35,7 +35,6 @@
(defstyle input (defstyle input
{:flex 1 {:flex 1
:font-size 15
:padding-horizontal 14 :padding-horizontal 14
:desktop {:height 30 :desktop {:height 30
:width "100%"} :width "100%"}

View File

@ -12,9 +12,8 @@
:margin-top 15}) :margin-top 15})
(defstyle input (defstyle input
{:flex 1 {:flex 1
:font-size 15 :android {:padding 0}})
:android {:padding 0}})
(def qr-code (def qr-code
{:margin-right 14}) {:margin-right 14})

View File

@ -19,8 +19,7 @@
[react/view styles/button-container [react/view styles/button-container
[react/view {:style styles/delete-button [react/view {:style styles/delete-button
:accessibility-label :bootnode-delete-button} :accessibility-label :bootnode-delete-button}
[react/text {:style styles/button-label [react/text {:style styles/button-label}
:uppercase? true}
(i18n/label :t/delete)]]]]) (i18n/label :t/delete)]]]])
(def qr-code (def qr-code

View File

@ -18,9 +18,7 @@
:android {:height 56}}) :android {:height 56}})
(def bootnode-item-name-text (def bootnode-item-name-text
{:color colors/black {:font-size 17})
:font-size 17
:line-height 20})
(defstyle switch-container (defstyle switch-container
{:height 50 {:height 50

View File

@ -15,8 +15,7 @@
(defstyle input (defstyle input
{:flex 1 {:flex 1
:font-size 15
:padding-horizontal 14 :padding-horizontal 14
:desktop {:height 30 :desktop {:height 30
:width "100%"} :width "100%"}
:android {:padding 0}}) :android {:padding 0}})

View File

@ -30,26 +30,37 @@
[react/view {:style {:padding-top 11 :padding-horizontal 16 :padding-bottom 7 :flex-direction :row}} [react/view {:style {:padding-top 11 :padding-horizontal 16 :padding-bottom 7 :flex-direction :row}}
[chat-icon/contact-icon-contacts-tab dapp] [chat-icon/contact-icon-contacts-tab dapp]
[react/view {:padding-left 16 :padding-right 2 :flex 1} [react/view {:padding-left 16 :padding-right 2 :flex 1}
[react/text {:style {:font-size 15 :line-height 22 :font-weight "500"}} name] [react/text {:style {:typography :main-medium}} name]
[react/text {:flex 1} [react/text {:flex 1}
[react/text {:style {:font-size 13 :color "#939BA1" :line-height 18 [react/text {:style {:font-size 13
:margin-top 5 :margin-bottom 2}} :color "#939BA1"
:margin-top 5
:margin-bottom 2}}
description]] description]]
[react/text {:style {:font-size 12 :color "#4360DF"}} (str dapp-url " ->")]]]])) [react/text {:style {:font-size 12
:color "#4360DF"}}
(str dapp-url " ->")]]]]))
(defn list-header [empty?] (defn list-header [empty?]
[react/view (when empty? {:flex 1}) [react/view (when empty? {:flex 1})
[react/view {:margin 16 :border-color colors/gray-lighter [react/view {:margin 16
:border-width 1 :border-radius 12 :padding-vertical 16 :padding-horizontal 44 :border-color colors/gray-lighter
:align-items :center} :border-width 1
:border-radius 12
:padding-vertical 16
:padding-horizontal 44
:align-items :center}
[components.common/image-contain {:container-style {}} {:image (:dapp-store resources/ui) :width 768 :height 333}] [components.common/image-contain {:container-style {}} {:image (:dapp-store resources/ui) :width 768 :height 333}]
[react/text {:style {:margin-top 12 :font-size 15 :font-weight "500" :line-height 22}} "Open the ÐApp Store"] [react/text {:style {:typography :main-medium
[react/text {:style {:color colors/blue :font-size 13 :line-height 22}} "https://discover.dapps.eth ->"]] :margin-top 12}}
"Open the ÐApp Store"]
[react/text {:style {:color colors/blue
:font-size 13}} "https://discover.dapps.eth ->"]]
(if empty? (if empty?
[react/view {:flex 1 :align-items :center :justify-content :center} [react/view {:flex 1 :align-items :center :justify-content :center}
[react/text {:style {:color colors/gray :font-size 15}} "Browsed websites will appear here."]] [react/text {:style {:color colors/gray}} "Browsed websites will appear here."]]
[react/view {:margin-top 14 :margin-left 16 :margin-bottom 4} [react/view {:margin-top 14 :margin-left 16 :margin-bottom 4}
[react/text {:style {:line-height 22 :font-size 15 :color colors/gray}} (i18n/label :t/recent)]])]) [react/text {:style {:color colors/gray}} (i18n/label :t/recent)]])])
(views/defview open-dapp [] (views/defview open-dapp []
(views/letsubs [browsers [:browser/browsers-vals] (views/letsubs [browsers [:browser/browsers-vals]
@ -88,4 +99,4 @@
:align-self :stretch}}] :align-self :stretch}}]
:key-fn :browser-id :key-fn :browser-id
:end-fill-color colors/white :end-fill-color colors/white
:render-fn list-item}])])) :render-fn list-item}])]))

View File

@ -14,18 +14,13 @@
:align-items :center}) :align-items :center})
(def title-text (def title-text
{:color colors/black {:typography :title-bold
:font-size 17
:font-weight :bold
:margin-top 26 :margin-top 26
:margin-bottom 10 :margin-bottom 10
:line-height 20
:text-align :center}) :text-align :center})
(def description-text (def description-text
{:color colors/gray {:color colors/gray
:font-size 15
:line-height 22
:text-align :center}) :text-align :center})
(def chat-link-text (def chat-link-text

View File

@ -11,8 +11,7 @@
:android {:padding-bottom 6}}) :android {:padding-bottom 6}})
(def dapp-name-text (def dapp-name-text
{:color colors/black {:font-size 16})
:font-size 16})
(defstyle dapp-text (defstyle dapp-text
{:color colors/gray {:color colors/gray
@ -66,25 +65,16 @@
(defstyle url-input (defstyle url-input
{:flex 1 {:flex 1
:font-size 15
:line-height 22
:text-align-vertical :center :text-align-vertical :center
:android {:margin 0 :margin 0
:padding 0 :padding 0
:margin-left 6} :margin-left 6})
:ios {:margin-top -6
:min-height 26
:margin-left 6}})
(def url-text-container (def url-text-container
{:justify-content :center {:justify-content :center
:flex 1 :flex 1
:margin-horizontal 5}) :margin-horizontal 5})
(def url-text
{:font-size 15
:line-height 22})
(def dot (def dot
{:height 4 {:height 4
:width 4 :width 4
@ -150,17 +140,13 @@
:justify-content :center}) :justify-content :center})
(def permissions-panel-title-label (def permissions-panel-title-label
{:margin-horizontal 20 {:typography :header
:font-size 22 :margin-horizontal 20
:line-height 28
:text-align :center :text-align :center
:margin-top 19 :margin-top 19})
:font-weight :bold})
(def permissions-panel-description-label (def permissions-panel-description-label
{:margin-horizontal 20 {:margin-horizontal 20
:color colors/gray :color colors/gray
:font-size 15
:line-height 22
:text-align :center :text-align :center
:margin-top 9}) :margin-top 9})

View File

@ -49,7 +49,7 @@
:style styles/url-input}] :style styles/url-input}]
[react/touchable-highlight {:style styles/url-text-container [react/touchable-highlight {:style styles/url-text-container
:on-press #(re-frame/dispatch [:browser.ui/url-input-pressed])} :on-press #(re-frame/dispatch [:browser.ui/url-input-pressed])}
[react/text {:style styles/url-text} (http/url-host url-original)]])])) [react/text (http/url-host url-original)]])]))
(defn toolbar [error? url url-original browser browser-id url-editing?] (defn toolbar [error? url url-original browser browser-id url-editing?]
[toolbar.view/toolbar [toolbar.view/toolbar
@ -183,4 +183,4 @@
:show-tooltip show-tooltip :show-tooltip show-tooltip
:opt-in? opt-in? :opt-in? opt-in?
:rpc-url rpc-url :rpc-url rpc-url
:name name}]]))) :name name}]])))

View File

@ -10,8 +10,7 @@
[react/touchable-highlight (cond-> {:on-press on-press} [react/touchable-highlight (cond-> {:on-press on-press}
accessibility-label (assoc :accessibility-label accessibility-label)) accessibility-label (assoc :accessibility-label accessibility-label))
[react/view style/item-suggestion-container [react/view style/item-suggestion-container
[react/text {:style style/item-suggestion-name} [react/text name]
name]
[react/text {:style style/item-suggestion-description [react/text {:style style/item-suggestion-description
:number-of-lines 2} :number-of-lines 2}
description]]]) description]]])

View File

@ -47,13 +47,15 @@
(commands/generate-preview command (commands/add-chat-contacts contacts command-message)) (commands/generate-preview command (commands/add-chat-contacts contacts command-message))
[react/text (str "Unhandled command: " (-> command-message :content :command-path first))]))))) [react/text (str "Unhandled command: " (-> command-message :content :command-path first))])))))
(defview message-timestamp [t justify-timestamp? outgoing command? content content-type] (defview message-timestamp
[t justify-timestamp? outgoing command? content content-type]
(when-not command? (when-not command?
[react/text {:style (style/message-timestamp-text [react/text {:style (style/message-timestamp-text
justify-timestamp? justify-timestamp?
outgoing outgoing
(:rtl? content) (:rtl? content)
(= content-type constants/content-type-emoji))} t])) (= content-type constants/content-type-emoji))}
t]))
(defn message-view (defn message-view
[{:keys [timestamp-str outgoing content content-type] :as message} message-content {:keys [justify-timestamp?]}] [{:keys [timestamp-str outgoing content content-type] :as message} message-content {:keys [justify-timestamp?]}]
@ -63,13 +65,6 @@
(get content :command-ref)) (get content :command-ref))
content content-type]]) content content-type]])
(defn timestamp-with-padding
"We can't use CSS as nested Text element don't accept margins nor padding
so we pad the invisible placeholder with some spaces to avoid having too
close to the text"
[t]
(str " " t))
(defview quoted-message [{:keys [from text]} outgoing current-public-key] (defview quoted-message [{:keys [from text]} outgoing current-public-key]
(letsubs [username [:contacts/contact-name-by-identity from]] (letsubs [username [:contacts/contact-name-by-identity from]]
[react/view {:style (style/quoted-message-container outgoing)} [react/view {:style (style/quoted-message-container outgoing)}
@ -83,8 +78,7 @@
(defview message-content-status [{:keys [content]}] (defview message-content-status [{:keys [content]}]
[react/view style/status-container [react/view style/status-container
[react/text {:style style/status-text [react/text {:style style/status-text}
:font :default}
(:text content)]]) (:text content)]])
(defn expand-button [expanded? chat-id message-id] (defn expand-button [expanded? chat-id message-id]
@ -99,14 +93,17 @@
[react/view [react/view
(when (:response-to content) (when (:response-to content)
[quoted-message (:response-to content) outgoing current-public-key]) [quoted-message (:response-to content) outgoing current-public-key])
[react/text (cond-> {:style (style/text-message collapsible? outgoing)} (apply react/nested-text
(and collapsible? (not expanded?)) (cond-> {:style (style/text-message collapsible? outgoing)
(assoc :number-of-lines constants/lines-collapse-threshold)) :text-break-strategy :balanced}
(if-let [render-recipe (:render-recipe content)] (and collapsible? (not expanded?))
(chat.utils/render-chunks render-recipe message) (assoc :number-of-lines constants/lines-collapse-threshold))
(:text content)) (conj (if-let [render-recipe (:render-recipe content)]
[react/text {:style (style/message-timestamp-placeholder-text outgoing)} (chat.utils/render-chunks render-recipe message)
(timestamp-with-padding timestamp-str)]] [(:text content)])
[{:style (style/message-timestamp-placeholder outgoing)}
(str " " timestamp-str)]))
(when collapsible? (when collapsible?
[expand-button expanded? chat-id message-id])]) [expand-button expanded? chat-id message-id])])
{:justify-timestamp? true}]) {:justify-timestamp? true}])
@ -114,7 +111,8 @@
(defn emoji-message (defn emoji-message
[{:keys [content] :as message}] [{:keys [content] :as message}]
[message-view message [message-view message
[react/text {:style (style/emoji-message message)} (:text content)]]) [react/text {:style (style/emoji-message message)}
(:text content)]])
(defmulti message-content (fn [_ message _] (message :content-type))) (defmulti message-content (fn [_ message _] (message :content-type)))
@ -151,12 +149,11 @@
[wrapper {:keys [content-type] :as message}] [wrapper {:keys [content-type] :as message}]
[wrapper message [wrapper message
[message-view message [message-view message
[react/text {} (str "Unhandled content-type " content-type)]]]) [react/text (str "Unhandled content-type " content-type)]]])
(defn- text-status [status] (defn- text-status [status]
[react/view style/delivery-view [react/view style/delivery-view
[react/text {:style style/delivery-text [react/text {:style style/delivery-text}
:font :default}
(i18n/message-status-label status)]]) (i18n/message-status-label status)]])
(defview group-message-delivery-status [{:keys [message-id current-public-key user-statuses] :as msg}] (defview group-message-delivery-status [{:keys [message-id current-public-key user-statuses] :as msg}]
@ -183,8 +180,7 @@
:height 16 :height 16
:border-radius 8}}]) :border-radius 8}}])
(if (> delivery-statuses-count 3) (if (> delivery-statuses-count 3)
[react/text {:style style/delivery-text [react/text {:style style/delivery-text}
:font :default}
(str "+ " (- delivery-statuses-count 3))])]])))) (str "+ " (- delivery-statuses-count 3))])]]))))
(defn message-activity-indicator [] (defn message-activity-indicator []

View File

@ -32,7 +32,7 @@
(re-frame/dispatch [:stickers/load-packs]) (re-frame/dispatch [:stickers/load-packs])
(re-frame/dispatch [:navigate-to :stickers]))} (re-frame/dispatch [:navigate-to :stickers]))}
[react/view {:margin-top 6 :height 44 :justify-content :center} [react/view {:margin-top 6 :height 44 :justify-content :center}
[react/text {:style {:font-size 15 :color colors/blue}} [react/text {:style {:color colors/blue}}
(i18n/label :t/get-stickers)]]]]) (i18n/label :t/get-stickers)]]]])
(defn- stickers-panel [stickers window-width] (defn- stickers-panel [stickers window-width]

View File

@ -79,7 +79,6 @@
(defnstyle input-view [single-line-input?] (defnstyle input-view [single-line-input?]
{:flex 1 {:flex 1
:font-size 15
:padding-top 9 :padding-top 9
:padding-bottom 5 :padding-bottom 5
:padding-right 12 :padding-right 12
@ -90,8 +89,7 @@
:android {:padding-top 3}}) :android {:padding-top 3}})
(def invisible-input-text (def invisible-input-text
{:font-size 15 {:position :absolute
:position :absolute
:left 0 :left 0
:background-color :transparent :background-color :transparent
:color :transparent}) :color :transparent})
@ -99,7 +97,6 @@
(defnstyle invisible-input-text-height [container-width] (defnstyle invisible-input-text-height [container-width]
{:width container-width {:width container-width
:flex 1 :flex 1
:font-size 15
:padding-top 5 :padding-top 5
:padding-bottom 5 :padding-bottom 5
:android {:padding-top 3} :android {:padding-top 3}
@ -117,7 +114,6 @@
(defnstyle input-helper-text [left] (defnstyle input-helper-text [left]
{:color colors/gray {:color colors/gray
:font-size 15
:text-align-vertical :center :text-align-vertical :center
:flex 1 :flex 1
:android {:top -1} :android {:top -1}
@ -125,7 +121,6 @@
(defnstyle seq-input-text [left container-width] (defnstyle seq-input-text [left container-width]
{:min-width (- container-width left) {:min-width (- container-width left)
:font-size 15
:position :absolute :position :absolute
:text-align-vertical :center :text-align-vertical :center
:align-items :center :align-items :center

View File

@ -18,12 +18,7 @@
:border-top-color colors/gray-light :border-top-color colors/gray-light
:border-top-width border-height}) :border-top-width border-height})
(def item-suggestion-name
{:color colors/black
:font-size 15})
(def item-suggestion-description (def item-suggestion-description
{:flex 1 {:flex 1
:font-size 15
:margin-left 10 :margin-left 10
:color colors/gray}) :color colors/gray})

View File

@ -45,10 +45,7 @@
:justify-content :center}) :justify-content :center})
(def chat-name-text (def chat-name-text
{:color colors/black {:typography :main-medium
:font-size 15
:font-weight "500"
:line-height 22
:margin-top -3}) :margin-top -3})
(def group-icon (def group-icon
@ -57,17 +54,14 @@
:width 14 :width 14
:height 9}) :height 9})
(defstyle toolbar-subtitle (def toolbar-subtitle
{:color colors/text-gray {:typography :caption
:line-height 15 :color colors/text-gray})
:font-size 12})
(defstyle last-activity-text (def last-activity-text
{:color colors/text-gray {:font-size 14
:line-height 15 :margin-top 4
:ios {:font-size 14 :color colors/text-gray})
:margin-top 4}
:android {:font-size 13}})
(defn actions-wrapper [status-bar-height] (defn actions-wrapper [status-bar-height]
{:background-color colors/white {:background-color colors/white
@ -189,7 +183,6 @@
{:text-align :center {:text-align :center
:text-align-vertical :center :text-align-vertical :center
:padding-left 4 :padding-left 4
:font-size 15
:color colors/blue}) :color colors/blue})
(def add-contact-close-icon (def add-contact-close-icon
@ -216,15 +209,12 @@
:margin-right 6}) :margin-right 6})
(def empty-chat-text (def empty-chat-text
{:color colors/gray {:color colors/gray
:width 280 :width 280
:font-size 15 :text-align :center})
:line-height 22
:text-align :center})
(def empty-chat-text-name (def empty-chat-text-name
{:margin-bottom 5 {:margin-bottom 5})
:color colors/black})
(def join-button (def join-button
{:margin-top 24 {:margin-top 24
@ -233,8 +223,7 @@
(def group-chat-icon (def group-chat-icon
{:color colors/white {:color colors/white
:font-size 40 :font-size 40
:font-weight :bold :font-weight "700"})
:line-height 55})
(def group-chat-join-footer (def group-chat-join-footer
{:position :absolute {:position :absolute
@ -243,9 +232,7 @@
:bottom 0}) :bottom 0})
(def group-chat-join-name (def group-chat-join-name
{:color :black {:typography :header})
:font-weight :bold
:font-size 22})
(def group-chat-join-container (def group-chat-join-container
{:flex 1 {:flex 1

View File

@ -11,5 +11,4 @@
:height 22}) :height 22})
(def datemark-text (def datemark-text
{:color colors/gray {:color colors/gray})
:font-size 15})

View File

@ -7,8 +7,7 @@
(defn style-message-text (defn style-message-text
[outgoing] [outgoing]
{:font-size 15 {:color (if outgoing colors/white colors/text)})
:color (if outgoing colors/white colors/text)})
(defn message-padding-top (defn message-padding-top
[{:keys [first-in-group? display-username?]}] [{:keys [first-in-group? display-username?]}]
@ -37,20 +36,23 @@
{:font-size 10 {:font-size 10
:align-self :flex-end}) :align-self :flex-end})
(defn message-timestamp-text [justify-timestamp? outgoing rtl? emoji?] (defn message-timestamp-placeholder
[outgoing]
(assoc message-timestamp
:color (if outgoing
colors/blue
colors/blue-light)))
(defn message-timestamp-text
[justify-timestamp? outgoing rtl? emoji?]
(merge message-timestamp (merge message-timestamp
{:color (if (and outgoing (not emoji?)) {:color (if (and outgoing (not emoji?))
(colors/alpha colors/white 0.7) (colors/alpha colors/white 0.7)
colors/gray)} colors/gray)}
(when justify-timestamp? {:position :absolute (when justify-timestamp? {:position :absolute
:bottom 8 :bottom 7
(if rtl? :left :right) 12}))) (if rtl? :left :right) 12})))
(defn message-timestamp-placeholder-text [outgoing]
(assoc message-timestamp
:color
(if outgoing colors/blue colors/blue-light)))
(def message-expand-button (def message-expand-button
{:color colors/gray {:color colors/gray
:font-size 12 :font-size 12
@ -123,14 +125,13 @@
(defn text-message (defn text-message
[collapsed? outgoing] [collapsed? outgoing]
(assoc (style-message-text outgoing) :margin-bottom (if collapsed? 2 0))) (assoc (style-message-text outgoing)
:line-height 22
:margin-bottom (if collapsed? 2 0)))
(defnstyle emoji-message (defnstyle emoji-message
[{:keys [incoming-group]}] [{:keys [incoming-group]}]
{:font-size 40 {:font-size 40
:color colors/text
:android {:line-height 45}
:ios {:line-height 46}
:margin-top (if incoming-group 4 0)}) :margin-top (if incoming-group 4 0)})
(defn message-view (defn message-view
@ -169,7 +170,6 @@
(defn message-author-name [chosen?] (defn message-author-name [chosen?]
{:font-size (if chosen? 13 12) {:font-size (if chosen? 13 12)
:font-weight (if chosen? "500" "400") :font-weight (if chosen? "500" "400")
:line-height 16
:padding-top 6 :padding-top 6
:padding-left 12 :padding-left 12
:padding-right 16 :padding-right 16

View File

@ -17,14 +17,13 @@
:padding-bottom 10}) :padding-bottom 10})
(def title-text (def title-text
{:font-weight :bold {:font-weight "700"})
:line-height 20})
(def label (def label
{:padding-horizontal 16}) {:padding-horizontal 16})
(def label-text (def label-text
{:font-size 12}) {:typography :caption})
(def icon (def icon
{:width 40 {:width 40

View File

@ -32,7 +32,6 @@
(defview last-activity [{:keys [sync-state accessibility-label]}] (defview last-activity [{:keys [sync-state accessibility-label]}]
(letsubs [state [:get :sync-data]] (letsubs [state [:get :sync-data]]
[react/text {:style st/last-activity-text [react/text {:style st/last-activity-text
:font :toolbar-subtitle
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
(case sync-state (case sync-state
:in-progress (in-progress-text state) :in-progress (in-progress-text state)
@ -42,20 +41,14 @@
(if (or (= sync-state :in-progress) (if (or (= sync-state :in-progress)
(= sync-state :synced)) (= sync-state :synced))
[last-activity {:sync-state sync-state}] [last-activity {:sync-state sync-state}]
(if public? [react/view {:flex-direction :row}
[react/view {:flex-direction :row} [react/text {:style st/toolbar-subtitle}
[react/text {:style st/toolbar-subtitle (if public?
:font :toolbar-subtitle} (i18n/label :t/public-group-status)
(i18n/label :t/public-group-status)]] (let [cnt (count contacts)]
[react/view {:flex-direction :row} (if (zero? cnt)
[react/text {:style st/toolbar-subtitle (i18n/label :members-active-none)
:font :toolbar-subtitle} (i18n/label-pluralize cnt :t/members-active))))]]))
(if public?
(i18n/label :t/public-group-status)
(let [cnt (count contacts)]
(if (zero? cnt)
(i18n/label :members-active-none)
(i18n/label-pluralize cnt :t/members-active))))]])))
(defview toolbar-content-view [] (defview toolbar-content-view []
(letsubs [{:keys [group-chat color online contacts chat-name (letsubs [{:keys [group-chat color online contacts chat-name

View File

@ -11,15 +11,15 @@
(defn format-author [from username style] (defn format-author [from username style]
;; TODO: We defensively generate the name for now, to be revisited when new protocol is defined ;; TODO: We defensively generate the name for now, to be revisited when new protocol is defined
(cond->> [react/text {:style (style false) [react/nested-text {:style (style false)
:number-of-lines 1 :number-of-lines 1
:ellipsize-mode :tail} :ellipsize-mode :tail}
(gfycat/generate-gfy from)] (when username
username [{:style (style true)
(conj [react/text {:style (style true) :number-of-lines 1
:number-of-lines 1 :ellipsize-mode :tail}
:ellipsize-mode :tail} (str username " • ")])
(str username " • ")]))) (gfycat/generate-gfy from)])
(defn format-reply-author [from username current-public-key style] (defn format-reply-author [from username current-public-key style]
(or (and (= from current-public-key) (or (and (= from current-public-key)
@ -28,7 +28,7 @@
(format-author from username style))) (format-author from username style)))
(def ^:private styling->prop (def ^:private styling->prop
{:bold {:style {:font-weight :bold}} {:bold {:style {:font-weight "700"}}
:italic {:style {:font-style :italic}} :italic {:style {:font-style :italic}}
:backquote {:style {:background-color colors/black :backquote {:style {:background-color colors/black
:color colors/green}}}) :color colors/green}}})
@ -55,12 +55,12 @@
(if prop-fn (prop-fn text-chunk message) prop))) (if prop-fn (prop-fn text-chunk message) prop)))
(defn render-chunks [render-recipe message] (defn render-chunks [render-recipe message]
(map-indexed (fn [idx [text-chunk kind]] (vec (map-indexed (fn [idx [text-chunk kind]]
(if (= :text kind) (if (= :text kind)
text-chunk text-chunk
[react/text (into {:key idx} (lookup-props text-chunk message kind)) [(into {:key idx} (lookup-props text-chunk message kind))
text-chunk])) text-chunk]))
render-recipe)) render-recipe)))
(defn render-chunks-desktop [limit render-recipe message] (defn render-chunks-desktop [limit render-recipe message]
"This fn is only needed as a temporary hack "This fn is only needed as a temporary hack

View File

@ -119,10 +119,11 @@
[contact-name] [contact-name]
[react/view style/empty-chat-container [react/view style/empty-chat-container
[vector-icons/icon :tiny-icons/tiny-lock] [vector-icons/icon :tiny-icons/tiny-lock]
[react/text {:style style/empty-chat-text} [react/nested-text {:style style/empty-chat-text}
[react/text style/empty-chat-container-one-to-one [{:style style/empty-chat-container-one-to-one}
(i18n/label :t/empty-chat-description-one-to-one)] (i18n/label :t/empty-chat-description-one-to-one)]
[react/text {:style style/empty-chat-text-name} contact-name]]]) [{:style style/empty-chat-text-name}
contact-name]]])
(defn join-chat-button [chat-id] (defn join-chat-button [chat-id]
[buttons/secondary-button {:style style/join-button [buttons/secondary-button {:style style/join-button

View File

@ -16,6 +16,4 @@
:android {:height 56}}) :android {:height 56}})
(def currency-name-text (def currency-name-text
{:color colors/black {:typography :title})
:font-size 17
:line-height 20})

View File

@ -14,8 +14,7 @@
(def new-contact-title-text (def new-contact-title-text
{:font-size 20 {:font-size 20
:font-weight :bold :font-weight "700"})
:color :black})
(def new-contact-subtitle (def new-contact-subtitle
{:font-size 14}) {:font-size 14})

Some files were not shown because too many files have changed in this diff Show More