From 13ec4ee776728983e25d87078b804bdaaca66e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 24 Sep 2022 18:06:15 +0200
Subject: [PATCH] Refine design and a bit functionality, first step

---
 webapp/components/Group/GroupForm.vue   | 162 ++++++++++++------------
 webapp/components/Group/GroupList.vue   |  51 ++++----
 webapp/components/Group/GroupMember.vue | 149 +++++++++++++++-------
 webapp/locales/de.json                  |  28 ++--
 webapp/locales/en.json                  |  26 +++-
 webapp/pages/group/create.vue           |  29 +++--
 webapp/pages/group/edit/_id.vue         |  37 +++---
 webapp/pages/group/edit/_id/index.vue   |   6 +-
 webapp/pages/group/edit/_id/members.vue |   6 +-
 webapp/pages/my-groups.vue              | 108 ++++++++++------
 webapp/pages/settings.vue               |  13 +-
 11 files changed, 377 insertions(+), 238 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index fc4b857e8..df4aa211a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -1,88 +1,90 @@
 <template>
   <div>
-    <div v-if="update">add: slug, location, tiptap editor in description</div>
-    <ds-container>
-      <ds-form
-        class="group-form"
-        ref="groupForm"
-        v-model="formData"
-        :schema="formSchema"
-        @submit="submit"
-      >
-        <ds-input
-          v-model="formData.name"
-          :label="$t('group.groupName')"
-          :placeholder="`${$t('group.groupName')}…`"
-        ></ds-input>
+    <!-- Wolle: <div v-if="update">add: slug, location, tiptap editor in description</div> -->
+    <!-- Wolle: <ds-container> -->
+    <ds-form
+      class="group-form"
+      ref="groupForm"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="submit"
+    >
+      <ds-input
+        :label="$t('group.name')"
+        v-model="formData.name"
+        :placeholder="`${$t('group.name')} …`"
+      ></ds-input>
 
-        <ds-input
-          v-if="update"
-          v-model="formData.slug"
-          :label="$t('users.table.columns.slug')"
-          :placeholder="`${$t('group.groupName')}…`"
-        ></ds-input>
+      <!-- Wolle: Why update here? -->
+      <ds-input
+        v-if="update"
+        :label="$t('group.labelSlug')"
+        v-model="formData.slug"
+        icon="at"
+        :placeholder="`${$t('group.labelSlug')} …`"
+      ></ds-input>
 
+      <ds-select
+        :label="$t('group.type')"
+        v-model="formData.groupType"
+        :options="['public', 'closed', 'hidden']"
+        icon="user"
+        :placeholder="$t('group.type') + ' …'"
+      ></ds-select>
+
+      <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
+
+      <ds-input
+        :label="$t('group.description')"
+        v-model="formData.description"
+        type="textarea"
+        rows="3"
+      ></ds-input>
+      <ds-space margin-top="large">
         <ds-select
-          icon="user"
-          v-model="formData.groupType"
-          :label="$t('group.type')"
-          :options="['public', 'closed', 'hidden']"
-          placeholder="Status ..."
+          :label="$t('group.actionRadius')"
+          v-model="formData.actionRadius"
+          :options="['regional', 'national', 'continental', 'global']"
+          icon="globe"
+          :placeholder="`${$t('group.actionRadius')} …`"
         ></ds-select>
