From 0d886a4572ac6f618f4392f05bf85bfa5664bc66 Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Mon, 4 Jan 2021 13:36:31 +0100
Subject: [PATCH] feat(style): add spinner on OidcCallback view + rearrange css

---
 src/App.vue                                       | 10 +---------
 src/Layout.scss                                   |  7 +++++++
 src/Layout.vue                                    |  2 ++
 src/components/platform-header/PlatformHeader.vue |  4 +---
 src/components/user-menu/UserMenu.vue             |  4 +---
 src/views/home/Home.scss                          |  3 ---
 src/views/home/Home.vue                           | 14 --------------
 src/views/oidc-callback/OidcCallback.scss         |  7 +++++++
 src/views/oidc-callback/OidcCallback.vue          | 15 +++++++++++----
 src/views/spaces/Spaces.vue                       |  4 +---
 10 files changed, 31 insertions(+), 39 deletions(-)
 create mode 100644 src/Layout.scss
 delete mode 100644 src/views/home/Home.scss
 delete mode 100644 src/views/home/Home.vue
 create mode 100644 src/views/oidc-callback/OidcCallback.scss

diff --git a/src/App.vue b/src/App.vue
index d1d989c97..baaae5a28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,17 +2,9 @@
   <router-view />
 </template>
 
-<style lang="scss">
-@import '~@bimdata/design-system/dist/scss/utilities/spacing.scss';
-@import '~@bimdata/design-system/dist/scss/utilities/text.scss';
-
+<style>
 body {
   margin: 0;
   padding: 0;
-  min-width: 100vw;
-  min-height: 100vh;
-  background-color: $color-tertiary-lightest;
-  font-family: $primary-font;
-  font-size: $font-size;
 }
 </style>
diff --git a/src/Layout.scss b/src/Layout.scss
new file mode 100644
index 000000000..d7abc8a7e
--- /dev/null
+++ b/src/Layout.scss
@@ -0,0 +1,7 @@
+#layout {
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: $color-tertiary-lightest;
+  font-family: $primary-font;
+  font-size: $font-size;
+}
diff --git a/src/Layout.vue b/src/Layout.vue
index b177daf14..1050f9f54 100644
--- a/src/Layout.vue
+++ b/src/Layout.vue
@@ -15,3 +15,5 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss" src="./Layout.scss"></style>
diff --git a/src/components/platform-header/PlatformHeader.vue b/src/components/platform-header/PlatformHeader.vue
index 68f2d568f..0bdc7ebfd 100644
--- a/src/components/platform-header/PlatformHeader.vue
+++ b/src/components/platform-header/PlatformHeader.vue
@@ -21,6 +21,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-@import './PlatformHeader.scss';
-</style>
\ No newline at end of file
+<style scoped lang="scss" src="./PlatformHeader.scss"></style>
\ No newline at end of file
diff --git a/src/components/user-menu/UserMenu.vue b/src/components/user-menu/UserMenu.vue
index 009ea2f31..9f5a51b88 100644
--- a/src/components/user-menu/UserMenu.vue
+++ b/src/components/user-menu/UserMenu.vue
@@ -50,6 +50,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-@import './UserMenu.scss';
-</style>
\ No newline at end of file
+<style scoped lang="scss" src="./UserMenu.scss"></style>
\ No newline at end of file
diff --git a/src/views/home/Home.scss b/src/views/home/Home.scss
deleted file mode 100644
index c2a3e2fd2..000000000
--- a/src/views/home/Home.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.home-view {
-  text-align: center;
-}
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
deleted file mode 100644
index d5debd108..000000000
--- a/src/views/home/Home.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="home-view">
-    <img alt="BIMData Platform logo"
-      src="@/assets/logo.svg"
-      width="330"
-      height="150"
-    />
-    <h1>{{ $t('Home.welcome') }}</h1>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import './Home.scss';
-</style>
diff --git a/src/views/oidc-callback/OidcCallback.scss b/src/views/oidc-callback/OidcCallback.scss
new file mode 100644
index 000000000..02cff502f
--- /dev/null
+++ b/src/views/oidc-callback/OidcCallback.scss
@@ -0,0 +1,7 @@
+.oidc-callback-view {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/views/oidc-callback/OidcCallback.vue b/src/views/oidc-callback/OidcCallback.vue
index 8a5ba83ed..e19737a76 100644
--- a/src/views/oidc-callback/OidcCallback.vue
+++ b/src/views/oidc-callback/OidcCallback.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oidc-callback-view">
-    OIDC Callback view
+    <BIMDataBigSpinner style="transform: translateX(130px);"></BIMDataBigSpinner>
   </div>
 </template>
 
@@ -8,17 +8,24 @@
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useGlobalState } from '@/state/globalState';
+// Components
+import BIMDataBigSpinner from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataBigSpinner.js';
 
 export default {
+  components: {
+    BIMDataBigSpinner
+  },
   setup() {
     const router = useRouter();
     const { signInCallback } = useGlobalState();
 
     onMounted(() => {
-      signInCallback().then(result => {
-        router.push({ path: result.state ? result.state : '/' });
-      });
+      signInCallback().then(
+        result => router.push({ path: result.state ? result.state : '/' })
+      );
     });
   }
 }
 </script>
+
+<style scoped lang="scss" src="./OidcCallback.scss"></style>
diff --git a/src/views/spaces/Spaces.vue b/src/views/spaces/Spaces.vue
index b9add5df1..f0b26fa20 100644
--- a/src/views/spaces/Spaces.vue
+++ b/src/views/spaces/Spaces.vue
@@ -32,6 +32,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-@import './Spaces.scss';
-</style>
+<style scoped lang="scss" src="./Spaces.scss"></style>