From b7f5f848f22c0b65e16c866735f766efc60bad3e Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Wed, 10 Jun 2020 22:08:59 +0100 Subject: [PATCH] All: Refactored themes to allow using the same ones in both desktop and mobile version Will also allow using them when exporting HTML or PDF from CLI. --- CliClient/tests/MdToHtml.js | 2 +- ElectronClient/gui/ClipperConfigScreen.jsx | 2 +- ElectronClient/gui/ConfigScreen.jsx | 2 +- ElectronClient/gui/DialogButtonRow.jsx | 2 +- ElectronClient/gui/DropboxLoginScreen.jsx | 2 +- ElectronClient/gui/EncryptionConfigScreen.jsx | 2 +- ElectronClient/gui/Header.jsx | 2 +- ElectronClient/gui/HelpButton.jsx | 2 +- ElectronClient/gui/IconButton.jsx | 2 +- ElectronClient/gui/ImportScreen.jsx | 2 +- ElectronClient/gui/MainScreen.jsx | 2 +- ElectronClient/gui/MultiNoteActions.tsx | 2 +- .../gui/NoteContentPropertiesDialog.tsx | 2 +- .../NoteEditor/NoteBody/AceEditor/Toolbar.tsx | 2 +- .../NoteBody/AceEditor/styles/index.ts | 2 +- .../NoteBody/CodeMirror/Toolbar.tsx | 2 +- .../NoteBody/CodeMirror/styles/index.ts | 2 +- .../NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx | 2 +- ElectronClient/gui/NoteEditor/NoteEditor.tsx | 2 +- ElectronClient/gui/NoteEditor/styles/index.ts | 2 +- .../gui/NoteEditor/utils/useMarkupToHtml.ts | 2 +- ElectronClient/gui/NoteList.jsx | 2 +- ElectronClient/gui/NoteListItem.tsx | 2 +- ElectronClient/gui/NotePropertiesDialog.jsx | 2 +- ElectronClient/gui/NoteRevisionViewer.jsx | 2 +- ElectronClient/gui/NoteSearchBar.jsx | 2 +- ElectronClient/gui/NoteStatusBar.jsx | 2 +- .../gui/NoteToolbar/NoteToolbar.tsx | 2 +- ElectronClient/gui/OneDriveLoginScreen.jsx | 2 +- ElectronClient/gui/PromptDialog.jsx | 2 +- ElectronClient/gui/ResourceScreen.tsx | 6 +- ElectronClient/gui/ShareNoteDialog.tsx | 2 +- ElectronClient/gui/SideBar.jsx | 2 +- ElectronClient/gui/StatusScreen.jsx | 2 +- ElectronClient/gui/TagItem.jsx | 2 +- ElectronClient/gui/TagList.jsx | 2 +- ElectronClient/gui/Toolbar.jsx | 2 +- ElectronClient/gui/ToolbarButton.jsx | 2 +- ElectronClient/gui/ToolbarSpace.jsx | 2 +- ElectronClient/gui/style/ConfigMenuBar.js | 2 +- ElectronClient/gui/style/ExtensionBadge.js | 2 +- ElectronClient/plugins/GotoAnything.jsx | 2 +- README.md | 7 +- .../lib/components/base-screen.js | 18 +-- .../lib/components/global-style.js | 133 +++--------------- .../lib/components/screen-header.js | 22 +-- .../lib/components/screens/config.js | 4 +- .../components/screens/encryption-config.js | 2 +- .../lib/components/screens/folder.js | 2 +- .../lib/components/screens/note.js | 2 +- .../lib/components/screens/status.js | 23 +-- .../lib/components/side-menu-content-note.js | 7 +- .../lib/components/side-menu-content.js | 9 +- .../MdToHtml/rules/checkbox.ts | 2 +- .../lib/joplin-renderer/defaultNoteStyle.js | 22 +-- .../lib/joplin-renderer/noteStyle.js | 52 +++---- ReactNativeClient/lib/models/Setting.js | 14 +- .../services/InteropService_Exporter_Html.js | 2 +- .../lib}/theme.js | 54 ++++--- .../lib/themes}/aritimDark.js | 14 +- .../lib/themes}/dark.js | 13 +- .../lib/themes}/dracula.js | 13 +- .../lib/themes}/light.js | 17 +-- .../lib/themes}/nord.js | 13 +- ReactNativeClient/lib/themes/oledDark.js | 20 +++ .../lib/themes}/solarizedDark.js | 13 +- .../lib/themes}/solarizedLight.js | 15 +- ReactNativeClient/package-lock.json | 33 +++++ ReactNativeClient/package.json | 1 + ReactNativeClient/root.js | 52 +++---- tsconfig.json | 1 + 71 files changed, 297 insertions(+), 371 deletions(-) rename {ElectronClient => ReactNativeClient/lib}/theme.js (85%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/aritimDark.js (69%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/dark.js (69%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/dracula.js (72%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/light.js (65%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/nord.js (92%) create mode 100644 ReactNativeClient/lib/themes/oledDark.js rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/solarizedDark.js (72%) rename {ElectronClient/gui/style/theme => ReactNativeClient/lib/themes}/solarizedLight.js (72%) diff --git a/CliClient/tests/MdToHtml.js b/CliClient/tests/MdToHtml.js index d0f89a7000..38aafbfb5a 100644 --- a/CliClient/tests/MdToHtml.js +++ b/CliClient/tests/MdToHtml.js @@ -12,7 +12,7 @@ const BaseModel = require('lib/BaseModel.js'); const { shim } = require('lib/shim'); const MdToHtml = require('lib/joplin-renderer/MdToHtml'); const { enexXmlToMd } = require('lib/import-enex-md-gen.js'); -const { themeStyle } = require('../../ElectronClient/theme.js'); +const { themeStyle } = require('lib/theme'); jasmine.DEFAULT_TIMEOUT_INTERVAL = 60 * 60 * 1000; // Can run for a while since everything is in the same test unit diff --git a/ElectronClient/gui/ClipperConfigScreen.jsx b/ElectronClient/gui/ClipperConfigScreen.jsx index 6e4c200ef3..15d3f47d15 100644 --- a/ElectronClient/gui/ClipperConfigScreen.jsx +++ b/ElectronClient/gui/ClipperConfigScreen.jsx @@ -1,7 +1,7 @@ const React = require('react'); const { connect } = require('react-redux'); const { bridge } = require('electron').remote.require('./bridge'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const ClipperServer = require('lib/ClipperServer'); const Setting = require('lib/models/Setting'); diff --git a/ElectronClient/gui/ConfigScreen.jsx b/ElectronClient/gui/ConfigScreen.jsx index 4e023f7993..2347c2ad3e 100644 --- a/ElectronClient/gui/ConfigScreen.jsx +++ b/ElectronClient/gui/ConfigScreen.jsx @@ -2,7 +2,7 @@ const React = require('react'); const { connect } = require('react-redux'); const Setting = require('lib/models/Setting.js'); const { bridge } = require('electron').remote.require('./bridge'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const pathUtils = require('lib/path-utils.js'); const { _ } = require('lib/locale.js'); const SyncTargetRegistry = require('lib/SyncTargetRegistry'); diff --git a/ElectronClient/gui/DialogButtonRow.jsx b/ElectronClient/gui/DialogButtonRow.jsx index e4bd2cf09b..ca5294a9f7 100644 --- a/ElectronClient/gui/DialogButtonRow.jsx +++ b/ElectronClient/gui/DialogButtonRow.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); function DialogButtonRow(props) { const theme = themeStyle(props.theme); diff --git a/ElectronClient/gui/DropboxLoginScreen.jsx b/ElectronClient/gui/DropboxLoginScreen.jsx index 88be59f61b..cf8b60e9cb 100644 --- a/ElectronClient/gui/DropboxLoginScreen.jsx +++ b/ElectronClient/gui/DropboxLoginScreen.jsx @@ -2,7 +2,7 @@ const React = require('react'); const { connect } = require('react-redux'); const { bridge } = require('electron').remote.require('./bridge'); const { Header } = require('./Header.min.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const Shared = require('lib/components/shared/dropbox-login-shared'); diff --git a/ElectronClient/gui/EncryptionConfigScreen.jsx b/ElectronClient/gui/EncryptionConfigScreen.jsx index 8851354e47..a6a81ced6b 100644 --- a/ElectronClient/gui/EncryptionConfigScreen.jsx +++ b/ElectronClient/gui/EncryptionConfigScreen.jsx @@ -2,7 +2,7 @@ const React = require('react'); const { connect } = require('react-redux'); const Setting = require('lib/models/Setting'); const EncryptionService = require('lib/services/EncryptionService'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const { time } = require('lib/time-utils.js'); const { shim } = require('lib/shim'); diff --git a/ElectronClient/gui/Header.jsx b/ElectronClient/gui/Header.jsx index 667052dfc1..fdc2f78c23 100644 --- a/ElectronClient/gui/Header.jsx +++ b/ElectronClient/gui/Header.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const { bridge } = require('electron').remote.require('./bridge'); diff --git a/ElectronClient/gui/HelpButton.jsx b/ElectronClient/gui/HelpButton.jsx index 9aa0446055..9601e202d5 100644 --- a/ElectronClient/gui/HelpButton.jsx +++ b/ElectronClient/gui/HelpButton.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class HelpButtonComponent extends React.Component { constructor() { diff --git a/ElectronClient/gui/IconButton.jsx b/ElectronClient/gui/IconButton.jsx index 12abd0a3a4..f26a506c39 100644 --- a/ElectronClient/gui/IconButton.jsx +++ b/ElectronClient/gui/IconButton.jsx @@ -1,5 +1,5 @@ const React = require('react'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class IconButton extends React.Component { render() { diff --git a/ElectronClient/gui/ImportScreen.jsx b/ElectronClient/gui/ImportScreen.jsx index d2852442fd..1fffe89352 100644 --- a/ElectronClient/gui/ImportScreen.jsx +++ b/ElectronClient/gui/ImportScreen.jsx @@ -2,7 +2,7 @@ const React = require('react'); const { connect } = require('react-redux'); const Folder = require('lib/models/Folder.js'); const { Header } = require('./Header.min.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const { filename, basename } = require('lib/path-utils.js'); const { importEnex } = require('lib/import-enex'); diff --git a/ElectronClient/gui/MainScreen.jsx b/ElectronClient/gui/MainScreen.jsx index c0bc89e60a..815d1dcfed 100644 --- a/ElectronClient/gui/MainScreen.jsx +++ b/ElectronClient/gui/MainScreen.jsx @@ -17,7 +17,7 @@ const Note = require('lib/models/Note.js'); const { uuid } = require('lib/uuid.js'); const { shim } = require('lib/shim'); const Folder = require('lib/models/Folder.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme.js'); const { _ } = require('lib/locale.js'); const { bridge } = require('electron').remote.require('./bridge'); const eventManager = require('../eventManager'); diff --git a/ElectronClient/gui/MultiNoteActions.tsx b/ElectronClient/gui/MultiNoteActions.tsx index ec229aef19..765361a123 100644 --- a/ElectronClient/gui/MultiNoteActions.tsx +++ b/ElectronClient/gui/MultiNoteActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -const { buildStyle } = require('../theme.js'); +const { buildStyle } = require('lib/theme'); const { bridge } = require('electron').remote.require('./bridge'); const NoteListUtils = require('./utils/NoteListUtils'); diff --git a/ElectronClient/gui/NoteContentPropertiesDialog.tsx b/ElectronClient/gui/NoteContentPropertiesDialog.tsx index 7fe597de8f..2d2cea095a 100644 --- a/ElectronClient/gui/NoteContentPropertiesDialog.tsx +++ b/ElectronClient/gui/NoteContentPropertiesDialog.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useState, useEffect } from 'react'; const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const DialogButtonRow = require('./DialogButtonRow.min'); const { stripMarkdown } = require('lib/markdownUtils'); const Countable = require('countable'); diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx index e6eaa7dfb6..d9824ce2b4 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; const ToolbarBase = require('../../../Toolbar.min.js'); const { _ } = require('lib/locale'); -const { buildStyle, themeStyle } = require('../../../../theme.js'); +const { buildStyle, themeStyle } = require('lib/theme'); interface ToolbarProps { theme: number, diff --git a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts index 0798130c9c..1f2e7ee8b7 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts +++ b/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts @@ -1,5 +1,5 @@ import { NoteBodyEditorProps } from '../../../utils/types'; -const { buildStyle } = require('../../../../../theme.js'); +const { buildStyle } = require('lib/theme'); export default function styles(props: NoteBodyEditorProps) { return buildStyle('AceEditor', props.theme, (theme: any) => { diff --git a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx index e6eaa7dfb6..d9824ce2b4 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; const ToolbarBase = require('../../../Toolbar.min.js'); const { _ } = require('lib/locale'); -const { buildStyle, themeStyle } = require('../../../../theme.js'); +const { buildStyle, themeStyle } = require('lib/theme'); interface ToolbarProps { theme: number, diff --git a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts index c74ca23184..3557f0c5db 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts +++ b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts @@ -1,5 +1,5 @@ import { NoteBodyEditorProps } from '../../../utils/types'; -const { buildStyle } = require('../../../../../theme.js'); +const { buildStyle } = require('lib/theme'); export default function styles(props: NoteBodyEditorProps) { return buildStyle('AceEditor', props.theme, (theme: any) => { diff --git a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index 2c7a45bae0..e8e4e313ad 100644 --- a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx @@ -10,7 +10,7 @@ const { reg } = require('lib/registry.js'); const { _, closestSupportedLocale } = require('lib/locale'); const BaseItem = require('lib/models/BaseItem'); const Resource = require('lib/models/Resource'); -const { themeStyle, buildStyle } = require('../../../../theme.js'); +const { themeStyle, buildStyle } = require('lib/theme'); const { clipboard } = require('electron'); const supportedLocales = require('./supportedLocales'); diff --git a/ElectronClient/gui/NoteEditor/NoteEditor.tsx b/ElectronClient/gui/NoteEditor/NoteEditor.tsx index 0960981c09..1c800eac35 100644 --- a/ElectronClient/gui/NoteEditor/NoteEditor.tsx +++ b/ElectronClient/gui/NoteEditor/NoteEditor.tsx @@ -19,7 +19,7 @@ import styles_ from './styles'; import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps } from './utils/types'; import ResourceEditWatcher from '../../lib/services/ResourceEditWatcher'; -const { themeStyle } = require('../../theme.js'); +const { themeStyle } = require('lib/theme'); const NoteSearchBar = require('../NoteSearchBar.min.js'); const { reg } = require('lib/registry.js'); const { time } = require('lib/time-utils.js'); diff --git a/ElectronClient/gui/NoteEditor/styles/index.ts b/ElectronClient/gui/NoteEditor/styles/index.ts index 49556b97a9..bca143d7b3 100644 --- a/ElectronClient/gui/NoteEditor/styles/index.ts +++ b/ElectronClient/gui/NoteEditor/styles/index.ts @@ -1,6 +1,6 @@ import { NoteEditorProps } from '../utils/types'; -const { buildStyle } = require('../../../theme.js'); +const { buildStyle } = require('lib/theme'); export default function styles(props: NoteEditorProps) { return buildStyle('NoteEditor', props.theme, (theme: any) => { diff --git a/ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts b/ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts index e1d7394d34..f296938342 100644 --- a/ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts +++ b/ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts @@ -1,6 +1,6 @@ import { useCallback } from 'react'; import { ResourceInfos } from './types'; -const { themeStyle } = require('../../../theme.js'); +const { themeStyle } = require('lib/theme'); const Note = require('lib/models/Note'); const Setting = require('lib/models/Setting'); const markupLanguageUtils = require('lib/markupLanguageUtils'); diff --git a/ElectronClient/gui/NoteList.jsx b/ElectronClient/gui/NoteList.jsx index c7df74addf..df3aaa6387 100644 --- a/ElectronClient/gui/NoteList.jsx +++ b/ElectronClient/gui/NoteList.jsx @@ -2,7 +2,7 @@ const { ItemList } = require('./ItemList.min.js'); const React = require('react'); const { connect } = require('react-redux'); const { time } = require('lib/time-utils.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const BaseModel = require('lib/BaseModel'); const { _ } = require('lib/locale.js'); const { bridge } = require('electron').remote.require('./bridge'); diff --git a/ElectronClient/gui/NoteListItem.tsx b/ElectronClient/gui/NoteListItem.tsx index fa5abeb36c..f99709fe72 100644 --- a/ElectronClient/gui/NoteListItem.tsx +++ b/ElectronClient/gui/NoteListItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useRef, forwardRef, useImperativeHandle, useCallback } from 'react'; -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const Mark = require('mark.js/dist/mark.min.js'); const markJsUtils = require('lib/markJsUtils'); const Note = require('lib/models/Note'); diff --git a/ElectronClient/gui/NotePropertiesDialog.jsx b/ElectronClient/gui/NotePropertiesDialog.jsx index da9a09d125..3a05a5dcbe 100644 --- a/ElectronClient/gui/NotePropertiesDialog.jsx +++ b/ElectronClient/gui/NotePropertiesDialog.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { time } = require('lib/time-utils.js'); const DialogButtonRow = require('./DialogButtonRow.min'); const Datetime = require('react-datetime'); diff --git a/ElectronClient/gui/NoteRevisionViewer.jsx b/ElectronClient/gui/NoteRevisionViewer.jsx index eee75d7569..b2d153feb8 100644 --- a/ElectronClient/gui/NoteRevisionViewer.jsx +++ b/ElectronClient/gui/NoteRevisionViewer.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const NoteTextViewer = require('./NoteTextViewer.min'); const HelpButton = require('./HelpButton.min'); diff --git a/ElectronClient/gui/NoteSearchBar.jsx b/ElectronClient/gui/NoteSearchBar.jsx index d7ce5ca954..ef68625898 100644 --- a/ElectronClient/gui/NoteSearchBar.jsx +++ b/ElectronClient/gui/NoteSearchBar.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); class NoteSearchBarComponent extends React.Component { diff --git a/ElectronClient/gui/NoteStatusBar.jsx b/ElectronClient/gui/NoteStatusBar.jsx index 15a71635ff..d0701730d3 100644 --- a/ElectronClient/gui/NoteStatusBar.jsx +++ b/ElectronClient/gui/NoteStatusBar.jsx @@ -1,7 +1,7 @@ const React = require('react'); const { connect } = require('react-redux'); const { time } = require('lib/time-utils.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class NoteStatusBarComponent extends React.Component { style() { diff --git a/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx b/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx index cae4745eac..5ea3060322 100644 --- a/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx +++ b/ElectronClient/gui/NoteToolbar/NoteToolbar.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; const { connect } = require('react-redux'); -const { buildStyle } = require('../../theme.js'); +const { buildStyle } = require('lib/theme'); const Toolbar = require('../Toolbar.min.js'); const Note = require('lib/models/Note'); const Folder = require('lib/models/Folder'); diff --git a/ElectronClient/gui/OneDriveLoginScreen.jsx b/ElectronClient/gui/OneDriveLoginScreen.jsx index 6a72b625aa..2deefe4751 100644 --- a/ElectronClient/gui/OneDriveLoginScreen.jsx +++ b/ElectronClient/gui/OneDriveLoginScreen.jsx @@ -4,7 +4,7 @@ const { reg } = require('lib/registry.js'); const Setting = require('lib/models/Setting'); const { bridge } = require('electron').remote.require('./bridge'); const { Header } = require('./Header.min.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const { OneDriveApiNodeUtils } = require('lib/onedrive-api-node-utils.js'); diff --git a/ElectronClient/gui/PromptDialog.jsx b/ElectronClient/gui/PromptDialog.jsx index cc13a0df14..9819047297 100644 --- a/ElectronClient/gui/PromptDialog.jsx +++ b/ElectronClient/gui/PromptDialog.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { time } = require('lib/time-utils.js'); const Datetime = require('react-datetime'); const CreatableSelect = require('react-select/lib/Creatable').default; diff --git a/ElectronClient/gui/ResourceScreen.tsx b/ElectronClient/gui/ResourceScreen.tsx index 04027dd407..cbd62b2e6a 100644 --- a/ElectronClient/gui/ResourceScreen.tsx +++ b/ElectronClient/gui/ResourceScreen.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; const { connect } = require('react-redux'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { bridge } = require('electron').remote.require('./bridge'); const { Header } = require('./Header.min.js'); const prettyBytes = require('pretty-bytes'); @@ -53,7 +53,7 @@ const ResourceTable: React.FC = (props: ResourceTable) => { const sortOrderEngagedMarker = (s: SortingOrder) => { return ( props.onToggleSorting(s)}>{ (props.sorting.order === s && props.sorting.type === 'desc') ? '▾' : '▴'} ); @@ -97,7 +97,7 @@ const ResourceTable: React.FC = (props: ResourceTable) => { props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`} diff --git a/ElectronClient/gui/ShareNoteDialog.tsx b/ElectronClient/gui/ShareNoteDialog.tsx index 14d1560bd3..fb2dde5bed 100644 --- a/ElectronClient/gui/ShareNoteDialog.tsx +++ b/ElectronClient/gui/ShareNoteDialog.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'; import JoplinServerApi from '../lib/JoplinServerApi'; const { _, _n } = require('lib/locale.js'); -const { themeStyle, buildStyle } = require('../theme.js'); +const { themeStyle, buildStyle } = require('lib/theme'); const DialogButtonRow = require('./DialogButtonRow.min'); const Note = require('lib/models/Note'); const Setting = require('lib/models/Setting'); diff --git a/ElectronClient/gui/SideBar.jsx b/ElectronClient/gui/SideBar.jsx index 393e535951..643f166e1c 100644 --- a/ElectronClient/gui/SideBar.jsx +++ b/ElectronClient/gui/SideBar.jsx @@ -8,7 +8,7 @@ const Folder = require('lib/models/Folder.js'); const Note = require('lib/models/Note.js'); const Tag = require('lib/models/Tag.js'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { bridge } = require('electron').remote.require('./bridge'); const Menu = bridge().Menu; const MenuItem = bridge().MenuItem; diff --git a/ElectronClient/gui/StatusScreen.jsx b/ElectronClient/gui/StatusScreen.jsx index aa8249c8b6..bcf802a53f 100644 --- a/ElectronClient/gui/StatusScreen.jsx +++ b/ElectronClient/gui/StatusScreen.jsx @@ -3,7 +3,7 @@ const { connect } = require('react-redux'); const Setting = require('lib/models/Setting.js'); const { bridge } = require('electron').remote.require('./bridge'); const { Header } = require('./Header.min.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const { _ } = require('lib/locale.js'); const { ReportService } = require('lib/services/report.js'); const fs = require('fs-extra'); diff --git a/ElectronClient/gui/TagItem.jsx b/ElectronClient/gui/TagItem.jsx index ebad306d96..726ea6376a 100644 --- a/ElectronClient/gui/TagItem.jsx +++ b/ElectronClient/gui/TagItem.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class TagItemComponent extends React.Component { render() { diff --git a/ElectronClient/gui/TagList.jsx b/ElectronClient/gui/TagList.jsx index c5330b7ed5..2997ada860 100644 --- a/ElectronClient/gui/TagList.jsx +++ b/ElectronClient/gui/TagList.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const TagItem = require('./TagItem.min.js'); class TagListComponent extends React.Component { diff --git a/ElectronClient/gui/Toolbar.jsx b/ElectronClient/gui/Toolbar.jsx index 8d55221792..e593104dc6 100644 --- a/ElectronClient/gui/Toolbar.jsx +++ b/ElectronClient/gui/Toolbar.jsx @@ -1,6 +1,6 @@ const React = require('react'); const { connect } = require('react-redux'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const ToolbarButton = require('./ToolbarButton.min.js'); const ToolbarSpace = require('./ToolbarSpace.min.js'); diff --git a/ElectronClient/gui/ToolbarButton.jsx b/ElectronClient/gui/ToolbarButton.jsx index ab9f9663b7..eebd21b3d0 100644 --- a/ElectronClient/gui/ToolbarButton.jsx +++ b/ElectronClient/gui/ToolbarButton.jsx @@ -1,5 +1,5 @@ const React = require('react'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class ToolbarButton extends React.Component { render() { diff --git a/ElectronClient/gui/ToolbarSpace.jsx b/ElectronClient/gui/ToolbarSpace.jsx index 92d7a7a1ec..f6e515f773 100644 --- a/ElectronClient/gui/ToolbarSpace.jsx +++ b/ElectronClient/gui/ToolbarSpace.jsx @@ -1,5 +1,5 @@ const React = require('react'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); class ToolbarSpace extends React.Component { render() { diff --git a/ElectronClient/gui/style/ConfigMenuBar.js b/ElectronClient/gui/style/ConfigMenuBar.js index 7b7f9c7a93..12a7889320 100644 --- a/ElectronClient/gui/style/ConfigMenuBar.js +++ b/ElectronClient/gui/style/ConfigMenuBar.js @@ -1,5 +1,5 @@ const { createSelector } = require('reselect'); -const { themeStyle } = require('../../theme.js'); +const { themeStyle } = require('lib/theme'); const themeSelector = (state, props) => themeStyle(props.theme); diff --git a/ElectronClient/gui/style/ExtensionBadge.js b/ElectronClient/gui/style/ExtensionBadge.js index 66ee4095e6..854373c1e1 100644 --- a/ElectronClient/gui/style/ExtensionBadge.js +++ b/ElectronClient/gui/style/ExtensionBadge.js @@ -1,5 +1,5 @@ const { createSelector } = require('reselect'); -const { themeStyle } = require('../../theme.js'); +const { themeStyle } = require('lib/theme'); const themeSelector = (state, props) => themeStyle(props.theme); diff --git a/ElectronClient/plugins/GotoAnything.jsx b/ElectronClient/plugins/GotoAnything.jsx index 2fc78f29ec..55067c0393 100644 --- a/ElectronClient/plugins/GotoAnything.jsx +++ b/ElectronClient/plugins/GotoAnything.jsx @@ -1,7 +1,7 @@ const React = require('react'); const { connect } = require('react-redux'); const { _ } = require('lib/locale.js'); -const { themeStyle } = require('../theme.js'); +const { themeStyle } = require('lib/theme'); const SearchEngine = require('lib/services/SearchEngine'); const BaseModel = require('lib/BaseModel'); const Tag = require('lib/models/Tag'); diff --git a/README.md b/README.md index f023957f08..d463d67de6 100644 --- a/README.md +++ b/README.md @@ -237,10 +237,9 @@ Joplin notes can be opened and edited using an external editor of your choice. I Any kind of file can be attached to a note. In Markdown, links to these files are represented as a simple ID to the attachment. In the note viewer, these files, if they are images, will be displayed or, if they are other files (PDF, text files, etc.) they will be displayed as links. Clicking on this link will open the file in the default application. -In the **desktop application**, files can be attached either by clicking the "Attach file" icon in the editor or via drag and drop. If you prefer to create a link to a local file instead, hold the ALT key while performing the drag and drop operation. -If the OS-clipboard contains an image you can directly paste it in the editor via Ctrl+V. +In the **desktop application**, files can be attached either by clicking the "Attach file" icon in the editor or via drag and drop. If you prefer to create a link to a local file instead, hold the ALT key while performing the drag and drop operation. You can also copy and paste images directly in the editor via Ctrl+V. -Resources that are not attached to any note will be automatically deleted after 10 days (see [rationale](https://github.com/laurent22/joplin/issues/154#issuecomment-356582366)). +Resources that are not attached to any note will be automatically deleted in accordance to the [Note History](#note-history) settings. **Important:** Resources larger than 10 MB are not currently supported on mobile. They will crash the application when synchronising so it is recommended not to attach such resources at the moment. The issue is being looked at. @@ -478,7 +477,7 @@ Thank you to everyone who've contributed to Joplin's source code! # Known bugs -- Resources larger than 10 MB are not currently supported on mobile. They will crash the application so it is recommended not to attach such resources at the moment. The issue is being looked at. +- Resources larger than 10 MB are not currently supported on mobile as they can crash the application. - Non-alphabetical characters such as Chinese or Arabic might create glitches in the terminal on Windows. This is a limitation of the current Windows console. # License diff --git a/ReactNativeClient/lib/components/base-screen.js b/ReactNativeClient/lib/components/base-screen.js index 8792464e03..b4bb0a4040 100644 --- a/ReactNativeClient/lib/components/base-screen.js +++ b/ReactNativeClient/lib/components/base-screen.js @@ -1,27 +1,11 @@ const React = require('react'); const { StyleSheet } = require('react-native'); -const { globalStyle, themeStyle } = require('lib/components/global-style.js'); - -const styleObject_ = { - screen: { - flex: 1, - backgroundColor: globalStyle.backgroundColor, - }, -}; - -const styles_ = StyleSheet.create(styleObject_); +const { themeStyle } = require('lib/components/global-style.js'); const rootStyles_ = {}; class BaseScreenComponent extends React.Component { - styles() { - return styles_; - } - - styleObject() { - return styleObject_; - } rootStyle(themeId) { const theme = themeStyle(themeId); diff --git a/ReactNativeClient/lib/components/global-style.js b/ReactNativeClient/lib/components/global-style.js index 583c9362dc..3d3714e597 100644 --- a/ReactNativeClient/lib/components/global-style.js +++ b/ReactNativeClient/lib/components/global-style.js @@ -1,56 +1,27 @@ const Setting = require('lib/models/Setting.js'); const { Platform } = require('react-native'); +const { themeById } = require('lib/theme'); -const globalStyle = { +const baseStyle = { + appearance: 'light', fontSize: 16, + noteViewerFontSize: 16, margin: 15, // No text and no interactive component should be within this margin itemMarginTop: 10, itemMarginBottom: 10, - backgroundColor: '#ffffff', - color: '#555555', // For regular text - colorError: 'red', - colorWarn: '#9A5B00', - colorFaded: '#777777', // For less important text fontSizeSmaller: 14, - dividerColor: '#dddddd', - strongDividerColor: '#aaaaaa', - selectedColor: '#e5e5e5', - headerBackgroundColor: '#F0F0F0', disabledOpacity: 0.2, - colorUrl: '#7B81FF', - textSelectionColor: '#0096FF', - appearance: 'light', - - raisedBackgroundColor: '#0080EF', - raisedColor: '#003363', - raisedHighlightedColor: '#ffffff', - - warningBackgroundColor: '#FFD08D', - - // For WebView - must correspond to the properties above - htmlFontSize: '16px', - htmlColor: '#222222', - htmlBackgroundColor: 'white', - htmlDividerColor: 'rgb(230,230,230)', - htmlLinkColor: 'rgb(80,130,190)', - htmlLineHeight: '1.6em', - - htmlCodeBackgroundColor: 'rgb(243, 243, 243)', - htmlCodeBorderColor: 'rgb(220, 220, 220)', - htmlCodeColor: 'rgb(0,0,0)', - - codeThemeCss: 'atom-one-light.css', + lineHeight: '1.6em', }; -globalStyle.marginRight = globalStyle.margin; -globalStyle.marginLeft = globalStyle.margin; -globalStyle.marginTop = globalStyle.margin; -globalStyle.marginBottom = globalStyle.margin; -globalStyle.htmlMarginLeft = `${((globalStyle.marginLeft / 10) * 0.6).toFixed(2)}em`; - const themeCache_ = {}; function addExtraStyles(style) { + style.marginRight = style.margin; + style.marginLeft = style.margin; + style.marginTop = style.margin; + style.marginBottom = style.margin; + style.icon = { color: style.color, fontSize: 30, @@ -60,7 +31,7 @@ function addExtraStyles(style) { color: style.color, backgroundColor: style.backgroundColor, borderBottomWidth: 1, - borderColor: style.strongDividerColor, + borderColor: style.dividerColor, paddingBottom: 0, }; @@ -82,7 +53,7 @@ function addExtraStyles(style) { }; style.urlText = { - color: style.colorUrl, + color: style.urlColor, fontSize: style.fontSize, }; @@ -123,80 +94,12 @@ function themeStyle(theme) { theme = Setting.THEME_LIGHT; } - if (themeCache_[theme]) return themeCache_[theme]; + const cacheKey = [theme].join('-'); + if (themeCache_[cacheKey]) return themeCache_[cacheKey]; - const output = Object.assign({}, globalStyle); - if (theme == Setting.THEME_LIGHT) { - return addExtraStyles(output); - } else if (theme == Setting.THEME_OLED_DARK) { - output.backgroundColor = '#000000'; - output.color = '#dddddd'; - output.colorFaded = '#777777'; - output.dividerColor = '#555555'; - output.strongDividerColor = '#888888'; - output.selectedColor = '#333333'; - output.textSelectionColor = '#00AEFF'; - output.appearance = 'dark'; - output.headerBackgroundColor = '#2D3136'; - - output.raisedBackgroundColor = '#0F2051'; - output.raisedColor = '#788BC3'; - output.raisedHighlightedColor = '#ffffff'; - - output.htmlColor = 'rgb(220,220,220)'; - output.htmlBackgroundColor = 'rgb(0,0,0)'; - output.htmlLinkColor = 'rgb(166,166,255)'; - - output.htmlDividerColor = '#3D444E'; - output.htmlLinkColor = 'rgb(166,166,255)'; - output.htmlCodeColor = '#ffffff'; - output.htmlTableBackgroundColor = 'rgb(0, 0, 0)'; - output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)'; - output.htmlCodeBorderColor = 'rgb(70, 70, 70)'; - - output.codeThemeCss = 'atom-one-dark-reasonable.css'; - - output.colorUrl = '#7B81FF'; - - output.colorBright = 'rgb(220,220,220)'; - - themeCache_[theme] = output; - return addExtraStyles(themeCache_[theme]); - } - - output.backgroundColor = '#1D2024'; - output.color = '#dddddd'; - output.colorFaded = '#777777'; - output.dividerColor = '#555555'; - output.strongDividerColor = '#888888'; - output.selectedColor = '#333333'; - output.textSelectionColor = '#00AEFF'; - output.appearance = 'dark'; - output.headerBackgroundColor = '#2D3136'; - - output.raisedBackgroundColor = '#0F2051'; - output.raisedColor = '#788BC3'; - output.raisedHighlightedColor = '#ffffff'; - - output.htmlColor = 'rgb(220,220,220)'; - output.htmlBackgroundColor = 'rgb(29,32,36)'; - output.htmlLinkColor = 'rgb(166,166,255)'; - - output.htmlDividerColor = '#3D444E'; - output.htmlLinkColor = 'rgb(166,166,255)'; - output.htmlCodeColor = '#ffffff'; - output.htmlTableBackgroundColor = 'rgb(40, 41, 42)'; - output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)'; - output.htmlCodeBorderColor = 'rgb(70, 70, 70)'; - - output.codeThemeCss = 'atom-one-dark-reasonable.css'; - - output.colorUrl = '#7B81FF'; - - output.colorBright = 'rgb(220,220,220)'; - - themeCache_[theme] = output; - return addExtraStyles(themeCache_[theme]); + const output = Object.assign({}, baseStyle, themeById(theme)); + themeCache_[cacheKey] = addExtraStyles(output); + return themeCache_[cacheKey]; } -module.exports = { globalStyle, themeStyle, editorFont }; +module.exports = { themeStyle, editorFont }; diff --git a/ReactNativeClient/lib/components/screen-header.js b/ReactNativeClient/lib/components/screen-header.js index 2fde037cfb..0a30535732 100644 --- a/ReactNativeClient/lib/components/screen-header.js +++ b/ReactNativeClient/lib/components/screen-header.js @@ -39,7 +39,7 @@ class ScreenHeaderComponent extends React.PureComponent { const styleObject = { container: { flexDirection: 'column', - backgroundColor: theme.raisedBackgroundColor, + backgroundColor: theme.backgroundColor2, alignItems: 'center', shadowColor: '#000000', elevation: 5, @@ -52,7 +52,7 @@ class ScreenHeaderComponent extends React.PureComponent { sideMenuButton: { flex: 1, alignItems: 'center', - backgroundColor: theme.raisedBackgroundColor, + backgroundColor: theme.backgroundColor2, paddingLeft: theme.marginLeft, paddingRight: 5, marginRight: 2, @@ -61,7 +61,7 @@ class ScreenHeaderComponent extends React.PureComponent { }, iconButton: { flex: 1, - backgroundColor: theme.raisedBackgroundColor, + backgroundColor: theme.backgroundColor2, paddingLeft: 15, paddingRight: 15, paddingTop: PADDING_V, @@ -73,18 +73,18 @@ class ScreenHeaderComponent extends React.PureComponent { alignItems: 'center', padding: 10, borderWidth: 1, - borderColor: theme.raisedHighlightedColor, + borderColor: theme.colorBright2, borderRadius: 4, marginRight: 8, }, saveButtonText: { textAlignVertical: 'center', - color: theme.raisedHighlightedColor, + color: theme.colorBright2, fontWeight: 'bold', }, savedButtonIcon: { fontSize: 20, - color: theme.raisedHighlightedColor, + color: theme.colorBright2, width: 18, height: 18, }, @@ -96,11 +96,11 @@ class ScreenHeaderComponent extends React.PureComponent { fontSize: 30, paddingLeft: 10, paddingRight: theme.marginRight, - color: theme.raisedColor, + color: theme.color2, fontWeight: 'bold', }, contextMenu: { - backgroundColor: theme.raisedBackgroundColor, + backgroundColor: theme.backgroundColor2, }, contextMenuItem: { backgroundColor: theme.backgroundColor, @@ -120,7 +120,7 @@ class ScreenHeaderComponent extends React.PureComponent { flex: 1, textAlignVertical: 'center', marginLeft: 10, - color: theme.raisedHighlightedColor, + color: theme.colorBright2, fontWeight: 'bold', fontSize: theme.fontSize, paddingTop: 15, @@ -136,7 +136,7 @@ class ScreenHeaderComponent extends React.PureComponent { styleObject.topIcon = Object.assign({}, theme.icon); styleObject.topIcon.flex = 1; styleObject.topIcon.textAlignVertical = 'center'; - styleObject.topIcon.color = theme.raisedColor; + styleObject.topIcon.color = theme.colorBright2; styleObject.backButton = Object.assign({}, styleObject.iconButton); styleObject.backButton.marginRight = 1; @@ -376,7 +376,7 @@ class ScreenHeaderComponent extends React.PureComponent { backgroundColor: theme.backgroundColor, }} headerStyle={{ - color: theme.raisedHighlightedColor, + color: theme.colorBright2, fontSize: theme.fontSize, opacity: disabled ? theme.disabledOpacity : 1, }} diff --git a/ReactNativeClient/lib/components/screens/config.js b/ReactNativeClient/lib/components/screens/config.js index fea092ec17..40f396cfce 100644 --- a/ReactNativeClient/lib/components/screens/config.js +++ b/ReactNativeClient/lib/components/screens/config.js @@ -222,7 +222,7 @@ class ConfigScreenComponent extends BaseScreenComponent { }); styles.settingControl.borderBottomWidth = 1; - styles.settingControl.borderBottomColor = theme.strongDividerColor; + styles.settingControl.borderBottomColor = theme.dividerColor; styles.switchSettingText = Object.assign({}, styles.settingText); styles.switchSettingText.width = '80%'; @@ -388,7 +388,7 @@ class ConfigScreenComponent extends BaseScreenComponent { {md.label()} - updateSettingValue(key, value)} /> + updateSettingValue(key, value)} /> {descriptionComp} diff --git a/ReactNativeClient/lib/components/screens/encryption-config.js b/ReactNativeClient/lib/components/screens/encryption-config.js index 3f15e27533..e21bfea15c 100644 --- a/ReactNativeClient/lib/components/screens/encryption-config.js +++ b/ReactNativeClient/lib/components/screens/encryption-config.js @@ -112,7 +112,7 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent { const inputStyle = { flex: 1, marginRight: 10, color: theme.color }; inputStyle.borderBottomWidth = 1; - inputStyle.borderBottomColor = theme.strongDividerColor; + inputStyle.borderBottomColor = theme.dividerColor; return ( diff --git a/ReactNativeClient/lib/components/screens/folder.js b/ReactNativeClient/lib/components/screens/folder.js index f76b069225..4e5ef58eb5 100644 --- a/ReactNativeClient/lib/components/screens/folder.js +++ b/ReactNativeClient/lib/components/screens/folder.js @@ -107,7 +107,7 @@ class FolderScreenComponent extends BaseScreenComponent { return ( this.saveFolderButton_press()} showSideMenuButton={false} showSearchButton={false} /> - this.title_changeText(text)} /> + this.title_changeText(text)} /> { this.dialogbox = dialogbox; diff --git a/ReactNativeClient/lib/components/screens/note.js b/ReactNativeClient/lib/components/screens/note.js index cecfeff559..334523f282 100644 --- a/ReactNativeClient/lib/components/screens/note.js +++ b/ReactNativeClient/lib/components/screens/note.js @@ -269,7 +269,7 @@ class NoteScreenComponent extends BaseScreenComponent { }, markdownButtons: { borderColor: theme.dividerColor, - color: theme.htmlLinkColor, + color: theme.urlColor, }, }; diff --git a/ReactNativeClient/lib/components/screens/status.js b/ReactNativeClient/lib/components/screens/status.js index de33cd2a98..6b140d1af7 100644 --- a/ReactNativeClient/lib/components/screens/status.js +++ b/ReactNativeClient/lib/components/screens/status.js @@ -1,20 +1,13 @@ const React = require('react'); -const { StyleSheet, View, Text, Button, FlatList } = require('react-native'); +const { View, Text, Button, FlatList } = require('react-native'); const Setting = require('lib/models/Setting.js'); const { connect } = require('react-redux'); const { ScreenHeader } = require('lib/components/screen-header.js'); const { ReportService } = require('lib/services/report.js'); const { _ } = require('lib/locale.js'); const { BaseScreenComponent } = require('lib/components/base-screen.js'); -const { globalStyle, themeStyle } = require('lib/components/global-style.js'); - -const styles = StyleSheet.create({ - body: { - flex: 1, - margin: globalStyle.margin, - }, -}); +const { themeStyle } = require('lib/components/global-style.js'); class StatusScreenComponent extends BaseScreenComponent { static navigationOptions() { @@ -38,6 +31,16 @@ class StatusScreenComponent extends BaseScreenComponent { this.setState({ report: report }); } + styles() { + const theme = themeStyle(this.props.theme); + return { + body: { + flex: 1, + margin: theme.margin, + }, + }; + } + render() { const theme = themeStyle(this.props.theme); @@ -137,7 +140,7 @@ class StatusScreenComponent extends BaseScreenComponent { return ( - {body} + {body}