-
-        <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
-
-        <ds-input
-          v-model="formData.description"
-          :label="$t('group.description')"
-          type="textarea"
-          rows="3"
-        ></ds-input>
-        <ds-space margin-top="large">
-          <ds-select
-            id="city"
-            v-model="formData.locationName"
-            icon="map-marker"
-            :options="cities"
-            :label="$t('settings.data.labelCity')"
-            :placeholder="$t('settings.data.labelCity')"
-            :loading="loadingGeo"
-            @input.native="handleCityInput"
-          />
-        </ds-space>
-        <ds-space margin-top="large">
-          <ds-select
-            icon="card"
-            v-model="formData.actionRadius"
-            :label="$t('group.actionRadius')"
-            :options="['regional', 'national', 'continental', 'global']"
-            :placeholder="`${$t('group.actionRadius')} …`"
-          ></ds-select>
-        </ds-space>
-        <ds-space margin-top="large">
-          <categories-select
-            v-if="categoriesActive"
-            model="categoryIds"
-            :existingCategoryIds="formData.categoryIds"
-          />
-        </ds-space>
-        <ds-space margin-top="large">
-          <ds-button @click.prevent="reset()">{{ $t('group.reset-form') }}</ds-button>
-          <ds-button
-            type="submit"
-            @click.prevent="submit()"
-            icon="save"
-            :disabled="update ? submitDisableEdit : submitDisable"
-            primary
-          >
-            {{ update ? $t('group.update') : $t('group.save') }}
-          </ds-button>
-        </ds-space>
-      </ds-form>
-      <ds-space centered v-show="!update">
-        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
+        <ds-select
+          id="city"
+          :label="$t('settings.data.labelCity')"
+          v-model="formData.locationName"
+          :options="cities"
+          icon="map-marker"
+          :placeholder="$t('settings.data.labelCity') + ' …'"
+          :loading="loadingGeo"
+          @input.native="handleCityInput"
+        />
       </ds-space>
-    </ds-container>
+      <ds-space margin-top="large">
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          :existingCategoryIds="formData.categoryIds"
+        />
+      </ds-space>
+      <ds-space margin-top="large">
+        <nuxt-link to="/my-groups">
+          <ds-button>{{ $t('actions.cancel') }}</ds-button>
+        </nuxt-link>
+        <ds-button
+          type="submit"
+          icon="save"
+          :disabled="update ? submitDisableEdit : submitDisable"
+          primary
+          @click.prevent="submit()"
+        >
+          {{ update ? $t('group.update') : $t('group.save') }}
+        </ds-button>
+      </ds-space>
+    </ds-form>
+    <!-- Wolle: <ds-space centered v-show="!update">
+        <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
+      </ds-space> -->
+    <!-- Wolle: </ds-container> -->
   </div>
 </template>
 
@@ -153,7 +155,6 @@ export default {
       },
     }
   },
