diff --git a/client/src/core-components/button.scss b/client/src/core-components/button.scss
index d7514668..32531824 100644
--- a/client/src/core-components/button.scss
+++ b/client/src/core-components/button.scss
@@ -30,7 +30,8 @@
background-color: $secondary-blue;
}
- &_disabled {
+ &_disabled,
+ &_disabled:hover {
background-color: #ec9696;
}
diff --git a/client/src/core-components/loading.js b/client/src/core-components/loading.js
new file mode 100644
index 00000000..da79fb77
--- /dev/null
+++ b/client/src/core-components/loading.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+class Loading extends React.Component {
+
+ render() {
+ return (
+
+
+
+ );
+ }
+
+ getClass() {
+ let classes = {
+ 'loading': true
+ };
+
+ classes[this.props.className] = (this.props.className);
+
+ return classNames(classes);
+ }
+}
+
+export default Loading;
\ No newline at end of file
diff --git a/client/src/core-components/loading.scss b/client/src/core-components/loading.scss
new file mode 100644
index 00000000..6273b184
--- /dev/null
+++ b/client/src/core-components/loading.scss
@@ -0,0 +1,55 @@
+$color: white;
+
+.loading {
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+
+ &-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ font-size: 4px;
+ border-top: 1.1em solid rgba($color, 0.2);
+ border-right: 1.1em solid rgba($color, 0.2);
+ border-bottom: 1.1em solid rgba($color, 0.2);
+ border-left: 1.1em solid $color;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation: turnAnimation 1.1s infinite linear;
+ animation: turnAnimation 1.1s infinite linear;
+
+ &,
+ &:after {
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ }
+ }
+
+ @-webkit-keyframes turnAnimation {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes turnAnimation {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+}
diff --git a/client/src/core-components/submit-button.js b/client/src/core-components/submit-button.js
index 171351de..77f21aea 100644
--- a/client/src/core-components/submit-button.js
+++ b/client/src/core-components/submit-button.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
// CORE LIBS
import Button from 'core-components/button';
+import Loading from 'core-components/loading';
class SubmitButton extends React.Component {
@@ -30,7 +31,7 @@ class SubmitButton extends React.Component {
renderLoading() {
return (
-
+
);
}
diff --git a/client/src/core-components/submit-button.scss b/client/src/core-components/submit-button.scss
index f75110f1..652847c0 100644
--- a/client/src/core-components/submit-button.scss
+++ b/client/src/core-components/submit-button.scss
@@ -1,46 +1,3 @@
.submit-button {
position: relative;
-
- &__loader {
- position: absolute;
- top: 7px;
- left: 103px;
-
- font-size: 4px;
- border-top: 1.1em solid rgba(255, 255, 255, 0.2);
- border-right: 1.1em solid rgba(255, 255, 255, 0.2);
- border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
- border-left: 1.1em solid #ffffff;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: turnAnimation 1.1s infinite linear;
- animation: turnAnimation 1.1s infinite linear;
- }
- &__loader,
- &__loader:after {
- border-radius: 50%;
- width: 30px;
- height: 30px;
- }
- @-webkit-keyframes turnAnimation {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes turnAnimation {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
}
\ No newline at end of file