diff --git a/app/assets/fonts/RobotoMono-Bold.ttf b/app/assets/fonts/RobotoMono-Bold.ttf new file mode 100755 index 0000000000..61842afd90 Binary files /dev/null and b/app/assets/fonts/RobotoMono-Bold.ttf differ diff --git a/app/assets/fonts/RobotoMono-Light.ttf b/app/assets/fonts/RobotoMono-Light.ttf new file mode 100755 index 0000000000..81563d86ec Binary files /dev/null and b/app/assets/fonts/RobotoMono-Light.ttf differ diff --git a/app/assets/fonts/RobotoMono-Medium.ttf b/app/assets/fonts/RobotoMono-Medium.ttf new file mode 100755 index 0000000000..f40bc58819 Binary files /dev/null and b/app/assets/fonts/RobotoMono-Medium.ttf differ diff --git a/app/assets/fonts/RobotoMono-Regular.ttf b/app/assets/fonts/RobotoMono-Regular.ttf new file mode 100755 index 0000000000..f7b4a9b394 Binary files /dev/null and b/app/assets/fonts/RobotoMono-Regular.ttf differ diff --git a/app/assets/fonts/RobotoMono-Thin.ttf b/app/assets/fonts/RobotoMono-Thin.ttf new file mode 100755 index 0000000000..35ea79178a Binary files /dev/null and b/app/assets/fonts/RobotoMono-Thin.ttf differ diff --git a/app/components/transfer/TransferSummaryPage.scss b/app/components/transfer/TransferSummaryPage.scss index a7211dd056..1fa6069727 100644 --- a/app/components/transfer/TransferSummaryPage.scss +++ b/app/components/transfer/TransferSummaryPage.scss @@ -47,7 +47,8 @@ } .address { - font-family: var(--font-light); + font-family: var(--font-mono-light); + letter-spacing: 0; line-height: 1.38; margin-top: 6px; opacity: 0.5; diff --git a/app/components/wallet/WalletReceive.scss b/app/components/wallet/WalletReceive.scss index 5900dca257..b2a615fa03 100644 --- a/app/components/wallet/WalletReceive.scss +++ b/app/components/wallet/WalletReceive.scss @@ -87,10 +87,11 @@ font-size: 14px; justify-content: space-between; line-height: 19px; + letter-spacing: 0; .hash { - font-size: 17px; - font-family: var(--font-medium); + font-size: 14px; + font-family: var(--font-mono-medium); line-height: 23px; margin-bottom: 6px; word-break: break-all; @@ -163,7 +164,7 @@ display: flex; align-items: center; font-size: 14px; - font-family: var(--font-medium); + font-family: var(--font-mono-medium); line-height: 1.57; margin-bottom: 6px; word-break: break-all; @@ -275,8 +276,10 @@ } .addressId { + font-family: var(--font-mono-regular); flex-grow: 1; margin-right: 32.5px; + letter-spacing: 0; } .addressActions { @@ -355,8 +358,10 @@ } .addressId { + font-family: var(--font-mono-regular); flex-grow: 1; margin-right: 32.5px; + letter-spacing: 0; color: var(--theme-transactions-received-address-color); } diff --git a/app/components/wallet/receive/AddressDetailsDialog.scss b/app/components/wallet/receive/AddressDetailsDialog.scss index a61ab641ec..dbdf96b55c 100644 --- a/app/components/wallet/receive/AddressDetailsDialog.scss +++ b/app/components/wallet/receive/AddressDetailsDialog.scss @@ -20,7 +20,8 @@ } .infoBlock { - font-family: var(--font-regular); + font-family: var(--font-mono-regular); + letter-spacing: 0; font-size: 15px; opacity: 0.7; text-align: center; diff --git a/app/components/wallet/send/HWSendConfirmationDialog.scss b/app/components/wallet/send/HWSendConfirmationDialog.scss index 8e736e3f1d..7d1e6807bc 100644 --- a/app/components/wallet/send/HWSendConfirmationDialog.scss +++ b/app/components/wallet/send/HWSendConfirmationDialog.scss @@ -49,7 +49,8 @@ } .addressTo { - font-family: var(--font-light); + font-family: var(--font-mono-light); + letter-spacing: 0; font-size: 15px; line-height: 1.38; margin-top: 6px; diff --git a/app/components/wallet/send/WalletSendConfirmationDialog.scss b/app/components/wallet/send/WalletSendConfirmationDialog.scss index 7608a82474..545fbbe2c2 100644 --- a/app/components/wallet/send/WalletSendConfirmationDialog.scss +++ b/app/components/wallet/send/WalletSendConfirmationDialog.scss @@ -30,7 +30,8 @@ } .addressTo { - font-family: var(--font-light); + font-family: var(--font-mono-light); + letter-spacing: 0; font-size: 15px; line-height: 1.38; margin-top: 6px; @@ -130,6 +131,8 @@ } .addressTo { + font-family: var(--font-mono-regular); + letter-spacing: 0; font-size: 14px; line-height: 1.57; margin-top: 2px; diff --git a/app/components/wallet/send/WalletSendForm.scss b/app/components/wallet/send/WalletSendForm.scss index 52cc5fa117..a93fd7f9da 100755 --- a/app/components/wallet/send/WalletSendForm.scss +++ b/app/components/wallet/send/WalletSendForm.scss @@ -12,15 +12,34 @@ padding: 30px; } -.amountInputClassic, +.amountInputClassic { + position: relative; + margin-bottom: 10px; +} .receiverInputClassic { position: relative; margin-bottom: 10px; + :global { + .SimpleInput_input { + font-family: var(--font-mono-light); + letter-spacing: 0; + } + } } -.amountInput, +.amountInput { + position: relative; + margin-bottom: 10px; +} .receiverInput { + letter-spacing: 0; position: relative; + :global { + .SimpleInput_input { + font-family: var(--font-mono-regular); + letter-spacing: 0; + } + } } .adaLabel { diff --git a/app/components/wallet/transactions/Transaction.js b/app/components/wallet/transactions/Transaction.js index 492174898f..f4c535e624 100644 --- a/app/components/wallet/transactions/Transaction.js +++ b/app/components/wallet/transactions/Transaction.js @@ -298,7 +298,7 @@ export default class Transaction extends Component { ) : null}

