Migrating Vue components to React and stores refactoring (#585)

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/spinner/cube-spinner.scss

@@ -3,6 +3,13 @@
 .CubeSpinner {
   --size: 70px;
 
+  &.center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   .sk-cube-grid {
     $size: 70px;
     width: $size;

src/renderer/components/spinner/cube-spinner.tsx

@@ -4,13 +4,14 @@ import { cssNames } from "../../utils";
 
 interface Props {
   className?: string;
+  center?: boolean;
 }
 
-export class CubeSpinner extends React.PureComponent<Props> {
+export class CubeSpinner extends React.Component<Props> {
   render() {
-    const { className } = this.props;
+    const { className, center } = this.props;
     return (
-      <div className={cssNames("CubeSpinner ", className)}>
+      <div className={cssNames("CubeSpinner ", className, { center })}>
         <div className="sk-cube-grid">
           <div className="sk-cube sk-cube1"></div>
           <div className="sk-cube sk-cube2"></div>

src/renderer/components/spinner/spinner.scss

@@ -8,9 +8,7 @@
   $colorAnimation: colors $duration*4 ease-in-out infinite;
 
   @mixin spinner-color($color) {
-    border-color: $color;
-    border-left-color: transparent;
-    border-right-color: transparent;
+    border-color: transparent $color;
   }
 
   width: var(--spinner-size);