💄 Muxdbs 345 review feedback (#145)

* 💄 review feedback only show date

* 💄 review feedback fix icon display

* 💄 review feedback change header icon

* 💄 review feedback fix margin

* 💄 review feedback add icon to button

* 💄 fix format

Author: lehju

personalization-webcomponents/src/ChecklistOverview.ce.vue

@@ -7,14 +7,14 @@
     <div
       v-if="checklists.length > 0 || !displayOptionDetailScreen"
       :class="
-        displayOptionDetailScreen ? 'details-background' : 'overview-padding'
+        displayOptionDetailScreen ? 'details-background' : 'overview-margin'
       "
     >
       <div class="container">
         <div class="header">
           <div class="headline">
             <span class="header-icon">
-              <muc-icon icon="calendar" />
+              <muc-icon icon="order-bool-ascending" />
             </span>
             <h2 tabindex="0">
               <span v-if="displayOptionDetailScreen"
@@ -33,14 +33,14 @@
               >
             </h2>
           </div>
-          <muc-link
+          <muc-button
             v-if="!loadingError && checklists.length > 2 && !isMobile"
-            label="Alle Checklisten anzeigen"
-            icon="chevron-right"
-            target="_self"
-            no-underline
-            :href="checklistOverviewUrl"
-          />
+            icon="arrow-right"
+            variant="ghost"
+            @click="goToChecklistOverviewLink"
+          >
+            Alle Checklisten anzeigen
+          </muc-button>
         </div>
         <error-alert
           v-if="loadingError"
@@ -62,15 +62,15 @@
             :checklist-detail-url="checklistDetailUrl"
             :displayed-on-detail-screen="displayOptionDetailScreen"
           />
-          <muc-link
+          <muc-button
             v-if="!loadingError && checklists.length > 2 && isMobile"
             class="mobile-link"
-            label="Alle Checklisten anzeigen"
-            icon="chevron-right"
-            target="_self"
-            no-underline
-            :href="checklistOverviewUrl"
-          />
+            icon="arrow-right"
+            variant="ghost"
+            @click="goToChecklistOverviewLink"
+          >
+            Alle Checklisten anzeigen
+          </muc-button>
         </div>
       </div>
     </div>
@@ -81,9 +81,9 @@
 import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
 
 import {
+  MucButton,
   MucCardContainer,
   MucIcon,
-  MucLink,
 } from "@muenchen/muc-patternlab-vue";
 import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
 import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
@@ -95,7 +95,7 @@ import ErrorAlert from "@/components/common/ErrorAlert.vue";
 import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
 import { QUERY_PARAM_CHECKLIST_ID } from "@/util/Constants.ts";
 
-const { displayedOnDetailScreen } = defineProps<{
+const { checklistOverviewUrl, displayedOnDetailScreen } = defineProps<{
   checklistDetailUrl: string;
   checklistOverviewUrl: string;
   newChecklistUrl: string;
@@ -109,6 +109,10 @@ const isMobile = ref(false);
 const displayOptionDetailScreen =
   displayedOnDetailScreen.toLowerCase() === "true";
 
+const goToChecklistOverviewLink = () => {
+  location.href = checklistOverviewUrl;
+};
+
 const checksMobile = () => {
   isMobile.value = window.matchMedia("(max-width: 767px)").matches;
 };
@@ -143,9 +147,10 @@ onMounted(() => {
 </style>
 
 <style scoped>
-/* Padding on overview page */
-.overview-padding {
-  padding-top: 40px;
+/* Margin on overview page */
+.overview-margin {
+  margin-top: 40px;
+  margin-bottom: 48px;
 }
 
 /* Background color on details page */
@@ -188,8 +193,8 @@ onMounted(() => {
 
 /* CSS for desktop */
 @media (min-width: 768px) {
-  .overview-padding {
-    padding-top: 40px;
+  .overview-margin {
+    margin: 56px 0;
   }
 
   .details-background {

personalization-webcomponents/src/components/ChecklistCard.vue

@@ -59,7 +59,7 @@
       </div>
 
       <div>
-        <b>Letzte Änderung:</b> {{ checklist.lastUpdated.toLocaleString() }}
+        <b>Letzte Änderung:</b> {{ checklist.lastUpdated.toLocaleDateString() }}
       </div>
     </template>
   </muc-card>

personalization-webcomponents/src/components/ChecklistCheckedCircle.vue

@@ -17,6 +17,7 @@ defineProps<{
   height: 20px;
   border-radius: 50%;
   border: 2px solid var(--color-neutrals-grey);
+  flex-shrink: 0;
 }
 
 .circle.checked {