feat(ui): unify loading empty error states

frontend/src/components/StateError.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="state state-error">
-    <el-icon class="state-icon"><CircleClose /></el-icon>
-    <div class="state-title">{{ title }}</div>
-    <div v-if="description" class="state-desc">{{ description }}</div>
-    <div v-if="$slots.action" class="state-action">
+  <section class="ctms-state state state-error">
+    <el-icon class="ctms-state-icon state-icon"><CircleClose /></el-icon>
+    <h3 class="ctms-state-title state-title">{{ title }}</h3>
+    <p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
+    <div v-if="$slots.action" class="ctms-state-action state-action">
       <slot name="action" />
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -26,35 +26,15 @@ withDefaults(
 </script>
 
 <style scoped>
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 12px;
-  color: var(--ctms-text-secondary);
-  text-align: center;
-}
-
 .state-icon {
-  font-size: 36px;
   color: var(--ctms-danger);
-  margin-bottom: 10px;
 }
 
 .state-title {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--ctms-text-main);
 }
 
 .state-desc {
-  font-size: 12px;
   color: var(--ctms-text-secondary);
-  margin-top: 6px;
-}
-
-.state-action {
-  margin-top: 12px;
 }
 </style>