{intl.formatMessage(messages.transactionId)}

- {data.id} + {data.id} diff --git a/app/components/wallet/transactions/Transaction.scss b/app/components/wallet/transactions/Transaction.scss index 7bb52a088b..1f38b6df9f 100644 --- a/app/components/wallet/transactions/Transaction.scss +++ b/app/components/wallet/transactions/Transaction.scss @@ -298,6 +298,8 @@ &.address { display: block; line-height: 19px; + font-family: var(--font-mono-light); + letter-spacing: 0; } } } @@ -324,6 +326,8 @@ &.address { display: block; line-height: 19px; + font-family: var(--font-mono-regular); + letter-spacing: 0; } } } diff --git a/app/stores/toplevel/ProfileStore.js b/app/stores/toplevel/ProfileStore.js index 16e97f6bf4..90eddfdf40 100644 --- a/app/stores/toplevel/ProfileStore.js +++ b/app/stores/toplevel/ProfileStore.js @@ -11,7 +11,6 @@ import globalMessages from '../../i18n/global-messages'; export default class SettingsStore extends Store { - LANGUAGE_OPTIONS = [ { value: 'en-US', label: globalMessages.languageEnglish, svg: require('../../assets/images/flags/english.inline.svg') }, { value: 'ja-JP', label: globalMessages.languageJapanese, svg: require('../../assets/images/flags/japanese.inline.svg') }, @@ -21,8 +20,12 @@ export default class SettingsStore extends Store { { value: 'ru-RU', label: globalMessages.languageRussian, svg: require('../../assets/images/flags/russian.inline.svg') }, { value: 'de-DE', label: globalMessages.languageGerman, svg: require('../../assets/images/flags/german.inline.svg') }, { value: 'fr-FR', label: globalMessages.languageFrench, svg: require('../../assets/images/flags/french.inline.svg') }, - !environment.isMainnet() && { value: 'id-ID', label: globalMessages.languageIndonesian, svg: require('../../assets/images/flags/indonesian.inline.svg') }, - !environment.isMainnet() && { value: 'es-ES', label: globalMessages.languageSpanish, svg: require('../../assets/images/flags/spanish.inline.svg') }, + ...(!environment.isMainnet() + ? [ + { value: 'id-ID', label: globalMessages.languageIndonesian, svg: require('../../assets/images/flags/indonesian.inline.svg') }, + { value: 'es-ES', label: globalMessages.languageSpanish, svg: require('../../assets/images/flags/spanish.inline.svg') }, + ] + : []) ]; @observable bigNumberDecimalFormat = { diff --git a/app/themes/index.global.scss b/app/themes/index.global.scss index 2fad5d2a28..6870b71eda 100644 --- a/app/themes/index.global.scss +++ b/app/themes/index.global.scss @@ -67,6 +67,8 @@ button { // ============ FONTS =========== +// SFUIDisplay + @font-face { font-family: 'SFUIDisplay-Ultralight'; src: url("../assets/fonts/SFUIDisplay-Ultralight.otf") format("opentype"); @@ -111,16 +113,22 @@ button { src: url("../assets/fonts/SFUIDisplay-Black.otf") format("opentype"); } +// Electrolize + @font-face { font-family: Electrolize, 'Electrolize-Regular'; src: url("../assets/fonts/Electrolize-Regular.ttf") format("truetype"); } +// Montserrat + @font-face { font-family: 'Montserrat-Medium'; src: url("../assets/fonts/Montserrat-Medium.ttf") format("truetype"); } +// Rubik + @font-face { font-family: 'Rubik-Light'; src: url("../assets/fonts/Rubik-Light.ttf") format("opentype"); @@ -146,11 +154,40 @@ button { src: url("../assets/fonts/Rubik-Black.ttf") format("opentype"); } +// Helvetica + @font-face { font-family: 'Helvetica-Regular'; src: url("../assets/fonts/Helvetica-Regular.otf") format("opentype"); } +// RobotoMono + +@font-face { + font-family: 'RobotoMono-Thin'; + src: url("../assets/fonts/RobotoMono-Thin.ttf") format("opentype"); +} + +@font-face { + font-family: 'RobotoMono-Light'; + src: url("../assets/fonts/RobotoMono-Light.ttf") format("opentype"); +} + +@font-face { + font-family: 'RobotoMono-Regular'; + src: url("../assets/fonts/RobotoMono-Regular.ttf") format("opentype"); +} + +@font-face { + font-family: 'RobotoMono-Medium'; + src: url("../assets/fonts/RobotoMono-Medium.ttf") format("opentype"); +} + +@font-face { + font-family: 'RobotoMono-Bold'; + src: url("../assets/fonts/RobotoMono-Bold.ttf") format("opentype"); +} + // ============ BASE =========== html, body, #root, #root > [data-reactroot] { diff --git a/app/themes/prebuilt/YoroiClassic.js b/app/themes/prebuilt/YoroiClassic.js index 3c0068cdad..e2490f93a2 100644 --- a/app/themes/prebuilt/YoroiClassic.js +++ b/app/themes/prebuilt/YoroiClassic.js @@ -170,6 +170,12 @@ export default { '--font-heavy': 'SFUIDisplay-Heavy', '--font-black': 'SFUIDisplay-Black', + '--font-mono-thin': 'RobotoMono-Thin', + '--font-mono-light': 'RobotoMono-Light', + '--font-mono-regular': 'RobotoMono-Regular', + '--font-mono-medium': 'RobotoMono-Medium', + '--font-mono-bold': 'RobotoMono-Bold', + '--theme-input-hint-font': 'SFUIDisplay-Regular', '--theme-scrollbar-thumb-background': '#c8ccce', diff --git a/app/themes/prebuilt/YoroiModern.js b/app/themes/prebuilt/YoroiModern.js index 1d816b41a9..c5706aab3d 100644 --- a/app/themes/prebuilt/YoroiModern.js +++ b/app/themes/prebuilt/YoroiModern.js @@ -167,6 +167,12 @@ export default { '--font-heavy': 'Rubik-Bold', '--font-black': 'Rubik-Black', + '--font-mono-thin': 'RobotoMono-Thin', + '--font-mono-light': 'RobotoMono-Light', + '--font-mono-regular': 'RobotoMono-Regular', + '--font-mono-medium': 'RobotoMono-Medium', + '--font-mono-bold': 'RobotoMono-Bold', + '--theme-input-hint-font': 'Rubik-Regular', '--theme-footer-text-font': 'Helvetica-Regular',