made some improvements

package.json

@@ -8,20 +8,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "autoprefixer": "^9.8.6",
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
     "jwt-decode": "^3.1.2",
     "lottie-vuejs": "^0.4.0",
     "node-sass": "^5.0.0",
-    "postcss": "^7.0.35",
     "register-service-worker": "^1.7.1",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "seamless-scroll-polyfill": "^1.2.3",
     "tailwind": "^4.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
     "v-shared-element": "^3.0.3",
     "vue": "^2.6.11",
     "vue-confetti": "^2.2.1",
@@ -36,15 +33,19 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.0.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3",
     "vue-template-compiler": "^2.6.11"
   }
 }

postcss.config.js

@@ -1,6 +1,6 @@
-const autoprefixer = require("autoprefixer");
-const tailwindcss = require("tailwindcss");
-
 module.exports = {
-  plugins: [tailwindcss, autoprefixer],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };

src/App.vue

@@ -3,10 +3,10 @@
     id="app"
     class="dark:bg-gray-900 bg-white dark:text-white overflow-hidden outline-none"
   >
-    <NavBar v-if="showNav && $store.state.user" />
-    <keep-alive>
+    <div class="app-wrapper">
+      <NavBar v-if="showNav && $store.state.user" />
       <router-view class="flex-1" />
-    </keep-alive>
+    </div>
   </div>
 </template>
 
@@ -71,6 +71,12 @@ a {
   width: 100%;
   height: 100%;
 }
+.app-wrapper {
+  display: flex;
+  width: 100%;
+  max-width: 1024px;
+  margin: 0rem auto;
+}
 /*
 #nav a {
   font-weight: bold;

src/components/GClassroomCoursesDialog.vue

@@ -3,25 +3,25 @@
     class="overlay absolute top-0 left-0 w-full h-full z-50 flex justify-center items-center"
   >
     <div
-      class="bg-white dark:bg-gray-800 overflow-y-scroll rounded-md text-black dark:text-white w-3/4 h-3/4 "
+      class="bg-white dark:bg-gray-800  rounded-md text-black dark:text-white w-3/4 h-3/4 overflow-hidden"
     >
       <div
-        class="sticky bg-white dark:bg-gray-800 dark:bg-dark w-full p-4 py-6 flex items-center justify-between border-b border-gray-200 dark:border-gray-600"
+        class="sticky bg-white  dark:bg-gray-800 dark:bg-dark w-full p-4 py-6 flex items-center justify-between border-b border-gray-200 dark:border-gray-600"
       >
         <h1 class="text-2xl font-semibold text-left ">
           Select one of your Google Classroom courses
         </h1>
         <button
           @click="$emit('closeDialog')"
-          class="text-blue-500 mr-2 border-none hover:bg-opacity-75 py-2 px-2 rounded-full  dark:hover:bg-gray-600 hover:bg-gray-200"
+          class="text-blue-500 border-none hover:bg-opacity-75 p-2 rounded-full  dark:hover:bg-gray-800 hover:bg-gray-200"
         >
-          <x-icon size="1.5x"></x-icon>
+          <x-icon size="1x"></x-icon>
         </button>
       </div>
-      <div class="p-2">
+      <div class="overflow-y-scroll">
         <button
           @click="addGClassroomCourseToCheckit(gCourse)"
-          class="w-full my-4 flex flex-col justify-start items-start hover:bg-gray-200 dark:hover:bg-gray-600 p-2 text-left cursor-pointer rounded-lg"
+          class="w-full flex flex-col justify-start items-start hover:bg-gray-200 dark:hover:bg-gray-800 p-4 text-left cursor-pointer"
           v-for="gCourse in gClassroomCourses"
           :key="gCourse.id"
         >

src/components/Header.vue

@@ -4,6 +4,7 @@
   >
     <div class="flex items-center min-w-0">
       <button
+        title="Go Back"
         v-if="back"
         class="text-blue-500 mr-2 border-none hover:bg-opacity-75 py-2 px-2 rounded-full  dark:hover:bg-gray-800 hover:bg-gray-200"
         @click="$router.go(-1)"
@@ -14,13 +15,29 @@
       </button>
       <h3 class="font-bold text-xl truncate">{{ title }}</h3>
     </div>
-    <button
-      v-if="BtnMethod"
-      class="text-blue-500 border-none hover:bg-opacity-75 py-2 px-2 rounded-full  dark:hover:bg-gray-800 hover:bg-gray-200"
-      @click="BtnMethod"
-    >
-      <span class=""><slot></slot></span>
-    </button>
+    <div>
+      <button
+        v-if="BtnMethod1"
+        class="text-blue-500 rounded-md border-none hover:bg-opacity-75 py-2 px-2 dark:hover:bg-gray-800 hover:bg-gray-200"
+        @click="BtnMethod1"
+      >
+        <span class=""><slot name="btn1"></slot></span>
+      </button>
+      <button
+        v-if="BtnMethod2"
+        class="text-blue-500 ml-2 rounded-md border-none hover:bg-opacity-75 py-2 px-2 dark:hover:bg-gray-800 hover:bg-gray-200"
+        @click="BtnMethod2"
+      >
+        <span class=""><slot name="btn2"></slot></span>
+      </button>
+      <button
+        v-if="BtnMethod3"
+        class="text-blue-500 ml-2 rounded-md border-none hover:bg-opacity-75 py-2 px-2 dark:hover:bg-gray-800 hover:bg-gray-200"
+        @click="BtnMethod3"
+      >
+        <span class=""><slot name="btn3"></slot></span>
+      </button>
+    </div>
   </div>
 </template>
 
@@ -35,7 +52,13 @@ export default {
     title: {
       type: String,
     },
-    BtnMethod: {
+    BtnMethod1: {
+      type: Function,
+    },
+    BtnMethod2: {
+      type: Function,
+    },
+    BtnMethod3: {
       type: Function,
     },
     BtnTitle: {