commit 71eb0d03a37601533e2b081874a39dcc4ac6f460
parent 0019a16ac0581cb2a1bde6c5db93ede15f05a474
Author: Marcel <mtrnord1@gmail.com>
Date: Sun, 14 Jun 2020 23:44:31 +0200
Implement new login page design and deduplicate some css
Took 2 hours 21 minutes
Diffstat:
13 files changed, 716 insertions(+), 373 deletions(-)
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,18 @@
+<component name="InspectionProjectProfileManager">
+ <profile version="1.0">
+ <option name="myName" value="Project Default" />
+ <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+ <option name="myCustomPropertiesEnabled" value="true" />
+ <option name="myIgnoreVendorSpecificProperties" value="false" />
+ <option name="myCustomPropertiesList">
+ <value>
+ <list size="3">
+ <item index="0" class="java.lang.String" itemvalue="scrollbar-color" />
+ <item index="1" class="java.lang.String" itemvalue="scrollbar-width" />
+ <item index="2" class="java.lang.String" itemvalue="overflow-anchor" />
+ </list>
+ </value>
+ </option>
+ </inspection_tool>
+ </profile>
+</component>
+\ No newline at end of file
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
"cross-env": "^7.0.2",
"css-loader": "^3.5.3",
"cypress": "^4.8.0",
+ "file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"sass": "^1.26.5",
diff --git a/src/app/views/login.rs b/src/app/views/login.rs
@@ -132,14 +132,14 @@ impl Component for Login {
//noinspection RsTypeCheck
fn view(&self) -> Html {
- let mut homeserver_classes = "uk-input";
- let mut mxid_classes = "uk-input";
- let mut password_classes = "uk-input";
+ let mut homeserver_classes = "login-input";
+ let mut mxid_classes = "login-input";
+ let mut password_classes = "login-input";
match self.state.error_field.as_ref() {
Some(v) => match v {
- Field::Homeserver => homeserver_classes = "uk-input uk-form-danger",
- Field::MXID => mxid_classes = "uk-input uk-form-danger",
- Field::Password => password_classes = "uk-input uk-form-danger",
+ Field::Homeserver => homeserver_classes = "login-input uk-form-danger",
+ Field::MXID => mxid_classes = "login-input uk-form-danger",
+ Field::Password => password_classes = "login-input uk-form-danger",
},
_ => {}
}
@@ -154,135 +154,112 @@ impl Component for Login {
}
} else {
html! {
- <div class="container">
- <div class="uk-position-center uk-padding">
- <h1 class="title">
- {
- tr!(
- // The Login Button of the Login page
- "Login"
- )
- }
- </h1>
- {
- match &self.state.error {
- Some(v) => {
- html! {
- <h3 class="error">
- {
- tr!(
- // {0} is the Error that happened on login
- // The error message of the Login page
- "Error: {0}",
- v
- )
- }
- </h3>
- }
- }
- None => {
- html!{}
- }
- }
- }
-
- <form class="uk-form-stacked uk-margin" id="login_form" onsubmit=self.link.callback(|e: FocusEvent| {e.prevent_default(); Msg::Login})>
- <div class="uk-margin">
- <label for="homeserver" class="uk-form-label">
- {
- tr!(
- // The URL Field of the Login page
- "Homeserver URL"
- )
- }
- </label>
- <div class="uk-form-controls">
- <input
- class=homeserver_classes
- type="url"
- id="homeserver"
- name="homeserver"
- placeholder=
+ <>
+ <div class="login-page-bg"></div>
+ <div class="scrollable" style="width:100vw; padding:2px;">
+ <div>
+ <p class="daydream-title">{"Daydream"}</p>
+ <div class="login-bg">
+ <div class="login-content">
+ <h1 class="login-title">
{
tr!(
- // The URL Field of the Login page
- "Homeserver URL"
+ // The Login Button of the Login page
+ "Login"
)
}
- value=&self.state.homeserver
- oninput=self.link.callback(|e: InputData| Msg::SetHomeserver(e.value))
- />
- </div>
- </div>
- <div class="uk-margin">
- <label for="username" class="uk-form-label">
+ </h1>
{
- tr!(
- // The Matrix ID Field of the Login page
- "MXID"
- )
- }
- </label>
- <div class="uk-form-controls">
- <input
- class=mxid_classes
- id="username"
- name="username"
- placeholder=
- {
- tr!(
- // The Matrix ID Field of the Login page
- "MXID"
- )
+ match &self.state.error {
+ Some(v) => {
+ html! {
+ <h3 class="error">
+ {
+ tr!(
+ // {0} is the Error that happened on login
+ // The error message of the Login page
+ "Error: {0}",
+ v
+ )
+ }
+ </h3>
+ }
+ }
+ None => {
+ html!{}
+ }
}
- value=&self.state.username
- oninput=self.link.callback(|e: InputData| Msg::SetUsername(e.value))
- />
- </div>
- </div>
- <div class="uk-margin">
- <label for="password" class="uk-form-label">
- {
- tr!(
- // The Password Field of the Login page
- "Password"
- )
}
- </label>
- <div class="uk-form-controls">
- <input
- class=password_classes
- type="password"
- id="password"
- name="password"
- placeholder=
- {
- tr!(
- // The Password Field of the Login page
- "Password"
- )
- }
- value=&self.state.password
- oninput=self.link.callback(|e: InputData| Msg::SetPassword(e.value))
- />
- </div>
- </div>
- <div class="uk-margin">
- <div class="uk-form-controls">
- <button class="uk-button uk-button-primary" id="login_button">
- {
- tr!(
- // The Login Button of the Login page
- "Login"
- )
- }
- </button>
+ <form id="login_form" onsubmit=self.link.callback(|e: FocusEvent| {e.prevent_default(); Msg::Login})>
+ <div class="login-inline">
+ <span class="material-icons login-icons" id="ma-icon" style="font-size: 28px !important;">{"http"}</span>
+ <input
+ class=homeserver_classes
+ type="url"
+ id="homeserver first"
+ name="homeserver"
+ placeholder=
+ {
+ tr!(
+ // The URL Field of the Login page
+ "Homeserver URL"
+ )
+ }
+ value=&self.state.homeserver
+ oninput=self.link.callback(|e: InputData| Msg::SetHomeserver(e.value))
+ />
+ </div>
+ <div class="login-inline">
+ <span class="material-icons login-icons" id="ma-icon">{"person"}</span>
+ <input
+ class=mxid_classes
+ id="username"
+ name="username"
+ placeholder=
+ {
+ tr!(
+ // The Matrix ID Field of the Login page
+ "MXID"
+ )
+ }
+ value=&self.state.username
+ oninput=self.link.callback(|e: InputData| Msg::SetUsername(e.value))
+ />
+ </div>
+ <div class="login-inline">
+ <span class="material-icons login-icons" id="ma-icon">{"vpn_key"}</span>
+ <input
+ class=password_classes
+ type="password"
+ id="password"
+ name="password"
+ placeholder=
+ {
+ tr!(
+ // The Password Field of the Login page
+ "Password"
+ )
+ }
+ value=&self.state.password
+ oninput=self.link.callback(|e: InputData| Msg::SetPassword(e.value))
+ />
+ </div>
+
+ <button class="login-button">
+ {
+ tr!(
+ // The Login Button of the Login page
+ "Login"
+ )
+ }
+ </button>
+ </form>
</div>
</div>
- </form>
+ </div>
</div>
- </div>
+ </>
}
}
}
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -1,7 +1,7 @@
.scrollable {
overflow-y: auto !important;
overflow-x: hidden !important;
- height: 100% !important;
+ height: 100vh;
scrollbar-width: thin;
scrollbar-color: $scrollbar-color $scrollbar-bg-color;
}
@@ -11,14 +11,6 @@
overflow-anchor: none;
}
-#anchor {
- /* allow the final child to be selected as an anchor node */
- overflow-anchor: auto;
-
- /* anchor nodes are required to have non-zero area */
- height: 1px;
-}
-
.scrollable::-webkit-scrollbar {
width: 5px;
background: $scrollbar-bg-color;
@@ -28,6 +20,14 @@
background: $scrollbar-color;
}
+#anchor {
+ /* allow the final child to be selected as an anchor node */
+ overflow-anchor: auto;
+
+ /* anchor nodes are required to have non-zero area */
+ height: 1px;
+}
+
.non-scrollable-container {
overflow: hidden;
}
@@ -45,16 +45,6 @@
height: 100% !important;
}
-html {
- overflow: hidden !important;
- height: 100% !important;
-}
-
-body {
- overflow: hidden !important;
- height: 100% !important;
-}
-
.menu {
width: 20rem;
padding: 1.5rem;
@@ -102,9 +92,9 @@ em {
text-indent: 30px;
}
-.uk-search #ma-icon, .uk-inline #ma-icon {
+.uk-search > #ma-icon, .uk-inline > #ma-icon {
position: absolute;
- top: 14px;
+ top: 12px;
left: 13px;
font-size: 18px;
}
@@ -140,3 +130,185 @@ li {
@import "sun-loading-animation.scss";
@import "lightbox.scss";
+@import "fonts.scss";
+
+.daydream-title {
+ font-family: 'Dancing Script', cursive;
+ position: relative;
+ margin-left: calc(50% - 381px / 2 - 0.5px);
+ margin-top: 48px;
+
+ font-style: normal;
+ font-weight: bold;
+ font-size: 96px;
+ line-height: 115px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ /* Daydrean Red */
+
+ color: #B80B0B;
+ /* 6dp — Elevation */
+
+ text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+
+.login-page-bg {
+ transform: scale(1.03);
+ position: absolute;
+ top: calc(50% - 100vh / 2);
+ left: calc(50% - 100vw / 2);
+ width: 100vw;
+ height: 100vh;
+
+ background: url(images/login_bg.jpg) no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ filter: blur(5px);
+}
+
+.login-bg {
+ position: relative;
+ width: 481px;
+ margin-left: calc(50% - 481px / 2 + 0.5px);
+ margin-top: 48px;
+ height: calc(100% - 48px);
+ box-sizing: border-box;
+
+ /* 4dp — Elevation */
+ box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+ border-radius: 25px;
+
+ padding: 48px 56px 48px 56px;
+}
+
+.login-bg::before {
+ content: "";
+ display: block;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: #1A1A1A;
+ opacity: 0.5;
+ mix-blend-mode: multiply;
+ border-radius: 25px;
+}
+
+.login-content {
+ position: relative;
+}
+
+.login-title {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 48px;
+ line-height: 56px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ letter-spacing: 0.02em;
+ font-feature-settings: 'ordn' on;
+
+ color: #FFFFFF;
+
+ /* 6dp — Elevation */
+
+ text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14);
+}
+
+.login-button {
+ border: none;
+ width: 100%;
+ height: 61px;
+ margin-top: 56px;
+
+ background: #6E992E;
+ /* 4dp — Elevation */
+
+ box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+ transition: all 0.3s ease 0s;
+ border-radius: 45px;
+
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 24px;
+ line-height: 24px;
+
+ text-align: center;
+ letter-spacing: 0.15px;
+
+ /* Background */
+
+ color: #FFFFFF;
+}
+
+.login-button:hover {
+ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
+ transform: translateY(-7px);
+}
+
+input.login-input#first {
+ margin-top: 0;
+}
+
+input.login-input {
+ //height: 48px;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.65);
+ border-radius: 15px 15px 0 0;
+ border: none;
+ padding-left: 16px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+
+ border-bottom: 2px solid #FFFFFF;
+ box-sizing: border-box;
+ margin-top: 48px;
+
+ /* Subtitle 1 / Roboto Regular */
+
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 24px;
+
+ /* Gray 4 */
+
+ color: #BDBDBD;
+}
+
+.login-icons {
+ font-size: 24px !important;
+ color: white;
+ position: absolute;
+ bottom: calc(50% - 19px*2);
+ left: 16px;
+}
+
+.login-inline {
+ position: relative;
+}
+
+.login-inline > input {
+ padding-left: 64px;
+}
+
+html {
+ overflow: hidden;
+ height: 100vh;
+ width: 100vw;
+}
+
+body {
+ overflow: hidden;
+ height: 100vh;
+ width: 100vw;
+}
diff --git a/static/dark_theme/_variables.scss b/static/dark_theme/_variables.scss
@@ -1,19 +1,5 @@
@at-root {@import "./globals.scss";}
-// Custom component colors
-$scrollbar-color: var(--global-scrollbar-color);
-$scrollbar-bg-color: var(--global-scrollbar-bg-color);
-
-// UIKit Colors
-$global-background: var(--global-background);
-$global-emphasis-color: var(--global-emphasis-color);
-$global-color: var(--global-color);
-$icon-link-active-color: var(--icon-link-active-color);
-$active-menu: var(--active-menu);
-
.uk-input, .uk-search-input {
border: 1px solid $global-emphasis-color;
}
-
-
-@import "../../node_modules/uikit/src/scss/variables-theme.scss";
diff --git a/static/fonts.scss b/static/fonts.scss
@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto:wght@300;400;500;700&display=swap');
diff --git a/static/images/login_bg.jpg b/static/images/login_bg.jpg
Binary files differ.
diff --git a/static/light_theme/_variables.scss b/static/light_theme/_variables.scss
@@ -1,18 +1 @@
@at-root {@import "./globals.scss";}
-
-// Custom component colors
-$scrollbar-color: var(--global-scrollbar-color);
-$scrollbar-bg-color: var(--global-scrollbar-bg-color);
-
-// UIKit Colors
-$global-background: var(--global-background);
-$global-emphasis-color: var(--global-emphasis-color);
-$global-color: var(--global-color);
-$icon-link-active-color: var(--icon-link-active-color);
-$active-menu: var(--active-menu);
-
-/*.uk-input, .uk-search-input {
- border: 1px solid $global-emphasis-color;
-}*/
-
-@import "../../node_modules/uikit/src/scss/variables-theme.scss";
diff --git a/static/normalize.css b/static/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/static/style.scss b/static/style.scss
@@ -1,5 +1,12 @@
+@import "normalize.css";
@import "theme_slider.scss";
+
+@import "./variable-ovewrites.scss";
+@import "./custom-css.scss";
+@import "../node_modules/uikit/src/scss/mixins-theme.scss";
+@import "../node_modules/uikit/src/scss/uikit-theme.scss";
+
[data-theme="dark"] {
@import "dark_theme/variables";
@@ -8,13 +15,7 @@
color: white;
}
- @at-root {
- @import "./custom-css.scss";
- }
- @at-root {
- @import "../node_modules/uikit/src/scss/mixins-theme.scss";
- @import "../node_modules/uikit/src/scss/uikit-theme.scss";
- }
+
}
[data-theme="light"] {
@@ -24,13 +25,4 @@
background-color: var(--global-background);
color: black;
}
-
- @at-root {
- @import "custom-css.scss";
- }
- @at-root {
- @import "../node_modules/uikit/src/scss/mixins-theme.scss";
- @import "../node_modules/uikit/src/scss/uikit-theme.scss";
- }
}
-
diff --git a/static/variable-ovewrites.scss b/static/variable-ovewrites.scss
@@ -0,0 +1,13 @@
+// Custom component colors
+$scrollbar-color: var(--global-scrollbar-color);
+$scrollbar-bg-color: var(--global-scrollbar-bg-color);
+
+// UIKit Colors
+$global-background: var(--global-background);
+$global-emphasis-color: var(--global-emphasis-color);
+$global-color: var(--global-color);
+$icon-link-active-color: var(--icon-link-active-color);
+$active-menu: var(--active-menu);
+
+
+@import "../node_modules/uikit/src/scss/variables-theme.scss";
diff --git a/webpack.config.js b/webpack.config.js
@@ -22,6 +22,13 @@ module.exports = (env, argv) => {
module: {
rules: [
{
+ test: /\.(png|jpe?g|gif)$/i,
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ },
+ },
+ {
test: /\.s[ac]ss$/i,
include: [path.resolve(__dirname, "static"), path.resolve(__dirname, "node_modules")],
use: [
diff --git a/yarn.lock b/yarn.lock
@@ -84,11 +84,6 @@
dependencies:
"@hapi/hoek" "^8.3.0"
-"@miragejs/pretender-node-polyfill@^0.1.0":
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz#d26b6b7483fb70cd62189d05c95d2f67153e43f2"
- integrity sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==
-
"@nodelib/fs.scandir@2.1.3":
version "2.1.3"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -141,6 +136,11 @@
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
+"@types/json-schema@^7.0.4":
+ version "7.0.5"
+ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+ integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
"@types/minimatch@*":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -404,7 +404,7 @@ ajv@^6.1.0, ajv@^6.10.2:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
-ajv@^6.12.0, ajv@^6.5.5:
+ajv@^6.12.0, ajv@^6.12.2, ajv@^6.5.5:
version "6.12.2"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
@@ -2066,11 +2066,6 @@ extsprintf@^1.2.0:
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
-fake-xml-http-request@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/fake-xml-http-request/-/fake-xml-http-request-2.1.1.tgz#279fdac235840d7a4dff77d98ec44bce9fc690a6"
- integrity sha512-Kn2WYYS6cDBS5jq/voOfSGCA0TafOYAUPbEp8mUVpD/DVV5bQIDjlq+MLLvNUokkbTpjBVlLDaM5PnX+PwZMlw==
-
fast-deep-equal@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
@@ -2141,6 +2136,14 @@ figures@^2.0.0:
dependencies:
escape-string-regexp "^1.0.5"
+file-loader@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+ integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+ dependencies:
+ loader-utils "^2.0.0"
+ schema-utils "^2.6.5"
+
file-uri-to-path@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -2797,11 +2800,6 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
-inflected@^2.0.4:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/inflected/-/inflected-2.0.4.tgz#323770961ccbe992a98ea930512e9a82d3d3ef77"
- integrity sha512-HQPzFLTTUvwfeUH6RAGjD8cHS069mBqXG5n4qaxX7sJXBhVQrsGgF+0ZJGkSuN6a8pcUWB/GXStta11kKi/WvA==
-
inflight@^1.0.4:
version "1.0.6"
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -3327,131 +3325,16 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
-lodash.assign@^4.2.0:
- version "4.2.0"
- resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
- integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=
-
-lodash.camelcase@^4.3.0:
- version "4.3.0"
- resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
- integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
-
-lodash.clonedeep@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
- integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
-
-lodash.compact@^3.0.1:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/lodash.compact/-/lodash.compact-3.0.1.tgz#540ce3837745975807471e16b4a2ba21e7256ca5"
- integrity sha1-VAzjg3dFl1gHRx4WtKK6IeclbKU=
-
-lodash.find@^4.6.0:
- version "4.6.0"
- resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
- integrity sha1-ywcE1Hq3F4n/oN6Ll92Sb7iLE7E=
-
-lodash.flatten@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
- integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
-
-lodash.forin@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.forin/-/lodash.forin-4.4.0.tgz#5d3f20ae564011fbe88381f7d98949c9c9519731"
- integrity sha1-XT8grlZAEfvog4H32YlJyclRlzE=
-
-lodash.get@^4.4.2:
- version "4.4.2"
- resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
- integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
-
-lodash.has@^4.5.2:
- version "4.5.2"
- resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
- integrity sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=
-
-lodash.invokemap@^4.6.0:
- version "4.6.0"
- resolved "https://registry.yarnpkg.com/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz#1748cda5d8b0ef8369c4eb3ec54c21feba1f2d62"
- integrity sha1-F0jNpdiw74NpxOs+xUwh/rofLWI=
-
-lodash.isempty@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
- integrity sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=
-
-lodash.isequal@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
- integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
-
-lodash.isfunction@^3.0.9:
- version "3.0.9"
- resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
- integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==
-
-lodash.isinteger@^4.0.4:
- version "4.0.4"
- resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
- integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
-
-lodash.isplainobject@^4.0.6:
- version "4.0.6"
- resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
- integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
-
-lodash.lowerfirst@^4.3.1:
- version "4.3.1"
- resolved "https://registry.yarnpkg.com/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz#de3c7b12e02c6524a0059c2f6cb7c5c52655a13d"
- integrity sha1-3jx7EuAsZSSgBZwvbLfFxSZVoT0=
-
-lodash.map@^4.6.0:
- version "4.6.0"
- resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
- integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
-
-lodash.mapvalues@^4.6.0:
- version "4.6.0"
- resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
- integrity sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=
-
lodash.once@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
-lodash.pick@^4.4.0:
- version "4.4.0"
- resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
- integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
-
-lodash.snakecase@^4.1.1:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
- integrity sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=
-
lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-lodash.uniq@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
- integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash.uniqby@^4.7.0:
- version "4.7.0"
- resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
- integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
-
-lodash.values@^4.3.0:
- version "4.3.0"
- resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-4.3.0.tgz#a3a6c2b0ebecc5c2cba1c17e6e620fe81b53d347"
- integrity sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=
-
lodash@4.17.15, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -3761,38 +3644,6 @@ minizlib@^2.1.0:
minipass "^3.0.0"
yallist "^4.0.0"
-miragejs@^0.1.40:
- version "0.1.40"
- resolved "https://registry.yarnpkg.com/miragejs/-/miragejs-0.1.40.tgz#5bcba7634312c012748ae7f294e1516b74b37182"
- integrity sha512-7zxIcynzdS6425KZ2+TWD6F6DqESorulSDW2QBXf4iKyVn/J5vSielcubAK8sTKUefTPCrSRi7PwgNOb0JlmIg==
- dependencies:
- "@miragejs/pretender-node-polyfill" "^0.1.0"
- inflected "^2.0.4"
- lodash.assign "^4.2.0"
- lodash.camelcase "^4.3.0"
- lodash.clonedeep "^4.5.0"
- lodash.compact "^3.0.1"
- lodash.find "^4.6.0"
- lodash.flatten "^4.4.0"
- lodash.forin "^4.4.0"
- lodash.get "^4.4.2"
- lodash.has "^4.5.2"
- lodash.invokemap "^4.6.0"
- lodash.isempty "^4.4.0"
- lodash.isequal "^4.5.0"
- lodash.isfunction "^3.0.9"
- lodash.isinteger "^4.0.4"
- lodash.isplainobject "^4.0.6"
- lodash.lowerfirst "^4.3.1"
- lodash.map "^4.6.0"
- lodash.mapvalues "^4.6.0"
- lodash.pick "^4.4.0"
- lodash.snakecase "^4.1.1"
- lodash.uniq "^4.5.0"
- lodash.uniqby "^4.7.0"
- lodash.values "^4.3.0"
- pretender "^3.4.3"
-
mississippi@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -4480,14 +4331,6 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-pretender@^3.4.3:
- version "3.4.3"
- resolved "https://registry.yarnpkg.com/pretender/-/pretender-3.4.3.tgz#a3b4160516007075d29127262f3a0063d19896e9"
- integrity sha512-AlbkBly9R8KR+R0sTCJ/ToOeEoUMtt52QVCetui5zoSmeLOU3S8oobFsyPLm1O2txR6t58qDNysqPnA1vVi8Hg==
- dependencies:
- fake-xml-http-request "^2.1.1"
- route-recognizer "^0.3.3"
-
pretty-bytes@5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
@@ -4888,11 +4731,6 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0"
inherits "^2.0.1"
-route-recognizer@^0.3.3:
- version "0.3.4"
- resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.4.tgz#39ab1ffbce1c59e6d2bdca416f0932611e4f3ca3"
- integrity sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==
-
run-parallel@^1.1.9:
version "1.1.9"
resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
@@ -4969,6 +4807,15 @@ schema-utils@^2.6.1, schema-utils@^2.6.6:
ajv "^6.12.0"
ajv-keywords "^3.4.1"
+schema-utils@^2.6.5:
+ version "2.7.0"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+ integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+ dependencies:
+ "@types/json-schema" "^7.0.4"
+ ajv "^6.12.2"
+ ajv-keywords "^3.4.1"
+
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -6052,11 +5899,6 @@ websocket-extensions@>=0.1.1:
resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
-whatwg-fetch@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
- integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
-
whatwg-url@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
