Merge pull request #3339 from gradido/monterail_vue3_migration_admin-fixes

fix(admin): style fixes

admin/components.d.ts

@@ -77,12 +77,8 @@ declare module 'vue' {
     IBiX: typeof import('~icons/bi/x')['default']
     IBiXCircle: typeof import('~icons/bi/x-circle')['default']
     IIcBaselineClose: typeof import('~icons/ic/baseline-close')['default']
-    IOcticonCircleSlash24: typeof import('~icons/octicon/circle-slash24')['default']
-    IOcticonPerson24: typeof import('~icons/octicon/person24')['default']
     IPhCaretDown: typeof import('~icons/ph/caret-down')['default']
     IPhCaretUpFill: typeof import('~icons/ph/caret-up-fill')['default']
-    IPhEnvelope: typeof import('~icons/ph/envelope')['default']
-    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
     NavBar: typeof import('./src/components/NavBar.vue')['default']
     NotFoundPage: typeof import('./src/components/NotFoundPage.vue')['default']
     OpenCreationsTable: typeof import('./src/components/Tables/OpenCreationsTable.vue')['default']

admin/src/components/ConfirmRegisterMailFormular.vue

@@ -11,11 +11,9 @@
         <!-- Using components -->
         <BInputGroup :prepend="$t('unregister_mail.info')" class="mt-3">
           <BFormInput v-model="email" readonly />
-          <BInputGroupText>
-            <BButton variant="outline-success" class="test-button" @click="sendRegisterMail">
-              {{ $t('unregister_mail.button') }}
-            </BButton>
-          </BInputGroupText>
+          <BButton variant="outline-success" append class="test-button" @click="sendRegisterMail">
+            {{ $t('unregister_mail.button') }}
+          </BButton>
         </BInputGroup>
       </div>
     </div>
@@ -24,7 +22,7 @@
 <script setup>
 import { ref } from 'vue'
 import { sendActivationEmail } from '../graphql/sendActivationEmail'
-import { BButton, BFormInput, BInputGroup, BInputGroupText } from 'bootstrap-vue-next'
+import { BButton, BFormInput, BInputGroup } from 'bootstrap-vue-next'
 import { useI18n } from 'vue-i18n'
 import { useMutation } from '@vue/apollo-composable'
 import { useAppToast } from '@/composables/useToast'

admin/src/components/ContentFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <hr />
+  <hr class="mb-0" />
   <div class="content-footer">
     <BTr class="mt-4 mb-4 justify-content-lg-between">
       <BCol>
@@ -7,13 +7,17 @@
           {{ $t('footer.copyright.year', { year }) }}
           <a
             :href="`https://gradido.net/${$i18n.locale}`"
-            class="font-weight-bold ml-1"
+            class="fw-bold ml-1 link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
             target="_blank"
           >
             {{ $t('footer.copyright.link') }}
           </a>
-          {{ $t('math.pipe', 1) }}
-          <a href="https://github.com/gradido/gradido/releases/latest" target="_blank">
+          |
+          <a
+            href="https://github.com/gradido/gradido/releases/latest"
+            target="_blank"
+            class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
+          >
             {{ $t('footer.app_version', { version }) }}
           </a>
           <a

admin/src/components/Tables/SearchUserTable.vue

@@ -17,27 +17,39 @@
       </template>
 
       <template #cell(status)="row">
-        <div class="text-right">
-          <BAvatar v-if="row.item.deletedAt" class="mr-3 test-deleted-icon" variant="light">
-            <!-- <b-iconstack font-scale="2"> -->
-            <div>
-              <IOcticonPerson24 />
-              <IOcticonCircleSlash24 style="color: #f5365c" />
-            </div>
-            <!-- </b-iconstack> -->
-          </BAvatar>
-          <span v-if="!row.item.deletedAt">
-            <IPhEnvelope
-              v-if="!row.item.emailChecked"
-              style="color: #f5365c"
-              class="align-center mr-3"
+        <div class="d-flex gap-3 justify-content-end align-items-center">
+          <div
+            v-if="row.item.deletedAt"
+            class="mr-3 test-deleted-icon position-relative rounded-circle"
+            style="width: 40px; height: 40px"
+          >
+            <img src="../../assets/icons/circle-slash.png" class="position-absolute" />
+            <img
+              src="../../assets/icons/person.png"
+              class="position-relative"
+              style="transform: translate(50%, 30%)"
             />
-            <!-- <BAvatar
-              v-if="!row.item.hasElopage"
-              variant="danger"
-              class="mr-3"
-              src="img/elopage_favicon.png"
-            /> -->
+          </div>
+          <span v-if="!row.item.deletedAt" class="d-flex gap-2">
+            <div
+              v-if="!row.item.emailChecked"
+              class="mr-3 rounded-circle position-relative"
+              style="background-color: #dc3545; width: 40px; height: 40px"
+            >
+              <img
+                src="../../assets/icons/envelope.png"
+                style="transform: translate(30%, 30%); width: 25px; height: 25px"
+                class="position-absolute"
+              />
+            </div>
+            <div>
+              <img
+                v-if="!row.item.hasElopage"
+                class="mr-3 rounded-circle bg-red-dark"
+                src="../../assets/icons/elopage_favicon.png"
+                style="background-color: #dc3545; width: 40px; height: 40px"
+              />
+            </div>
           </span>
           <IPhCaretUpFill
             v-if="row.detailsShowing === 'caret-up-fill'"
@@ -114,7 +126,7 @@
 </template>
 <script setup>
 import { ref, nextTick, onMounted, watch, computed } from 'vue'
-import { BTable, BAvatar, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
+import { BTable, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useAppToast } from '@/composables/useToast'
@@ -128,7 +140,7 @@ import DeletedUserFormular from '../DeletedUserFormular.vue'
 const { t } = useI18n()
 const { confirm } = useModalController()
 const store = useStore()
-const { toastError } = useAppToast()
+const { toastError, toastSuccess } = useAppToast()
 
 const props = defineProps({
   items: {
@@ -207,6 +219,7 @@ const showDeleteModal = async () => {
         deletedUserForm.value.deleteUserMutation()
       }
     })
+
     .catch((error) => {
       toastError(error.message)
     })
@@ -229,6 +242,7 @@ const showUndeleteModal = async () => {
     .then((ok) => {
       if (ok) {
         undeletedUserForm.value.undeleteUserMutation()
+        toastSuccess(t('user_recovered'))
       }
     })
     .catch((error) => {
@@ -266,11 +280,7 @@ const onRowClicked = async (item) => {
       obj._showDetails = false
     }
   })
-
   await nextTick()
-  if (!status && rowDetails.value) {
-    // rowDetails.value.focus()
-  }
 }
 
 watch(