Redesign home

.eslintrc.js

@@ -33,6 +33,7 @@ module.exports = {
     }],
     'vuejs-accessibility/mouse-events-have-key-events': 'off',
     'import/extensions': 'off',
+    'global-require': 'off',
   },
   overrides: [
     {

src/App.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-app style="z-index: 0 !important; position: relative;" class="d-flex">
-    <mobile />
-    <div class="custom-background">
-      <top/>
-      <v-row class="d-flex justify-center ma-0">
+  <v-app class="h-screen">
+    <mobile v-if="smAndDown" />
+    <div class="d-flex flex-column h-100" v-else>
+      <top />
+      <div class="flex-grow-1">
         <router-view @update:showDialog="showTermsDialog" />
-      </v-row>
+      </div>
       <terms-dialog v-model:showDialog="showTermsAndConditions" />
-      <footer-rsk @update:showDialog="showTermsDialog" />
+      <footer-rsk class="flex-grow-0" @update:showDialog="showTermsDialog" />
     </div>
   </v-app>
 </template>
+
 <script lang="ts">
 import { computed, ref } from 'vue';
 import Top from '@/common/components/layouts/Top.vue';
@@ -21,6 +22,7 @@ import { EnvironmentAccessorService } from '@/common/services/enviroment-accesso
 import * as constants from '@/common/store/constants';
 import { useAction } from '@/common/store/helper';
 import { vuetifyNonce } from '@/common/plugins/vuetify';
+import { useDisplay } from 'vuetify';
 
 export default {
   name: 'App',
@@ -33,6 +35,7 @@ export default {
   setup() {
     let scriptTag: HTMLScriptElement;
     let hotjarScriptTag: HTMLScriptElement;
+    const { smAndDown } = useDisplay();
     const enableTermsAndConditions = useAction('web3Session', constants.SESSION_ADD_TERMS_AND_CONDITIONS_ENABLED);
     const showTermsAndConditions = ref(false);
     const contentSecurityPolicy = computed((): string => {
@@ -93,9 +96,11 @@ export default {
     appendHotjar();
     appendClarity();
     appendCSP();
+
     return {
       showTermsDialog,
       showTermsAndConditions,
+      smAndDown,
     };
   },
 };