diff --git a/ci/Jenkinsfile.desktopbuild b/ci/Jenkinsfile.desktopbuild index f4714acae5..5ce1ef5225 100644 --- a/ci/Jenkinsfile.desktopbuild +++ b/ci/Jenkinsfile.desktopbuild @@ -28,6 +28,12 @@ external_modules_dir = [ 'modules/react-native-status/desktop', ] +external_fonts = [ + '../../../../../resources/fonts/SF-Pro-Text-Regular.otf', + '../../../../../resources/fonts/SF-Pro-Text-Medium.otf', + '../../../../../resources/fonts/SF-Pro-Text-Light.otf', +] + def gitHubNotify(commentMsg) { withCredentials([string(credentialsId: 'GIT_HUB_TOKEN', variable: 'githubToken')]) { def ghOutput = sh(returnStdout: true, script: "curl -u status-im:" + githubToken + " -H 'Content-Type: application/json' --data '{\"body\": \"" + commentMsg + "\"}' https://api.github.com/repos/status-im/status-react/issues/" + CHANGE_ID + "/comments") @@ -124,6 +130,7 @@ timeout(90) { cmake -Wno-dev \\ -DCMAKE_BUILD_TYPE=Release \\ -DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\ + -DDESKTOP_FONTS='${external_fonts.join(";")}' \\ -DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\ -DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1' """ @@ -185,6 +192,7 @@ timeout(90) { cmake -Wno-dev \\ -DCMAKE_BUILD_TYPE=Release \\ -DEXTERNAL_MODULES_DIR='${external_modules_dir.join(";")}' \\ + -DDESKTOP_FONTS='${external_fonts.join(";")}' \\ -DJS_BUNDLE_PATH='${workspace}/${packageFolder}/StatusIm.jsbundle' \\ -DCMAKE_CXX_FLAGS:='-DBUILD_FOR_BUNDLE=1' """ diff --git a/desktop/build.bat b/desktop/build.bat index 998324cee8..b053643061 100644 --- a/desktop/build.bat +++ b/desktop/build.bat @@ -3,7 +3,7 @@ @rem @rem This source code is licensed under the BSD-style license found in the @rem LICENSE file in the root directory of this source tree. An additional grant -@rem of patent rights can be found in the PATENTS file in the same directory. +@rem of patent rights can be found in the PATENTS file in the same directory. @echo off setlocal EnableDelayedExpansion @@ -24,6 +24,7 @@ SET option echo "build.bat external modules paths: "%option-e% echo "build.bat JS bundle path: "%option-j% +echo "build.bat desktop fonts: "%option-f% echo "build.bat cmake generator: "%option-g% @rem Workaround @@ -31,4 +32,4 @@ echo "build.bat cmake generator: "%option-g% @rem Build project echo %CD% -cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% . && cmake --build . +cmake -DCMAKE_BUILD_TYPE=Debug -G %option-g% -DEXTERNAL_MODULES_DIR=%option-e% -DJS_BUNDLE_PATH=%option-j% -DDESKTOP_FONTS=%option-f% . && cmake --build . diff --git a/desktop/build.sh b/desktop/build.sh index 185a14918d..89fcde567a 100755 --- a/desktop/build.sh +++ b/desktop/build.sh @@ -19,14 +19,19 @@ if [[ $1 == "-j" ]]; then shift JsBundlePath="$1" fi +if [[ $1 == "-f" ]]; then + shift + desktopFonts="$1" +fi shift done echo "build.sh external modules paths: "$ExternalModulesPaths echo "build.sh JS bundle path: "$JsBundlePath +echo "build.sh desktop fonts: "$desktopFonts # Workaround rm -rf CMakeFiles CMakeCache.txt cmake_install.cmake Makefile # Build project -cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" . && make +cmake -DCMAKE_BUILD_TYPE=Debug -DEXTERNAL_MODULES_DIR="$ExternalModulesPaths" -DJS_BUNDLE_PATH="$JsBundlePath" -DDESKTOP_FONTS="$desktopFonts" . && make diff --git a/desktop/main.cpp b/desktop/main.cpp index 9b6d9cf6a3..7859549374 100644 --- a/desktop/main.cpp +++ b/desktop/main.cpp @@ -11,6 +11,8 @@ // #define BUILD_FOR_BUNDLE #include +#include +#include #include #include #include @@ -139,6 +141,17 @@ void saveMessage(QtMsgType type, const QMessageLogContext &context, void writeLogsToFile(); #endif +void loadFontsFromResources() { + + QDirIterator it(":", QDirIterator::Subdirectories); + while (it.hasNext()) { + QString resourceFile = it.next(); + if (resourceFile.endsWith(".otf", Qt::CaseInsensitive) || resourceFile.endsWith(".ttf", Qt::CaseInsensitive)) { + QFontDatabase::addApplicationFont(resourceFile); + } + } +} + int main(int argc, char **argv) { QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); @@ -146,6 +159,8 @@ int main(int argc, char **argv) { Q_INIT_RESOURCE(react_resources); + loadFontsFromResources(); + #ifdef BUILD_FOR_BUNDLE qInstallMessageHandler(saveMessage); runUbuntuServer(); diff --git a/desktop_files/package-lock.json b/desktop_files/package-lock.json index b192331e88..977a9da255 100644 --- a/desktop_files/package-lock.json +++ b/desktop_files/package-lock.json @@ -9357,7 +9357,7 @@ } }, "react-native": { - "version": "git+https://github.com/status-im/react-native-desktop.git#ce75ef7b3293009e163624e611e6782c8f545924", + "version": "git+https://github.com/status-im/react-native-desktop.git#83abc9dcf6b500c9416296cffe6578cf6f9439a2", "requires": { "absolute-path": "0.0.0", "art": "0.10.2", diff --git a/desktop_files/package.json b/desktop_files/package.json index 2053d4179e..8d8695104b 100644 --- a/desktop_files/package.json +++ b/desktop_files/package.json @@ -16,6 +16,11 @@ "node_modules/react-native-securerandom/desktop", "modules/react-native-status/desktop" ], + "desktopFonts": [ + "../../../../../resources/fonts/SF-Pro-Text-Regular.otf", + "../../../../../resources/fonts/SF-Pro-Text-Medium.otf", + "../../../../../resources/fonts/SF-Pro-Text-Light.otf" + ], "dependencies": { "assert": "1.4.1", "asyncstorage-down": "4.0.1", diff --git a/resources/fonts/SF-Pro-Text-Light.otf b/resources/fonts/SF-Pro-Text-Light.otf new file mode 100644 index 0000000000..d08708a857 Binary files /dev/null and b/resources/fonts/SF-Pro-Text-Light.otf differ diff --git a/resources/fonts/SF-Pro-Text-Medium.otf b/resources/fonts/SF-Pro-Text-Medium.otf new file mode 100644 index 0000000000..55701e2437 Binary files /dev/null and b/resources/fonts/SF-Pro-Text-Medium.otf differ diff --git a/resources/fonts/SF-Pro-Text-Regular.otf b/resources/fonts/SF-Pro-Text-Regular.otf new file mode 100644 index 0000000000..4eafc2c07d Binary files /dev/null and b/resources/fonts/SF-Pro-Text-Regular.otf differ diff --git a/src/status_im/desktop/platform.cljs b/src/status_im/desktop/platform.cljs index 4c06e187da..14caf5105f 100644 --- a/src/status_im/desktop/platform.cljs +++ b/src/status_im/desktop/platform.cljs @@ -1,17 +1,25 @@ (ns status-im.desktop.platform) -(def fonts - {:light {:font-family "Roboto-Light"} - :default {:font-family "Roboto-Regular"} - :medium {:font-family "Roboto-Medium"} +(def fonts-macos + {:light {:font-family "SFProText-Light"} + :default {:font-family "SFProText-Regular"} + :medium {:font-family "SFProText-Medium"} - :toolbar-title {:font-family "Roboto-Regular"} + :toolbar-title {:font-family "SFProText-Regular"} + :roboto-mono {:font-family "RobotoMono-Medium"}}) + +(def fonts-linux + {:light {:font-family "Arial" :font-weight 100} + :default {:font-family "Arial" :font-weight 400} + :medium {:font-family "Arial" :font-weight 800} + + :toolbar-title {:font-family "Arial" :font-weight 400} :roboto-mono {:font-family "RobotoMono-Medium"}}) ;; Structure to be exported -(def platform-specific - {:fonts fonts +(defn platform-specific [macos] + {:fonts (if macos fonts-macos fonts-linux) :tabs {:tab-shadows? true} :chats {:action-button? true :new-chat-in-toolbar? false 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 0e46522aaf..bde4bd29ff 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 - :color :black - :font-weight "600"}) + :color :black}) (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 785ea39849..7a01108e31 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 @@ -25,7 +25,8 @@ [react/view {:style styles/new-contact-view} ^{:key "newcontact"} [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text} + [react/text {:style styles/new-contact-title-text + :font :medium} (i18n/label :new-chat)]] [react/text {:style styles/new-contact-subtitle} (i18n/label :contact-code)] [react/view {:style styles/new-contact-separator}] @@ -34,6 +35,7 @@ :flex 1 :style styles/add-contact-input :selection-color colors/hawkes-blue + :font :default :on-change (fn [e] (let [native-event (.-nativeEvent e) text (.-text native-event)] @@ -60,7 +62,8 @@ [react/text {:style styles/new-contact-subtitle} (:name c)]]]))]] ^{:key "publicchat"} [react/view {:style styles/new-contact-title} - [react/text {:style styles/new-contact-title-text} + [react/text {:style styles/new-contact-title-text + :font :medium} (i18n/label :new-public-group-chat)]] [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] [react/view {:style styles/new-contact-separator}] @@ -71,6 +74,7 @@ (.setNativeProps % (js-obj "text" "#")) (reset! topic-input-ref %)) :style styles/add-contact-input + :font :default :selection-color colors/hawkes-blue :on-change (fn [e] (let [native-event (.-nativeEvent 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 d347c2b8cd..e29eeb8b45 100644 --- a/src/status_im/ui/screens/desktop/main/chat/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/styles.cljs @@ -179,5 +179,4 @@ (def chat-title {:margin-bottom 4 :font-size 14 - :color colors/black - :font-weight "600"}) + :color colors/black}) 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 55f4b7b31e..b24a6e0a9f 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -34,7 +34,8 @@ [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} + [react/text {:style styles/chat-title + :font :medium} chat-name] (cond pending? [react/text {:style styles/add-contact-text @@ -182,6 +183,7 @@ :multiline true :blur-on-submit true :style styles/chat-text-input + :font :default :ref #(reset! inp-ref %) :on-key-press (fn [e] (let [native-event (.-nativeEvent e) 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 fcb368b0dd..6525ebcae6 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 @@ -57,9 +57,8 @@ {:flex 1 :padding-vertical 16}) -(defn chat-name [current?] - {:font-size 14 - :font-weight (if current? "600" :normal)}) +(def chat-name + {:font-size 14}) (def chat-last-message {:color colors/gray 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 30378e6b7f..3180f19eb8 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 @@ -48,7 +48,8 @@ [icons/icon :icons/public-chat]) [react/text {:ellipsize-mode :tail :number-of-lines 1 - :style (styles/chat-name (= current-chat-id chat-id))} + :style styles/chat-name + :font (if (= current-chat-id chat-id) :medium :default)} name]] [react/text {:ellipsize-mode :tail :number-of-lines 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 5a927e380f..2dcaab8ee3 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 @@ -18,11 +18,13 @@ :align-items :center :background-color (if active? colors/gray-lighter colors/white)}) -(defn profile-row-text [color active?] +(defn profile-row-text [color] {:color color - :font-weight (if active? "600" :normal) :font-size 16}) +(defn profile-row-font [selected?] + (if selected? :medium :default)) + (def adv-settings {:justify-content :space-between :flex-direction :row @@ -35,8 +37,7 @@ :height 100}) (def profile-user-name - {:font-weight :bold - :font-size 18}) + {:font-size 18}) (def share-contact-code {:flex-direction :row @@ -93,7 +94,6 @@ (def qr-code-title {:font-size 20 - :font-weight "600" :margin-bottom 32}) (def qr-code @@ -146,8 +146,7 @@ (def advanced-settings-title {:margin 24 - :font-size 20 - :font-weight "600"}) + :font-size 20}) (def title-separator {:height 1 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 e5ed4d9162..e15b1cfe23 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 @@ -20,6 +20,7 @@ [react/image {:source {:uri photo-path} :style styles/profile-photo}] [react/text {:style styles/profile-user-name + :font :medium :number-of-lines 1} name]]) @@ -38,7 +39,8 @@ tooltip-opacity [:get-in [:tooltips :qr-copied]]] [react/view [react/view {:style styles/qr-code-container} - [react/text {:style styles/qr-code-title} + [react/text {:style styles/qr-code-title + :font :medium} (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}]] @@ -61,7 +63,9 @@ wnodes [:settings/network-wnodes]] (let [render-fn (offline-messaging.views/render-row current-wnode-id)] [react/view - [react/text {:style styles/advanced-settings-title} (i18n/label :advanced-settings)] + [react/text {:style styles/advanced-settings-title + :font :medium} + (i18n/label :advanced-settings)] [react/view {:style styles/title-separator}] [react/text {:style styles/mailserver-title} (i18n/label :offline-messaging)] [react/view @@ -89,12 +93,14 @@ [react/touchable-highlight {:style (styles/profile-row adv-settings-open?) :on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])} [react/view {:style styles/adv-settings} - [react/text {:style (styles/profile-row-text colors/black adv-settings-open?)} (i18n/label :t/advanced-settings)] + [react/text {:style (styles/profile-row-text colors/black) + :font (if adv-settings-open? :medium :default)} + (i18n/label :t/advanced-settings)] [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]] [react/view {:style (styles/profile-row false)} [react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])} - [react/text {:style (styles/profile-row-text colors/red false)} (i18n/label :t/logout)]] - [react/view [react/text {:style (styles/profile-row-text colors/gray false)} "V" build/version " (" build/commit-sha ")"]]]]))) + [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 ")"]]]]))) (views/defview profile-data [] (views/letsubs diff --git a/src/status_im/utils/platform.cljs b/src/status_im/utils/platform.cljs index 117d31a2f6..cf71d5713d 100644 --- a/src/status_im/utils/platform.cljs +++ b/src/status_im/utils/platform.cljs @@ -25,4 +25,4 @@ (cond android? android/platform-specific ios? ios/platform-specific - :else desktop/platform-specific)) + :else (desktop/platform-specific (if platform (.-isMacOs platform) true))))