-
   methods: {
     submit() {
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
@@ -211,9 +212,6 @@ export default {
       this.cities = this.processLocationsResult(res)
       this.loadingGeo = false
     },
-    reset() {
-      alert('reset')
-    },
   },
   computed: {
     submitDisable() {
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index afeccd628..19cb95fc2 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,15 +1,17 @@
 <template>
-  <ds-container class="group-card">
-    <ds-space>
+  <div>
+    <!-- Wolle: <ds-container class="group-card"> -->
+    <!-- Wolle: <ds-space>
       <div @click="onlyOwnerGroups(true)" ref="myGruops">
         <ds-button>{{ $t('group.showMyCreatedGroups') }}</ds-button>
       </div>
       <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>
         <ds-button>{{ $t('group.showAllMyGroups') }}</ds-button>
       </div>
-    </ds-space>
+    </ds-space> -->
     <ds-space margin-bottom="small" v-for="item in items" :key="item.id">
-      <ds-card :ref="item.myRole === null ? 'null' : item.myRole">
+      <!-- Wolle: <ds-card :ref="item.myRole === null ? 'null' : item.myRole"> -->
+      <ds-card>
         <ds-flex>
           <ds-flex-item width="90%" centered>
             <ds-space margin="large">
@@ -53,7 +55,8 @@
         </ds-flex>
       </ds-card>
     </ds-space>
-  </ds-container>
+    <!-- Wolle: </ds-container> -->
+  </div>
 </template>
 <script>
 import GroupMenu from '~/components/Group/GroupMenu'
@@ -84,28 +87,28 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    onlyOwnerGroups(bool) {
-      this.$refs.myGruops.hidden = bool
-      this.$refs.allGruops.hidden = !bool
+    // Wolle: onlyOwnerGroups(bool) {
+    //   this.$refs.myGruops.hidden = bool
+    //   this.$refs.allGruops.hidden = !bool
 
-      if (this.$refs.usual) {
-        this.$refs.usual.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
+    //   if (this.$refs.usual) {
+    //     this.$refs.usual.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
 
-      if (this.$refs.null) {
-        this.$refs.null.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
+    //   if (this.$refs.null) {
+    //     this.$refs.null.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
 
-      if (this.$refs.pending) {
-        this.$refs.pending.forEach((element) => {
-          element.$el.hidden = bool
-        })
-      }
-    },
+    //   if (this.$refs.pending) {
+    //     this.$refs.pending.forEach((element) => {
+    //       element.$el.hidden = bool
+    //     })
+    //   }
+    // },
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index 92ea0e7db..28412d33a 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -1,46 +1,76 @@
 <template>
   <div>
-    <ds-space>
-      <h3>{{ $t('group.members') }}</h3>
-    </ds-space>
-    <base-card>
-      <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
-        <template slot="avatar">
-          <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
-        </template>
-        <template slot="myRoleInGroup" slot-scope="scope">
-          <select
-            v-if="scope.row.myRoleInGroup !== 'owner'"
-            :options="['usual', 'admin']"
-            :value="`${scope.row.myRoleInGroup}`"
-            v-on:change="changeMemberRole(scope.row.id, $event)"
-          >
-            <option v-for="value in ['usual', 'admin']" :key="value">
-              {{ value }}
-            </option>
-          </select>
-        </template>
-        <template slot="edit" slot-scope="scope">
-          <ds-button
-            v-if="scope.row.myRoleInGroup !== 'owner'"
-            size="small"
-            @click="openModal(scope.row)"
-          >
-            delete
-          </ds-button>
-        </template>
-      </ds-table>
-    </base-card>
-    <ds-modal
+    <ds-table :fields="tableFields" :data="groupMembers" condensed>
+      <template #avatar="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-avatar online size="small" :name="scope.row.name"></ds-avatar>
+        </nuxt-link>
+      </template>
+      <template #name="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ scope.row.name | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #slug="scope">
+        <nuxt-link
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.id, slug: scope.row.slug },
+          }"
+        >
+          <ds-text>
+            <b>{{ `@${scope.row.slug}` | truncate(20) }}</b>
+          </ds-text>
+        </nuxt-link>
+      </template>
+      <template #roleInGroup="scope">
+        <select
+          v-if="scope.row.myRoleInGroup !== 'owner'"
+          :options="['pending', 'usual', 'admin', 'owner']"
+          :value="`${scope.row.myRoleInGroup}`"
+          @change="changeMemberRole(scope.row.id, $event)"
+        >
+          <option v-for="role in ['pending', 'usual', 'admin', 'owner']" :key="role" :value="role">
+            {{ $t(`group.roles.${role}`) }}
+          </option>
+        </select>
+        <ds-chip v-else color="primary">
+          {{ $t(`group.roles.${scope.row.myRoleInGroup}`) }}
+        </ds-chip>
+      </template>
+      <template #edit="scope">
+        <ds-button size="small" primary :disabled="true" @click="openModal(scope.row)">
+          <!-- TODO: implement removal of group members -->
+          <!--           :disabled="scope.row.myRoleInGroup === 'owner'"
+ -->
+          {{ $t('group.removeMemberButton') }}
+        </ds-button>
+      </template>
+    </ds-table>
+    <!-- TODO: implement removal of group members -->
+    <!-- TODO: change to ocelot.social modal -->
+    <!-- <ds-modal
       v-if="isOpen"
       v-model="isOpen"
-      :title="`${$t('group.removeMember')} ?`"
+      :title="`${$t('group.removeMember')}`"
       force
       extended
       :confirm-label="$t('group.removeMember')"
-      @confirm="deleteMember(memberId)"
       :cancel-label="$t('actions.cancel')"
-    />
+      @confirm="deleteMember(memberId)"
+    /> -->
   </div>
 </template>
 <script>
@@ -53,19 +83,43 @@ export default {
       type: String,
       required: true,
     },
-    responseGroupMembersQuery: {
+    groupMembers: {
       type: Array,
       required: false,
-      default: () => [],
     },
   },
   data() {
     return {
       isOpen: false,
       memberId: null,
-      tableFields: ['avatar', 'name', 'slug', 'myRoleInGroup', 'edit'],
     }
   },
+  computed: {
+    tableFields() {
+      return {
+        avatar: {
+          label: this.$t('group.membersAdministrationList.avatar'),
+          align: 'left',
+        },
+        name: {
+          label: this.$t('group.membersAdministrationList.name'),
+          align: 'left',
+        },
+        slug: {
+          label: this.$t('group.membersAdministrationList.slug'),
+          align: 'left',
+        },
+        roleInGroup: {
+          label: this.$t('group.membersAdministrationList.roleInGroup'),
+          align: 'left',
+        },
+        edit: {
+          label: '',
+          align: 'left',
+        },
+      }
+    },
+  },
   methods: {
     async changeMemberRole(id, event) {
       const newRole = event.target.value
@@ -74,18 +128,21 @@ export default {
           mutation: changeGroupMemberRoleMutation(),
           variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
         })
-        this.$toast.success(this.$t('group.changeMemberRole', { role: newRole }))
+        this.$toast.success(
+          this.$t('group.changeMemberRole', { role: this.$t(`group.roles.${newRole}`) }),
+        )
       } catch (error) {
         this.$toast.error(error.message)
       }
     },
-    openModal(row) {
-      this.isOpen = true
-      this.memberId = row.id
-    },
-    deleteMember(id) {
-      alert('deleteMember: ' + id)
-    },
+    // TODO: implement removal of group members
+    // openModal(row) {
+    //   this.isOpen = true
+    //   this.memberId = row.id
+    // },
+    // deleteMember(id) {
+    //   alert('deleteMember: ' + id)
+    // },
   },
 }
 </script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index e5b37959f..7a9a0a2bf 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -406,33 +406,47 @@
     "actionRadius": "Aktionsradius",
     "back": "zurück",
     "categories": "Thema ::: Themen",
