use flex for centering

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/layout/sidebar.tsx

@@ -46,7 +46,11 @@ export class Sidebar extends React.Component<Props> {
 
   renderCustomResources() {
     if (crdStore.isLoading) {
-      return <Spinner centerHorizontal />;
+      return (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      );
     }
 
     return Object.entries(crdStore.groups).map(([group, crds]) => {

src/renderer/components/spinner/spinner.scss

@@ -34,10 +34,6 @@
     margin-top: calc(var(--spinner-size) / -2);
   }
 
-  &.centerHorizontal {
-    margin-left: 50%;
-  }
-
   @keyframes rotate {
     0% {
       transform: rotate(0deg);

src/renderer/components/spinner/spinner.tsx

@@ -6,19 +6,17 @@ import { cssNames } from "../../utils";
 export interface SpinnerProps extends React.HTMLProps<any> {
   singleColor?: boolean;
   center?: boolean;
-  centerHorizontal?: boolean;
 }
 
 export class Spinner extends React.Component<SpinnerProps, {}> {
   static defaultProps = {
     singleColor: true,
     center: false,
-    centerHorizontal: false,
   };
 
   render() {
-    const { center, singleColor, centerHorizontal, className, ...props } = this.props;
-    const classNames = cssNames("Spinner", className, { singleColor, center, centerHorizontal });
+    const { center, singleColor, className, ...props } = this.props;
+    const classNames = cssNames("Spinner", className, { singleColor, center });
 
     return <div {...props} className={classNames} />;
   }