Added severity option to TipMessage

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;
 }

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>

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
+}

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>(), {

web-app/packages/lib/src/modules/dialog/types.ts

@@ -4,14 +4,18 @@
 
 import { Component } from 'vue'
 
+import { TipMessageProps } from '@/common'
+
 export interface ConfirmDialogProps {
   text: string
   severity?: 'primary' | 'danger' | 'warning'
   confirmText?: string
   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 {

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 = {

web-app/packages/lib/src/modules/user/components/DeleteAccountConfirm.vue

@@ -13,26 +13,15 @@ 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"
-  >
-    <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'