From 61e16a7946c8cb1cf1c755a8dbdbb5dee8fb5042 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 12 Mar 2025 15:19:32 +0100
Subject: [PATCH 1/2] Added severity option to TipMessage - new color
 negative-light-color - add message option to confirm dialog to show
 TipMessage with props - make confirm dialog more dense

Fixed:
- remove tip message from DeleteAccountDialog
---
 .../themes/mm-theme-light/_variables.scss     |  2 +
 .../lib/src/common/components/TipMessage.vue  | 65 +++++++++++++++----
 .../lib/src/common/components/types.ts        |  6 ++
 .../dialog/components/ConfirmDialog.vue       | 40 ++++++++----
 .../packages/lib/src/modules/dialog/types.ts  |  6 +-
 .../user/components/DeleteAccountConfirm.vue  | 14 +---
 6 files changed, 93 insertions(+), 40 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
index 76052523..a469b344 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -29,6 +29,7 @@ $colors: (
     "grape": #5A2740,
     "positive": #C0EBCF,
     "negative": #F0C4BC,
+    "negative-light": #FFF0ED,
     "warning": #F7DDAF,
     "earth": #4D2A24,
     "deep-ocean": #1C324A,
@@ -112,5 +113,6 @@ $colors: (
     --sand-color: #{map-get($colors, "sand")};
     --rose-color: #{map-get($colors, "rose")};
     --dark-green-color: #{map-get($colors, "dark-green")};
+    --negative-light-color: #{map-get($colors, "negative-light")};
     color-scheme: light;
 }
diff --git a/web-app/packages/lib/src/common/components/TipMessage.vue b/web-app/packages/lib/src/common/components/TipMessage.vue
index 8d39eb74..628ca745 100644
--- a/web-app/packages/lib/src/common/components/TipMessage.vue
+++ b/web-app/packages/lib/src/common/components/TipMessage.vue
@@ -7,30 +7,71 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <!-- Tip from MM -->
   <div
-    class="tip-message flex flex-column row-gap-2 md:flex-row align-items-center border-round-xl p-4"
+    class="tip-message flex flex-column md:flex-row align-items-center border-round-xl p-4"
+    :class="[severityClass]"
   >
-    <div class="md:mr-4">
-      <slot name="image">
-        <img src="@/assets/bulb.svg" aria-label="Bulb" />
-      </slot>
-    </div>
+    <slot name="image">
+      <img
+        v-if="severity === 'info'"
+        width="50"
+        height="50"
+        src="@/assets/bulb.svg"
+        aria-label="Bulb"
+      />
+      <img
+        v-if="severity === 'danger'"
+        width="50"
+        height="50"
+        src="@/assets/exclamation.svg"
+        aria-label="Exclamation"
+      />
+    </slot>
 
-    <div class="text-center md:text-left">
-      <p class="tip-message-title title-t3 mb-1">
+    <div class="md:pl-4 text-center md:text-left">
+      <p :class="['tip-message-title title-t3']">
         <slot name="title">Tip from Mergin Maps</slot>
       </p>
-      <p class="opacity-80 paragraph-p5">
+      <p class="opacity-80 paragraph-p6">
         <slot name="description"></slot>
       </p>
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { TipMessageProps } from './types'
+
+type Severity = 'info' | 'danger'
+
+const props = withDefaults(defineProps<TipMessageProps>(), {
+  severity: 'info'
+})
+
+const severityClass = computed(() => {
+  const mapper: Record<Severity, string> = {
+    info: 'tip-message-info',
+    danger: 'tip-message-danger'
+  }
+  return mapper[props.severity]
+})
+</script>
+
 <style scoped lang="scss">
 .tip-message {
-  background-color: var(--light-green-color);
-  &-title {
-    color: var(--deep-ocean-color);
+  &.tip-message-info {
+    background-color: var(--light-green-color);
+    .tip-message-title {
+      color: var(--deep-ocean-color);
+    }
+  }
+
+  &.tip-message-danger {
+    background-color: var(--negative-light-color);
+    .tip-message-title {
+      color: var(--grape-color);
+    }
   }
 }
 </style>
diff --git a/web-app/packages/lib/src/common/components/types.ts b/web-app/packages/lib/src/common/components/types.ts
index e8556642..245bc52f 100644
--- a/web-app/packages/lib/src/common/components/types.ts
+++ b/web-app/packages/lib/src/common/components/types.ts
@@ -15,3 +15,9 @@ export interface TableDataHeader {
   sortable?: boolean
   width?: number
 }
+
+export type TipMessageSeverity = 'info' | 'danger'
+
+export interface TipMessageProps {
+  severity?: TipMessageSeverity
+}
diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index 2fd35310..634cfb47 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="flex flex-column align-items-center pb-4 text-center gap-4">
+  <div class="flex flex-column align-items-center pb-4 text-center gap-2">
     <img
       v-if="severity === 'danger'"
       src="@/assets/trash.svg"
@@ -18,20 +18,31 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     />
     <img v-else src="@/assets/neutral.svg" alt="Cover for confirm dialog" />
     <span class="text-color-forest title-t1">{{ text }}</span>
-    <span class="paragraph-p6 opacity-80">{{ description }}</span>
-    <span class="title-t2">{{ hint }}</span>
-    <span v-if="confirmField" class="flex p-float-label w-full p-input-filled">
-      <PInputText
-        autofocus
-        id="confirmValue"
-        v-model="confirmValue"
-        type="text"
-        class="flex-grow-1"
-      />
-      <label for="confirmValue">{{ confirmField.label }}</label>
-    </span>
+    <span class="paragraph-p5 opacity-80">{{ description }}</span>
+    <span v-if="hint" class="title-t2 my-2">{{ hint }}</span>
+    <div class="flex flex-column gap-3 w-full">
+      <span
+        v-if="confirmField"
+        class="flex flex-column p-input-filled text-left"
+      >
+        <label for="confirmValue">{{ confirmField.label }}</label>
+        <PInputText
+          autofocus
+          :id="'confirmValue'"
+          v-model="confirmValue"
+          type="text"
+          :placeholder="confirmField.placeholder ?? 'Type in value to confirm'"
+        />
+      </span>
+
+      <slot></slot>
 
-    <slot></slot>
+      <!-- Show tip message -->
+      <tip-message v-if="message" :severity="message.severity">
+        <template #title>{{ message.title }}</template>
+        <template #description>{{ message.description }}</template>
+      </tip-message>
+    </div>
 
     <!-- Footer -->
     <div
@@ -62,6 +73,7 @@ import { ref, computed, defineEmits, withDefaults } from 'vue'
 
 import { ConfirmDialogProps } from '../types'
 
+import TipMessage from '@/common/components/TipMessage.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 
 const props = withDefaults(defineProps<ConfirmDialogProps>(), {
diff --git a/web-app/packages/lib/src/modules/dialog/types.ts b/web-app/packages/lib/src/modules/dialog/types.ts
index cc5e5b58..133bce2e 100644
--- a/web-app/packages/lib/src/modules/dialog/types.ts
+++ b/web-app/packages/lib/src/modules/dialog/types.ts
@@ -4,6 +4,8 @@
 
 import { Component } from 'vue'
 
+import { TipMessageProps } from '@/common'
+
 export interface ConfirmDialogProps {
   text: string
   severity?: 'primary' | 'danger' | 'warning'
@@ -11,7 +13,9 @@ export interface ConfirmDialogProps {
   cancelText?: string
   description?: string
   hint?: string
-  confirmField?: { label: string; expected: string }
+  confirmField?: { label: string; expected: string; placeholder?: string }
+  /** Props to show a tip message under confirm input */
+  message?: TipMessageProps & { title: string; description: string }
 }
 
 export interface DialogParams {
diff --git a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
index 1b0d004f..a873d431 100644
--- a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
+++ b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
@@ -17,22 +17,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     }"
     severity="danger"
     @confirm="confirm"
-  >
-    <TipMessage>
-      <template #image
-        ><img wdth="50" height="50" src="@/assets/exclamation.svg"
-      /></template>
-      <template #title>Please note</template>
-      <template #description
-        >In order to delete your account, enter your username in the field above
-        and click Yes.</template
-      >
-    </TipMessage>
-  </ConfirmDialog>
+  />
 </template>
 
 <script setup lang="ts">
-import TipMessage from '@/common/components/TipMessage.vue'
 import { DeleteAccountConfirmProps } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 

From ff2cd46bbe91f444bdb22e5f313d22267065a0db Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Thu, 13 Mar 2025 10:10:47 +0100
Subject: [PATCH 2/2] update dashboards placeholders @harminius

---
 .../src/modules/project/views/ProjectSettingsViewTemplate.vue  | 3 ++-
 .../lib/src/modules/user/components/DeleteAccountConfirm.vue   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index e8673a7b..2312a62a 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -114,7 +114,8 @@ export default defineComponent({
         confirmText: 'Delete',
         confirmField: {
           label: 'Project name',
-          expected: this.projectName
+          expected: this.projectName,
+          placeholder: 'Type in project name to confirm deletion'
         }
       }
       const listeners = {
diff --git a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
index a873d431..b1f58f9b 100644
--- a/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
+++ b/web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue
@@ -13,7 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :hint="username"
     :confirmField="{
       label: 'Username',
-      expected: username
+      expected: username,
+      placeholder: 'Type in your username to confirm deletion'
     }"
     severity="danger"
     @confirm="confirm"