-    "change-member-role": "Die Rolle wurde auf „{role}“ geändert!",
+    "changeMemberRole": "Die Rolle wurde auf „{role}“ geändert!",
+    "createNewGroup": {
+      "title": "Erstelle eine neue Gruppe",
+      "tooltip": "Erstelle eine neue Gruppe"
+    },
+    "description": "Beschreibung",
+    "editGroupSettings": {
+      "groupName": "Einstellungen für „{name}“",
+      "title": "Meine Gruppe ändern"
+    },
     "follow": "Folge",
     "foundation": "Gründung",
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
-    "group-name": "Gruppenname",
     "group-updated": "Die Gruppendaten wurden geändert!",
     "groupCreated": "Die Gruppe wurde angelegt!",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
     },
+    "labelSlug": "Eindeutiger Gruppenname",
     "leaveModal": {
       "confirmButton": "Verlassen",
       "message": "Eine Gruppe zu verlassen ist möglicherweise nicht rückgängig zu machen!<br>Gruppe <b>„{name}“</b> verlassen!",
       "title": "Möchtest du wirklich die Gruppe verlassen?"
     },
-    "long-description": "Beschreibung",
     "members": "Mitglieder",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Rolle",
+      "slug": "Eindeutiger Name"
+    },
     "membersCount": "Mitglied ::: Mitglieder",
     "membersListTitle": "Gruppenmitglieder",
     "membersListTitleNotAllowedSeeingGroupMembers": "Gruppenmitglieder unsichtbar",
     "myGroups": "Meine Gruppen",
-    "newGroup": "Erstelle eine neue Gruppe",
+    "name": "Gruppenname",
     "radius": "Radius",
-    "removeMember": "Mitglied entfernen",
-    "reset-form": "Formular zurücksetzen",
+    "removeMember": "Mitglied aus der Gruppe entfernen?",
+    "removeMemberButton": "Entfernen",
     "role": "Deine Rolle in der Gruppe",
     "roles": {
       "admin": "Administrator",
@@ -441,8 +455,6 @@
       "usual": "Einfaches Mitglied"
     },
     "save": "Neue Gruppe anlegen",
-    "settings": "Gruppeneinstellungen",
-    "short-description": "Kurzbeschreibung",
     "showAllMyGroups": "Alle meine Gruppen anzeigen",
     "showMyCreatedGroups": "Meine angelegten Gruppen anzeigen",
     "type": "Gruppentyp",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 0a8aed42a..5dc030566 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -406,33 +406,47 @@
     "actionRadius": "Action radius",
     "back": "back",
     "categories": "Topic ::: Topics",
