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 @@
-