From 8f1f255a36691bbcfa7943655421cc7285963493 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 27 Sep 2024 10:56:10 +0200
Subject: [PATCH 1/6] Improve: - mm-theme confoig for dialog and panel - update
 reset for dd

---
 .../themes/mm-theme-light/_extensions.scss    |  2 +-
 .../mm-theme-light/variables/_overlay.scss    |  2 +-
 .../mm-theme-light/variables/_panel.scss      | 16 ++++----
 .../common/components/AppPanelToggleable.vue  | 40 ++++++++-----------
 web-app/packages/lib/src/mm-theme.ts          | 25 ++++++++++--
 .../components/VersionDetailSidebar.vue       | 14 +------
 6 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index b8079112..d315dfbc 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -12,7 +12,7 @@ h6 {
   overflow-wrap: break-word;
   min-width: 0;
 }
-body, p {
+body, p, dd {
   margin: 0
 }
 p, span, dl {
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
index 87436f98..be24f9fa 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
@@ -36,7 +36,7 @@ $dialogHeaderPadding: 1.5rem;
 
 /// Padding of a dialog content
 /// @group overlay
-$dialogContentPadding: 0 1.5rem;
+$dialogContentPadding: 0 1.5rem 1.5rem 1.5rem;
 
 /// Border of a dialog footer
 /// @group overlay
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
index 7b23975d..987d61a1 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
@@ -60,7 +60,7 @@ $panelContentTextColor: $textColor;
 
 /// Padding for the content section of a panel
 /// @group panel
-$panelContentPadding: 1rem;
+$panelContentPadding: .5rem;
 
 /// Border for the footer section of a panel
 /// @group panel
@@ -84,11 +84,11 @@ $accordionSpacing: 0;
 
 /// Border of an accordion panel header
 /// @group panel
-$accordionHeaderBorder: $panelHeaderBorder;
+$accordionHeaderBorder: 1px solid #dee2e6;
 
 /// Background of an accordion panel header
 /// @group panel
-$accordionHeaderBg: $panelHeaderBg;
+$accordionHeaderBg: var(--surface-section);
 
 /// Text color of an accordion panel header
 /// @group panel
@@ -100,7 +100,7 @@ $accordionHeaderFontWeight: $panelHeaderFontWeight;
 
 /// Padding of an accordion panel header
 /// @group panel
-$accordionHeaderPadding: $panelHeaderPadding;
+$accordionHeaderPadding: 1rem .5rem;
 
 /// Background of an accordion panel header in hover state
 /// @group panel
@@ -116,7 +116,7 @@ $accordionHeaderTextHoverColor: $textColor;
 
 /// Background of an accordion panel header in expanded state
 /// @group panel
-$accordionHeaderActiveBg: $panelHeaderBg;
+$accordionHeaderActiveBg: var(--surface-section);
 
 /// Border of an accordion panel header in expanded state
 /// @group panel
@@ -140,7 +140,7 @@ $accordionHeaderTextActiveHoverColor: $textColor;
 
 /// Border for a content section of an accordion panel
 /// @group panel
-$accordionContentBorder: $panelContentBorder;
+$accordionContentBorder: none;
 
 /// Background for a content section of an accordion panel
 /// @group panel
@@ -152,7 +152,7 @@ $accordionContentTextColor: $panelContentTextColor;
 
 /// Padding for a content section of an accordion panel
 /// @group panel
-$accordionContentPadding: $panelContentPadding;
+$accordionContentPadding: .5rem;
 
 /// Border for a parent element containing all the headers of a tabview
 /// @group panel
@@ -324,4 +324,4 @@ $splitterGutterBg:#f8f9fa;
 
 /// Background of the splitter gutter handle
 /// @group panel
-$splitterGutterHandleBg:#dee2e6;
\ No newline at end of file
+$splitterGutterHandleBg:#dee2e6;
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
index 9d825649..db007803 100644
--- a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -5,28 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <PPanel
-    v-bind="$props"
-    toggleable
-    :collapsed="collapsed"
-    :pt="{
-      header(options) {
-        return {
-          class: [
-            'surface-section border-none p-4 cursor-pointer',
-            // Toggle border radius by open / closed panel
-            options.state.d_collapsed
-              ? 'border-round-2xl'
-              : 'border-round-top-2xl'
-          ],
-          onclick: headerClick
-        }
-      },
-      content: {
-        class: 'border-none border-round-bottom-2xl p-4 pt-0'
-      }
-    }"
-  >
+  <PPanel v-bind="$props" toggleable :collapsed="collapsed" :pt="pt">
     <template v-if="$slots.header" #header>
       <slot name="header"></slot>
     </template>
@@ -56,11 +35,26 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <script lang="ts" setup>
 import { PanelProps } from 'primevue/panel'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps<PanelProps>()
 const collapsed = ref(props.collapsed)
 
+const pt = computed(() => ({
+  header: {
+    class: [
+      'surface-section border-none cursor-pointer',
+      // Toggle border radius by open / closed panel
+      collapsed.value ? 'border-round-2xl' : 'border-round-top-2xl',
+      props.pt?.header?.class ?? 'p-4'
+    ],
+    onclick: headerClick
+  },
+  content: {
+    class: 'border-none border-round-bottom-2xl p-4 pt-0'
+  }
+}))
+
 function headerClick() {
   collapsed.value = !collapsed.value
 }
diff --git a/web-app/packages/lib/src/mm-theme.ts b/web-app/packages/lib/src/mm-theme.ts
index 3e219106..b9b0ed44 100644
--- a/web-app/packages/lib/src/mm-theme.ts
+++ b/web-app/packages/lib/src/mm-theme.ts
@@ -1,3 +1,4 @@
+import { AccordionPassThroughOptions } from 'primevue/accordion'
 import { AutoCompletePassThroughOptions } from 'primevue/autocomplete'
 import { ButtonPassThroughOptions } from 'primevue/button'
 import { DataViewPassThroughOptions } from 'primevue/dataview'
@@ -115,6 +116,14 @@ export default usePassThrough(
       root: 'justify-content-start font-semibold'
     } as InlineMessagePassThroughOptions,
     dialog: {
+      root(options) {
+        const isBottom = ['bottom', 'bottomright', 'bottomleft'].some(
+          (item) => item === options?.props?.position
+        )
+        return {
+          style: { marginBottom: isBottom ? 0 : null }
+        }
+      },
       header: {
         class: 'border-none border-round-top-2xl',
         style: {
@@ -126,8 +135,11 @@ export default usePassThrough(
       },
       closeButton:
         'text-2xl hover:surface-ground text-color-forest hover:text-color',
-      content: {
-        class: 'border-round-bottom-2xl'
+      content(options) {
+        const isBottom = ['bottom', 'bottomright', 'bottomleft'].some(
+          (item) => item === options?.props?.position
+        )
+        return isBottom ? '' : 'border-round-bottom-2xl'
       },
       mask: {
         style: { zIndex: 7 }
@@ -139,7 +151,14 @@ export default usePassThrough(
     tag: {
       root: 'title-t5',
       value: 'title-t5'
-    } as TagPassThroughOptions
+    } as TagPassThroughOptions,
+    accordion: {
+      accordiontab: {
+        headerAction: {
+          class: 'border-noround border-x-none'
+        }
+      }
+    } as AccordionPassThroughOptions
   },
   {}
 )
diff --git a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
index 6b9d781c..6e8e13b9 100644
--- a/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/VersionDetailSidebar.vue
@@ -60,16 +60,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         collapse-icon="ti ti-chevron-right"
         expand-icon="ti ti-chevron-down"
         :active-index="activeAccordionItems"
-        :pt="{
-          accordiontab: {
-            headerAction: {
-              class: 'surface-section border-x-none border-noround p-2'
-            },
-            content: {
-              class: 'border-none'
-            }
-          }
-        }"
       >
         <PAccordionTab
           v-for="item in changeTabs"
@@ -88,9 +78,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <div
             v-for="change in changes[item.key]"
             :key="change.path"
-            class="py-2 paragraph-p6"
+            class="paragraph-p6"
           >
-            <div class="flex align-items-center justify-content-between mb-2">
+            <div class="flex align-items-center justify-content-between mb-1">
               <span class="w-10 font-semibold">{{ change.path }}</span>
               <span class="flex-shrink-0">{{
                 $filters.filesize(

From a0d2b627c2648dbedc106014eed3c1f7eecde6f3 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 30 Sep 2024 09:31:22 +0200
Subject: [PATCH 2/6] Added overflow wrap for dd

---
 .../lib/src/assets/sass/themes/mm-theme-light/_extensions.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index d315dfbc..05f32c6b 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -18,6 +18,9 @@ body, p, dd {
 p, span, dl {
   overflow-wrap: break-word;
 }
+dd {
+  overflow-wrap: anywhere;
+}
 a {
   text-decoration: inherit;
   color: inherit;

From 23dba1922cc75ee63372bd2aaf6d64b74cd0218a Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 30 Sep 2024 16:25:43 +0200
Subject: [PATCH 3/6] Added hghlight color for accordion

---
 .../assets/sass/themes/mm-theme-light/variables/_panel.scss   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
index 987d61a1..d276983f 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_panel.scss
@@ -104,7 +104,7 @@ $accordionHeaderPadding: 1rem .5rem;
 
 /// Background of an accordion panel header in hover state
 /// @group panel
-$accordionHeaderHoverBg: #e9ecef;
+$accordionHeaderHoverBg: var(--light-green-500);
 
 /// Border of an accordion panel header in hover state
 /// @group panel
@@ -128,7 +128,7 @@ $accordionHeaderTextActiveColor: $textColor;
 
 /// Hover background of an accordion panel header in expanded state
 /// @group panel
-$accordionHeaderActiveHoverBg: #e9ecef;
+$accordionHeaderActiveHoverBg: var(--light-green-500);
 
 /// Hover border of an accordion panel header in expanded state
 /// @group panel

From 16403db841299065bc175cc62aeac67be6257409 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 7 Oct 2024 13:51:29 +0200
Subject: [PATCH 4/6] Added 0 margin for dl - some cleanup of not necessary
 paddings and margins

---
 .../themes/mm-theme-light/_extensions.scss    |  6 +++++-
 .../components/CloneDialogTemplate.vue        |  2 +-
 .../project/components/FileDetailSidebar.vue  |  7 +------
 .../project/components/UploadPanel.vue        | 20 +++++++++----------
 .../project/views/ProjectViewTemplate.vue     |  2 +-
 5 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 05f32c6b..c3719332 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -12,7 +12,7 @@ h6 {
   overflow-wrap: break-word;
   min-width: 0;
 }
-body, p, dd {
+body, p, dd, dl {
   margin: 0
 }
 p, span, dl {
@@ -30,6 +30,10 @@ input, textarea {
   min-width: 0;
 }
 
+img {
+  max-width: 100%;
+}
+
 /** Primevue overrides */
 
 // Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
index cc8419ed..32595312 100644
--- a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="flex flex-column py-4 gap-4">
+  <div class="flex flex-column gap-4">
     <span class="flex p-float-label w-ful p-input-filled">
       <PInputText
         autofocus
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index bb0f2d6e..2735de53 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -61,12 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           v-if="mimetype && file.size < 104857600"
           class="flex flex-column align-items-center w-full py-4"
         >
-          <PImage
-            :src="downloadUrl"
-            v-if="mimetype.match('image')"
-            preview
-            imageClass="w-full"
-          />
+          <PImage :src="downloadUrl" v-if="mimetype.match('image')" preview />
           <div
             class="file-detail-code border-round-xl p-4 paragraph-p4 w-full"
             v-else-if="mimetype.match('text')"
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 0c62cb46..32733926 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <PDialog
     v-model:visible="visible"
     :position="isUnderOverlayBreakpoint ? 'topleft' : 'bottomright'"
-    class="upload-panel w-8 lg:w-3 mr-4 mb-4"
+    class="upload-panel w-8 lg:w-3"
+    :draggable="false"
   >
     <template #header>
       <p class="font-semibold">
@@ -30,16 +31,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <span class="paragraph-p5 opacity-80 capitalize">{{ key }}</span>
         <app-circle class="ml-auto">{{ upload.diff[key].length }}</app-circle>
       </div>
-      <div class="py-4 w-full">
-        <PButton
-          id="update-files-btn"
-          @click="confirmUpload"
-          :disabled="upload.running || remainingAnalyzingFiles > 0"
-          class="flex justify-content-center w-full text-center"
-        >
-          Update Changes
-        </PButton>
-      </div>
+      <PButton
+        id="update-files-btn"
+        @click="confirmUpload"
+        :disabled="upload.running || remainingAnalyzingFiles > 0"
+        class="mt-2 w-full"
+        label="Update Changes"
+      />
     </div>
   </PDialog>
 </template>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index 841da0b3..3369e7de 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </app-section>
     </app-container>
     <div slot="right">
-      <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
+      <upload-panel v-if="upload" :namespace="namespace" />
     </div>
   </div>
 </template>

From da2f12f48b7dc9853049ecde7a44fad50cb52257 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 7 Oct 2024 16:38:33 +0200
Subject: [PATCH 5/6] Fix for large padding in dialogs

---
 .../assets/sass/themes/mm-theme-light/variables/_overlay.scss   | 2 +-
 .../packages/lib/src/modules/project/components/UploadPanel.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
index be24f9fa..87436f98 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_overlay.scss
@@ -36,7 +36,7 @@ $dialogHeaderPadding: 1.5rem;
 
 /// Padding of a dialog content
 /// @group overlay
-$dialogContentPadding: 0 1.5rem 1.5rem 1.5rem;
+$dialogContentPadding: 0 1.5rem;
 
 /// Border of a dialog footer
 /// @group overlay
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 32733926..f3a81b8e 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         id="update-files-btn"
         @click="confirmUpload"
         :disabled="upload.running || remainingAnalyzingFiles > 0"
-        class="mt-2 w-full"
+        class="mt-2 w-full my-4"
         label="Update Changes"
       />
     </div>

From 3e675f10604b779838daade5f18dc353cebeecd7 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 7 Oct 2024 16:44:10 +0200
Subject: [PATCH 6/6] fix padding for clone dialog

---
 .../lib/src/modules/project/components/CloneDialogTemplate.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
index 32595312..7ff2d23a 100644
--- a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="flex flex-column gap-4">
+  <div class="flex flex-column gap-4 pb-4">
     <span class="flex p-float-label w-ful p-input-filled">
       <PInputText
         autofocus