-    "change-member-role": "The role has been changed to “{role}”!",
+    "changeMemberRole": "The role has been changed to “{role}”!",
+    "createNewGroup": {
+      "title": "Create A New Group",
+      "tooltip": "Create a new group"
+    },
+    "description": "Description",
+    "editGroupSettings": {
+      "groupName": "Settings Of “{name}”",
+      "title": "Edit My Group"
+    },
     "follow": "Follow",
     "foundation": "Foundation",
     "general": "General",
     "goal": "Goal of group",
-    "group-name": "Group name",
     "group-updated": "The group data has been changed.",
     "groupCreated": "The group was created!",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"
     },
+    "labelSlug": "Unique group name",
     "leaveModal": {
       "confirmButton": "Leave",
       "message": "Leaving a group may be irreversible!<br>Leave group <b>“{name}”</b>!",
       "title": "Do you really want to leave the group?"
     },
-    "long-description": "Description",
     "members": "Members",
+    "membersAdministrationList": {
+      "avatar": "Avatar",
+      "name": "Name",
+      "roleInGroup": "Role",
+      "slug": "Unique name"
+    },
     "membersCount": "Member ::: Members",
     "membersListTitle": "Group Members",
     "membersListTitleNotAllowedSeeingGroupMembers": "Group Members invisible",
     "myGroups": "My Groups",
-    "newGroup": "Create a new Group",
+    "name": "Group name",
     "radius": "Radius",
     "removeMember": "Remove member",
-    "reset-form": "Reset form",
+    "removeMemberButton": "Remove",
     "role": "Your role in the group",
     "roles": {
       "admin": "Administrator",
@@ -441,8 +455,6 @@
       "usual": "Simple Member"
     },
     "save": "Create new group",
-    "settings": "Group Settings",
-    "short-description": "Short description",
     "showAllMyGroups": "show all groups",
     "showMyCreatedGroups": "show only my groups",
     "type": "Group type",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index c72d45c75..d0516713f 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,16 +1,23 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ $t('group.newGroup') }}</h1>
-    </ds-section>
-    <ds-space margin="large">
-      <ds-flex :width="{ base: '100%' }" gutter="base">
-        <ds-flex-item :width="{ base: '100%', md: 5 }">
-          <group-form @createGroup="createGroup" />
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
-      </ds-flex>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.createNewGroup.title') }}</ds-heading>
     </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <base-card>
+        <ds-space margin="large">
+          <ds-flex :width="{ base: '100%' }" gutter="base">
+            <ds-flex-item :width="{ base: '100%', md: 5 }">
+              <ds-container>
+                <group-form @createGroup="createGroup" />
+              </ds-container>
+            </ds-flex-item>
+            <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+          </ds-flex>
+        </ds-space>
+      </base-card>
+    </ds-container>
   </div>
 </template>
 
@@ -45,6 +52,8 @@ export default {
           variables,
         })
         this.$toast.success(this.$t('group.groupCreated'))
+        this.$router.history.push('/my-groups')
+        // Wolle: refetch groups on '/my-groups'
       } catch (error) {
         this.$toast.error(error.message)
       }
diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index 159a88b61..12e67cef3 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -1,24 +1,27 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
-      <div class="">{{ $t('group.settings') }}</div>
-    </ds-section>
-    <ds-space margin="large">
-      <ds-flex gutter="small">
-        <ds-flex-item :width="{ base: '100%', md: '200px' }">
-          <ds-menu :routes="routes" :is-exact="() => true" />
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '100%', md: 1 }">
-          <transition name="slide-up" appear>
-            <nuxt-child :group="group" />
-          </transition>
-        </ds-flex-item>
-      </ds-flex>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.editGroupSettings.title') }}</ds-heading>
+      <ds-heading tag="h2">
+        {{ $t('group.editGroupSettings.groupName', { name: group.name }) }}
+      </ds-heading>
     </ds-space>
-    <ds-space centered>
+    <ds-space margin="large" />
+    <!-- Wolle: <ds-space margin="large"> -->
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+        <ds-menu :routes="routes" :is-exact="() => true" />
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
+        <transition name="slide-up" appear>
+          <nuxt-child :group="group" />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+    <!-- Wolle: </ds-space> -->
+    <!-- Wolle: <ds-space centered>
       <nuxt-link to="/my-groups">{{ $t('group.back') }}</nuxt-link>
