Improve plan overlay with the externalLdap example

dashboard/src/components/ExternalLdap.vue

@@ -303,20 +303,20 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <Section :title="$t('users.externalLdap.title')" :disabled="true">
+    <Section :title="$t('users.externalLdap.title')" :disabled="!features.externalLdap">
       <template #header-buttons>
         <Button tool icon="fas fa-align-left" v-tooltip="$t('domains.renewCerts.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
       </template>
 
       <template #overlay>
         <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
-          <Button outline @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
+          <Button @click="subscriptionRequiredDialog.open()">Subscription Required</Button>
         </div>
       </template>
 
       <p>{{ $t('users.externalLdap.description') }}</p>
 
-      <div>
+      <div v-if="features.externalLdap">
         <div v-show="config.provider === 'noop'">
           {{ $t('users.externalLdap.noopInfo') }}
         </div>

dashboard/src/components/Section.vue

@@ -91,7 +91,13 @@ defineProps({
   left: 0;
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(2px);
+  transition: all 200ms;
+  opacity: 0;
+}
+
+.section[disabled] .section-overlay:hover {
+  opacity: 1;
+  backdrop-filter: blur(1.5px);
 }
 
 </style>