diff --git a/client/locales/index.js b/client/locales/index.js index 07d24e91..7c367a14 100644 --- a/client/locales/index.js +++ b/client/locales/index.js @@ -1,4 +1,4 @@ -export function t(str = "", replacementString, requestedKey) { +export default function t(str = "", replacementString, requestedKey) { const calculatedKey = str.toUpperCase() .replace(/ /g, "_") .replace(/[^a-zA-Z0-9\-\_\*\{\}\?]/g, "") diff --git a/public/assets/css/designsystem_button.css b/public/assets/css/designsystem_button.css index da4cd8f6..71d06971 100644 --- a/public/assets/css/designsystem_button.css +++ b/public/assets/css/designsystem_button.css @@ -2,24 +2,35 @@ button { border: none; margin: 0; padding: 6px; - width: 100%; display: inline-block; outline: none; cursor: pointer; font-size: inherit; - border-radius: 2px; + border-radius: 3px; color: inherit; - background: inherit; } - button.primary { + background: inherit; +} +button.primary { background: var(--primary); - color: white; } - button.emphasis { + color: white; +} +button.emphasis { background: var(--emphasis); - color: white; } - button.dark { + color: white; +} +button.dark { background: var(--dark); - color: white; } + color: white; +} +button.light { + background: #e2e2e2; + color: var(--dark); +} +button.large { + width: 100%; +} .touch-no button.dark:hover, .touch-no button.emphasis:hover, .touch-no button.primary:hover { filter: brightness(95%); - transition: 0.2s ease all; } + transition: 0.2s ease all; +} diff --git a/public/assets/css/designsystem_darkmode.css b/public/assets/css/designsystem_darkmode.css new file mode 100644 index 00000000..99e1b26c --- /dev/null +++ b/public/assets/css/designsystem_darkmode.css @@ -0,0 +1,7 @@ +body.dark-mode { + --bg-color: #242424; +} + +body.dark-mode{ background: var(--bg-color); } +body.dark-mode .component_modal > div, +body.dark-mode .component_page_admin{ --bg-color: #f2f3f5; } diff --git a/public/assets/css/designsystem_inputgroup.css b/public/assets/css/designsystem_inputgroup.css index d074b172..b5b738c5 100644 --- a/public/assets/css/designsystem_inputgroup.css +++ b/public/assets/css/designsystem_inputgroup.css @@ -1,13 +1,14 @@ .input_group { display: flex; background: #fff; - border-radius: 2px; + border-radius: 3px; box-shadow: 2px 2px 10px rgba(0,0,0,.1); } .input_group input { padding: 15px 20px; border-bottom: 0; margin: 0; + border-radius: 3px; height: inherit !important; } .input_group button { diff --git a/public/assets/css/designsystem_utils.css b/public/assets/css/designsystem_utils.css new file mode 100644 index 00000000..5fe51cd9 --- /dev/null +++ b/public/assets/css/designsystem_utils.css @@ -0,0 +1,25 @@ +.pointer { + cursor: pointer; +} + +.hidden{ + position:absolute; + left:-10000px; + top:auto; + width:1px; + height:1px; + overflow:hidden; +} + +.no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.center{ + text-align: center; +} diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index abb42dc5..8d796b81 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -4,6 +4,8 @@ @import url("./designsystem_button.css"); @import url("./designsystem_icon.css"); @import url("./designsystem_container.css"); +@import url("./designsystem_darkmode.css"); +@import url("./designsystem_utils.css"); /* latin-ext */ @font-face { @@ -54,9 +56,6 @@ --success: #63d9b1; --dark: #313538; } -body.dark-mode { - --bg-color: #242424; -} html { font-family: "Roboto", sans-serif; @@ -71,13 +70,6 @@ body, html { height: 100%; margin: 0; } -body.dark-mode{ background: var(--bg-color); } -body.dark-mode .component_modal > div, -body.dark-mode .component_page_admin{ --bg-color: #f2f3f5; } - -.center{ - text-align: center; -} a { color: inherit; @@ -108,15 +100,6 @@ input, textarea, select { outline: none; } -.no-select { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - button:focus, a:focus, a:active, @@ -183,16 +166,3 @@ select:-moz-focusring { scrollbar-shadow-color: #2d2c4d; scrollbar-track-color: rgba(0, 0, 0, .1); } - -.pointer { - cursor: pointer; -} - -.hidden{ - position:absolute; - left:-10000px; - top:auto; - width:1px; - height:1px; - overflow:hidden; -} diff --git a/public/components/icon.js b/public/components/icon.js index 36d9be77..5d97ef2e 100644 --- a/public/components/icon.js +++ b/public/components/icon.js @@ -20,7 +20,7 @@ class Icon extends HTMLElement { src="${img}" alt="${name}" />`; -} + } _mapOfIcon(name) { switch(name) { case "arrow_right": diff --git a/public/index.html b/public/index.html index 827c7a6f..cadb330a 100644 --- a/public/index.html +++ b/public/index.html @@ -4,28 +4,28 @@ - - - + + - +
- +