diff options
author | vantezzen <hello@vantezzen.io> | 2019-11-01 13:04:17 +0100 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-11-01 13:04:17 +0100 |
commit | 4cb24ebd3699a0e965380eb285a7c5eab9f2bee8 (patch) | |
tree | e2fcd6f29823ed7f49ccd5bb9ca7adf9a29b60e8 | |
parent | Merge branch 'develop' of https://github.com/getferdi/ferdi into develop (diff) | |
download | ferdium-app-4cb24ebd3699a0e965380eb285a7c5eab9f2bee8.tar.gz ferdium-app-4cb24ebd3699a0e965380eb285a7c5eab9f2bee8.tar.zst ferdium-app-4cb24ebd3699a0e965380eb285a7c5eab9f2bee8.zip |
#172 Add additional accent styles to fix styling options
-rw-r--r-- | src/features/accentColor/index.js | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/src/features/accentColor/index.js b/src/features/accentColor/index.js index a0f57a2fa..90fbcab43 100644 --- a/src/features/accentColor/index.js +++ b/src/features/accentColor/index.js | |||
@@ -4,6 +4,15 @@ import { DEFAULT_APP_SETTINGS } from '../../config'; | |||
4 | 4 | ||
5 | const STYLE_ELEMENT_ID = 'accent-color'; | 5 | const STYLE_ELEMENT_ID = 'accent-color'; |
6 | 6 | ||
7 | // Additional styles needed to make accent colors work properly | ||
8 | // "[ACCENT]" will be replaced with the accent color | ||
9 | const ADDITIONAL_STYLES = ` | ||
10 | .franz-form__button { | ||
11 | background: inherit !important; | ||
12 | border: 2px solid [ACCENT] !important; | ||
13 | } | ||
14 | `; | ||
15 | |||
7 | function createAccentStyleElement() { | 16 | function createAccentStyleElement() { |
8 | const styles = document.createElement('style'); | 17 | const styles = document.createElement('style'); |
9 | styles.id = STYLE_ELEMENT_ID; | 18 | styles.id = STYLE_ELEMENT_ID; |
@@ -13,6 +22,7 @@ function createAccentStyleElement() { | |||
13 | 22 | ||
14 | function setAccentStyle(style) { | 23 | function setAccentStyle(style) { |
15 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | 24 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); |
25 | |||
16 | styleElement.innerHTML = style; | 26 | styleElement.innerHTML = style; |
17 | } | 27 | } |
18 | 28 | ||
@@ -27,6 +37,8 @@ function generateAccentStyle(color) { | |||
27 | `; | 37 | `; |
28 | }); | 38 | }); |
29 | 39 | ||
40 | style += ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color); | ||
41 | |||
30 | return style; | 42 | return style; |
31 | } | 43 | } |
32 | 44 | ||