[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
parent
403f327c34
commit
496f3f1cc7
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.
|
|
@ -5,10 +5,12 @@
|
|||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.styles :as styles]
|
||||
[status-im.utils.utils :as utils]
|
||||
[status-im.utils.core :as utils.core]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.i18n :as i18n]
|
||||
[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]
|
||||
(if js-dependencies/react-native
|
||||
|
|
@ -84,44 +86,48 @@
|
|||
(def desktop-notification (.-DesktopNotification (.-NativeModules js-dependencies/react-native)))
|
||||
|
||||
(def slider (get-class "Slider"))
|
||||
|
||||
;; 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
|
||||
([t]
|
||||
[text-class t])
|
||||
([opts t & ts]
|
||||
(->> (conj ts t)
|
||||
(transform-to-uppercase opts)
|
||||
(concat [text-class (add-font-style :style opts)])
|
||||
(vec))))
|
||||
"For nested text elements, use nested-text instead"
|
||||
([text-element]
|
||||
[text {} text-element])
|
||||
([options text-element]
|
||||
[text-class (update options :style typography/get-style) text-element]))
|
||||
|
||||
(defn text-input [{:keys [style] :as opts} text]
|
||||
[text-input-class (merge
|
||||
{:underline-color-android :transparent
|
||||
:placeholder-text-color colors/text-gray
|
||||
:placeholder (i18n/label :t/type-a-message)
|
||||
:value text}
|
||||
(-> opts
|
||||
(dissoc :font)
|
||||
(assoc :style (merge default-font style))))])
|
||||
(defn nested-text
|
||||
([options & nested-text-elements]
|
||||
(let [options-with-style (update options :style typography/get-style)]
|
||||
(reduce (fn [acc text-element]
|
||||
(conj acc
|
||||
(cond
|
||||
(string? text-element)
|
||||
[text-class options-with-style text-element]
|
||||
|
||||
(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
|
||||
[{:keys [style key]}]
|
||||
(let [default-style {:font-size 14}]
|
||||
[text {:style (merge default-style style)} (i18n/label key)]))
|
||||
[text {:style style} (i18n/label key)])
|
||||
|
||||
(defn icon
|
||||
([n] (icon n styles/icon-default))
|
||||
|
|
|
|||
|
|
@ -23,9 +23,24 @@
|
|||
"node_modules/google-breakpad"
|
||||
],
|
||||
"desktopFonts": [
|
||||
"../../../../../resources/fonts/Inter-UI-Bold.otf",
|
||||
"../../../../../resources/fonts/Inter-UI-Medium.otf",
|
||||
"../../../../../resources/fonts/Inter-UI-Regular.otf"
|
||||
"../../../../../resources/fonts/Inter-BlackItalic.otf",
|
||||
"../../../../../resources/fonts/Inter-Black.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": {
|
||||
"assert": "1.4.1",
|
||||
|
|
|
|||
|
|
@ -29,9 +29,6 @@
|
|||
3E15DFEC1F6F4D7CAE088F49 /* libTcpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */; };
|
||||
475D202F20B7450D00879A77 /* libRNFirebase.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 475D1FC020B7413500879A77 /* libRNFirebase.a */; };
|
||||
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 */; };
|
||||
81C6E6AE0AA739BE9D87C1D0 /* libPods-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.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 */; };
|
||||
E0AD9E8F495A4907B65104BF /* libRCTImageResizer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2BEE3436791D42248F853999 /* libRCTImageResizer.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 */
|
||||
|
||||
/* 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; };
|
||||
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>"; };
|
||||
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>"; };
|
||||
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>"; };
|
||||
|
|
@ -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>"; };
|
||||
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; };
|
||||
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 */
|
||||
|
||||
/* Begin PBXFrameworksBuildPhase section */
|
||||
|
|
@ -752,13 +782,28 @@
|
|||
isa = PBXGroup;
|
||||
children = (
|
||||
B492460F2225D86900DE94D5 /* mapview */,
|
||||
55C386222185E83600B7A324 /* Inter-UI-Bold.otf */,
|
||||
55C386202185E83600B7A324 /* Inter-UI-Medium.otf */,
|
||||
55C386212185E83600B7A324 /* Inter-UI-Regular.otf */,
|
||||
983F07442119C9D2004133ED /* message.wav */,
|
||||
2028E0111D4275BD00227DCD /* SF */,
|
||||
B23B48FE1E76917B006D4535 /* RobotoMono-Medium.ttf */,
|
||||
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;
|
||||
sourceTree = "<group>";
|
||||
|
|
@ -1691,13 +1736,28 @@
|
|||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
B49246102225D86900DE94D5 /* mapview in Resources */,
|
||||
55C386232185E83600B7A324 /* Inter-UI-Medium.otf in Resources */,
|
||||
983F077E2119C9D2004133ED /* message.wav 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 */,
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -98,9 +98,24 @@
|
|||
<true/>
|
||||
<key>UIAppFonts</key>
|
||||
<array>
|
||||
<string>Inter-UI-Bold.otf</string>
|
||||
<string>Inter-UI-Medium.otf</string>
|
||||
<string>Inter-UI-Regular.otf</string>
|
||||
<string>Inter-Bold.otf</string>
|
||||
<string>Inter-Medium.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>
|
||||
<key>ITSEncryptionExportComplianceCode</key>
|
||||
<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.
|
|
@ -39,9 +39,9 @@ external_modules_dir=( \
|
|||
)
|
||||
|
||||
external_fonts=( \
|
||||
'../../../../../resources/fonts/Inter-UI-Bold.otf' \
|
||||
'../../../../../resources/fonts/Inter-UI-Medium.otf' \
|
||||
'../../../../../resources/fonts/Inter-UI-Regular.otf' \
|
||||
'../../../../../resources/fonts/Inter-Bold.otf' \
|
||||
'../../../../../resources/fonts/Inter-Medium.otf' \
|
||||
'../../../../../resources/fonts/Inter-Regular.otf' \
|
||||
)
|
||||
|
||||
source "$SCRIPTPATH/lib/setup/path-support.sh"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||
[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.animation :as animation]
|
||||
[status-im.ui.components.svgimage :as svgimage]
|
||||
|
|
@ -39,8 +38,7 @@
|
|||
[react/view transactions-styles/asset-main
|
||||
[react/image {:source (-> asset :icon :source)
|
||||
:style transactions-styles/asset-icon}]
|
||||
[react/text {:style transactions-styles/asset-symbol}
|
||||
(wallet.utils/display-symbol asset)]
|
||||
[react/text (wallet.utils/display-symbol asset)]
|
||||
[react/text {:style transactions-styles/asset-name} name]]
|
||||
;;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
|
||||
|
|
@ -54,7 +52,7 @@
|
|||
[react/view transactions-styles/asset-main
|
||||
[react/image {:source (-> asset :icon :source)
|
||||
:style transactions-styles/asset-icon}]
|
||||
[react/text {:style transactions-styles/asset-symbol} name]]
|
||||
[react/text name]]
|
||||
[react/text {:style {:font-size 16
|
||||
:color colors/gray
|
||||
:padding-right 14}}
|
||||
|
|
@ -84,7 +82,7 @@
|
|||
(defn personal-send-request-short-preview
|
||||
[label-key {:keys [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)
|
||||
:asset (wallet.utils/display-symbol coin)})]))
|
||||
|
||||
|
|
@ -120,7 +118,7 @@
|
|||
:margin-left 20
|
||||
:margin-right 20}
|
||||
:source {:uri image_url}}]
|
||||
[react/text {} name]]])
|
||||
[react/text name]]])
|
||||
collectible-tokens)])))
|
||||
|
||||
(defview nft-token [{{:keys [name image_url]} :token}]
|
||||
|
|
@ -129,7 +127,7 @@
|
|||
[svgimage/svgimage {:style {:width 100
|
||||
:height 100}
|
||||
:source {:uri image_url}}]
|
||||
[react/text {} name]])
|
||||
[react/text name]])
|
||||
|
||||
;;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
|
||||
|
|
@ -209,13 +207,11 @@
|
|||
[react/view
|
||||
[react/view transactions-styles/command-send-amount-row
|
||||
[react/view transactions-styles/command-send-amount
|
||||
[react/text {:style (transactions-styles/command-send-amount-text outgoing)
|
||||
:font :medium}
|
||||
[react/nested-text {:style (transactions-styles/command-send-amount-text outgoing)}
|
||||
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)
|
||||
:font :default}
|
||||
[{:style (transactions-styles/command-send-currency-text outgoing)}
|
||||
(wallet.utils/display-symbol token)]]]]
|
||||
(when (and fiat-amount
|
||||
platform/mobile?
|
||||
|
|
@ -409,13 +405,11 @@
|
|||
[react/text {:style (transactions-styles/command-request-header-text outgoing)}
|
||||
(i18n/label :transaction-request)]]
|
||||
[react/view transactions-styles/command-request-row
|
||||
[react/text {:style (transactions-styles/command-request-amount-text outgoing)
|
||||
:font :medium}
|
||||
[react/nested-text {:style (transactions-styles/command-request-amount-text outgoing)}
|
||||
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)
|
||||
:font :default}
|
||||
[{:style (transactions-styles/command-request-currency-text outgoing)}
|
||||
asset]]]
|
||||
(when (and platform/mobile?
|
||||
;;NOTE(goranjovic) - have to hide cross network asset fiat value until we can support
|
||||
|
|
|
|||
|
|
@ -19,9 +19,6 @@
|
|||
:margin-left 14
|
||||
:margin-right 12})
|
||||
|
||||
(def asset-symbol
|
||||
{:color colors/black})
|
||||
|
||||
(def asset-name
|
||||
{:color colors/gray
|
||||
:padding-left 4})
|
||||
|
|
@ -39,7 +36,8 @@
|
|||
{:margin-top 6
|
||||
:flex-direction :row})
|
||||
|
||||
(defn command-send-status-icon [outgoing]
|
||||
(defn command-send-status-icon
|
||||
[outgoing]
|
||||
{:background-color (if outgoing
|
||||
colors/black-transparent
|
||||
colors/blue-light)
|
||||
|
|
@ -49,12 +47,14 @@
|
|||
:padding-top 4
|
||||
:padding-left 4})
|
||||
|
||||
(defnstyle command-send-status-text [outgoing]
|
||||
{:color (if outgoing colors/white-transparent colors/blue)
|
||||
:android {:margin-top 3}
|
||||
:ios {:margin-top 4}
|
||||
:margin-left 6
|
||||
:font-size 12})
|
||||
(defn command-send-status-text
|
||||
[outgoing]
|
||||
{:typography :caption
|
||||
:color (if outgoing
|
||||
colors/white-transparent
|
||||
colors/blue)
|
||||
:margin-top 4
|
||||
:margin-left 6})
|
||||
|
||||
(def command-send-message-view
|
||||
{:flex-direction :column
|
||||
|
|
@ -71,8 +71,10 @@
|
|||
|
||||
(defn command-send-amount-text
|
||||
[outgoing]
|
||||
{:font-size 22
|
||||
:color (if outgoing colors/white colors/blue)})
|
||||
{:font-size 22
|
||||
:line-height 28
|
||||
:font-weight "600"
|
||||
:color (if outgoing colors/white colors/blue)})
|
||||
|
||||
(def command-send-currency
|
||||
{:flex-direction :column
|
||||
|
|
@ -101,13 +103,12 @@
|
|||
:margin-top 6})
|
||||
|
||||
(defn command-send-fiat-amount-text [outgoing]
|
||||
{:font-size 12
|
||||
:color (if outgoing colors/white colors/black)})
|
||||
{:typography :caption
|
||||
:color (if outgoing colors/white colors/black)})
|
||||
|
||||
(def command-send-recipient-text
|
||||
{:color colors/blue
|
||||
:font-size 14
|
||||
:line-height 18})
|
||||
:font-size 14})
|
||||
|
||||
(defn command-send-timestamp [outgoing]
|
||||
{:color (if outgoing colors/white-transparent colors/gray)
|
||||
|
|
@ -165,8 +166,7 @@
|
|||
:padding-top 8})
|
||||
|
||||
(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
|
||||
{:margin-top 6})
|
||||
|
|
@ -177,8 +177,7 @@
|
|||
|
||||
(def command-request-recipient-text
|
||||
{:color colors/blue
|
||||
:font-size 14
|
||||
:line-height 18})
|
||||
:font-size 14})
|
||||
|
||||
(def command-request-network-text
|
||||
{:color colors/red})
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -420,7 +420,7 @@
|
|||
(defn text [o & children]
|
||||
(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))))
|
||||
|
||||
(defn- wrap-view-child [child]
|
||||
(if (vector? child) child [text {} child]))
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
|
||||
(defnstyle tab-title [active?]
|
||||
{:ios {:font-size 11}
|
||||
:android {:font-size 12}
|
||||
:android {:font-size 11}
|
||||
:desktop {:font-size 12
|
||||
:font-weight (if active? "600" :normal)}
|
||||
:font-weight (if active? "600" "400")}
|
||||
:text-align :center
|
||||
:color (if active?
|
||||
colors/blue
|
||||
|
|
|
|||
|
|
@ -39,10 +39,8 @@
|
|||
(border position)))
|
||||
|
||||
(def button-text
|
||||
{:font-weight :normal
|
||||
:color colors/white
|
||||
{:color colors/white
|
||||
:padding-horizontal 16
|
||||
:font-size 15
|
||||
:padding-vertical 10})
|
||||
|
||||
(defstyle button-text-disabled
|
||||
|
|
@ -87,8 +85,7 @@
|
|||
:align-items :center})
|
||||
|
||||
(def button-with-icon-text
|
||||
{:color colors/blue
|
||||
:font-size 15})
|
||||
{:color colors/blue})
|
||||
|
||||
(def button-with-icon-image-container
|
||||
{:border-radius 50
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
[react/text {:style (merge styles/button-text
|
||||
text-style
|
||||
(when disabled?
|
||||
{:opacity 0.4}))
|
||||
:font (if platform/android? :medium :default)
|
||||
:uppercase? true}
|
||||
{:opacity 0.4}))}
|
||||
label]
|
||||
icon]])
|
||||
|
||||
|
|
@ -40,8 +38,7 @@
|
|||
[react/touchable-highlight {:on-press on-press}
|
||||
[react/view (merge styles/button-with-icon-container style)
|
||||
[react/view styles/button-with-icon-text-container
|
||||
[react/text {:style styles/button-with-icon-text
|
||||
:uppercase? true}
|
||||
[react/text {:style styles/button-with-icon-text}
|
||||
label]]
|
||||
[react/view {:style styles/button-with-icon-image-container
|
||||
:accessibility-label accessibility-label}
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@
|
|||
(def default-chat-icon-text
|
||||
{:color colors/white
|
||||
:font-size 20
|
||||
:opacity 0.8
|
||||
:line-height 24})
|
||||
:font-weight "700"
|
||||
:opacity 0.8})
|
||||
|
||||
(def message-status-icon-text
|
||||
{:margin-top -2
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
@ -34,12 +34,10 @@
|
|||
[react/view
|
||||
[react/view styles/form-title-container
|
||||
[react/view styles/form-title-inner-container
|
||||
[react/text {:style styles/form-title
|
||||
:font :medium}
|
||||
[react/text {:style styles/form-title}
|
||||
label]
|
||||
(when-not (nil? count-value)
|
||||
[react/text {:style styles/form-title-count
|
||||
:font :medium}
|
||||
[react/text {:style styles/form-title-count}
|
||||
count-value])]]
|
||||
[top-shadow]])
|
||||
|
||||
|
|
@ -69,27 +67,23 @@
|
|||
disabled?
|
||||
on-press
|
||||
forward?
|
||||
back?
|
||||
uppercase?]
|
||||
:or {uppercase? true}}]
|
||||
back?]}]
|
||||
[react/touchable-highlight {:on-press on-press :disabled disabled?}
|
||||
[react/view (styles/bottom-button disabled?)
|
||||
(when back?
|
||||
[vector-icons/icon :main-icons/back {:color colors/blue
|
||||
:container-style {:align-self :baseline}}])
|
||||
[react/text {:style styles/bottom-button-label
|
||||
:accessibility-label accessibility-label
|
||||
:uppercase? uppercase?}
|
||||
:accessibility-label accessibility-label}
|
||||
(or label (i18n/label :t/next))]
|
||||
(when forward?
|
||||
[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?)
|
||||
:on-press on-press
|
||||
:disabled disabled?}
|
||||
[react/text {:uppercase? uppercase?
|
||||
:style (merge styles/button-label label-style)}
|
||||
[react/text {:style (merge styles/button-label label-style)}
|
||||
label]])
|
||||
|
||||
(defn red-button [props]
|
||||
|
|
@ -103,8 +97,7 @@
|
|||
([{:keys [size accessibility-label] :or {size 18}} value]
|
||||
(let [more-than-9 (> value 9)]
|
||||
[react/view {:style (styles/counter-container size)}
|
||||
[react/text (cond-> {:style (styles/counter-label size)
|
||||
:font :toolbar-title}
|
||||
[react/text (cond-> {:style (styles/counter-label size)}
|
||||
accessibility-label
|
||||
(assoc :accessibility-label accessibility-label))
|
||||
(if more-than-9 (i18n/label :t/counter-9-plus) value)]])))
|
||||
|
|
|
|||
|
|
@ -88,8 +88,7 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def label-action-text
|
||||
{:color colors/blue
|
||||
:font-size 15})
|
||||
{:color colors/blue})
|
||||
|
||||
(defn logo-container [size]
|
||||
{:width size
|
||||
|
|
@ -110,8 +109,7 @@
|
|||
:opacity (if disabled? 0.4 1)})
|
||||
|
||||
(def bottom-button-label
|
||||
{:font-size 15
|
||||
:color colors/blue})
|
||||
{:color colors/blue})
|
||||
|
||||
(defn button [style background? disabled?]
|
||||
(merge
|
||||
|
|
@ -125,8 +123,7 @@
|
|||
style))
|
||||
|
||||
(def button-label
|
||||
{:font-size 15
|
||||
:text-align :center
|
||||
{:text-align :center
|
||||
:color colors/blue})
|
||||
|
||||
(defn counter-container [size]
|
||||
|
|
@ -137,10 +134,9 @@
|
|||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(defnstyle counter-label [size]
|
||||
(defn counter-label [size]
|
||||
{:font-size (/ size 2)
|
||||
:color colors/white
|
||||
:android {:line-height (+ (/ size 2) 2)}
|
||||
:text-align :center})
|
||||
|
||||
(def image-contain
|
||||
|
|
|
|||
|
|
@ -105,15 +105,15 @@
|
|||
[react/activity-indicator {:animated true
|
||||
:color colors/white
|
||||
:margin-right 6}])
|
||||
[react/text {:style styles/text
|
||||
:on-press on-press-fn}
|
||||
(if (= message :mobile-network)
|
||||
[react/text {}
|
||||
(i18n/label :t/waiting-for-wifi) " "
|
||||
[react/text
|
||||
{:style {:text-decoration-line :underline}}
|
||||
(i18n/label :t/waiting-for-wifi-change)]]
|
||||
(i18n/label message))]]))})))
|
||||
(if (= message :mobile-network)
|
||||
[react/nested-text {:style styles/text
|
||||
:on-press on-press-fn}
|
||||
(i18n/label :t/waiting-for-wifi) " "
|
||||
[{:style {:text-decoration-line :underline}}
|
||||
(i18n/label :t/waiting-for-wifi-change)]]
|
||||
[react/text {:style styles/text
|
||||
:on-press on-press-fn}
|
||||
(i18n/label message)])]))})))
|
||||
|
||||
(defview connectivity-view []
|
||||
(letsubs [status-properties [:connectivity/status-properties]
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
[react/touchable-highlight
|
||||
{:on-press action}
|
||||
[react/view {}
|
||||
[react/text {} label]]]))])
|
||||
[react/text label]]]))])
|
||||
|
||||
(defn contact-view
|
||||
[{:keys [style contact extended? on-press extend-options extend-title
|
||||
|
|
|
|||
|
|
@ -38,8 +38,7 @@
|
|||
|
||||
(def sticky-button-label-style
|
||||
{:color colors/white
|
||||
:font-size 17
|
||||
:line-height 20})
|
||||
:font-size 17})
|
||||
|
||||
(defn sticky-button [label on-press]
|
||||
[react/touchable-highlight {:on-press on-press}
|
||||
|
|
@ -49,9 +48,8 @@
|
|||
|
||||
(defn button-label-style
|
||||
[enabled?]
|
||||
{:color colors/blue
|
||||
:font-size 15
|
||||
:opacity (if enabled? 1 0.3)})
|
||||
{:color colors/blue
|
||||
:opacity (if enabled? 1 0.3)})
|
||||
|
||||
(defn button [label enabled? on-press]
|
||||
[react/touchable-highlight {:on-press on-press :disabled (not enabled?)}
|
||||
|
|
@ -66,9 +64,7 @@
|
|||
label]]])
|
||||
|
||||
(def text-button-label-style
|
||||
{:color colors/white
|
||||
:height 23
|
||||
:font-size 15})
|
||||
{:color colors/white})
|
||||
|
||||
(defn text-button [label on-press]
|
||||
[react/touchable-highlight {:on-press on-press}
|
||||
|
|
@ -81,4 +77,4 @@
|
|||
[react/touchable-highlight {:on-press on-press}
|
||||
[react/view {:style {:flex-direction :row :align-items :center}}
|
||||
[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"]]]])
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def primary-text-base
|
||||
{:font-size 16
|
||||
:color colors/black})
|
||||
{:font-size 16})
|
||||
|
||||
(def primary-text
|
||||
primary-text-base)
|
||||
|
|
@ -100,11 +99,10 @@
|
|||
|
||||
(defn settings-item-text
|
||||
[color]
|
||||
{:flex 1
|
||||
:flex-wrap :nowrap
|
||||
:line-height 20
|
||||
:font-size 17
|
||||
:color color})
|
||||
{:typography :title
|
||||
:flex 1
|
||||
:flex-wrap :nowrap
|
||||
:color color})
|
||||
|
||||
(def settings-item-text-container
|
||||
{:flex 1
|
||||
|
|
@ -116,24 +114,14 @@
|
|||
:height 18
|
||||
: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
|
||||
{:line-height 22
|
||||
:font-size 15
|
||||
:margin-top 2
|
||||
{:margin-top 2
|
||||
:color colors/gray})
|
||||
|
||||
(def settings-item-value
|
||||
{:flex-wrap :nowrap
|
||||
:text-align :right
|
||||
:padding-right 10
|
||||
:font-size 15
|
||||
:color colors/gray})
|
||||
|
||||
(def new-label
|
||||
|
|
@ -149,7 +137,7 @@
|
|||
:margin-left 6
|
||||
:margin-right 4
|
||||
:font-size 11
|
||||
:font-weight :bold})
|
||||
:font-weight "700"})
|
||||
|
||||
(def base-separator
|
||||
{:height 1
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
[react/view {:style styles/new-label}
|
||||
[react/text {:style styles/new-label-text}
|
||||
(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]]
|
||||
[react/view {:style {:margin-top 2
|
||||
:justify-content :flex-start}}
|
||||
|
|
@ -148,8 +148,7 @@
|
|||
text])
|
||||
(when accessory-value
|
||||
[react/text {:style styles/settings-item-value
|
||||
:number-of-lines 1
|
||||
:uppercase? true}
|
||||
:number-of-lines 1}
|
||||
(str accessory-value)])
|
||||
(when-not hide-chevron?
|
||||
[vector-icons/icon :main-icons/next {:color (colors/alpha colors/gray 0.4)}])]])
|
||||
|
|
|
|||
|
|
@ -9,22 +9,17 @@
|
|||
:background-color :white})
|
||||
|
||||
(defn title [small? subtitle]
|
||||
(cond-> (if small?
|
||||
{:line-height 22 :font-size 15}
|
||||
{:line-height 20 :font-size 17})
|
||||
subtitle
|
||||
(assoc :font-weight "500" :font-size 15)))
|
||||
(merge (when-not small?
|
||||
{:font-size 17})
|
||||
(when subtitle
|
||||
{:font-weight "500"})))
|
||||
|
||||
(def subtitle
|
||||
{:margin-top 4
|
||||
:line-height 22
|
||||
:font-size 15
|
||||
:color colors/gray})
|
||||
|
||||
(def accessory-text
|
||||
{:line-height 22
|
||||
:font-size 15
|
||||
:color colors/gray
|
||||
{:color colors/gray
|
||||
:margin-right 8})
|
||||
|
||||
(defn radius [size] (/ size 2))
|
||||
|
|
@ -32,4 +27,4 @@
|
|||
(defn photo [size]
|
||||
{:border-radius (radius size)
|
||||
:width size
|
||||
:height size})
|
||||
:height size})
|
||||
|
|
|
|||
|
|
@ -44,9 +44,7 @@
|
|||
:margin-bottom 3})
|
||||
|
||||
(defn item-title [color]
|
||||
(merge common-styles/text-main-medium
|
||||
{:color (get-color color)}))
|
||||
{:color (get-color color)})
|
||||
|
||||
(def item-details
|
||||
(merge common-styles/text-main
|
||||
{:color colors/gray}))
|
||||
{:color colors/gray})
|
||||
|
|
|
|||
|
|
@ -26,8 +26,7 @@
|
|||
:android {:margin-left 15}})
|
||||
|
||||
(def name-text
|
||||
{:color colors/black
|
||||
:font-size 17})
|
||||
{:font-size 17})
|
||||
|
||||
(def address-text
|
||||
{:color colors/white
|
||||
|
|
@ -48,22 +47,15 @@
|
|||
{:flex-grow 1
|
||||
:align-items :center})
|
||||
|
||||
(def hash-value-type
|
||||
{:color colors/black
|
||||
:padding-bottom 5})
|
||||
|
||||
(def hash-value-text
|
||||
{:color colors/black
|
||||
:align-self :stretch
|
||||
{:align-self :stretch
|
||||
:border-color colors/gray-light
|
||||
:border-width 1
|
||||
:margin-horizontal 16
|
||||
:padding-horizontal 8
|
||||
:padding-vertical 6
|
||||
:border-radius 8
|
||||
:text-align :center
|
||||
:font-size 15
|
||||
:line-height 20})
|
||||
:text-align :center})
|
||||
|
||||
(def done-button-text
|
||||
{:color colors/white})
|
||||
|
|
|
|||
|
|
@ -20,14 +20,3 @@
|
|||
(def icon-default
|
||||
{:width 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"})
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
[status-im.utils.platform :as p]))
|
||||
|
||||
(def label
|
||||
{:font-size 14
|
||||
:color colors/black})
|
||||
{:font-size 14})
|
||||
|
||||
(defn input-container [height]
|
||||
{:padding 16
|
||||
|
|
@ -16,10 +15,8 @@
|
|||
:background-color colors/gray-lighter})
|
||||
|
||||
(defstyle input
|
||||
{:font-size 15
|
||||
:color colors/black
|
||||
:padding 0
|
||||
:desktop {:height 52}})
|
||||
{:padding 0
|
||||
:desktop {:height 52}})
|
||||
|
||||
(defn error [label?]
|
||||
{:bottom-value (if label? -20 0)
|
||||
|
|
|
|||
|
|
@ -18,10 +18,8 @@
|
|||
:margin-left 6})
|
||||
|
||||
(def toolbar-title-text
|
||||
{:color colors/black
|
||||
:font-size 17
|
||||
:font-weight :bold
|
||||
:text-align :center})
|
||||
{:typography :title-bold
|
||||
:text-align :center})
|
||||
|
||||
(defn toolbar-actions-container [actions-count custom]
|
||||
(merge {:flex-direction :row}
|
||||
|
|
@ -40,16 +38,16 @@
|
|||
:height 24})
|
||||
|
||||
(def item-text
|
||||
{:color colors/blue
|
||||
:font-size 15})
|
||||
{:color colors/blue})
|
||||
|
||||
(defstyle item-text-action
|
||||
{:color colors/blue
|
||||
:font-size 15})
|
||||
{:color colors/blue})
|
||||
|
||||
(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
|
||||
{:width 24
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
([title-style title subtitle-style subtitle additional-text-props]
|
||||
[react/view {:style styles/toolbar-title-container}
|
||||
[react/text (merge {:style (merge styles/toolbar-title-text title-style)
|
||||
:font :toolbar-title
|
||||
:numberOfLines 1
|
||||
:ellipsizeMode :tail}
|
||||
additional-text-props) title]
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@
|
|||
:font-size font-size})
|
||||
|
||||
(def bottom-tooltip-text
|
||||
{:color colors/white
|
||||
:font-size 15})
|
||||
{:color colors/white})
|
||||
|
||||
(def tooltip-triangle
|
||||
{:width 16
|
||||
|
|
@ -55,4 +54,4 @@
|
|||
|
||||
(def close-icon
|
||||
{:margin-right 4
|
||||
:margin-left 10})
|
||||
:margin-left 10})
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
@ -7,8 +7,7 @@
|
|||
:padding-horizontal 16})
|
||||
|
||||
(def peer-text
|
||||
{:font-size 10
|
||||
:color colors/black})
|
||||
{:font-size 10})
|
||||
|
||||
(def about-title
|
||||
{:background-color colors/white
|
||||
|
|
@ -17,5 +16,4 @@
|
|||
:padding-horizontal 16})
|
||||
|
||||
(def about-title-text
|
||||
{:font-size 20
|
||||
:color colors/black})
|
||||
{:font-size 20})
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@
|
|||
|
||||
(def account-creating-text
|
||||
{:font-size 14
|
||||
:line-height 21
|
||||
:text-align :center
|
||||
:color colors/black
|
||||
:margin-top 16})
|
||||
|
||||
(def logo-container
|
||||
|
|
@ -35,8 +33,7 @@
|
|||
|
||||
(def input-description
|
||||
{:font-size 14
|
||||
:color colors/gray
|
||||
:line-height 21})
|
||||
:color colors/gray})
|
||||
|
||||
(def bottom-container
|
||||
{:flex-direction :row
|
||||
|
|
|
|||
|
|
@ -16,9 +16,8 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def sign-you-in
|
||||
{:margin-top 16
|
||||
:font-size 13
|
||||
:color colors/black})
|
||||
{:margin-top 16
|
||||
:font-size 13})
|
||||
|
||||
(def bottom-button-container
|
||||
{:flex-direction :row
|
||||
|
|
@ -32,9 +31,7 @@
|
|||
(def login-badge-image-size 56)
|
||||
|
||||
(def login-badge-name
|
||||
{:font-size 15
|
||||
:color colors/black
|
||||
:margin-top 8})
|
||||
{:margin-top 8})
|
||||
|
||||
(def password-container
|
||||
{:margin-top 24
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@
|
|||
|
||||
(def sign-you-in
|
||||
{:margin-top 16
|
||||
:font-size 13
|
||||
:color colors/black})
|
||||
:font-size 13})
|
||||
|
||||
(def recover-release-warning
|
||||
{:margin-top 16
|
||||
|
|
|
|||
|
|
@ -39,8 +39,7 @@
|
|||
:flex-shrink 1})
|
||||
|
||||
(def account-badge-text
|
||||
{:font-size 17
|
||||
:color colors/black})
|
||||
{:font-size 17})
|
||||
|
||||
(def account-badge-pub-key-text
|
||||
{:font-size 14
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
(def group-chat-name-input
|
||||
{:font-size 17
|
||||
:padding-bottom 0
|
||||
:color colors/black})
|
||||
:padding-bottom 0})
|
||||
|
||||
(def topic-hash
|
||||
(merge group-chat-name-input
|
||||
|
|
@ -36,8 +35,9 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def public-chat-icon-symbol
|
||||
{:font-size 20
|
||||
:color colors/white})
|
||||
{:font-size 20
|
||||
:text-transform :uppercase
|
||||
:color colors/white})
|
||||
|
||||
(def input-container
|
||||
{:padding 0
|
||||
|
|
|
|||
|
|
@ -39,8 +39,7 @@
|
|||
|
||||
(defn- public-chat-icon [topic]
|
||||
[react/view styles/public-chat-icon
|
||||
[react/text {:uppercase? true
|
||||
:style styles/public-chat-icon-symbol}
|
||||
[react/text {:style styles/public-chat-icon-symbol}
|
||||
(first topic)]])
|
||||
|
||||
(defn- render-topic [topic]
|
||||
|
|
@ -66,13 +65,11 @@
|
|||
[toolbar/simple-toolbar
|
||||
(i18n/label :t/public-chat)]
|
||||
[react/view styles/chat-name-container
|
||||
[react/text {:style styles/section-title
|
||||
:font :medium}
|
||||
[react/text {:style styles/section-title}
|
||||
(i18n/label :t/public-group-topic)]
|
||||
[chat-name-input topic error]]
|
||||
[react/view styles/chat-name-container
|
||||
[react/text {:style styles/section-title
|
||||
:font :medium}
|
||||
[react/text {:style styles/section-title}
|
||||
(i18n/label :t/selected)]]
|
||||
[list/flat-list {:data default-public-chats
|
||||
:key-fn identity
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
|
||||
(defstyle input
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:padding-horizontal 14
|
||||
:desktop {:height 30
|
||||
:width "100%"}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,8 @@
|
|||
:margin-top 15})
|
||||
|
||||
(defstyle input
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:android {:padding 0}})
|
||||
{:flex 1
|
||||
:android {:padding 0}})
|
||||
|
||||
(def qr-code
|
||||
{:margin-right 14})
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
[react/view styles/button-container
|
||||
[react/view {:style styles/delete-button
|
||||
:accessibility-label :bootnode-delete-button}
|
||||
[react/text {:style styles/button-label
|
||||
:uppercase? true}
|
||||
[react/text {:style styles/button-label}
|
||||
(i18n/label :t/delete)]]]])
|
||||
|
||||
(def qr-code
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
:android {:height 56}})
|
||||
|
||||
(def bootnode-item-name-text
|
||||
{:color colors/black
|
||||
:font-size 17
|
||||
:line-height 20})
|
||||
{:font-size 17})
|
||||
|
||||
(defstyle switch-container
|
||||
{:height 50
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
|
||||
(defstyle input
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:padding-horizontal 14
|
||||
:desktop {:height 30
|
||||
:width "100%"}
|
||||
:android {:padding 0}})
|
||||
:android {:padding 0}})
|
||||
|
|
|
|||
|
|
@ -30,26 +30,37 @@
|
|||
[react/view {:style {:padding-top 11 :padding-horizontal 16 :padding-bottom 7 :flex-direction :row}}
|
||||
[chat-icon/contact-icon-contacts-tab dapp]
|
||||
[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 {:style {:font-size 13 :color "#939BA1" :line-height 18
|
||||
:margin-top 5 :margin-bottom 2}}
|
||||
[react/text {:style {:font-size 13
|
||||
:color "#939BA1"
|
||||
:margin-top 5
|
||||
:margin-bottom 2}}
|
||||
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?]
|
||||
[react/view (when empty? {:flex 1})
|
||||
[react/view {:margin 16 :border-color colors/gray-lighter
|
||||
:border-width 1 :border-radius 12 :padding-vertical 16 :padding-horizontal 44
|
||||
:align-items :center}
|
||||
[react/view {:margin 16
|
||||
:border-color colors/gray-lighter
|
||||
: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}]
|
||||
[react/text {:style {:margin-top 12 :font-size 15 :font-weight "500" :line-height 22}} "Open the ÐApp Store"]
|
||||
[react/text {:style {:color colors/blue :font-size 13 :line-height 22}} "https://discover.dapps.eth ->"]]
|
||||
[react/text {:style {:typography :main-medium
|
||||
:margin-top 12}}
|
||||
"Open the ÐApp Store"]
|
||||
[react/text {:style {:color colors/blue
|
||||
:font-size 13}} "https://discover.dapps.eth ->"]]
|
||||
(if empty?
|
||||
[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/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/letsubs [browsers [:browser/browsers-vals]
|
||||
|
|
@ -88,4 +99,4 @@
|
|||
:align-self :stretch}}]
|
||||
:key-fn :browser-id
|
||||
:end-fill-color colors/white
|
||||
:render-fn list-item}])]))
|
||||
:render-fn list-item}])]))
|
||||
|
|
|
|||
|
|
@ -14,18 +14,13 @@
|
|||
:align-items :center})
|
||||
|
||||
(def title-text
|
||||
{:color colors/black
|
||||
:font-size 17
|
||||
:font-weight :bold
|
||||
{:typography :title-bold
|
||||
:margin-top 26
|
||||
:margin-bottom 10
|
||||
:line-height 20
|
||||
:text-align :center})
|
||||
|
||||
(def description-text
|
||||
{:color colors/gray
|
||||
:font-size 15
|
||||
:line-height 22
|
||||
:text-align :center})
|
||||
|
||||
(def chat-link-text
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
:android {:padding-bottom 6}})
|
||||
|
||||
(def dapp-name-text
|
||||
{:color colors/black
|
||||
:font-size 16})
|
||||
{:font-size 16})
|
||||
|
||||
(defstyle dapp-text
|
||||
{:color colors/gray
|
||||
|
|
@ -66,25 +65,16 @@
|
|||
|
||||
(defstyle url-input
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:line-height 22
|
||||
:text-align-vertical :center
|
||||
:android {:margin 0
|
||||
:padding 0
|
||||
:margin-left 6}
|
||||
:ios {:margin-top -6
|
||||
:min-height 26
|
||||
:margin-left 6}})
|
||||
:margin 0
|
||||
:padding 0
|
||||
:margin-left 6})
|
||||
|
||||
(def url-text-container
|
||||
{:justify-content :center
|
||||
:flex 1
|
||||
:margin-horizontal 5})
|
||||
|
||||
(def url-text
|
||||
{:font-size 15
|
||||
:line-height 22})
|
||||
|
||||
(def dot
|
||||
{:height 4
|
||||
:width 4
|
||||
|
|
@ -150,17 +140,13 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def permissions-panel-title-label
|
||||
{:margin-horizontal 20
|
||||
:font-size 22
|
||||
:line-height 28
|
||||
{:typography :header
|
||||
:margin-horizontal 20
|
||||
:text-align :center
|
||||
:margin-top 19
|
||||
:font-weight :bold})
|
||||
:margin-top 19})
|
||||
|
||||
(def permissions-panel-description-label
|
||||
{:margin-horizontal 20
|
||||
:color colors/gray
|
||||
:font-size 15
|
||||
:line-height 22
|
||||
:text-align :center
|
||||
:margin-top 9})
|
||||
:margin-top 9})
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
:style styles/url-input}]
|
||||
[react/touchable-highlight {:style styles/url-text-container
|
||||
: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?]
|
||||
[toolbar.view/toolbar
|
||||
|
|
@ -183,4 +183,4 @@
|
|||
:show-tooltip show-tooltip
|
||||
:opt-in? opt-in?
|
||||
:rpc-url rpc-url
|
||||
:name name}]])))
|
||||
:name name}]])))
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
[react/touchable-highlight (cond-> {:on-press on-press}
|
||||
accessibility-label (assoc :accessibility-label accessibility-label))
|
||||
[react/view style/item-suggestion-container
|
||||
[react/text {:style style/item-suggestion-name}
|
||||
name]
|
||||
[react/text name]
|
||||
[react/text {:style style/item-suggestion-description
|
||||
:number-of-lines 2}
|
||||
description]]])
|
||||
|
|
|
|||
|
|
@ -47,13 +47,15 @@
|
|||
(commands/generate-preview command (commands/add-chat-contacts contacts command-message))
|
||||
[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?
|
||||
[react/text {:style (style/message-timestamp-text
|
||||
justify-timestamp?
|
||||
outgoing
|
||||
(:rtl? content)
|
||||
(= content-type constants/content-type-emoji))} t]))
|
||||
(= content-type constants/content-type-emoji))}
|
||||
t]))
|
||||
|
||||
(defn message-view
|
||||
[{:keys [timestamp-str outgoing content content-type] :as message} message-content {:keys [justify-timestamp?]}]
|
||||
|
|
@ -63,13 +65,6 @@
|
|||
(get content :command-ref))
|
||||
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]
|
||||
(letsubs [username [:contacts/contact-name-by-identity from]]
|
||||
[react/view {:style (style/quoted-message-container outgoing)}
|
||||
|
|
@ -83,8 +78,7 @@
|
|||
|
||||
(defview message-content-status [{:keys [content]}]
|
||||
[react/view style/status-container
|
||||
[react/text {:style style/status-text
|
||||
:font :default}
|
||||
[react/text {:style style/status-text}
|
||||
(:text content)]])
|
||||
|
||||
(defn expand-button [expanded? chat-id message-id]
|
||||
|
|
@ -99,14 +93,17 @@
|
|||
[react/view
|
||||
(when (:response-to content)
|
||||
[quoted-message (:response-to content) outgoing current-public-key])
|
||||
[react/text (cond-> {:style (style/text-message collapsible? outgoing)}
|
||||
(and collapsible? (not expanded?))
|
||||
(assoc :number-of-lines constants/lines-collapse-threshold))
|
||||
(if-let [render-recipe (:render-recipe content)]
|
||||
(chat.utils/render-chunks render-recipe message)
|
||||
(:text content))
|
||||
[react/text {:style (style/message-timestamp-placeholder-text outgoing)}
|
||||
(timestamp-with-padding timestamp-str)]]
|
||||
(apply react/nested-text
|
||||
(cond-> {:style (style/text-message collapsible? outgoing)
|
||||
:text-break-strategy :balanced}
|
||||
(and collapsible? (not expanded?))
|
||||
(assoc :number-of-lines constants/lines-collapse-threshold))
|
||||
(conj (if-let [render-recipe (:render-recipe content)]
|
||||
(chat.utils/render-chunks render-recipe message)
|
||||
[(:text content)])
|
||||
[{:style (style/message-timestamp-placeholder outgoing)}
|
||||
(str " " timestamp-str)]))
|
||||
|
||||
(when collapsible?
|
||||
[expand-button expanded? chat-id message-id])])
|
||||
{:justify-timestamp? true}])
|
||||
|
|
@ -114,7 +111,8 @@
|
|||
(defn emoji-message
|
||||
[{:keys [content] :as 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)))
|
||||
|
||||
|
|
@ -151,12 +149,11 @@
|
|||
[wrapper {:keys [content-type] :as message}]
|
||||
[wrapper message
|
||||
[message-view message
|
||||
[react/text {} (str "Unhandled content-type " content-type)]]])
|
||||
[react/text (str "Unhandled content-type " content-type)]]])
|
||||
|
||||
(defn- text-status [status]
|
||||
[react/view style/delivery-view
|
||||
[react/text {:style style/delivery-text
|
||||
:font :default}
|
||||
[react/text {:style style/delivery-text}
|
||||
(i18n/message-status-label status)]])
|
||||
|
||||
(defview group-message-delivery-status [{:keys [message-id current-public-key user-statuses] :as msg}]
|
||||
|
|
@ -183,8 +180,7 @@
|
|||
:height 16
|
||||
:border-radius 8}}])
|
||||
(if (> delivery-statuses-count 3)
|
||||
[react/text {:style style/delivery-text
|
||||
:font :default}
|
||||
[react/text {:style style/delivery-text}
|
||||
(str "+ " (- delivery-statuses-count 3))])]]))))
|
||||
|
||||
(defn message-activity-indicator []
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
(re-frame/dispatch [:stickers/load-packs])
|
||||
(re-frame/dispatch [:navigate-to :stickers]))}
|
||||
[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)]]]])
|
||||
|
||||
(defn- stickers-panel [stickers window-width]
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@
|
|||
|
||||
(defnstyle input-view [single-line-input?]
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:padding-top 9
|
||||
:padding-bottom 5
|
||||
:padding-right 12
|
||||
|
|
@ -90,8 +89,7 @@
|
|||
:android {:padding-top 3}})
|
||||
|
||||
(def invisible-input-text
|
||||
{:font-size 15
|
||||
:position :absolute
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:background-color :transparent
|
||||
:color :transparent})
|
||||
|
|
@ -99,7 +97,6 @@
|
|||
(defnstyle invisible-input-text-height [container-width]
|
||||
{:width container-width
|
||||
:flex 1
|
||||
:font-size 15
|
||||
:padding-top 5
|
||||
:padding-bottom 5
|
||||
:android {:padding-top 3}
|
||||
|
|
@ -117,7 +114,6 @@
|
|||
|
||||
(defnstyle input-helper-text [left]
|
||||
{:color colors/gray
|
||||
:font-size 15
|
||||
:text-align-vertical :center
|
||||
:flex 1
|
||||
:android {:top -1}
|
||||
|
|
@ -125,7 +121,6 @@
|
|||
|
||||
(defnstyle seq-input-text [left container-width]
|
||||
{:min-width (- container-width left)
|
||||
:font-size 15
|
||||
:position :absolute
|
||||
:text-align-vertical :center
|
||||
:align-items :center
|
||||
|
|
|
|||
|
|
@ -18,12 +18,7 @@
|
|||
:border-top-color colors/gray-light
|
||||
:border-top-width border-height})
|
||||
|
||||
(def item-suggestion-name
|
||||
{:color colors/black
|
||||
:font-size 15})
|
||||
|
||||
(def item-suggestion-description
|
||||
{:flex 1
|
||||
:font-size 15
|
||||
:margin-left 10
|
||||
:color colors/gray})
|
||||
|
|
|
|||
|
|
@ -45,10 +45,7 @@
|
|||
:justify-content :center})
|
||||
|
||||
(def chat-name-text
|
||||
{:color colors/black
|
||||
:font-size 15
|
||||
:font-weight "500"
|
||||
:line-height 22
|
||||
{:typography :main-medium
|
||||
:margin-top -3})
|
||||
|
||||
(def group-icon
|
||||
|
|
@ -57,17 +54,14 @@
|
|||
:width 14
|
||||
:height 9})
|
||||
|
||||
(defstyle toolbar-subtitle
|
||||
{:color colors/text-gray
|
||||
:line-height 15
|
||||
:font-size 12})
|
||||
(def toolbar-subtitle
|
||||
{:typography :caption
|
||||
:color colors/text-gray})
|
||||
|
||||
(defstyle last-activity-text
|
||||
{:color colors/text-gray
|
||||
:line-height 15
|
||||
:ios {:font-size 14
|
||||
:margin-top 4}
|
||||
:android {:font-size 13}})
|
||||
(def last-activity-text
|
||||
{:font-size 14
|
||||
:margin-top 4
|
||||
:color colors/text-gray})
|
||||
|
||||
(defn actions-wrapper [status-bar-height]
|
||||
{:background-color colors/white
|
||||
|
|
@ -189,7 +183,6 @@
|
|||
{:text-align :center
|
||||
:text-align-vertical :center
|
||||
:padding-left 4
|
||||
:font-size 15
|
||||
:color colors/blue})
|
||||
|
||||
(def add-contact-close-icon
|
||||
|
|
@ -216,15 +209,12 @@
|
|||
:margin-right 6})
|
||||
|
||||
(def empty-chat-text
|
||||
{:color colors/gray
|
||||
:width 280
|
||||
:font-size 15
|
||||
:line-height 22
|
||||
:text-align :center})
|
||||
{:color colors/gray
|
||||
:width 280
|
||||
:text-align :center})
|
||||
|
||||
(def empty-chat-text-name
|
||||
{:margin-bottom 5
|
||||
:color colors/black})
|
||||
{:margin-bottom 5})
|
||||
|
||||
(def join-button
|
||||
{:margin-top 24
|
||||
|
|
@ -233,8 +223,7 @@
|
|||
(def group-chat-icon
|
||||
{:color colors/white
|
||||
:font-size 40
|
||||
:font-weight :bold
|
||||
:line-height 55})
|
||||
:font-weight "700"})
|
||||
|
||||
(def group-chat-join-footer
|
||||
{:position :absolute
|
||||
|
|
@ -243,9 +232,7 @@
|
|||
:bottom 0})
|
||||
|
||||
(def group-chat-join-name
|
||||
{:color :black
|
||||
:font-weight :bold
|
||||
:font-size 22})
|
||||
{:typography :header})
|
||||
|
||||
(def group-chat-join-container
|
||||
{:flex 1
|
||||
|
|
|
|||
|
|
@ -11,5 +11,4 @@
|
|||
:height 22})
|
||||
|
||||
(def datemark-text
|
||||
{:color colors/gray
|
||||
:font-size 15})
|
||||
{:color colors/gray})
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
|
||||
(defn style-message-text
|
||||
[outgoing]
|
||||
{:font-size 15
|
||||
:color (if outgoing colors/white colors/text)})
|
||||
{:color (if outgoing colors/white colors/text)})
|
||||
|
||||
(defn message-padding-top
|
||||
[{:keys [first-in-group? display-username?]}]
|
||||
|
|
@ -37,20 +36,23 @@
|
|||
{:font-size 10
|
||||
: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
|
||||
{:color (if (and outgoing (not emoji?))
|
||||
(colors/alpha colors/white 0.7)
|
||||
colors/gray)}
|
||||
(when justify-timestamp? {:position :absolute
|
||||
:bottom 8
|
||||
:bottom 7
|
||||
(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
|
||||
{:color colors/gray
|
||||
:font-size 12
|
||||
|
|
@ -123,14 +125,13 @@
|
|||
|
||||
(defn text-message
|
||||
[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
|
||||
[{:keys [incoming-group]}]
|
||||
{:font-size 40
|
||||
:color colors/text
|
||||
:android {:line-height 45}
|
||||
:ios {:line-height 46}
|
||||
:margin-top (if incoming-group 4 0)})
|
||||
|
||||
(defn message-view
|
||||
|
|
@ -169,7 +170,6 @@
|
|||
(defn message-author-name [chosen?]
|
||||
{:font-size (if chosen? 13 12)
|
||||
:font-weight (if chosen? "500" "400")
|
||||
:line-height 16
|
||||
:padding-top 6
|
||||
:padding-left 12
|
||||
:padding-right 16
|
||||
|
|
|
|||
|
|
@ -17,14 +17,13 @@
|
|||
:padding-bottom 10})
|
||||
|
||||
(def title-text
|
||||
{:font-weight :bold
|
||||
:line-height 20})
|
||||
{:font-weight "700"})
|
||||
|
||||
(def label
|
||||
{:padding-horizontal 16})
|
||||
|
||||
(def label-text
|
||||
{:font-size 12})
|
||||
{:typography :caption})
|
||||
|
||||
(def icon
|
||||
{:width 40
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
(defview last-activity [{:keys [sync-state accessibility-label]}]
|
||||
(letsubs [state [:get :sync-data]]
|
||||
[react/text {:style st/last-activity-text
|
||||
:font :toolbar-subtitle
|
||||
:accessibility-label accessibility-label}
|
||||
(case sync-state
|
||||
:in-progress (in-progress-text state)
|
||||
|
|
@ -42,20 +41,14 @@
|
|||
(if (or (= sync-state :in-progress)
|
||||
(= sync-state :synced))
|
||||
[last-activity {:sync-state sync-state}]
|
||||
(if public?
|
||||
[react/view {:flex-direction :row}
|
||||
[react/text {:style st/toolbar-subtitle
|
||||
:font :toolbar-subtitle}
|
||||
(i18n/label :t/public-group-status)]]
|
||||
[react/view {:flex-direction :row}
|
||||
[react/text {:style st/toolbar-subtitle
|
||||
:font :toolbar-subtitle}
|
||||
(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))))]])))
|
||||
[react/view {:flex-direction :row}
|
||||
[react/text {:style st/toolbar-subtitle}
|
||||
(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 []
|
||||
(letsubs [{:keys [group-chat color online contacts chat-name
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
|
||||
(defn format-author [from username style]
|
||||
;; TODO: We defensively generate the name for now, to be revisited when new protocol is defined
|
||||
(cond->> [react/text {:style (style false)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
(gfycat/generate-gfy from)]
|
||||
username
|
||||
(conj [react/text {:style (style true)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
(str username " • ")])))
|
||||
[react/nested-text {:style (style false)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
(when username
|
||||
[{:style (style true)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
(str username " • ")])
|
||||
(gfycat/generate-gfy from)])
|
||||
|
||||
(defn format-reply-author [from username current-public-key style]
|
||||
(or (and (= from current-public-key)
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
(format-author from username style)))
|
||||
|
||||
(def ^:private styling->prop
|
||||
{:bold {:style {:font-weight :bold}}
|
||||
{:bold {:style {:font-weight "700"}}
|
||||
:italic {:style {:font-style :italic}}
|
||||
:backquote {:style {:background-color colors/black
|
||||
:color colors/green}}})
|
||||
|
|
@ -55,12 +55,12 @@
|
|||
(if prop-fn (prop-fn text-chunk message) prop)))
|
||||
|
||||
(defn render-chunks [render-recipe message]
|
||||
(map-indexed (fn [idx [text-chunk kind]]
|
||||
(if (= :text kind)
|
||||
text-chunk
|
||||
[react/text (into {:key idx} (lookup-props text-chunk message kind))
|
||||
text-chunk]))
|
||||
render-recipe))
|
||||
(vec (map-indexed (fn [idx [text-chunk kind]]
|
||||
(if (= :text kind)
|
||||
text-chunk
|
||||
[(into {:key idx} (lookup-props text-chunk message kind))
|
||||
text-chunk]))
|
||||
render-recipe)))
|
||||
|
||||
(defn render-chunks-desktop [limit render-recipe message]
|
||||
"This fn is only needed as a temporary hack
|
||||
|
|
|
|||
|
|
@ -119,10 +119,11 @@
|
|||
[contact-name]
|
||||
[react/view style/empty-chat-container
|
||||
[vector-icons/icon :tiny-icons/tiny-lock]
|
||||
[react/text {:style style/empty-chat-text}
|
||||
[react/text style/empty-chat-container-one-to-one
|
||||
[react/nested-text {:style style/empty-chat-text}
|
||||
[{:style style/empty-chat-container-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]
|
||||
[buttons/secondary-button {:style style/join-button
|
||||
|
|
|
|||
|
|
@ -16,6 +16,4 @@
|
|||
:android {:height 56}})
|
||||
|
||||
(def currency-name-text
|
||||
{:color colors/black
|
||||
:font-size 17
|
||||
:line-height 20})
|
||||
{:typography :title})
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
|
||||
(def new-contact-title-text
|
||||
{:font-size 20
|
||||
:font-weight :bold
|
||||
:color :black})
|
||||
:font-weight "700"})
|
||||
|
||||
(def new-contact-subtitle
|
||||
{:font-size 14})
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue