diff --git a/android/app/src/main/assets/fonts/Inter-Bold.ttf b/android/app/src/main/assets/fonts/Inter-Bold.ttf new file mode 100644 index 0000000000..cc065b681f Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Bold.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-BoldItalic.ttf b/android/app/src/main/assets/fonts/Inter-BoldItalic.ttf new file mode 100644 index 0000000000..503b9e0ae6 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-BoldItalic.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-ExtraBold.ttf b/android/app/src/main/assets/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000000..e244ac9b6e Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-ExtraBold.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-ExtraBoldItalic.ttf b/android/app/src/main/assets/fonts/Inter-ExtraBoldItalic.ttf new file mode 100644 index 0000000000..11148851ea Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-ExtraBoldItalic.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-ExtraLight-BETA.ttf b/android/app/src/main/assets/fonts/Inter-ExtraLight-BETA.ttf new file mode 100644 index 0000000000..e49f4d90a0 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-ExtraLight-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-ExtraLightItalic-BETA.ttf b/android/app/src/main/assets/fonts/Inter-ExtraLightItalic-BETA.ttf new file mode 100644 index 0000000000..4c84fe4072 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-ExtraLightItalic-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-Italic.ttf b/android/app/src/main/assets/fonts/Inter-Italic.ttf new file mode 100644 index 0000000000..598db24121 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Italic.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-Light-BETA.ttf b/android/app/src/main/assets/fonts/Inter-Light-BETA.ttf new file mode 100644 index 0000000000..81f56263c9 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Light-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-LightItalic-BETA.ttf b/android/app/src/main/assets/fonts/Inter-LightItalic-BETA.ttf new file mode 100644 index 0000000000..e5e453849b Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-LightItalic-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-Medium.ttf b/android/app/src/main/assets/fonts/Inter-Medium.ttf new file mode 100644 index 0000000000..5fb476d84f Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Medium.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-MediumItalic.ttf b/android/app/src/main/assets/fonts/Inter-MediumItalic.ttf new file mode 100644 index 0000000000..e8a7259484 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-MediumItalic.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-Regular.ttf b/android/app/src/main/assets/fonts/Inter-Regular.ttf new file mode 100644 index 0000000000..8c04c5bc83 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Regular.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-SemiBold.ttf b/android/app/src/main/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000000..af40294e59 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-SemiBold.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-SemiBoldItalic.ttf b/android/app/src/main/assets/fonts/Inter-SemiBoldItalic.ttf new file mode 100644 index 0000000000..894a65fd61 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-SemiBoldItalic.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-Thin-BETA.ttf b/android/app/src/main/assets/fonts/Inter-Thin-BETA.ttf new file mode 100644 index 0000000000..b6ba236653 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-Thin-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-ThinItalic-BETA.ttf b/android/app/src/main/assets/fonts/Inter-ThinItalic-BETA.ttf new file mode 100644 index 0000000000..1df838c704 Binary files /dev/null and b/android/app/src/main/assets/fonts/Inter-ThinItalic-BETA.ttf differ diff --git a/android/app/src/main/assets/fonts/Inter-UI-Bold.otf b/android/app/src/main/assets/fonts/Inter-UI-Bold.otf deleted file mode 100644 index 8ad8834884..0000000000 Binary files a/android/app/src/main/assets/fonts/Inter-UI-Bold.otf and /dev/null differ diff --git a/android/app/src/main/assets/fonts/Inter-UI-Medium.otf b/android/app/src/main/assets/fonts/Inter-UI-Medium.otf deleted file mode 100644 index 9bec8934bb..0000000000 Binary files a/android/app/src/main/assets/fonts/Inter-UI-Medium.otf and /dev/null differ diff --git a/android/app/src/main/assets/fonts/Inter-UI-Regular.otf b/android/app/src/main/assets/fonts/Inter-UI-Regular.otf deleted file mode 100644 index 287135d400..0000000000 Binary files a/android/app/src/main/assets/fonts/Inter-UI-Regular.otf and /dev/null differ diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index 754aa19ed9..b33ea7baa7 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -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)) diff --git a/desktop_files/package.json.orig b/desktop_files/package.json.orig index a3f47a60ef..e2fef18c23 100644 --- a/desktop_files/package.json.orig +++ b/desktop_files/package.json.orig @@ -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", diff --git a/ios/StatusIm.xcodeproj/project.pbxproj b/ios/StatusIm.xcodeproj/project.pbxproj index 6a959118e9..c3570dd28b 100644 --- a/ios/StatusIm.xcodeproj/project.pbxproj +++ b/ios/StatusIm.xcodeproj/project.pbxproj @@ -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 = ""; }; - 55C386202185E83600B7A324 /* Inter-UI-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Medium.otf"; path = "fonts/Inter-UI-Medium.otf"; sourceTree = ""; }; - 55C386212185E83600B7A324 /* Inter-UI-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Regular.otf"; path = "fonts/Inter-UI-Regular.otf"; sourceTree = ""; }; - 55C386222185E83600B7A324 /* Inter-UI-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Inter-UI-Bold.otf"; path = "fonts/Inter-UI-Bold.otf"; sourceTree = ""; }; 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 = ""; }; 674B3D9595A047AB8D518F4E /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = ""; }; 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = ""; }; @@ -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 = ""; }; F9238D6B1E5F055900C047B9 /* SF-UI-Text-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Semibold.otf"; sourceTree = ""; }; FC1CBCFE6C906043D6CCEEE1 /* libPods-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; + 0BD3B115C8A64478B8577A90 /* Inter-Black.otf */ = {isa = PBXFileReference; name = "Inter-Black.otf"; path = "../resources/fonts/Inter-Black.otf"; sourceTree = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; 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 = ""; @@ -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; }; diff --git a/ios/StatusIm/Info.plist b/ios/StatusIm/Info.plist index 357e03c09f..c18ecec020 100644 --- a/ios/StatusIm/Info.plist +++ b/ios/StatusIm/Info.plist @@ -98,9 +98,24 @@ UIAppFonts - Inter-UI-Bold.otf - Inter-UI-Medium.otf - Inter-UI-Regular.otf + Inter-Bold.otf + Inter-Medium.otf + Inter-Regular.otf + Inter-Black.otf + Inter-BlackItalic.otf + Inter-BoldItalic.otf + Inter-ExtraBold.otf + Inter-ExtraBoldItalic.otf + Inter-ExtraLight-BETA.otf + Inter-ExtraLightItalic-BETA.otf + Inter-Italic.otf + Inter-Light-BETA.otf + Inter-LightItalic-BETA.otf + Inter-MediumItalic.otf + Inter-SemiBold.otf + Inter-SemiBoldItalic.otf + Inter-Thin-BETA.otf + Inter-ThinItalic-BETA.otf ITSEncryptionExportComplianceCode 1aa92c4d-6194-4d7d-b70a-16b48256b87e diff --git a/resources/fonts/Inter-Black.otf b/resources/fonts/Inter-Black.otf new file mode 100644 index 0000000000..86842872f3 Binary files /dev/null and b/resources/fonts/Inter-Black.otf differ diff --git a/resources/fonts/Inter-BlackItalic.otf b/resources/fonts/Inter-BlackItalic.otf new file mode 100644 index 0000000000..7001434044 Binary files /dev/null and b/resources/fonts/Inter-BlackItalic.otf differ diff --git a/resources/fonts/Inter-Bold.otf b/resources/fonts/Inter-Bold.otf new file mode 100644 index 0000000000..502bba341c Binary files /dev/null and b/resources/fonts/Inter-Bold.otf differ diff --git a/resources/fonts/Inter-BoldItalic.otf b/resources/fonts/Inter-BoldItalic.otf new file mode 100644 index 0000000000..a1f7d88339 Binary files /dev/null and b/resources/fonts/Inter-BoldItalic.otf differ diff --git a/resources/fonts/Inter-ExtraBold.otf b/resources/fonts/Inter-ExtraBold.otf new file mode 100644 index 0000000000..7410f73cff Binary files /dev/null and b/resources/fonts/Inter-ExtraBold.otf differ diff --git a/resources/fonts/Inter-ExtraBoldItalic.otf b/resources/fonts/Inter-ExtraBoldItalic.otf new file mode 100644 index 0000000000..7d451cbb9d Binary files /dev/null and b/resources/fonts/Inter-ExtraBoldItalic.otf differ diff --git a/resources/fonts/Inter-ExtraLight-BETA.otf b/resources/fonts/Inter-ExtraLight-BETA.otf new file mode 100644 index 0000000000..6e9672f6b4 Binary files /dev/null and b/resources/fonts/Inter-ExtraLight-BETA.otf differ diff --git a/resources/fonts/Inter-ExtraLightItalic-BETA.otf b/resources/fonts/Inter-ExtraLightItalic-BETA.otf new file mode 100644 index 0000000000..e7789f95aa Binary files /dev/null and b/resources/fonts/Inter-ExtraLightItalic-BETA.otf differ diff --git a/resources/fonts/Inter-Italic.otf b/resources/fonts/Inter-Italic.otf new file mode 100644 index 0000000000..4e2906e5ff Binary files /dev/null and b/resources/fonts/Inter-Italic.otf differ diff --git a/resources/fonts/Inter-Light-BETA.otf b/resources/fonts/Inter-Light-BETA.otf new file mode 100644 index 0000000000..80ee72b8c0 Binary files /dev/null and b/resources/fonts/Inter-Light-BETA.otf differ diff --git a/resources/fonts/Inter-LightItalic-BETA.otf b/resources/fonts/Inter-LightItalic-BETA.otf new file mode 100644 index 0000000000..ba2cb1b834 Binary files /dev/null and b/resources/fonts/Inter-LightItalic-BETA.otf differ diff --git a/resources/fonts/Inter-Medium.otf b/resources/fonts/Inter-Medium.otf new file mode 100644 index 0000000000..6604db39da Binary files /dev/null and b/resources/fonts/Inter-Medium.otf differ diff --git a/resources/fonts/Inter-MediumItalic.otf b/resources/fonts/Inter-MediumItalic.otf new file mode 100644 index 0000000000..ea66c5a629 Binary files /dev/null and b/resources/fonts/Inter-MediumItalic.otf differ diff --git a/resources/fonts/Inter-Regular.otf b/resources/fonts/Inter-Regular.otf new file mode 100644 index 0000000000..fdb121dd6b Binary files /dev/null and b/resources/fonts/Inter-Regular.otf differ diff --git a/resources/fonts/Inter-SemiBold.otf b/resources/fonts/Inter-SemiBold.otf new file mode 100644 index 0000000000..78482e60f4 Binary files /dev/null and b/resources/fonts/Inter-SemiBold.otf differ diff --git a/resources/fonts/Inter-SemiBoldItalic.otf b/resources/fonts/Inter-SemiBoldItalic.otf new file mode 100644 index 0000000000..e74b87411d Binary files /dev/null and b/resources/fonts/Inter-SemiBoldItalic.otf differ diff --git a/resources/fonts/Inter-Thin-BETA.otf b/resources/fonts/Inter-Thin-BETA.otf new file mode 100644 index 0000000000..90def70df2 Binary files /dev/null and b/resources/fonts/Inter-Thin-BETA.otf differ diff --git a/resources/fonts/Inter-ThinItalic-BETA.otf b/resources/fonts/Inter-ThinItalic-BETA.otf new file mode 100644 index 0000000000..cc7419c354 Binary files /dev/null and b/resources/fonts/Inter-ThinItalic-BETA.otf differ diff --git a/resources/fonts/Inter-UI-Bold.otf b/resources/fonts/Inter-UI-Bold.otf deleted file mode 100644 index 8ad8834884..0000000000 Binary files a/resources/fonts/Inter-UI-Bold.otf and /dev/null differ diff --git a/resources/fonts/Inter-UI-Medium.otf b/resources/fonts/Inter-UI-Medium.otf deleted file mode 100644 index 9bec8934bb..0000000000 Binary files a/resources/fonts/Inter-UI-Medium.otf and /dev/null differ diff --git a/resources/fonts/Inter-UI-Regular.otf b/resources/fonts/Inter-UI-Regular.otf deleted file mode 100644 index 287135d400..0000000000 Binary files a/resources/fonts/Inter-UI-Regular.otf and /dev/null differ diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index 22c0411682..020e066b63 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -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" diff --git a/src/status_im/chat/commands/impl/transactions.cljs b/src/status_im/chat/commands/impl/transactions.cljs index 85d6d011f5..f681bf9b97 100644 --- a/src/status_im/chat/commands/impl/transactions.cljs +++ b/src/status_im/chat/commands/impl/transactions.cljs @@ -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 diff --git a/src/status_im/chat/commands/impl/transactions/styles.cljs b/src/status_im/chat/commands/impl/transactions/styles.cljs index 03e10736fd..7ee99a8aed 100644 --- a/src/status_im/chat/commands/impl/transactions/styles.cljs +++ b/src/status_im/chat/commands/impl/transactions/styles.cljs @@ -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}) diff --git a/src/status_im/chat/commands/styles/validation.cljs b/src/status_im/chat/commands/styles/validation.cljs deleted file mode 100644 index cbf7e314ac..0000000000 --- a/src/status_im/chat/commands/styles/validation.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im/extensions/core.cljs b/src/status_im/extensions/core.cljs index 5e00d2901a..459b175c8f 100644 --- a/src/status_im/extensions/core.cljs +++ b/src/status_im/extensions/core.cljs @@ -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])) diff --git a/src/status_im/ui/components/bottom_bar/styles.cljs b/src/status_im/ui/components/bottom_bar/styles.cljs index 2f375e4f25..f0ce27b417 100644 --- a/src/status_im/ui/components/bottom_bar/styles.cljs +++ b/src/status_im/ui/components/bottom_bar/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/button/styles.cljs b/src/status_im/ui/components/button/styles.cljs index ef8dd3ab44..f4d28f8893 100644 --- a/src/status_im/ui/components/button/styles.cljs +++ b/src/status_im/ui/components/button/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/button/view.cljs b/src/status_im/ui/components/button/view.cljs index 95105e5973..d134354e2a 100644 --- a/src/status_im/ui/components/button/view.cljs +++ b/src/status_im/ui/components/button/view.cljs @@ -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} diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index 3526abe485..eb6483c231 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/chat_preview.cljs b/src/status_im/ui/components/chat_preview.cljs deleted file mode 100644 index 94a180638d..0000000000 --- a/src/status_im/ui/components/chat_preview.cljs +++ /dev/null @@ -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))) diff --git a/src/status_im/ui/components/common/common.cljs b/src/status_im/ui/components/common/common.cljs index 41c2636942..7ec6f334d2 100644 --- a/src/status_im/ui/components/common/common.cljs +++ b/src/status_im/ui/components/common/common.cljs @@ -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)]]))) diff --git a/src/status_im/ui/components/common/styles.cljs b/src/status_im/ui/components/common/styles.cljs index c9f776f323..614a915d30 100644 --- a/src/status_im/ui/components/common/styles.cljs +++ b/src/status_im/ui/components/common/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index 518f1725db..d470e31e81 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -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] diff --git a/src/status_im/ui/components/contact/contact.cljs b/src/status_im/ui/components/contact/contact.cljs index aacc3254cb..32141b38e3 100644 --- a/src/status_im/ui/components/contact/contact.cljs +++ b/src/status_im/ui/components/contact/contact.cljs @@ -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 diff --git a/src/status_im/ui/components/desktop/views.cljs b/src/status_im/ui/components/desktop/views.cljs index 36e6b6dd69..d046eddd20 100644 --- a/src/status_im/ui/components/desktop/views.cljs +++ b/src/status_im/ui/components/desktop/views.cljs @@ -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"]]]]) diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index ac75ee5ada..d61fd277dc 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index 6b6c264c8d..4edac1722f 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -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)}])]]) diff --git a/src/status_im/ui/components/list_item/styles.cljs b/src/status_im/ui/components/list_item/styles.cljs index c961922d6d..ef91510980 100644 --- a/src/status_im/ui/components/list_item/styles.cljs +++ b/src/status_im/ui/components/list_item/styles.cljs @@ -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}) \ No newline at end of file + :height size}) diff --git a/src/status_im/ui/components/lists/cell/styles.cljs b/src/status_im/ui/components/lists/cell/styles.cljs index 491748cd47..68061d18cd 100644 --- a/src/status_im/ui/components/lists/cell/styles.cljs +++ b/src/status_im/ui/components/lists/cell/styles.cljs @@ -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}) diff --git a/src/status_im/ui/components/qr_code_viewer/styles.cljs b/src/status_im/ui/components/qr_code_viewer/styles.cljs index 7435a0b092..641e593800 100644 --- a/src/status_im/ui/components/qr_code_viewer/styles.cljs +++ b/src/status_im/ui/components/qr_code_viewer/styles.cljs @@ -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}) diff --git a/src/status_im/ui/components/styles.cljs b/src/status_im/ui/components/styles.cljs index 0e845e4455..fa054c6426 100644 --- a/src/status_im/ui/components/styles.cljs +++ b/src/status_im/ui/components/styles.cljs @@ -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"}) diff --git a/src/status_im/ui/components/text_input/styles.cljs b/src/status_im/ui/components/text_input/styles.cljs index 64a10a46b0..0001588546 100644 --- a/src/status_im/ui/components/text_input/styles.cljs +++ b/src/status_im/ui/components/text_input/styles.cljs @@ -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) diff --git a/src/status_im/ui/components/toolbar/styles.cljs b/src/status_im/ui/components/toolbar/styles.cljs index fb036a1dbb..fa10f0e555 100644 --- a/src/status_im/ui/components/toolbar/styles.cljs +++ b/src/status_im/ui/components/toolbar/styles.cljs @@ -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 diff --git a/src/status_im/ui/components/toolbar/view.cljs b/src/status_im/ui/components/toolbar/view.cljs index 23fb48208a..e97bc472b7 100644 --- a/src/status_im/ui/components/toolbar/view.cljs +++ b/src/status_im/ui/components/toolbar/view.cljs @@ -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] diff --git a/src/status_im/ui/components/tooltip/styles.cljs b/src/status_im/ui/components/tooltip/styles.cljs index dd4a0e2b6f..926db625d1 100644 --- a/src/status_im/ui/components/tooltip/styles.cljs +++ b/src/status_im/ui/components/tooltip/styles.cljs @@ -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}) \ No newline at end of file + :margin-left 10}) diff --git a/src/status_im/ui/components/typography.cljs b/src/status_im/ui/components/typography.cljs new file mode 100644 index 0000000000..5a8fc3a70e --- /dev/null +++ b/src/status_im/ui/components/typography.cljs @@ -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))) diff --git a/src/status_im/ui/screens/about_app/styles.cljs b/src/status_im/ui/screens/about_app/styles.cljs index 29e4b6c7a0..3d55e62df8 100644 --- a/src/status_im/ui/screens/about_app/styles.cljs +++ b/src/status_im/ui/screens/about_app/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/accounts/create/styles.cljs b/src/status_im/ui/screens/accounts/create/styles.cljs index e84afc2a72..ae22a47d10 100644 --- a/src/status_im/ui/screens/accounts/create/styles.cljs +++ b/src/status_im/ui/screens/accounts/create/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/accounts/login/styles.cljs b/src/status_im/ui/screens/accounts/login/styles.cljs index 0bcbdb100c..beb94a7169 100644 --- a/src/status_im/ui/screens/accounts/login/styles.cljs +++ b/src/status_im/ui/screens/accounts/login/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/accounts/recover/styles.cljs b/src/status_im/ui/screens/accounts/recover/styles.cljs index 853a343cea..5ca392839c 100644 --- a/src/status_im/ui/screens/accounts/recover/styles.cljs +++ b/src/status_im/ui/screens/accounts/recover/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/accounts/styles.cljs b/src/status_im/ui/screens/accounts/styles.cljs index f3ae94ac89..62997322a7 100644 --- a/src/status_im/ui/screens/accounts/styles.cljs +++ b/src/status_im/ui/screens/accounts/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs index 8c3cbe3716..6f3bbf9c35 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs index 181b655070..51d717fbe4 100644 --- a/src/status_im/ui/screens/add_new/new_public_chat/view.cljs +++ b/src/status_im/ui/screens/add_new/new_public_chat/view.cljs @@ -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 diff --git a/src/status_im/ui/screens/add_new/styles.cljs b/src/status_im/ui/screens/add_new/styles.cljs index eee93724c7..de634592c1 100644 --- a/src/status_im/ui/screens/add_new/styles.cljs +++ b/src/status_im/ui/screens/add_new/styles.cljs @@ -35,7 +35,6 @@ (defstyle input {:flex 1 - :font-size 15 :padding-horizontal 14 :desktop {:height 30 :width "100%"} diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs index 6e34736047..4544d4e580 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index 588c8c25d1..4c172013fa 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/bootnodes_settings/styles.cljs b/src/status_im/ui/screens/bootnodes_settings/styles.cljs index dd9b50d643..12fc4a24a0 100644 --- a/src/status_im/ui/screens/bootnodes_settings/styles.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/browser/open_dapp/styles.cljs b/src/status_im/ui/screens/browser/open_dapp/styles.cljs index e50797c25b..d7163df05f 100644 --- a/src/status_im/ui/screens/browser/open_dapp/styles.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/styles.cljs @@ -15,8 +15,7 @@ (defstyle input {:flex 1 - :font-size 15 :padding-horizontal 14 :desktop {:height 30 :width "100%"} - :android {:padding 0}}) \ No newline at end of file + :android {:padding 0}}) diff --git a/src/status_im/ui/screens/browser/open_dapp/views.cljs b/src/status_im/ui/screens/browser/open_dapp/views.cljs index 4a77e17e0c..cd7062a998 100644 --- a/src/status_im/ui/screens/browser/open_dapp/views.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/views.cljs @@ -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}])])) \ No newline at end of file + :render-fn list-item}])])) diff --git a/src/status_im/ui/screens/browser/site_blocked/styles.cljs b/src/status_im/ui/screens/browser/site_blocked/styles.cljs index 7d850e28fc..8c31cd864e 100644 --- a/src/status_im/ui/screens/browser/site_blocked/styles.cljs +++ b/src/status_im/ui/screens/browser/site_blocked/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index a9766ce0b4..0b89b0bb67 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -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}) \ No newline at end of file + :margin-top 9}) diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index 74dae0c96e..17054bf9de 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -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}]]))) \ No newline at end of file + :name name}]]))) diff --git a/src/status_im/ui/screens/chat/input/suggestions.cljs b/src/status_im/ui/screens/chat/input/suggestions.cljs index f4b07217e4..b4091ec20b 100644 --- a/src/status_im/ui/screens/chat/input/suggestions.cljs +++ b/src/status_im/ui/screens/chat/input/suggestions.cljs @@ -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]]]) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index a92cb69cdd..45c614d1c0 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -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 [] diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 94cf704aaf..3929255016 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -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] diff --git a/src/status_im/ui/screens/chat/styles/input/input.cljs b/src/status_im/ui/screens/chat/styles/input/input.cljs index 4340d68347..93f6c0857e 100644 --- a/src/status_im/ui/screens/chat/styles/input/input.cljs +++ b/src/status_im/ui/screens/chat/styles/input/input.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/styles/input/suggestions.cljs b/src/status_im/ui/screens/chat/styles/input/suggestions.cljs index 9d2df70bcc..b0d10c1b51 100644 --- a/src/status_im/ui/screens/chat/styles/input/suggestions.cljs +++ b/src/status_im/ui/screens/chat/styles/input/suggestions.cljs @@ -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}) diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index e3ee78a269..8d3e1ff66c 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/styles/message/datemark.cljs b/src/status_im/ui/screens/chat/styles/message/datemark.cljs index a34f3201d4..a1d8a8e019 100644 --- a/src/status_im/ui/screens/chat/styles/message/datemark.cljs +++ b/src/status_im/ui/screens/chat/styles/message/datemark.cljs @@ -11,5 +11,4 @@ :height 22}) (def datemark-text - {:color colors/gray - :font-size 15}) + {:color colors/gray}) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index fcc4f52f7d..4d0073bf01 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/styles/message/options.cljs b/src/status_im/ui/screens/chat/styles/message/options.cljs index f51c8602b0..89050d5a7b 100644 --- a/src/status_im/ui/screens/chat/styles/message/options.cljs +++ b/src/status_im/ui/screens/chat/styles/message/options.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/toolbar_content.cljs b/src/status_im/ui/screens/chat/toolbar_content.cljs index cfee216ffc..3674f42a66 100644 --- a/src/status_im/ui/screens/chat/toolbar_content.cljs +++ b/src/status_im/ui/screens/chat/toolbar_content.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index 4011b9e1c6..fc6f74e7c0 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index cef07825e4..2c80fa96f4 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/currency_settings/styles.cljs b/src/status_im/ui/screens/currency_settings/styles.cljs index aaabd4f1ef..0587bfa3b6 100644 --- a/src/status_im/ui/screens/currency_settings/styles.cljs +++ b/src/status_im/ui/screens/currency_settings/styles.cljs @@ -16,6 +16,4 @@ :android {:height 56}}) (def currency-name-text - {:color colors/black - :font-size 17 - :line-height 20}) + {:typography :title}) diff --git a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs index b436d0f7ed..373862b4eb 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/desktop/main/add_new/views.cljs b/src/status_im/ui/screens/desktop/main/add_new/views.cljs index 3b8a67804d..3987b63c99 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/views.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/views.cljs @@ -31,8 +31,7 @@ {:component-will-unmount #(re-frame/dispatch [:new-chat/set-new-identity nil])} [react/view {:style styles/new-view} [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} + [react/text {:style styles/new-contact-title-text} (i18n/label :new-chat)]] [react/text {:style styles/new-contact-subtitle} (i18n/label :enter-ens-or-contact-code)] (let [disable? (or (not (string/blank? chat-error)) @@ -48,7 +47,6 @@ :auto-focus true :flex 1 :selection-color colors/blue - :font :default :on-change (fn [e] (let [native-event (.-nativeEvent e) text (.-text native-event)] @@ -77,8 +75,7 @@ (views/defview new-group-chat [] [react/view {:style styles/new-view} [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} + [react/text {:style styles/new-contact-title-text} (i18n/label :new-group-chat)]] [react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])} [react/view @@ -92,8 +89,7 @@ topic-error [:public-chat.new/topic-error-message]] [react/view {:style styles/new-view} [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text - :font :medium} + [react/text {:style styles/new-contact-title-text} (i18n/label :new-public-group-chat)]] [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] (let [disable? (or topic-error @@ -110,7 +106,6 @@ [react/text-input {:flex 1 :auto-focus true - :font :default :selection-color colors/blue :placeholder "" :on-change (fn [e] diff --git a/src/status_im/ui/screens/desktop/main/chat/styles.cljs b/src/status_im/ui/screens/desktop/main/chat/styles.cljs index 36f672886f..6e1f68f811 100644 --- a/src/status_im/ui/screens/desktop/main/chat/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/styles.cljs @@ -38,8 +38,7 @@ :width 230}) (def author - {:color colors/black - :font-weight "500" + {:font-weight "500" :font-size 14}) (def author-generated @@ -100,7 +99,7 @@ :justify-content :center})) (def topic-text - {:font-size 18.7 + {:font-size 18 :color colors/white}) (def toolbar-chat-view @@ -135,8 +134,7 @@ :text-decoration-line :underline)) (def system-message-text - {:color colors/black - :margin-top -5 + {:margin-top -5 :font-size 14}) (def message-container @@ -217,8 +215,7 @@ (def chat-title {:margin-bottom 4 - :font-size 14 - :color colors/black}) + :font-size 14}) (def reply-wrapper {:flex-direction :column-reverse}) diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index 548250fcf3..d7f1f87040 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -42,8 +42,7 @@ [react/image {:style styles/chat-icon :source {:uri photo-path}}]) [react/view {:style (styles/chat-title-and-type pending?)} - [react/text {:style styles/chat-title - :font :medium} + [react/text {:style styles/chat-title} chat-name] (cond pending? [react/text {:style styles/add-contact-text @@ -317,7 +316,6 @@ :multiline true :blur-on-submit true :style (styles/chat-text-input container-height) - :font :default :ref #(do (reset! inp-ref %) (re-frame/dispatch [:set-in [:desktop :input-ref] %])) :default-value input-text diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs index 983c8f4fac..c4d8556a35 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs @@ -59,8 +59,8 @@ (defn chat-name [current?] {:font-size 14 :font-weight (if current? - :bold - :normal)}) + "700" + "400")}) (def chat-last-message {:color colors/gray @@ -87,7 +87,7 @@ :justify-content :center})) (def topic-text - {:font-size 25.6 + {:font-size 25 :color colors/white}) (def popup-shaddow diff --git a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs index 4fe758ba50..7838335ea9 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/home/views.cljs @@ -93,9 +93,9 @@ :align-items :center :align-content :center} :on-press on-press} - [react/text {:style {:font-size 9 - :color colors/white} - :font :medium} tag]]) + [react/text {:style {:font-size 10 + :color colors/white}} + tag]]) (defn search-input [search-filter] [react/view {:style {:flex 1 diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs index 2296737090..62de7753df 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs @@ -166,8 +166,8 @@ (def adv-settings-subtitle {:margin-left 24 :margin-bottom 10 - :font-weight :bold - :font-size 16}) + :font-weight "700" + :font-size 16}) (def connection-stats-title (merge adv-settings-subtitle diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs index 29c5d0b064..c0301393c1 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs @@ -30,12 +30,10 @@ [react/text-input {:default-value name :placeholder "" :auto-focus true - :font :medium :style styles/profile-editing-user-name :on-change #(re-frame/dispatch [:my-profile/update-name (.-text (.-nativeEvent %))])}] [react/text {:style styles/profile-user-name - :font :medium :number-of-lines 1} name]) (let [gfy-name (gfy/generate-gfy public-key)] @@ -60,8 +58,7 @@ tooltip-opacity [:get-in [:tooltips :qr-copied]]] [react/view [react/view {:style styles/qr-code-container} - [react/text {:style styles/qr-code-title - :font :medium} + [react/text {:style styles/qr-code-title} (string/replace (i18n/label :qr-code-public-key-hint) "\n" "")] [react/view {:style styles/qr-code} [qr-code-viewer/qr-code {:value public-key :size 130}]] @@ -146,7 +143,8 @@ [react/view [react/view {:style (styles/adv-settings-row false)} [react/text {:style (assoc (styles/adv-settings-row-text colors/black) - :font-size 14)} (i18n/label :t/logging-enabled)] + :font-size 14)} + (i18n/label :t/logging-enabled)] [react/switch {:on-tint-color colors/blue :value logging-enabled :on-value-change #(re-frame/dispatch [:log-level.ui/logging-enabled (not logging-enabled)])}]] @@ -171,8 +169,7 @@ pfs? (:pfs? settings) connection-message (connection-status peers-count node-status mailserver-state disconnected)] [react/scroll-view - [react/text {:style styles/advanced-settings-title - :font :medium} + [react/text {:style styles/advanced-settings-title} (i18n/label :advanced-settings)] [react/view {:style styles/title-separator}] @@ -230,8 +227,7 @@ [react/touchable-highlight {:style (styles/adv-settings-row help-open?) :on-press #(re-frame/dispatch [:navigate-to (if help-open? :home :help-center)])} [react/view {:style styles/adv-settings} - [react/text {:style (styles/adv-settings-row-text colors/black) - :font (if help-open? :medium :default)} + [react/text {:style (styles/adv-settings-row-text colors/black)} (i18n/label :t/help-center)] [vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]]) @@ -239,8 +235,7 @@ [react/touchable-highlight {:style (styles/adv-settings-row open?) :on-press #(re-frame/dispatch [:navigate-to (if open? :home :about-app)])} [react/view {:style styles/adv-settings} - [react/text {:style (styles/adv-settings-row-text colors/black) - :font (if open? :medium :default)} + [react/text {:style (styles/adv-settings-row-text colors/black)} (i18n/label :t/about-app)] [vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]]) @@ -250,8 +245,7 @@ (re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)]) (re-frame/dispatch [:load-debug-metrics]))} [react/view {:style styles/adv-settings} - [react/text {:style (styles/adv-settings-row-text colors/black) - :font (if adv-settings-open? :medium :default)} + [react/text {:style (styles/adv-settings-row-text colors/black)} (i18n/label :t/advanced-settings)] [vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]]) @@ -293,14 +287,13 @@ [react/touchable-highlight {:style (styles/profile-row backup-recovery-phrase-open?) :on-press #(re-frame/dispatch [:navigate-to :backup-recovery-phrase])} [react/view {:style styles/adv-settings} - [react/text {:style (styles/profile-row-text colors/black) - :font (if backup-recovery-phrase-open? :medium :default)} + [react/text {:style (styles/profile-row-text colors/black)} (i18n/label :wallet-backup-recovery-title)] [components.common/counter {:size 22} 1]]]) [react/view {:style (styles/profile-row false)} [react/touchable-highlight {:on-press #(re-frame/dispatch [:accounts.logout.ui/logout-confirmed])} [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]] - [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]]]))) + [react/view [react/text {:style (styles/profile-row-text colors/gray)} (str "V" build/version " (" build/commit-sha ")")]]]]]))) (views/defview profile-data [] (views/letsubs diff --git a/src/status_im/ui/screens/extensions/add/styles.cljs b/src/status_im/ui/screens/extensions/add/styles.cljs index fead737482..9c66a05593 100644 --- a/src/status_im/ui/screens/extensions/add/styles.cljs +++ b/src/status_im/ui/screens/extensions/add/styles.cljs @@ -20,9 +20,8 @@ :margin-top 15}) (defstyle input - {:flex 1 - :font-size 15 - :android {:padding 0}}) + {:flex 1 + :android {:padding 0}}) (def bottom-container {:flex-direction :row @@ -33,9 +32,6 @@ {:margin-top 20 :margin-left 10}) -(def text - {:color colors/black}) - (def cartouche-container {:flex 1 :margin-top 16 diff --git a/src/status_im/ui/screens/extensions/add/views.cljs b/src/status_im/ui/screens/extensions/add/views.cljs index 7200f7cfcb..bdfe07962f 100644 --- a/src/status_im/ui/screens/extensions/add/views.cljs +++ b/src/status_im/ui/screens/extensions/add/views.cljs @@ -38,28 +38,22 @@ [react/text {:style {:color colors/white}} (i18n/label :t/extensions-disclaimer)]] [cartouche {:header (i18n/label :t/identifier)} - [react/text {:style styles/text} - (str (get-in data [:meta :name]))]] + [react/text (str (get-in data [:meta :name]))]] [cartouche {:header (i18n/label :t/name)} - [react/text {:style styles/text} - (str (get-in data [:meta :name]))]] + [react/text (str (get-in data [:meta :name]))]] [cartouche {:header (i18n/label :t/description)} - [react/text {:style styles/text} - (str (get-in data [:meta :description]))]] + [react/text (str (get-in data [:meta :description]))]] [cartouche {:header (i18n/label :t/hooks)} (into [react/view] (for [hook (keys (:hooks data))] - [react/text {:style styles/text} - (str hook)]))] + [react/text (str hook)]))] [cartouche {:header (i18n/label :t/permissions)} - [react/text {:style styles/text} - (i18n/label :t/none)]] + [react/text (i18n/label :t/none)]] [cartouche {:header (i18n/label :t/errors)} (if errors (into [react/view] (for [{::errors/keys [type value]} errors] - [react/text {:style styles/text} + [react/text (str (when type (name type)) " " (str value))])) - [react/text {:style styles/text} - (i18n/label :t/none)])]]] + [react/text (i18n/label :t/none)])]]] [react/view styles/bottom-container [react/view components.styles/flex] [components.common/bottom-button diff --git a/src/status_im/ui/screens/extensions/styles.cljs b/src/status_im/ui/screens/extensions/styles.cljs index 2eb5be95cf..88a3de1146 100644 --- a/src/status_im/ui/screens/extensions/styles.cljs +++ b/src/status_im/ui/screens/extensions/styles.cljs @@ -19,10 +19,7 @@ :padding-horizontal 16}) (defstyle extension-item-name-text - {:color colors/black - :ios {:font-size 17 - :line-height 20} - :android {:font-size 16}}) + {:typography :title}) (defn mailserver-icon [connected?] {:width 40 @@ -35,5 +32,4 @@ :justify-content :center}) (def empty-list - {:color colors/black - :text-align :center}) + {:text-align :center}) diff --git a/src/status_im/ui/screens/fleet_settings/styles.cljs b/src/status_im/ui/screens/fleet_settings/styles.cljs index 3bf71c0c9b..c4198b0949 100644 --- a/src/status_im/ui/screens/fleet_settings/styles.cljs +++ b/src/status_im/ui/screens/fleet_settings/styles.cljs @@ -19,9 +19,7 @@ :android {:height 56}}) (def fleet-item-name-text - {:color colors/black - :font-size 17 - :line-height 20}) + {:font-size 17}) (defstyle fleet-item-connected-text {:color colors/gray diff --git a/src/status_im/ui/screens/group/styles.cljs b/src/status_im/ui/screens/group/styles.cljs index 04f8b1b9ee..a153aacfa3 100644 --- a/src/status_im/ui/screens/group/styles.cljs +++ b/src/status_im/ui/screens/group/styles.cljs @@ -37,13 +37,8 @@ (def toolbar-header-container {:align-items :center}) -(def toolbar-header - {:font-size 15 - :color colors/black}) - (def toolbar-sub-header - {:font-size 15 - :color colors/gray}) + {:color colors/gray}) (def no-contacts {:flex 1 diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index d8722bcd41..b67d0ec6a2 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -41,7 +41,7 @@ toolbar/default-nav-back [react/view {:style styles/toolbar-header-container} [react/view - [react/text {:style styles/toolbar-header} header]] + [react/text header]] [react/view [react/text {:style styles/toolbar-sub-header} sub-header]]]]) diff --git a/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs b/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs index c502b5fda6..e40a65eda4 100644 --- a/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/authentication_method/styles.cljs @@ -24,12 +24,10 @@ :justify-content :center}) (def choose-authentication-method-text - {:color colors/black + {:typography :header :margin-top 51 :padding-horizontal 60 - :text-align :center - :font-weight :bold - :font-size 22}) + :text-align :center}) (def choose-authentication-method-row-text {:color colors/blue diff --git a/src/status_im/ui/screens/hardwallet/components.cljs b/src/status_im/ui/screens/hardwallet/components.cljs index 2455daba67..0dac449c67 100644 --- a/src/status_im/ui/screens/hardwallet/components.cljs +++ b/src/status_im/ui/screens/hardwallet/components.cljs @@ -18,15 +18,13 @@ [react/view {:padding 20 :justify-content :center} [react/text {:style {:font-size 18 - :font-weight :bold}} + :font-weight "700"}} "Application info"] [react/view {:margin-top 20} (if-not error (for [[k v] info] - ^{:key k} [react/text {:style {:font-size 15}} - (str k " " v)]) - [react/text {:style {:font-size 15}} - "Applet is not installed"])] + ^{:key k} [react/text (str k " " v)]) + [react/text "Applet is not installed"])] [react/touchable-highlight {:on-press #(reset! visible? false)} [react/view {:align-items :center diff --git a/src/status_im/ui/screens/hardwallet/connect/styles.cljs b/src/status_im/ui/screens/hardwallet/connect/styles.cljs index 62859e12d7..6b715461a5 100644 --- a/src/status_im/ui/screens/hardwallet/connect/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/connect/styles.cljs @@ -19,18 +19,9 @@ {:margin-top 55}) (def status-hardwallet-text - {:font-size 22 - :font-weight :bold - :color colors/black + {:typography :header :text-align :center}) -(def link-card-text - {:text-align :center - :font-size 15 - :color colors/gray - :padding-horizontal 80 - :padding-vertical 10}) - (defn bottom-action-container [nfc-enabled?] {:background-color (if nfc-enabled? colors/gray-background @@ -48,13 +39,6 @@ {:width 301 :height 180}) -(def hold-card-text - {:width 186 - :text-align :center - :font-size 14 - :line-height 20 - :margin-right 40}) - (def nfc-enabled-container {:flex-direction :column :justify-content :space-between @@ -71,11 +55,6 @@ {:margin-left 52 :margin-top 22}) -(def turn-nfc-text - {:text-transform :uppercase - :line-height 20 - :color colors/gray}) - (def go-to-settings-text {:text-align :center :padding-top 9 @@ -94,7 +73,6 @@ (def product-info-text {:text-align :center - :font-size 15 :color colors/blue}) (def external-link-icon diff --git a/src/status_im/ui/screens/hardwallet/login/styles.cljs b/src/status_im/ui/screens/hardwallet/login/styles.cljs index e38facec8f..e45d4849b2 100644 --- a/src/status_im/ui/screens/hardwallet/login/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/login/styles.cljs @@ -24,9 +24,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 @@ -40,6 +39,4 @@ (def login-badge-image-size 56) (def login-badge-name - {:font-size 15 - :color colors/black - :margin-top 8}) + {:margin-top 8}) diff --git a/src/status_im/ui/screens/hardwallet/pin/styles.cljs b/src/status_im/ui/screens/hardwallet/pin/styles.cljs index 0b463dd50d..48ec12d3e7 100644 --- a/src/status_im/ui/screens/hardwallet/pin/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/styles.cljs @@ -19,7 +19,6 @@ (def error-text {:color colors/red - :font-size 15 :text-align :center}) (def center-container @@ -28,12 +27,10 @@ :margin-top 28}) (def center-title-text - {:font-size 22 - :color colors/black}) + {:typography :header}) (def create-pin-text - {:font-size 15 - :padding-top 8 + {:padding-top 8 :width 314 :text-align :center :color colors/gray}) diff --git a/src/status_im/ui/screens/hardwallet/pin/views.cljs b/src/status_im/ui/screens/hardwallet/pin/views.cljs index a8cc8fc739..ae300ac747 100644 --- a/src/status_im/ui/screens/hardwallet/pin/views.cljs +++ b/src/status_im/ui/screens/hardwallet/pin/views.cljs @@ -76,16 +76,14 @@ [react/scroll-view [react/view styles/pin-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label title-label)] [react/text {:style styles/create-pin-text :number-of-lines 2} (i18n/label description-label)] (when retry-counter - [react/text {:style {:font-weight :bold + [react/text {:style {:font-weight "700" :padding-top 10 - :font-size 15 :color colors/red}} (i18n/label :t/pin-retries-left {:number retry-counter})]) (case status @@ -93,8 +91,7 @@ [react/activity-indicator {:animating true :size :small}]] :error [react/view styles/error-container - [react/text {:style styles/error-text - :font :medium} + [react/text {:style styles/error-text} (i18n/label error-label)]] (if (= step :puk) [puk-indicators pin] diff --git a/src/status_im/ui/screens/hardwallet/settings/views.cljs b/src/status_im/ui/screens/hardwallet/settings/views.cljs index 42e060fad7..44cf6a35fe 100644 --- a/src/status_im/ui/screens/hardwallet/settings/views.cljs +++ b/src/status_im/ui/screens/hardwallet/settings/views.cljs @@ -49,7 +49,6 @@ [components.common/bottom-button {:on-press #(re-frame/dispatch [:keycard-settings.ui/reset-card-next-button-pressed]) :disabled? disabled? - :uppercase? false :forward? true}]]) (defview reset-card [] @@ -68,10 +67,8 @@ :height 160}}]] [react/view {:flex 1 :padding-horizontal 30} - [react/text {:style {:font-weight :bold - :color colors/black - :font-size 22 - :text-align :center}} + [react/text {:style {:typography :header + :text-align :center}} (i18n/label :t/reset-card-description)] [activity-indicator disabled?]] [react/view {:flex-direction :row @@ -88,8 +85,7 @@ [react/view [react/text {:style {:font-size 20 :text-align :center - :padding-horizontal 40 - :color colors/black}} + :padding-horizontal 40}} (i18n/label :t/keycard-blocked)]]) (defview keycard-settings [] diff --git a/src/status_im/ui/screens/hardwallet/setup/styles.cljs b/src/status_im/ui/screens/hardwallet/setup/styles.cljs index 06ea209298..0d19264e42 100644 --- a/src/status_im/ui/screens/hardwallet/setup/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/styles.cljs @@ -26,7 +26,7 @@ :border-color colors/blue-light}) (def maintain-card-text - {:font-size 12 + {:typography :caption :flex 1 :padding-horizontal 20 :color colors/blue}) @@ -41,16 +41,16 @@ :margin-right 20}) (def maintain-card-current-step-text - {:font-size 12 - :color colors/blue}) + {:typography :caption + :color colors/blue}) (def maintain-card-second-step-text - {:font-size 12 + {:typography :caption :padding-left 8 :color colors/gray}) (def maintain-card-third-step-text - {:font-size 12 + {:typography :caption :padding-left 8 :color colors/gray}) @@ -104,15 +104,12 @@ {:margin-top 37}) (def center-text - {:font-size 15 - :color colors/gray + {:color colors/gray :text-align :center}) (def center-title-text - {:font-size 22 - :font-weight :bold - :text-align :center - :color colors/black}) + {:typography :header + :text-align :center}) (def bottom-container {:height 52 @@ -142,8 +139,8 @@ :margin-bottom 1}) (def bottom-button-text - {:font-size 15 - :color colors/blue}) + {:typography :main-medium + :color colors/blue}) (def next-button-container {:flex-direction :row @@ -167,14 +164,13 @@ :height 200}) (def wizard-step-text - {:font-size 12 + {:typography :caption :color colors/blue :text-align :center :padding-bottom 18}) (def generating-codes-for-pairing-text - {:font-size 15 - :padding-top 8 + {:padding-top 8 :width 314 :text-align :center :color colors/gray}) @@ -186,23 +182,17 @@ {:align-self :center}) (def check-recovery-phrase-text - {:font-size 22 - :font-weight :bold - :text-align :center - :color colors/gray}) + {:typography :header + :text-align :center + :color colors/gray}) (def recovery-phrase-word-n-text - {:font-size 22 - :font-weight :bold - :text-align :center - :color colors/black}) + {:typography :header + :text-align :center}) (def recovery-phrase-description {:padding 16}) -(def recovery-phrase-description-text - {:color colors/black}) - (def waiting-indicator-container {:height 200}) @@ -227,28 +217,23 @@ :margin-vertical 25}) (def secret-keys-title-text - {:font-size 22 - :font-weight :bold - :text-align :center - :color colors/black}) + {:typography :header + :text-align :center}) (def secret-keys-image-container {:width 120 :height 120}) (def puk-code-title-text - {:font-size 17 - :font-weight :bold - :padding-top 12 - :color colors/black}) + {:typography :title-bold + :padding-top 12}) (def secret-code-explanation-container {:margin-top 5 :margin-bottom 15}) (def puk-code-explanation-text - {:font-size 15 - :padding-horizontal 32 + {:padding-horizontal 32 :text-align :center :padding-top 5 :padding-bottom 10 @@ -262,17 +247,12 @@ {:border-bottom-width 2 :width 302 :text-align :center - ;:justify-content :center - ;:align-items :center - ;:flex-direction :column - ;:padding-bottom 10 :border-color colors/gray-lighter}) (defstyle puk-code-numbers-inner-container {:width "85%" :android {:margin-horizontal 16} :height 94 - ;:margin-top 10 :align-items :center :justify-content :space-between :flex-direction :column @@ -281,8 +261,7 @@ :border-radius 10}) (def puk-code-text - {:font-size 17 - :font-weight :bold + {:typography :title-bold :padding-bottom 10 :text-align :center :color colors/green}) @@ -307,21 +286,17 @@ :margin-top 10}) (def enter-pair-code-title-text - {:font-size 22 - :text-align :center - :color colors/black}) + {:typography :title + :text-align :center}) (def enter-pair-code-explanation-text - {:font-size 15 - :padding-top 5 + {:padding-top 5 :text-align :center :padding-horizontal 60 :color colors/gray}) (def card-is-empty-text - {:color colors/black - :font-size 17 - :font-weight :bold + {:typography :title-bold :margin-bottom 20}) (def card-is-empty-prepare-text @@ -336,8 +311,7 @@ :flex-direction :column}) (def remaining-steps-text - {:color colors/gray - :font-size 15}) + {:color colors/gray}) (def remaining-step-row {:flex-direction :row @@ -356,4 +330,3 @@ {:align-items :center :justify-content :center :margin-left 11}) - diff --git a/src/status_im/ui/screens/hardwallet/setup/views.cljs b/src/status_im/ui/screens/hardwallet/setup/views.cljs index 6870abd950..10669b8c46 100644 --- a/src/status_im/ui/screens/hardwallet/setup/views.cljs +++ b/src/status_im/ui/screens/hardwallet/setup/views.cljs @@ -69,9 +69,8 @@ [react/view components.styles/flex] [react/view {:margin-right 20} [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/secret-keys-next-button-pressed]) - :uppercase? false - :forward? true}]]]]])) + {:on-press #(re-frame/dispatch [:hardwallet.ui/secret-keys-next-button-pressed]) + :forward? true}]]]]])) (defview card-ready [] (letsubs [flow [:hardwallet-flow]] @@ -89,9 +88,8 @@ [react/view components.styles/flex] [react/view {:margin-right 20} [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/card-ready-next-button-pressed]) - :uppercase? false - :forward? true}]]]]])) + {:on-press #(re-frame/dispatch [:hardwallet.ui/card-ready-next-button-pressed]) + :forward? true}]]]]])) (defview display-recovery-phrase [] (letsubs [mnemonic [:hardwallet-mnemonic]] @@ -100,8 +98,7 @@ [react/view styles/recovery-phrase-inner-container [react/view styles/center-container [react/text {:style styles/center-title-text - :number-of-lines 2 - :font :bold} + :number-of-lines 2} (i18n/label :t/your-recovery-phrase)] [react/view [react/view {:style {:margin-top 17 @@ -117,16 +114,14 @@ :background-color colors/gray-lighter}}] [seed.views/six-words (subvec mnemonic-vec 6 12)]] [react/view styles/recovery-phrase-description - [react/text {:style styles/recovery-phrase-description-text} - (i18n/label :t/your-recovery-phrase-description)]]]]] + [react/text (i18n/label :t/your-recovery-phrase-description)]]]]] [react/view styles/next-button-container [react/view components.styles/flex] [react/view {:margin-right 20} [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed]) - :label (i18n/label :t/next) - :uppercase? false - :forward? true}]]]]))) + {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed]) + :label (i18n/label :t/next) + :forward? true}]]]]))) (defview confirm-word-input [error ref step] {:component-will-update #(.clear @ref)} @@ -157,15 +152,13 @@ [confirm-word-input error ref step]]] [react/view styles/back-and-next-buttons-container [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-back-button-pressed]) - :back? true - :uppercase? false - :label (i18n/label :t/back)}] + {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-back-button-pressed]) + :back? true + :label (i18n/label :t/back)}] [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-next-button-pressed]) - :disabled? (empty? input-word) - :uppercase? false - :forward? true}]]]))) + {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-confirm-word-next-button-pressed]) + :disabled? (empty? input-word) + :forward? true}]]]))) (defview enter-recovery-phrase [] (letsubs [width [:dimensions/window-width] @@ -200,11 +193,10 @@ [react/view components.styles/flex] [react/view {:margin-right 20} [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed]) - :label (i18n/label :t/next) - :disabled? disabled? - :uppercase? false - :forward? true}]]]]))) + {:on-press #(re-frame/dispatch [:hardwallet.ui/recovery-phrase-next-button-pressed]) + :label (i18n/label :t/next) + :disabled? disabled? + :forward? true}]]]]))) (defview recovery-phrase [] (letsubs [flow [:hardwallet-flow]] @@ -218,8 +210,7 @@ [react/view styles/enter-pair-code-container [react/view styles/enter-pair-code-title-container [react/view - [react/text {:style styles/enter-pair-code-title-text - :font :bold} + [react/text {:style styles/enter-pair-code-title-text} (i18n/label :t/enter-pair-code)] [react/text {:style styles/enter-pair-code-explanation-text} (i18n/label :t/enter-pair-code-description)]] @@ -231,10 +222,9 @@ [react/view components.styles/flex] [react/view {:margin-right 20} [components.common/bottom-button - {:on-press #(re-frame/dispatch [:hardwallet.ui/pair-code-next-button-pressed]) - :disabled? (empty? pair-code) - :uppercase? false - :forward? true}]]]])) + {:on-press #(re-frame/dispatch [:hardwallet.ui/pair-code-next-button-pressed]) + :disabled? (empty? pair-code) + :forward? true}]]]])) (defn- card-with-button-view [{:keys [text-label button-label button-container-style on-press show-icon?]}] @@ -280,11 +270,9 @@ ["5" (i18n/label :t/recovery-phrase)]]] ^{:key number} [react/view styles/remaining-step-row [react/view styles/remaining-step-row-text - [react/text {:style {:color colors/black}} - number]] + [react/text number]] [react/view styles/remaining-step-row-text2 - [react/text {:style {:color colors/black}} - text]]])]] + [react/text text]]])]] [react/view styles/bottom-container [react/touchable-highlight {:on-press #(re-frame/dispatch [:hardwallet.ui/begin-setup-button-pressed])} @@ -330,9 +318,7 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:hardwallet.ui/error-button-pressed])} [react/view styles/bottom-button-container - [react/text {:style styles/bottom-button-text - :font :medium - :uppercase? false} + [react/text {:style styles/bottom-button-text} (i18n/label :t/try-again)]]]]])) (defn- loading-view [{:keys [title-label text-label estimated-time-seconds step-number]}] @@ -340,8 +326,7 @@ Used by 'Prepare', 'Pairing', 'Completing' screens" [react/view styles/loading-view-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label title-label)] (when text-label [react/text {:style styles/generating-codes-for-pairing-text @@ -369,8 +354,7 @@ (.setNativeProps @progress-bar params))))))} [react/view styles/loading-view-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label :t/preparing-card)] [react/text {:style styles/generating-codes-for-pairing-text :number-of-lines 2} @@ -389,8 +373,7 @@ (defn- generating-mnemonic [] [react/view styles/loading-view-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label :t/generating-mnemonic)] [react/text {:style styles/estimated-time-text} (i18n/label :t/this-will-take-few-seconds)]] @@ -401,8 +384,7 @@ (defn- loading-keys [] [react/view styles/loading-view-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label :t/finishing-card-setup)] [react/text {:style styles/generating-codes-for-pairing-text :number-of-lines 2} @@ -416,8 +398,7 @@ (defn- pairing [] [react/view styles/loading-view-container [react/view styles/center-container - [react/text {:style styles/center-title-text - :font :bold} + [react/text {:style styles/center-title-text} (i18n/label :t/pairing-card)] [react/text {:style styles/estimated-time-text} (i18n/label :t/this-will-take-few-seconds)]] @@ -457,4 +438,4 @@ [react/view styles/container [react/view styles/inner-container [components/maintain-card step]] - [content step]]])) \ No newline at end of file + [content step]]])) diff --git a/src/status_im/ui/screens/hardwallet/success/styles.cljs b/src/status_im/ui/screens/hardwallet/success/styles.cljs index f3da0f8a81..f56de1db41 100644 --- a/src/status_im/ui/screens/hardwallet/success/styles.cljs +++ b/src/status_im/ui/screens/hardwallet/success/styles.cljs @@ -38,15 +38,11 @@ :align-items :center}) (def complete-text - {:font-size 22 - :font-weight :bold - :color colors/black - :text-align :center}) + {:typography :header + :text-align :center}) (def complete-information-text {:text-align :center - :font-size 15 - :line-height 22 :color colors/gray :margin-bottom 21 :padding-horizontal 80 @@ -63,11 +59,10 @@ :margin-bottom 40}) (def bottom-action-text - {:font-size 15 + {:typography :main :color colors/blue - :line-height 20 :text-transform :uppercase}) (def waiting-indicator-container {:height 20 - :margin-bottom 70}) \ No newline at end of file + :margin-bottom 70}) diff --git a/src/status_im/ui/screens/home/filter/views.cljs b/src/status_im/ui/screens/home/filter/views.cljs index d96ab865cc..edbd4eafb3 100644 --- a/src/status_im/ui/screens/home/filter/views.cljs +++ b/src/status_im/ui/screens/home/filter/views.cljs @@ -45,8 +45,7 @@ (.blur @input-ref) (reset! input-is-focused? false)) :style {:margin-left 16}} - [react/text {:style {:color colors/blue - :font-size 15}} + [react/text {:style {:color colors/blue}} (i18n/label :t/cancel)]])])))) (defonce search-input-state @@ -137,4 +136,4 @@ "chats" :main-icons/message) :icon-color colors/gray}])) :render-fn (fn [home-item] - [inner-item/home-list-item home-item])}]) \ No newline at end of file + [inner-item/home-list-item home-item])}]) diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 2526aa10f8..2f1b54914a 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -88,12 +88,9 @@ (def last-message-container {:flex-shrink 1}) -(defstyle last-message-text - {:color colors/text-gray - :android {:font-size 14 - :height 24} - :ios {:font-size 15 - :height 24}}) +(def last-message-text + {:color colors/text-gray + :height 24}) (def search-input-height 56) @@ -115,16 +112,13 @@ :border-radius 8}) (def search-input - (merge {:flex 1 - :font-size 15} + (merge {:flex 1} (when platform/android? - {:line-height 22 - :margin 0 + {:margin 0 :padding 0}))) (def filter-section-title - {:font-size 15 - :margin-left 16 + {:margin-left 16 :margin-top 14 :margin-bottom 4 :color colors/gray}) @@ -168,10 +162,8 @@ :margin-horizontal 34}) (def no-chats-text - {:line-height 22 - :font-size 15 - :text-align :center - :color colors/gray}) + {:text-align :center + :color colors/gray}) (def welcome-view {:flex 1}) @@ -181,17 +173,12 @@ :margin-top 42}) (def welcome-text - {:line-height 28 - :font-size 22 - :font-weight :bold + {:typography :header :margin-top 32 - :text-align :center - :color colors/black}) + :text-align :center}) (def welcome-text-description - {:line-height 22 - :font-size 15 - :margin-top 8 + {:margin-top 8 :text-align :center :margin-horizontal 32 :color colors/gray}) diff --git a/src/status_im/ui/screens/intro/styles.cljs b/src/status_im/ui/screens/intro/styles.cljs index 5f5de1fe73..1e97da0832 100644 --- a/src/status_im/ui/screens/intro/styles.cljs +++ b/src/status_im/ui/screens/intro/styles.cljs @@ -17,16 +17,14 @@ (defstyle intro-text {:text-align :center - :color colors/black - :font-weight :bold + :font-weight "700" :font-size 24}) (def intro-text-description - {:line-height 21 - :margin-top 8 - :margin-bottom 16 - :text-align :center - :color colors/gray}) + {:margin-top 8 + :margin-bottom 16 + :text-align :center + :color colors/gray}) (def buttons-container {:align-items :center}) diff --git a/src/status_im/ui/screens/log_level_settings/styles.cljs b/src/status_im/ui/screens/log_level_settings/styles.cljs index 309e3b8a15..8380840d41 100644 --- a/src/status_im/ui/screens/log_level_settings/styles.cljs +++ b/src/status_im/ui/screens/log_level_settings/styles.cljs @@ -19,9 +19,7 @@ :android {:height 56}}) (def log-level-item-name-text - {:color colors/black - :font-size 17 - :line-height 20}) + {:typography :title}) (def log-level-item-connected-text {:color colors/gray diff --git a/src/status_im/ui/screens/mobile_network_settings/sheets.cljs b/src/status_im/ui/screens/mobile_network_settings/sheets.cljs index be15860356..fc4ca6dbc4 100644 --- a/src/status_im/ui/screens/mobile_network_settings/sheets.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/sheets.cljs @@ -32,8 +32,7 @@ (i18n/label :mobile-network-go-to-settings)]]) (views/defview checkbox [] - (views/letsubs - [checked? [:get :mobile-network/remember-choice?]] + (views/letsubs [checked? [:get :mobile-network/remember-choice?]] [react/view {:style styles/checkbox-line-container} [checkbox/checkbox @@ -43,17 +42,16 @@ :on-value-change #(re-frame/dispatch [:mobile-network/remember-choice? %])}] [react/view {:style styles/checkbox-text-container} - [react/text {:style styles/checkbox-text} - (i18n/label :mobile-network-sheet-remember-choice)]]])) + [react/text (i18n/label :mobile-network-sheet-remember-choice)]]])) (defn settings [] [react/view {:style styles/settings-container} - [react/text + [react/nested-text {:style styles/settings-text :on-press #(re-frame/dispatch [:mobile-network/navigate-to-settings])} (i18n/label :mobile-network-sheet-configure) - [react/text {:style styles/settings-link} + [{:style styles/settings-link} (str " " (i18n/label :mobile-network-sheet-settings))]]]) (views/defview settings-sheet [] diff --git a/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs b/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs index d92af4a7ab..94ab0c17d5 100644 --- a/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs @@ -11,9 +11,7 @@ :margin-top 8}) (def title-text - (merge - common-styles/text-title-bold - {:color colors/black})) + {:typography :title-bold}) (def details {:width 311 @@ -23,11 +21,8 @@ :margin-bottom 10}) (def details-text - (merge - common-styles/text-main - {:color colors/gray - :text-align :center - :line-height 22})) + {:color colors/gray + :text-align :center}) (def network-icon {:title-color :blue @@ -70,12 +65,6 @@ :flex 1 :margin-left 13}) -(def checkbox-text - (merge - common-styles/text-main - {:color colors/black - :line-height 19})) - (def settings-container {:margin-left 69 :height 44 @@ -83,16 +72,10 @@ :align-items :flex-start}) (def settings-text - (merge - common-styles/text-main - {:color colors/gray - :line-height 22})) + {:color colors/gray}) (def settings-link - (merge - common-styles/text-main - {:color colors/blue - :line-height 22})) + {:color colors/blue}) (def go-to-settings-container {:height 52 @@ -101,6 +84,4 @@ :align-self :stretch}) (def go-to-settings - (merge - common-styles/text-main - {:color colors/blue})) + {:color colors/blue}) diff --git a/src/status_im/ui/screens/mobile_network_settings/style.cljs b/src/status_im/ui/screens/mobile_network_settings/style.cljs index c9e4c73541..042c1cb6d6 100644 --- a/src/status_im/ui/screens/mobile_network_settings/style.cljs +++ b/src/status_im/ui/screens/mobile_network_settings/style.cljs @@ -18,10 +18,7 @@ :background-color colors/white}) (def use-mobile-data-text - (merge - common-styles/text-main - {:color colors/gray - :line-height 22})) + {:color colors/gray}) (def settings-separator {:align-self :stretch @@ -34,6 +31,4 @@ :padding-left 16}) (def defaults - (merge - common-styles/text-main - {:color colors/blue})) + {:color colors/blue}) diff --git a/src/status_im/ui/screens/network_settings/network_details/views.cljs b/src/status_im/ui/screens/network_settings/network_details/views.cljs index bbaabba6c4..24a424f588 100644 --- a/src/status_im/ui/screens/network_settings/network_details/views.cljs +++ b/src/status_im/ui/screens/network_settings/network_details/views.cljs @@ -31,8 +31,7 @@ [react/view st/connect-button-container [react/view {:style st/connect-button :accessibility-label :network-connect-button} - [react/text {:style st/connect-button-label - :uppercase? true} + [react/text {:style st/connect-button-label} (i18n/label :t/connect)]] [react/i18n-text {:style st/connect-button-description :key :connecting-requires-login}]]]) diff --git a/src/status_im/ui/screens/network_settings/styles.cljs b/src/status_im/ui/screens/network_settings/styles.cljs index 425b8c90ae..d7129d599a 100644 --- a/src/status_im/ui/screens/network_settings/styles.cljs +++ b/src/status_im/ui/screens/network_settings/styles.cljs @@ -8,16 +8,14 @@ :background-color :white}) (def badge-name-text - {:color colors/black - :font-size 17}) + {:font-size 17}) (defstyle badge-connected-text {:color colors/gray :ios {:margin-top 5}}) -(defstyle paste-json-text-input - {:ios {:font-size 17 - :line-height 24}}) +(def paste-json-text-input + {:font-size 17}) (def connect-button-container {:margin-top 8 @@ -53,9 +51,7 @@ :android {:border-radius 4}}) (defstyle network-config-text - {:color colors/black - :font-size 17 - :line-height 24 + {:font-size 17 :ios {:opacity 0.8} :android {:opacity 0.4}}) @@ -106,9 +102,7 @@ :android {:height 56}}) (def network-item-name-text - {:color colors/black - :font-size 17 - :line-height 20}) + {:font-size 17}) (def network-item-connected-text {:color colors/gray diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs index b8547ef33f..0438b7a0c5 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/styles.cljs @@ -17,9 +17,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}) diff --git a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs index 87bd6a3a1a..679522399d 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs @@ -20,8 +20,7 @@ [react/view styles/button-container [react/view {:style styles/connect-button :accessibility-label :mailserver-connect-button} - [react/text {:style styles/button-label - :uppercase? true} + [react/text {:style styles/button-label} (i18n/label :t/connect)]]]]) (defn delete-button [id] @@ -29,8 +28,7 @@ [react/view styles/button-container [react/view {:style styles/delete-button :accessibility-label :mailserver-delete-button} - [react/text {:style styles/button-label - :uppercase? true} + [react/text {:style styles/button-label} (i18n/label :t/delete)]]]]) (def qr-code diff --git a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs index 5ebe981885..9af6beba7b 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs @@ -22,10 +22,8 @@ :ios {:height 64} :android {:height 56}}) -(defstyle mailserver-item-name-text - {:color colors/black - :font-size 17 - :line-height 20}) +(def mailserver-item-name-text + {:typography :title}) (defn mailserver-icon-container [connected?] {:width 40 @@ -45,8 +43,5 @@ :flex-direction :row :padding-vertical 5}) -(def mailserver-pinned-text - {:color colors/black}) - (def mailserver-pinned-text-container {:margin-top 15}) diff --git a/src/status_im/ui/screens/offline_messaging_settings/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/views.cljs index cb3ea7fecf..702561a4af 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/views.cljs @@ -32,8 +32,7 @@ #(re-frame/dispatch [:mailserver.ui/unpin-pressed]) #(re-frame/dispatch [:mailserver.ui/pin-pressed]))}] [react/view {:style styles/mailserver-pinned-text-container} - [react/text {:style styles/mailserver-pinned-text} - (i18n/label :t/mailserver-automatic)]]]]) + [react/text (i18n/label :t/mailserver-automatic)]]]]) (defn render-row [current-mailserver-id pinned?] (fn [{:keys [name id user-defined]}] diff --git a/src/status_im/ui/screens/pairing/styles.cljs b/src/status_im/ui/screens/pairing/styles.cljs index efa9244c78..09eae253e9 100644 --- a/src/status_im/ui/screens/pairing/styles.cljs +++ b/src/status_im/ui/screens/pairing/styles.cljs @@ -19,9 +19,6 @@ :ios {:height 64} :android {:height 56}}) -(defstyle installation-item-name-text - {:color colors/black}) - (def installation-list {:background-color :white :padding-horizontal 16 @@ -70,13 +67,11 @@ (def pairing-actions-text {:flex 1 - :font-size 15 :margin-left 16}) (def pair-this-device-title {:color colors/blue - :margin-bottom 6 - :font-size 15}) + :margin-bottom 6}) (defnstyle pairing-button-icon [enabled?] (let [color (if enabled? @@ -104,6 +99,5 @@ :margin-top 15}) (defstyle input - {:flex 1 - :font-size 15 - :android {:padding 0}}) + {:flex 1 + :android {:padding 0}}) diff --git a/src/status_im/ui/screens/pairing/views.cljs b/src/status_im/ui/screens/pairing/views.cljs index 34286b7e5b..0e3ac63153 100644 --- a/src/status_im/ui/screens/pairing/views.cljs +++ b/src/status_im/ui/screens/pairing/views.cljs @@ -104,14 +104,13 @@ (icon-style (styles/pairing-button-icon true))]] [react/view {:style styles/pairing-actions-text} [react/view - [react/text {:style styles/installation-item-name-text} - (str - installation-name - " (" - (i18n/label :t/you) - ", " - (subs installation-id 0 5) - ")")]]]]) + [react/text (str + installation-name + " (" + (i18n/label :t/you) + ", " + (subs installation-id 0 5) + ")")]]]]) (defn render-row [{:keys [name device-type @@ -128,14 +127,13 @@ (icon-style (styles/pairing-button-icon enabled?))]] [react/view {:style styles/pairing-actions-text} [react/view - [react/text {:style styles/installation-item-name-text} - (if (string/blank? name) - (str - (i18n/label :t/pairing-no-info) - " (" - (subs installation-id 0 5) - ")") - name)]]] + [react/text (if (string/blank? name) + (str + (i18n/label :t/pairing-no-info) + " (" + (subs installation-id 0 5) + ")") + name)]]] [react/view (if utils.platform/ios? ;; On IOS switches seems to be broken, they take up value of dev-mode? (so if dev mode is on they all show to be on). diff --git a/src/status_im/ui/screens/privacy_policy/styles.cljs b/src/status_im/ui/screens/privacy_policy/styles.cljs index 17f27a8570..369a8281cc 100644 --- a/src/status_im/ui/screens/privacy_policy/styles.cljs +++ b/src/status_im/ui/screens/privacy_policy/styles.cljs @@ -1,14 +1,11 @@ (ns status-im.ui.screens.privacy-policy.styles - (:require [status-im.ui.components.common.styles :as common-styles] - [status-im.ui.components.colors :as colors])) - -(def privacy-policy-button-container - {:margin-bottom 16 - :margin-top 42}) + (:require [status-im.ui.components.colors :as colors])) (def privacy-policy-button-text - (merge common-styles/button-label - {:font-size 14})) + {:color colors/blue}) (def privacy-policy-button-text-gray - (merge privacy-policy-button-text {:color colors/gray})) + {:text-align :center + :color colors/gray + :margin-bottom 16 + :margin-top 42}) diff --git a/src/status_im/ui/screens/privacy_policy/views.cljs b/src/status_im/ui/screens/privacy_policy/views.cljs index 6ba8d15309..6a2ac2f736 100644 --- a/src/status_im/ui/screens/privacy_policy/views.cljs +++ b/src/status_im/ui/screens/privacy_policy/views.cljs @@ -5,10 +5,9 @@ [re-frame.core :as re-frame])) (defn privacy-policy-button [] - [react/view styles/privacy-policy-button-container - [react/text {:style styles/privacy-policy-button-text-gray - :on-press #(re-frame/dispatch [:privacy-policy/privacy-policy-button-pressed])} - (i18n/label :t/agree-by-continuing) - [react/text - {:style styles/privacy-policy-button-text} - (i18n/label :t/privacy-policy)]]]) + [react/nested-text + {:style styles/privacy-policy-button-text-gray + :on-press #(re-frame/dispatch [:privacy-policy/privacy-policy-button-pressed])} + (i18n/label :t/agree-by-continuing) + [{:style styles/privacy-policy-button-text} + (i18n/label :t/privacy-policy)]]) diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 65ec724a9f..cdec57bc43 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -16,10 +16,8 @@ (defstyle profile-name-text {:padding-vertical 8 - :font-size 15 :text-align :center - :font-weight :bold - :color colors/black}) + :font-weight "700"}) (defstyle profile-three-words {:font-size 12 @@ -27,8 +25,7 @@ :color colors/gray}) (defstyle profile-name-input-text - {:font-size 15 - :text-align :center + {:text-align :center :flex 1 :desktop {:height 20 :width 200} @@ -36,8 +33,7 @@ :height 45 :border-bottom-width 1 :border-bottom-color colors/gray-light} - :android {:color colors/black - :border-bottom-width 2 + :android {:border-bottom-width 2 :border-bottom-color colors/blue}}) (def profile-header-name-container @@ -70,10 +66,8 @@ :flex-direction :row :justify-content :space-between}) -(defstyle settings-item-text - {:flex-wrap :nowrap - :font-size 15 - :android {:color colors/black}}) +(def settings-item-text + {:flex-wrap :nowrap}) (def settings-item-destructive {:color colors/red}) @@ -86,7 +80,6 @@ :flex-wrap :nowrap :text-align :right :padding-right 10 - :font-size 15 :color colors/gray}) (def settings-title diff --git a/src/status_im/ui/screens/profile/components/views.cljs b/src/status_im/ui/screens/profile/components/views.cljs index 2f0d65342f..113b29310f 100644 --- a/src/status_im/ui/screens/profile/components/views.cljs +++ b/src/status_im/ui/screens/profile/components/views.cljs @@ -17,7 +17,6 @@ [react/view [react/text-input (merge {:style styles/profile-name-input-text - :font :medium :placeholder "" :default-value name :auto-focus true @@ -97,8 +96,7 @@ (or item-text (i18n/label label-kw))] (when-not (string/blank? value) [react/text {:style styles/settings-item-value - :number-of-lines 1 - :uppercase? true} + :number-of-lines 1} value])] (if icon-content icon-content diff --git a/src/status_im/ui/screens/profile/contact/styles.cljs b/src/status_im/ui/screens/profile/contact/styles.cljs index 91bb8972cb..172b3c246a 100644 --- a/src/status_im/ui/screens/profile/contact/styles.cljs +++ b/src/status_im/ui/screens/profile/contact/styles.cljs @@ -22,8 +22,7 @@ :android {:height 7}}) (def profile-setting-text - {:font-size 17 - :color colors/black}) + {:font-size 17}) (def action-container {:background-color colors/white}) diff --git a/src/status_im/ui/screens/profile/seed/styles.cljs b/src/status_im/ui/screens/profile/seed/styles.cljs index cb10680fab..e920aa0ac4 100644 --- a/src/status_im/ui/screens/profile/seed/styles.cljs +++ b/src/status_im/ui/screens/profile/seed/styles.cljs @@ -9,15 +9,12 @@ :align-items :center}) (def intro-text - {:text-align :center - :font-size 22 - :font-weight :bold - :line-height 28 + {:typography :header + :text-align :center :margin-vertical 16}) (def intro-description {:margin-top 8 - :line-height 21 :text-align :center :color colors/gray}) @@ -35,12 +32,10 @@ (def six-word-num {:width 25 :text-align :right - :opacity 0.4 - :font-size 15}) + :opacity 0.4}) (def six-words-word - {:margin-left 24 - :font-size 15}) + {:margin-left 24}) (def six-words-separator {:height 12}) @@ -50,12 +45,10 @@ :padding 16}) (def twelve-words-label - {:font-size 14 - :line-height 21}) + {:font-size 14}) (def twelve-words-description - {:font-size 14 - :line-height 21}) + {:font-size 14}) (def twelve-words-spacer {:flex 1}) @@ -84,19 +77,16 @@ {:flex-direction :row}) (def enter-word-label - {:font-size 14 - :line-height 21}) + {:font-size 14}) (def enter-word-n {:margin-left 8 :font-size 14 - :line-height 21 :color colors/gray}) (def enter-word-n-description - {:font-size 14 - :line-height 21 - :color colors/gray}) + {:font-size 14 + :color colors/gray}) (def finish-container {:flex 1 @@ -114,17 +104,14 @@ :height 41}) (def finish-label - {:font-size 22 - :font-weight :bold - :line-height 30 - :text-align :center}) + {:typography :header + :text-align :center}) (def finish-description - {:margin-top 8 - :font-size 14 - :line-height 20 - :text-align :center - :color colors/gray}) + {:margin-top 8 + :font-size 14 + :text-align :center + :color colors/gray}) (def finish-button {:flex-direction :row @@ -132,8 +119,7 @@ :margin-bottom 32}) (def backup-seed - {:font-weight :bold - :font-size 15 + {:font-weight "700" :text-align :center}) (def step-n diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs index 5ad0c4feb6..747881762e 100644 --- a/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs +++ b/src/status_im/ui/screens/profile/tribute_to_talk/styles.cljs @@ -12,17 +12,12 @@ :margin-vertical 32}) (def intro-text - {:text-align :center - :font-size 22 - :color colors/black - :font-weight :bold - :line-height 28}) + {:typography :header + :text-align :center}) (def description-label - {:line-height 22 - :font-size 15 - :text-align :center - :color colors/gray}) + {:text-align :center + :color colors/gray}) (def intro-button {:margin-vertical 8 @@ -43,11 +38,8 @@ :color colors/gray}) (def tribute-to-talk - {:font-weight "500" - :line-height 22 - :font-size 15 - :color colors/black - :text-align :center}) + {:typography :main-medium + :text-align :center}) (def container {:flex 1 @@ -88,8 +80,7 @@ :max-width 32}) (def number - {:line-height 28 - :font-size 22 + {:font-size 22 :color colors/blue}) (def snt-amount-container @@ -98,17 +89,14 @@ :align-items :center}) (def snt-amount - {:font-size 32 - :color colors/black}) + {:font-size 32}) (def snt-amount-label (assoc snt-amount :color colors/gray)) (def snt-asset-value - {:font-size 15 - :font-weight "500" - :line-height 22 - :color colors/gray}) + {:typography :main-medium + :color colors/gray}) (def personalized-message-container {:flex-grow 1 @@ -125,8 +113,6 @@ {:border-radius 8 :background-color colors/gray-lighter :text-align-vertical :top - :font-size 15 - :line-height 22 :padding-horizontal 16 :padding-vertical 16}) @@ -137,17 +123,9 @@ :padding-horizontal 12 :padding-vertical 8}) -(def edit-view-message - {:color colors/black - :line-height 22 - :font-size 15}) - (def finish-label - {:font-size 22 - :line-height 28 - :font-weight :bold - :text-align :center - :color colors/black}) + {:typography :header + :text-align :center}) (defn finish-circle [color radius] {:background-color color @@ -174,17 +152,13 @@ (def current-snt-amount {:font-size 28 - :line-height 28 - :color colors/black :font-weight "500"}) (def edit-label - {:font-size 15 - :color colors/blue}) + {:color colors/blue}) (def edit-note - {:font-size 15 - :color colors/gray + {:color colors/gray :margin-top 16 :margin-horizontal 16 :text-align :center}) @@ -209,9 +183,7 @@ :justify-content :center}) (def learn-more-link-text - {:font-size 15 - :line-height 21 - :color colors/blue}) + {:color colors/blue}) (def learn-more-image {:width 120 @@ -238,9 +210,7 @@ :margin-bottom 32}) (def learn-more-text - {:font-size 17 - :line-height 22 - :color colors/black}) + {:typography :title}) (def learn-more-section {:border-radius 12 @@ -264,14 +234,12 @@ :height 44}) (def pay-to-chat-text - {:font-size 15 - :color colors/blue - :line-height 22 - :font-weight "500"}) + {:typography :main-medium + :color colors/blue}) (def edit-container - {:justify-content :space-between - :flex-grow 1}) + {:justify-content :space-between + :flex-grow 1}) (def edit-screen-top-row {:flex-direction :row @@ -288,22 +256,18 @@ :margin-top 52}) (def remove-text - {:color colors/red - :margin-left 16 - :font-size 17}) + {:typography :title + :color colors/red + :margin-left 16}) (def remove-note - {:font-size 15 - :margin-horizontal 16 + {:margin-horizontal 16 :color colors/gray :text-align :center :margin-top 12}) (def enabled-note-text - {:color colors/black - :line-height 22 - :font-weight "500" - :font-size 15}) + {:typography :main-medium}) (def separator-style {:height 1 diff --git a/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs index f198738f2f..3592fac142 100644 --- a/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs +++ b/src/status_im/ui/screens/profile/tribute_to_talk/views.cljs @@ -112,8 +112,7 @@ [react/scroll-view {:content-container-style styles/personalized-message-container} [react/view {:style styles/personalized-message-title} - [react/text {:style (assoc styles/description-label - :color colors/black)} + [react/text {:style {:text-align :center}} (i18n/label :t/personalized-message) [react/text {:style styles/description-label} (str " (" (i18n/label :t/optional) ")")]]] @@ -156,7 +155,7 @@ (if snt-amount [react/text {:style (assoc styles/description-label :margin-top 16)} (i18n/label :t/tribute-to-talk-finish-desc) - [react/text {:style (assoc styles/description-label :color colors/black)} + [react/text {:style {:text-align :center}} snt-amount] " SNT"] [react/text {:style (assoc styles/description-label :margin-top 16)} @@ -171,7 +170,6 @@ :margin-left 11)} (i18n/label :t/tribute-to-talk-enabled)]] [react/text {:style (assoc styles/enabled-note-text - :font-weight :normal :margin-left 35)} (i18n/label :t/tribute-to-talk-add-friends)]]) @@ -201,8 +199,7 @@ [react/view {:flex-direction :row :margin-bottom 16} [react/view {:style styles/edit-view-message-container} - [react/text {:style styles/edit-view-message} - message]] + [react/text message]] [react/view {:flex 1}]]) [separator] [react/text {:style styles/edit-note} @@ -231,19 +228,17 @@ [react/view {:style {:background-color colors/white :justify-content :center :align-items :center}} [icons/icon :tiny-icons/tribute-to-talk {:color colors/blue}]] - [react/text {:style {:color colors/gray - :font-size 13 - :line-height 22 + [react/text {:style {:color colors/gray + :font-size 13 :margin-left 4}} (i18n/label :t/tribute-to-talk)]] [react/view {:style styles/chat-sample-bubble} - [react/text {:style {:font-size 15 :color colors/black}} - (i18n/label :t/tribute-to-talk-sample-text)]] + [react/text (i18n/label :t/tribute-to-talk-sample-text)]] [react/view {:style (assoc styles/chat-sample-bubble :width 141)} ;;TODO replace hardcoded values - [react/text {:style {:font-size 22 :color colors/black}} "1000" + [react/text {:style {:font-size 22}} "1000" [react/text {:style {:font-size 22 :color colors/gray}} " SNT"]] - [react/text {:style {:font-size 12 :color colors/black}} + [react/text {:style {:font-size 12}} "~3.48" [react/text {:style {:font-size 12 :color colors/gray}} " USD"]] [react/view {:style styles/pay-to-chat-container} @@ -316,7 +311,6 @@ [react/view {:style styles/bottom-toolbar} [components.common/button {:button-style styles/intro-button :disabled? disabled? - :uppercase? false :label-style (when disabled? {:color colors/gray}) :on-press #(re-frame/dispatch [:tribute-to-talk.ui/step-forward-pressed]) diff --git a/src/status_im/ui/screens/profile/user/styles.cljs b/src/status_im/ui/screens/profile/user/styles.cljs index cd385f704c..a1fc07e4ca 100644 --- a/src/status_im/ui/screens/profile/user/styles.cljs +++ b/src/status_im/ui/screens/profile/user/styles.cljs @@ -61,8 +61,7 @@ :align-items :center}) (def advanced-button-label - {:font-size 15 - :color colors/blue}) + {:color colors/blue}) (def pair-button {:margin-left 32}) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 5c99abcf8a..41a25b7f5a 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -249,7 +249,7 @@ (defn share-profile-item [{:keys [public-key photo-path] :as current-account}] [list.views/big-list-item - {:text (i18n/label :t/share-my-profile) + {:text (i18n/label :t/share-my-profile) :icon :main-icons/share :accessibility-label :share-my-profile-button :action-fn #(re-frame/dispatch [:navigate-to :profile-qr-viewer diff --git a/src/status_im/ui/screens/stickers/views.cljs b/src/status_im/ui/screens/stickers/views.cljs index 3518afa958..25b98e8562 100644 --- a/src/status_im/ui/screens/stickers/views.cljs +++ b/src/status_im/ui/screens/stickers/views.cljs @@ -38,11 +38,9 @@ [icons/icon :icons/logo {:color colors/white :width 12 :height 12 :container-style {:margin-right 8}}]) (if pending [components/activity-indicator {:animating true}] - [react/text {:style {:font-size 15 :color colors/white}} + [react/text {:style {:color colors/white}} (cond (or owned (zero? price)) (i18n/label :t/install) - ;no-snt? - ;(i18n/label :t/buy-with-snt) :else (str (money/wei-> :eth price)))])]]))) @@ -53,8 +51,8 @@ [react/view {:height 64 :align-items :center :flex-direction :row} [thumbnail-icon thumbnail 40] [react/view {:padding-horizontal 16 :flex 1} - [react/text {:style {:font-size 15}} name] - [react/text {:style {:font-size 15 :color colors/gray :margin-top 6}} author]] + [react/text name] + [react/text {:style {:color colors/gray :margin-top 6}} author]] (if installed [installed-icon] [price-badge price id owned pending])]]]) @@ -82,8 +80,8 @@ [react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16} [thumbnail-icon thumbnail 64] [react/view {:padding-horizontal 16 :flex 1} - [react/text {:style {:font-size 22 :font-weight :bold}} name] - [react/text {:style {:font-size 15 :color colors/gray :margin-top 6}} author]] + [react/text {:style {:typography :header}} name] + [react/text {:style {:color colors/gray :margin-top 6}} author]] (if installed [installed-icon] [price-badge price id owned pending])] diff --git a/src/status_im/ui/screens/wallet/collectibles/styles.cljs b/src/status_im/ui/screens/wallet/collectibles/styles.cljs index 1af2c8f403..48521e3e5d 100644 --- a/src/status_im/ui/screens/wallet/collectibles/styles.cljs +++ b/src/status_im/ui/screens/wallet/collectibles/styles.cljs @@ -21,8 +21,7 @@ :padding-horizontal 16}) (def details-name - {:color colors/black - :text-align-vertical :center + {:text-align-vertical :center :margin-bottom 10}) (def details-image diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index a2a18a0e35..e90e0a8ac1 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -52,13 +52,9 @@ (def text {:margin-right 10}) -(def text-list-primary-content - (merge text {:color colors/black})) - (def text-input (merge text-content - {:font-size 15 - :flex 1 + {:flex 1 :padding-bottom 0 :padding-top 0 :height 52})) @@ -70,17 +66,11 @@ :padding-right 8 :height 72}) -(defstyle label - {:color :white - :ios {:line-height 16} - :android {:font-size 12}}) - -(def label-transparent - (merge label - {:color colors/white-transparent})) +(def label + {:color colors/white}) (def network - {:color :white + {:color colors/white :font-size 13}) (def network-container @@ -157,13 +147,11 @@ :border-radius 8}) (def wallet-name - {:color colors/white - :font-size 15}) + {:color colors/white}) (defn participant [address?] {:color (if address? :white colors/white-transparent) - :flex-shrink 1 - :font-size 15}) + :flex-shrink 1}) (def recipient-container {:flex-direction :row}) @@ -194,8 +182,7 @@ (def wallet-value {:padding-left 6 - :color colors/white-transparent - :font-size 15}) + :color colors/white-transparent}) (def wallet-value-amount {:flex -1}) @@ -206,5 +193,4 @@ :background-color colors/white-light-transparent}) (def button-text - {:color colors/white - :font-size 15}) + {:color colors/white}) diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index b7d2d0fbb5..979956c7b4 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -36,7 +36,6 @@ [react/text-input (utils.core/deep-merge {:placeholder-text-color colors/white-transparent :selection-color colors/white :style {:color colors/white - :font-size 15 :height 52}} props) text]) @@ -50,7 +49,8 @@ ([props action title options] [toolbar/toolbar (assoc-in props [:style :border-bottom-color] colors/white-light-transparent) [toolbar/nav-button action] - [toolbar/content-title {:color :white :font-weight "700"} + [toolbar/content-title {:color colors/white + :font-weight "700"} title] options])) @@ -122,9 +122,9 @@ [list/item-image icon] [list/item-content [react/view {:flex-direction :row} - [react/text {:style styles/text-list-primary-content} + [react/text {:style styles/text} name] - [react/text {:force-uppercase? true} + [react/text {:style {:text-transform :uppercase}} (wallet.utils/display-symbol token)]] [list/item-secondary (wallet.utils/format-amount amount decimals)]]]]]) @@ -307,7 +307,5 @@ [react/view styles/separator]) (defn button-text [label] - [react/text {:style styles/button-text - :font (if platform/android? :medium :default) - :uppercase? true} + [react/text {:style styles/button-text} label]) diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index e9f7f0f05f..cd2af7cca1 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -26,35 +26,25 @@ :padding-horizontal 16}) (def backup-seed-phrase-title - {:font-size 15 - :line-height 20 - :color colors/white}) + {:color colors/white}) (def backup-seed-phrase-description - {:line-height 20 - :color colors/white-transparent}) + {:color colors/white-transparent}) -(def total-balance-container - {:align-items :center - :justify-content :center +(def total-balance-text + {:text-align :center :padding-top 49 :padding-bottom 38 :background-color colors/blue - :flex-direction :row}) + :color colors/white-transparent + :font-size 32}) (def total-balance-value - {:font-size 32 - :font-weight :bold + {:font-weight "700" :color colors/white}) -(def total-balance-tilde - {:color colors/white-transparent}) - -(defstyle total-balance-currency - {:font-size 32 - :font-weight :bold - :margin-left 6 - :color colors/white-transparent}) +(def total-balance-currency + {:font-weight "700"}) (def snackbar-container {:background-color colors/gray}) @@ -89,8 +79,7 @@ :padding-bottom 20}) (def asset-section-header - {:font-size 15 - :color colors/gray + {:color colors/gray :margin-left 16 :margin-top 7 :margin-bottom 3}) @@ -108,8 +97,7 @@ (def asset-item-value {:flex -1 - :font-size 16 - :color colors/black}) + :font-size 16}) (def asset-item-currency {:font-size 16 @@ -123,9 +111,7 @@ (def wallet-address {:color colors/white - :text-align :center - :font-size 15 - :line-height 20}) + :text-align :center}) (def address-section {:flex-grow 1 diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index eca55da41a..c0fca1a858 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -1,28 +1,28 @@ -(ns status-im.ui.screens.wallet.main.views - (:require-macros [status-im.utils.views :as views]) - (:require [reagent.core :as reagent] - [re-frame.core :as re-frame] - [status-im.i18n :as i18n] - [status-im.ui.components.colors :as colors] - [status-im.ui.components.list.views :as list] - [status-im.ui.components.react :as react] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.screens.wallet.onboarding.views :as onboarding.views] - [status-im.ui.screens.wallet.styles :as wallet.styles] - [status-im.ui.screens.wallet.main.styles :as styles] - [status-im.ui.screens.wallet.settings.views :as settings] - [status-im.ui.screens.wallet.utils :as wallet.utils] - [status-im.utils.money :as money] - [status-im.utils.platform :as platform] - [status-im.ui.components.toolbar.actions :as action] - status-im.ui.screens.wallet.collectibles.etheremon.views - status-im.ui.screens.wallet.collectibles.cryptostrikers.views - status-im.ui.screens.wallet.collectibles.cryptokitties.views - status-im.ui.screens.wallet.collectibles.superrare.views - status-im.ui.screens.wallet.collectibles.kudos.views - [status-im.ui.components.status-bar.view :as status-bar.view] - [status-im.ui.screens.wallet.transactions.views :as transactions.views])) + (ns status-im.ui.screens.wallet.main.views + (:require-macros [status-im.utils.views :as views]) + (:require [reagent.core :as reagent] + [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.list.views :as list] + [status-im.ui.components.react :as react] + [status-im.ui.components.toolbar.view :as toolbar] + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.screens.wallet.onboarding.views :as onboarding.views] + [status-im.ui.screens.wallet.styles :as wallet.styles] + [status-im.ui.screens.wallet.main.styles :as styles] + [status-im.ui.screens.wallet.settings.views :as settings] + [status-im.ui.screens.wallet.utils :as wallet.utils] + [status-im.utils.money :as money] + [status-im.utils.platform :as platform] + [status-im.ui.components.toolbar.actions :as action] + status-im.ui.screens.wallet.collectibles.etheremon.views + status-im.ui.screens.wallet.collectibles.cryptostrikers.views + status-im.ui.screens.wallet.collectibles.cryptokitties.views + status-im.ui.screens.wallet.collectibles.superrare.views + status-im.ui.screens.wallet.collectibles.kudos.views + [status-im.ui.components.status-bar.view :as status-bar.view] + [status-im.ui.screens.wallet.transactions.views :as transactions.views])) (defn toolbar-modal [modal-history?] [react/view @@ -37,18 +37,17 @@ :handler #(re-frame/dispatch [:set-in [:wallet :modal-history?] (not modal-history?)])}]]]]) (defn- total-section [value currency] - [react/view {:style styles/total-balance-container} - [react/text {:style styles/total-balance-value - :accessibility-label :total-amount-value-text} - (when (and - (not= "0" value) - (not= "..." value)) - [react/text {:style styles/total-balance-tilde} - "~"]) + [react/nested-text {:style styles/total-balance-text} + (when (and + (not= "0" value) + (not= "..." value)) + "~") + [{:style styles/total-balance-value + :accessibility-label :total-amount-value-text} value] - [react/text {:style styles/total-balance-currency - :accessibility-label :total-amount-currency-text} - (:code currency)]]) + [{:style styles/total-balance-currency + :accessibility-label :total-amount-currency-text} + (str " " (:code currency))]]) (defn- backup-seed-phrase [] [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :backup-seed]) @@ -92,11 +91,9 @@ :accessibility-label (str (-> symbol name clojure.string/lower-case) "-asset-value-text")} (wallet.utils/format-amount amount decimals)] [react/text {:style styles/asset-item-currency - :uppercase? true :number-of-lines 1} (wallet.utils/display-symbol token)]] [react/text {:style styles/asset-item-price - :uppercase? true :number-of-lines 1} (or @asset-value "...")]]]))) diff --git a/src/status_im/ui/screens/wallet/onboarding/styles.cljs b/src/status_im/ui/screens/wallet/onboarding/styles.cljs index a4fd4dd691..25795573be 100644 --- a/src/status_im/ui/screens/wallet/onboarding/styles.cljs +++ b/src/status_im/ui/screens/wallet/onboarding/styles.cljs @@ -19,9 +19,7 @@ :justify-content :center}) (def signing-word-text - {:font-size 15 - :font-weight "600" - :color colors/black}) + {:typography :main-semibold}) (def bottom-buttons {:background-color colors/blue @@ -47,16 +45,13 @@ :align-items :center}) (def super-safe-text - {:color colors/white - :margin-bottom 12 - :font-size 22 - :font-weight :bold}) + {:typography :header + :color colors/white + :margin-bottom 12}) (def super-safe-explainer-text {:color colors/white :text-align :center - :font-size 15 - :line-height 22 :margin-bottom 30}) ;; onboarding screen styles @@ -78,15 +73,12 @@ :height 312}) (def onboarding-title - {:line-height 28 - :font-size 22 - :font-weight :bold - :text-align :center - :color colors/white}) + {:typography :header + :text-align :center + :color colors/white}) (def onboarding-text - {:line-height 21 - :margin-top 8 + {:margin-top 8 :margin-bottom 32 :font-size 14 :text-align :center diff --git a/src/status_im/ui/screens/wallet/onboarding/views.cljs b/src/status_im/ui/screens/wallet/onboarding/views.cljs index 7064f10b1f..913b47a8d5 100644 --- a/src/status_im/ui/screens/wallet/onboarding/views.cljs +++ b/src/status_im/ui/screens/wallet/onboarding/views.cljs @@ -38,19 +38,17 @@ :background-color colors/blue}} [vector-icons/icon :main-icons/info {:color colors/white}]] [react/view - {:style {:border-color "rgba(255,255,255,0.6)" - :border-width 1 - :border-radius 8 - :padding-top 15 + {:style {:border-color (colors/alpha colors/white 0.6) + :border-width 1 + :border-radius 8 + :padding-top 15 :padding-bottom 15 - :padding-left 20 - :padding-right 20 - :align-items :center}} + :padding-left 20 + :padding-right 20 + :align-items :center}} [react/text - {:style {:color "rgba(255,255,255,0.6)" - :text-align :center - :font-size 15 - :line-height 22}} + {:style {:color (colors/alpha colors/white 0.6) + :text-align :center}} text]]]) (defn toolbar [] diff --git a/src/status_im/ui/screens/wallet/send/styles.cljs b/src/status_im/ui/screens/wallet/send/styles.cljs index 9a69eb7a09..3e9a25e2aa 100644 --- a/src/status_im/ui/screens/wallet/send/styles.cljs +++ b/src/status_im/ui/screens/wallet/send/styles.cljs @@ -36,10 +36,6 @@ :justify-content :center :background-color colors/gray-lighter}) -(def signing-phrase - {:font-size 15 - :color colors/black}) - (def signing-phrase-description {:padding-top 8}) @@ -48,9 +44,8 @@ :padding-vertical 20}) (def password - {:padding 0 - :font-size 15 - :height 20}) + {:padding 0 + :height 20}) (def processing-view {:position :absolute diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 193b1cb6b6..0f187cb034 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -82,8 +82,7 @@ [react/activity-indicator {:animating true :size :large}])] [react/view styles/signing-phrase-container - [react/text {:style styles/signing-phrase - :accessibility-label :signing-phrase-text} + [react/text {:accessibility-label :signing-phrase-text} signing-phrase]] [react/i18n-text {:style styles/signing-phrase-description :key message-label}] [react/view {:style styles/password-container diff --git a/src/status_im/ui/screens/wallet/sign_message/views.cljs b/src/status_im/ui/screens/wallet/sign_message/views.cljs index 3bf8831cb8..eba4a0b0a8 100644 --- a/src/status_im/ui/screens/wallet/sign_message/views.cljs +++ b/src/status_im/ui/screens/wallet/sign_message/views.cljs @@ -64,8 +64,7 @@ [react/activity-indicator {:animating true :size :large}])] [react/view styles/signing-phrase-container - [react/text {:style styles/signing-phrase - :accessibility-label :signing-phrase-text} + [react/text {:accessibility-label :signing-phrase-text} signing-phrase]] [react/i18n-text {:style styles/signing-phrase-description :key message-label}] [react/view {:style styles/password-container @@ -110,4 +109,4 @@ :t/transactions-sign] [password-input-panel value-atom :t/signing-message-phrase-description false] (when in-progress? - [react/view styles/processing-view])]])) \ No newline at end of file + [react/view styles/processing-view])]])) diff --git a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs index 67c95afcf9..5d985aa89a 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/styles.cljs @@ -3,16 +3,13 @@ [status-im.utils.platform :as platform])) (def transaction-sent - {:color colors/white - :font-weight :bold - :line-height 27 - :font-size (if platform/android? 23 22) + {:typography :header + :color colors/white :margin-bottom 8}) (def transaction-sent-description - {:color "rgba(255,255,255,0.6)" - :font-size (if platform/android? 17 15) - :line-height 22 + {:typography :title + :color (colors/alpha colors/white 0.6) :text-align :center :padding-horizontal 30 :margin-bottom 35}) diff --git a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs index 09af1b5ad6..28c1d90818 100644 --- a/src/status_im/ui/screens/wallet/transaction_sent/views.cljs +++ b/src/status_im/ui/screens/wallet/transaction_sent/views.cljs @@ -32,7 +32,6 @@ (defn- transaction-sent-message [] [react/view {:align-items :center} [react/text {:style styles/transaction-sent - :font (if platform/android? :medium :default) :accessibility-label :transaction-sent-text} (i18n/label :t/transaction-sent)] [react/i18n-text {:style styles/transaction-sent-description @@ -45,10 +44,7 @@ :accessibility-label :got-it-button} [react/view {:align-items :center :padding-vertical 18} - [react/text {:style {:color colors/white - :font-size 15} - :font (if platform/android? :medium :default) - :uppercase? true} + [react/text {:style {:color colors/white}} (i18n/label :t/done)]]]) (defn- sent-screen [{:keys [on-next]}] diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 685f806a9c..507af45447 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -18,10 +18,9 @@ {:flex-direction :row :height tabs.styles/tab-height}) -(defnstyle tab-title [active?] - {:ios {:font-size 15} - :android {:font-size 14} - :text-align :center +(defn tab-title + [active?] + {:text-align :center :color (if active? colors/blue colors/black)}) @@ -46,9 +45,6 @@ :ios {:padding-top 13} :android {:padding-top 14}}) -(def amount-text - {:color colors/black}) - (def tx-amount {:flex-grow 1 :flex-shrink 1 @@ -72,17 +68,18 @@ :color colors/gray}) (def address-label - (merge address-item - {:margin-right 5})) + {:margin-right 5 + :font-size 16 + :color colors/gray}) (def address-contact - (merge address-item - {:color colors/black - :margin-right 5})) + {:margin-right 5 + :font-size 16}) (def address-hash - (merge address-item - {:flex-shrink 1})) + {:flex-shrink 1 + :font-size 16 + :color colors/gray}) (def sign-all-view {:flex 1 @@ -121,8 +118,7 @@ {:flex 5}) (def details-item-value - {:font-size 14 - :color colors/black}) + {:font-size 14}) (def details-item-extra-value {:font-size 14 @@ -143,8 +139,7 @@ :margin-vertical 7}) (def details-header-value - {:font-size 16 - :color colors/black}) + {:font-size 16}) (def details-header-date {:font-size 14 @@ -172,13 +167,10 @@ :opacity 0.30}) (def details-confirmations-count - {:color colors/black - :font-size 15 - :margin-vertical 2}) + {:margin-vertical 2}) (def details-failed {:color colors/red - :font-size 15 :margin-vertical 2}) (def details-confirmations-helper-text diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 85ca6b11db..72613dc9fa 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -64,14 +64,13 @@ [list/item-icon (transaction-type->icon (keyword type))] [list/item-content [react/view {:style styles/amount-time} - [react/text {:style styles/tx-amount - :ellipsize-mode "tail" - :number-of-lines 1} - [react/text {:accessibility-label :amount-text - :style styles/amount-text} + [react/nested-text {:style styles/tx-amount + :ellipsize-mode "tail" + :number-of-lines 1} + [{:accessibility-label :amount-text} (-> value (money/internal->formatted symbol decimals) money/to-fixed str)] " " - [react/text {:accessibility-label :currency-text} + [{:accessibility-label :currency-text} (wallet.utils/display-symbol token)]] [react/text {:style styles/tx-time} time-formatted]] @@ -171,11 +170,11 @@ [react/view {:style styles/details-header-icon} [list/item-icon (transaction-type->icon type)]] [react/view {:style styles/details-header-infos} - [react/text {:style styles/details-header-value} - [react/text {:accessibility-label :amount-text} + [react/nested-text {:style styles/details-header-value} + [{:accessibility-label :amount-text} (pretty-print-asset symbol value token)] " " - [react/text {:accessibility-label :currency-text} + [{:accessibility-label :currency-text} (wallet.utils/display-symbol asset)]] [react/text {:style styles/details-header-date} date]]])) diff --git a/test/appium/tests/atomic/chats/test_commands.py b/test/appium/tests/atomic/chats/test_commands.py index fa6dbd97f8..d4bead836c 100644 --- a/test/appium/tests/atomic/chats/test_commands.py +++ b/test/appium/tests/atomic/chats/test_commands.py @@ -111,6 +111,8 @@ class TestCommandsMultipleDevices(MultipleDeviceTestCase): if send_transaction_view.amount_edit_box.is_element_displayed(): self.errors.append('Amount field is editable') + chat_1.driver.swipe(500, 1000, 500, 500) + send_transaction_view.advanced_button.click() send_transaction_view.transaction_fee_button.click() gas_limit = '25000' diff --git a/test/appium/tests/atomic/transactions/test_daaps_transactions.py b/test/appium/tests/atomic/transactions/test_daaps_transactions.py index d18918238c..f4a3f171be 100644 --- a/test/appium/tests/atomic/transactions/test_daaps_transactions.py +++ b/test/appium/tests/atomic/transactions/test_daaps_transactions.py @@ -77,7 +77,7 @@ class TestTransactionDApp(SingleDeviceTestCase): send_transaction_view.sign_transaction() # Check that second 'Send transaction' screen appears - if not send_transaction_view.element_by_text('SIGN TRANSACTION').is_element_displayed(10): + if not send_transaction_view.element_by_text('Sign transaction').is_element_displayed(10): pytest.fail('Second send transaction screen did not appear!') send_transaction_view.sign_transaction() @@ -98,7 +98,7 @@ class TestTransactionDApp(SingleDeviceTestCase): send_transaction_view.sign_transaction() # Check that second 'Send transaction' screen appears - if not send_transaction_view.element_by_text('SIGN TRANSACTION').is_element_displayed(20): + if not send_transaction_view.element_by_text('Sign transaction').is_element_displayed(20): pytest.fail('Second send transaction screen did not appear!') send_transaction_view.sign_transaction() diff --git a/test/appium/views/base_view.py b/test/appium/views/base_view.py index 51a60b7e49..3e72c795b3 100644 --- a/test/appium/views/base_view.py +++ b/test/appium/views/base_view.py @@ -164,7 +164,7 @@ class NextButton(BaseButton): def __init__(self, driver): super(NextButton, self).__init__(driver) self.locator = self.Locator.xpath_selector( - "//android.widget.TextView[@text='NEXT']") + "//android.widget.TextView[@text='Next']") class AddButton(BaseButton): @@ -177,8 +177,7 @@ class AddButton(BaseButton): class DoneButton(BaseButton): def __init__(self, driver): super(DoneButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector( - "//android.widget.TextView[@text='DONE']") + self.locator = self.Locator.xpath_selector("//*[@content-desc='done-button' or contains(@text, 'Done')]") class AppsButton(BaseButton): @@ -265,7 +264,7 @@ class GetStartedButton(BaseButton): def __init__(self, driver): super(GetStartedButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//*[@text='GET STARTED']") + self.locator = self.Locator.xpath_selector("//*[@text='Get started']") class AssetButton(BaseButton): diff --git a/test/appium/views/chat_view.py b/test/appium/views/chat_view.py index 8b0a7c93dd..4fdb69ec6f 100644 --- a/test/appium/views/chat_view.py +++ b/test/appium/views/chat_view.py @@ -203,7 +203,7 @@ class ProfileSendTransactionButton(BaseButton): class JoinChatButton(BaseButton): def __init__(self, driver): super(JoinChatButton, self).__init__(driver) - self.locator = self.Locator.text_part_selector('JOIN GROUP') + self.locator = self.Locator.text_part_selector('Join group') class DeclineChatButton(BaseButton): def __init__(self, driver): diff --git a/test/appium/views/profile_view.py b/test/appium/views/profile_view.py index 5e21584698..8acd64db9c 100644 --- a/test/appium/views/profile_view.py +++ b/test/appium/views/profile_view.py @@ -191,7 +191,7 @@ class OkContinueButton(BaseButton): def __init__(self, driver): super(OkContinueButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//*[@text='OK, CONTINUE']") + self.locator = self.Locator.xpath_selector("//*[@text='Ok, continue']") class RecoveryPhraseTable(BaseText): @@ -225,7 +225,7 @@ class OkGotItButton(BaseButton): def __init__(self, driver): super(OkGotItButton, self).__init__(driver) - self.locator = self.Locator.text_selector('OK, GOT IT') + self.locator = self.Locator.text_selector('Ok, got it') class DebugModeToggle(BaseButton): diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py index 701df11ebd..1a13840180 100644 --- a/test/appium/views/sign_in_view.py +++ b/test/appium/views/sign_in_view.py @@ -45,20 +45,19 @@ class RecoverAccessButton(BaseButton): class CreateAccountButton(BaseButton): def __init__(self, driver): super(CreateAccountButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector( - "//android.widget.TextView[@text='CREATE ACCOUNT' or @text='CREATE NEW ACCOUNT']") + self.locator = self.Locator.xpath_selector("//*[@text='Create account' or @text='Create new account']") class IHaveAccountButton(RecoverAccessButton): def __init__(self, driver): super(IHaveAccountButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//android.widget.TextView[@text='I ALREADY HAVE AN ACCOUNT']") + self.locator = self.Locator.xpath_selector("//*[@text='I already have an account']") class AddExistingAccountButton(RecoverAccessButton): def __init__(self, driver): super(AddExistingAccountButton, self).__init__(driver) - self.locator = self.Locator.xpath_selector("//android.widget.TextView[@text='ADD EXISTING ACCOUNT']") + self.locator = self.Locator.xpath_selector("//*[@text='Add existing account']") class ConfirmPasswordInput(BaseEditBox): @@ -78,7 +77,7 @@ class OtherAccountsButton(BaseButton): def __init__(self, driver): super(OtherAccountsButton, self).__init__(driver) - self.locator = self.Locator.text_selector('OTHER ACCOUNTS') + self.locator = self.Locator.text_selector('Other accounts') class PrivacyPolicyLink(BaseButton): diff --git a/test/appium/views/wallet_view.py b/test/appium/views/wallet_view.py index 8ef8d7404e..7ad10b62ea 100644 --- a/test/appium/views/wallet_view.py +++ b/test/appium/views/wallet_view.py @@ -102,12 +102,6 @@ class STTCheckBox(BaseButton): self.locator = self.Locator.xpath_selector("//*[@text='STT']/../android.widget.CheckBox") -class DoneButton(BaseButton): - def __init__(self, driver): - super(DoneButton, self).__init__(driver) - self.locator = self.Locator.accessibility_id('done-button') - - class QRCodeImage(BaseButton): def __init__(self, driver): super(QRCodeImage, self).__init__(driver) @@ -123,7 +117,7 @@ class AddressText(BaseButton): class SetUpButton(BaseButton): def __init__(self, driver): super(SetUpButton, self).__init__(driver) - self.locator = self.Locator.text_selector("LET’S GET SET UP") + self.locator = self.Locator.text_selector("Let’s get set up") class SignInPhraseText(BaseText): @@ -205,7 +199,6 @@ class WalletView(BaseView): self.options_button = OptionsButton(self.driver) self.manage_assets_button = ManageAssetsButton(self.driver) self.stt_check_box = STTCheckBox(self.driver) - self.done_button = DoneButton(self.driver) self.qr_code_image = QRCodeImage(self.driver) self.address_text = AddressText(self.driver)