Fix:

- disable accept in expired access requests
- clean transitions from menu and header
- main transition optimizations
- loading styles fro tables more smooth
- primary color handling fix in sass
- spacing in section title

web-app/packages/app/src/App.vue

@@ -12,11 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-slot="{ Component, route }"
       :key="$route.fullPath"
     >
-      <transition name="fade">
-        <div :key="route.name">
-          <component :is="Component" />
-        </div>
-      </transition>
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
     </router-view>
 
     <main
@@ -31,13 +29,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
-        <transition name="fade">
-          <div :key="route.name">
-            <component :is="Component" />
-          </div>
-        </transition>
+        <div :key="route.name">
+          <component :is="Component" />
+        </div>
       </router-view>
-      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
+      <PDivider :pt="{ root: { class: 'm-0' } }"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -169,17 +165,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.fade-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s;
+.fade-enter-active {
+  transition: opacity ease-in 0.25s;
 }
 
 .fade-enter-from,

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss

@@ -52,7 +52,7 @@ $colors: (
     --surface-f:#ffffff;
     --text-color: #{map-get($colors , "night")};
     --text-color-secondary:#aaacad;
-    --primary-color:$primaryColor;
+    --primary-color:#{$primaryColor};
     --primary-color-text:#ffffff;
     --font-family:inherit;
     --surface-0: #ffffff;

web-app/packages/lib/src/common/components/AppSection.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-if="!!$slots.title"
       class="flex justify-content-between align-items-center p-4"
     >
-      <h2 class="text-sm text-color"><slot name="title"></slot></h2>
+      <h2 class="text-sm text-color m-0"><slot name="title"></slot></h2>
       <slot name="extra"></slot>
     </header>
     <slot></slot>

web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue

@@ -58,6 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               option-value="value"
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
+              :disabled="expired(item.expire)"
               class="w-6 lg:w-4 p-1"
             />
             <div class="flex justify-content-end w-6 lg:w-4 p-1">
@@ -75,6 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 rounded
                 aria-label="Accept"
                 severity="success"
+                :disabled="expired(item.expire)"
                 @click="acceptRequest(item)"
               />
             </div>
@@ -100,7 +102,7 @@ import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import {
   GetAccessRequestsPayload,
-  ProjectAccessRequest
+  AccessRequest
 } from '@/modules/project/types'
 
 export default defineComponent({
@@ -168,7 +170,7 @@ export default defineComponent({
       this.options.itemsPerPage = e.rows
       this.fetchItems()
     },
-    permissionsChange(e: DropdownChangeEvent, item: ProjectAccessRequest) {
+    permissionsChange(e: DropdownChangeEvent, item: AccessRequest) {
       const { value } = e
       const { id } = item
       this.selectedPermissions[id] = value