-    </ds-space>
+    </ds-space> -->
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
index 27e216464..578b8f115 100644
--- a/webapp/pages/group/edit/_id/index.vue
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
-    <ds-container>
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.general') }}</ds-heading>
+      <ds-space margin="large" />
       <group-form :group="group" :update="true" @updateGroup="updateGroup" />
-    </ds-container>
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 2f9e2b442..bc651b834 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <group-member :responseGroupMembersQuery="responseGroupMembersQuery" :groupId="group.id" />
+    <base-card>
+      <ds-heading tag="h3">{{ $t('group.members') }}</ds-heading>
+      <ds-space margin="large" />
+      <group-member :groupId="group.id" :groupMembers="responseGroupMembersQuery" />
+    </base-card>
   </div>
 </template>
 
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
index 1792a3c88..63ce87214 100644
--- a/webapp/pages/my-groups.vue
+++ b/webapp/pages/my-groups.vue
@@ -1,27 +1,33 @@
 <template>
   <div>
-    <ds-section>
-      <h1 class="ds-heading ds-heading-h1">{{ $t('group.myGroups') }}</h1>
-      <nuxt-link :to="{ name: 'group-create' }">
-        <base-button
-          v-tooltip="{
-            content: $t('group.newGroup'),
-            placement: 'left',
-            delay: { show: 500 },
-          }"
-          :path="{ name: 'group-create' }"
-          class="profile-post-add-button"
-          icon="plus"
-          circle
-          filled
-        />
-      </nuxt-link>
-    </ds-section>
-    <br />
-    <br />
-    <group-list :items="responseGroupListQuery" />
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('group.myGroups') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
+    <ds-container>
+      <!-- create group -->
+      <ds-space centered>
+        <!-- Wolle: <client-only> -->
+        <nuxt-link :to="{ name: 'group-create' }">
+          <base-button
+            class="group-add-button"
+            icon="plus"
+            circle
+            filled
+            v-tooltip="{
+              content: $t('group.createNewGroup.tooltip'),
+              placement: 'left',
+            }"
+          />
+        </nuxt-link>
+        <!-- Wolle: </client-only> -->
+      </ds-space>
+      <!-- group list -->
+      <group-list :items="myGroups" />
+    </ds-container>
   </div>
 </template>
+
 <script>
 import GroupList from '~/components/Group/GroupList'
 import { groupQuery } from '~/graphql/groups.js'
@@ -33,26 +39,56 @@ export default {
   },
   data() {
     return {
-      responseGroupListQuery: [],
+      Group: [],
     }
   },
-  methods: {
-    async groupListQuery() {
-      try {
-        const response = await this.$apollo.query({
-          query: groupQuery(this.$i18n),
-        })
-        this.responseGroupListQuery = response.data.Group
-      } catch (error) {
-        this.responseGroupListQuery = []
-        this.$toast.error(error.message)
-      } finally {
-        this.pending = false
-      }
+  computed: {
+    myGroups() {
+      return this.Group ? this.Group : []
     },
   },
-  created() {
-    this.groupListQuery()
+  methods: {
+    // Wolle: async groupListQuery() {
+    //   try {
+    //     const response = await this.$apollo.query({
+    //       query: groupQuery(this.$i18n),
+    //       variables: { isMember: true },
+    //     })
+    //     this.Group = response.data.Group
+    //   } catch (error) {
+    //     this.Group = []
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.pending = false
+    //   }
+    // },
+  },
+  // Wolle: remove
+  // created() {
+  //   this.groupListQuery()
+  // },
+  apollo: {
+    Group: {
+      query() {
+        return groupQuery(this.$i18n)
+      },
+      variables() {
+        return {
+          isMember: true,
+        }
+      },
+      error(error) {
+        this.Group = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.group-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+</style>
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 660449fb6..5b87cf12d 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -39,10 +42,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
-        {
-          name: this.$t('settings.myGroups'),
-          path: `/my-groups`,
-        },
+        // Wolle: {
+        //   name: this.$t('settings.myGroups'),
+        //   path: `/my-groups`,
+        // },
         {
           name: this.$t('settings.muted-users.name'),
           path: `/settings/muted-users`,