From 4123b426f656aa4fa7799f956a57f66cf26034ee Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Thu, 1 Dec 2022 16:37:49 +0200
Subject: [PATCH 01/10] Fix for redirecting to AllFolders view after changing
 project

---
 .../src/components/BrowserSecondaryNavbar.vue                  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index 1051252aa..049f181d7 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -96,10 +96,9 @@ export default {
       const item = event.target.value;
       if (item.id !== this.active.id) {
         const navigationParams = {
-          name: this.$router.name,
+          name: "AllFolders",
           params: {user: this.uname, project: item.id},
         };
-
         // Pushing to router before ´go´ method
         // enables navigation with updated item id
         this.$router.push(navigationParams);

From eda6cbc40d47c837dcf24b3f4430e31dd7f06b72 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Mon, 5 Dec 2022 18:04:38 +0200
Subject: [PATCH 02/10] Fix some bugs for Share modal

- Fix Notification for removing a shared permission
- Fix function when removing a permission
---
 .github/config/.finnishwords.txt              |  3 +
 swift_browser_ui_frontend/src/common/lang.js  |  4 +-
 .../src/components/ShareModal.vue             | 68 +++++++++++++------
 .../src/components/ShareModalTable.vue        | 15 ++--
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 8c58ae752..e7ae7ee91 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -204,6 +204,7 @@ luo
 luonnin
 luonti
 luotu
+lupa
 määrä
 määrästä
 mahdollisia
@@ -268,6 +269,7 @@ omistavan
 on
 ongelmiin
 onnistui
+onnistuneesti
 onnistunut
 onnistuu
 operaatio
@@ -303,6 +305,7 @@ poista
 poistaa
 poistaminen
 poistettava
+poistettiin
 poistettu
 polku
 postamista
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 8ec546dab..219108dbd 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -194,6 +194,7 @@ let default_translations = {
         read_perm: "Read",
         write_perm: "Read and write",
         shared_successfully: "Folder was shared successfully!",
+        remove_permission: "Permission was removed successfully!",
         project_id: "Project ID",
         field_label: "Project Identifiers to share with",
         field_placeholder: "Add Share IDs",
@@ -640,7 +641,8 @@ let default_translations = {
         read_perm: "Salli säiliön luku",
         write_perm: "Salli säiliöön kirjoitus",
         shared_successfully: "Kansion jakaminen onnistui!",
-        project_id: "Jaa tunnus",
+        remove_permission: "Lupa poistettiin onnistuneesti!",
+        project_id: "Projektin tunnus",
         field_label: "Jaa projektitunnisteille",
         field_placeholder: "Lisää projektitunnukset",
         cancel: "Peru",
diff --git a/swift_browser_ui_frontend/src/components/ShareModal.vue b/swift_browser_ui_frontend/src/components/ShareModal.vue
index ffe7faf1f..a5b94699b 100644
--- a/swift_browser_ui_frontend/src/components/ShareModal.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModal.vue
@@ -83,25 +83,27 @@
           </c-button>
         </c-flex>
       </c-container>
+      <c-alert
+        v-show="isShared || isPermissionRemoved"
+        type="success"
+      >
+        <div class="shared-notification">
+          {{ isShared ? $t('message.share.shared_successfully')
+                      : $t('message.share.remove_permission')
+          }}
+          <c-button
+            text
+            size="small"
+            @click="closeSharedNotification()"
+          >
+            <c-icon-button text>
+              <i class="mdi mdi-close" />
+            </c-icon-button>
+            {{ $t("message.share.close") }}
+          </c-button>
+        </div>
+      </c-alert>
       <c-container v-show="sharedDetails.length > 0">
-        <c-alert
-          v-show="isShared"
-          type="success"
-        >
-          <div class="shared-notification">
-            {{ $t('message.share.shared_successfully') }}
-            <c-button
-              text
-              size="small"
-              @click="closeSharedNotification()"
-            >
-              <c-icon-button text>
-                <i class="mdi mdi-close" />
-              </c-icon-button>
-              {{ $t("message.share.close") }}
-            </c-button>
-          </div>
-        </c-alert>
         <ShareModalTable
           :shared-details="sharedDetails"
           :folder-name="folderName"
@@ -112,7 +114,6 @@
     </c-card-content>
     <c-toasts
       id="shareModal-toasts"
-      vertical="top"
       data-testid="shareModal-toasts"
     />
   </c-card>
@@ -139,6 +140,8 @@ export default {
       sharedAccessRight: null,
       isShared: false,
       sharedDetails: [],
+      isPermissionRemoved: false,
+      timeout: null,
     };
   },
   computed: {
@@ -154,7 +157,7 @@ export default {
       this.setAccessRights();
     },
     folderName: function () {
-      if (this.folderName)  this.getSharedDetails();
+      if (this.folderName) this.getSharedDetails();
     },
     read: function () {
       if(!this.read) {
@@ -204,6 +207,16 @@ export default {
           if (ret) {
             this.isShared = true;
             this.getSharedDetails();
+
+            if (this.timeout !== null) {
+              clearTimeout(this.timeout);
+              this.timeout = null;
+              if(this.isPermissionRemoved) {
+                this.isPermissionRemoved = false;
+              }
+            }
+            this.timeout = setTimeout(
+              () => this.closeSharedNotification(), 3000);
           }
         },
       );
@@ -266,6 +279,7 @@ export default {
           throw error;
         }
       }
+
       await addAccessControlMeta(
         this.$route.params.project,
         this.folderName,
@@ -280,12 +294,14 @@ export default {
     toggleShareModal: function () {
       this.$store.commit("toggleShareModal", false);
       this.$store.commit("setFolderName", "");
+      this.sharedAccessRight = null;
       this.openShareGuide = false;
       this.tags = [];
       this.isShared = false;
+      this.isPermissionRemoved = false;
     },
     closeSharedNotification: function () {
-      this.isShared = false;
+      this.isShared ? this.isShared = false : this.isPermissionRemoved = false;
     },
     getSharedDetails: function () {
       this.$store.state.client.getShareDetails(
@@ -301,6 +317,16 @@ export default {
         item => {
           return item.sharedTo !== folderData.projectId.value;
         });
+      this.isPermissionRemoved = true;
+
+      if (this.timeout !== null) {
+        clearTimeout(this.timeout);
+        this.timeout = null;
+        if (this.isShared) {
+          this.isShared = false;
+        }
+      }
+      this.timeout = setTimeout(() => this.isPermissionRemoved = false, 3000);
     },
   },
 };
diff --git a/swift_browser_ui_frontend/src/components/ShareModalTable.vue b/swift_browser_ui_frontend/src/components/ShareModalTable.vue
index 9083b63c6..2f73718fa 100644
--- a/swift_browser_ui_frontend/src/components/ShareModalTable.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModalTable.vue
@@ -63,7 +63,7 @@ export default {
                   title: this.$t("message.remove"),
                   onClick: ({ data }) => {
                     this.$emit("removeSharedFolder", data);
-                    this.deleteFolderShare();
+                    this.deleteFolderShare(data);
                   },
                 },
               },
@@ -129,22 +129,17 @@ export default {
         rights,
       );
     },
-    deleteFolderShare: function () {
+    deleteFolderShare: function (folderData) {
       removeAccessControlMeta(
         this.projectId,
         this.folderName,
       ).then(
         () => {
-          this.$store.state.client.shareContainerDeleteAccess(
+          this.$store.state.client.shareDeleteAccess(
             this.projectId,
             this.folderName,
-          ).then(() => {
-            this.$buefy.toast.open({
-              duration: 5000,
-              message: this.$t("message.share.success_delete"),
-              type: "is-success",
-            });
-          });
+            [folderData.projectId.value],
+          );
         },
       );
     },

From 907e3c65af3403f0d2c2188c98a043fac2ec85a7 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Mon, 5 Dec 2022 18:47:19 +0200
Subject: [PATCH 03/10] Fix for modal's scroll position to always show from top

---
 .../src/components/CreateFolderModal.vue      |  2 +-
 .../src/components/UploadModal.vue            | 10 ++----
 swift_browser_ui_frontend/src/entries/main.js | 33 ++++++++++++++-----
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index 52863ce72..9139c8aaa 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -1,6 +1,6 @@
 <template>
   <c-card class="add-folder">
-    <div class="modal-content-wrapper">
+    <div class="modal-content-wrapper" id="createFolder-modal-content">
       <h3 class="title is-3 has-text-dark">
         {{
           create
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index 71aac0fac..74f2997df 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -1,6 +1,6 @@
 <template>
   <c-card class="upload-card">
-    <div class="modal-content-wrapper">
+    <div class="modal-content-wrapper" id="upload-modal-content">
       <h3 class="title is-3 has-text-dark">
         {{ $t("message.encrypt.uploadFiles") }}
       </h3>
@@ -460,12 +460,6 @@ export default {
     clearFiles() {
       this.$store.commit("eraseDropFiles");
     },
-    cancelUpload() {
-      this.$store.commit("eraseDropFiles");
-      this.$store.commit("toggleUploadModal", false);
-      this.inputFolder = "";
-      modifyBrowserPageStyles();
-    },
     dragHandler: function (e) {
       e.preventDefault();
       let dt = e.dataTransfer;
@@ -531,6 +525,8 @@ export default {
       this.folderName = "";
       this.tags = [];
       this.ephemeral = true;
+      this.files = [];
+      this.clearFiles();
       modifyBrowserPageStyles();
     },
     beginEncryptedUpload() {
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index 2d8d74fa4..c63901aa1 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -82,7 +82,7 @@ if ("serviceWorker" in navigator) {
   if(DEV) console.log("Did not register Service Worker.");
 }
 
-window.onerror = function(error) { 
+window.onerror = function(error) {
   if(DEV) console.log("Global error", error);
 };
 window.addEventListener("unhandledrejection", function (event) {
@@ -172,10 +172,10 @@ new Vue({
     isUploading() {
       return this.$store.state.isUploading;
     },
-    displayUploadNotification () {
+    displayUploadNotification() {
       return this.$store.state.uploadNotification;
     },
-    resumableClient () {
+    resumableClient() {
       return this.$store.state.resumableClient;
     },
     altContainer() {
@@ -226,6 +226,22 @@ new Vue({
       set() {},
     },
   },
+  watch: {
+    openCreateFolderModal: function () {
+      if (this.openCreateFolderModal) {
+        // Set the modal to scroll to top whenever it's opened
+        const el = document.getElementById("createFolder-modal-content");
+        el.scrollTo(0, 0);
+      }
+    },
+    openUploadModal: function () {
+      if (this.openUploadModal) {
+        // Set the modal to scroll to top whenever it's opened
+        const el = document.getElementById("upload-modal-content");
+        el.scrollTo(0, 0);
+      }
+    },
+  },
   created() {
     document.title = this.$t("message.program_name");
 
@@ -362,7 +378,8 @@ new Vue({
     delay(this.containerSyncWrapper, 10000);
   },
   mounted() {
-    document.getElementById("mainContainer")
+    document
+      .getElementById("mainContainer")
       .addEventListener("uploadComplete", () => {
         this.$buefy.toast.open({
           message: this.$t("message.upload.complete"),
@@ -377,7 +394,7 @@ new Vue({
     // Following are the methods used for resumablejs, as the methods
     // need to have access to the vue instance.
     addFile: function () {
-      if(!this.isUploading) {
+      if (!this.isUploading) {
         this.resumableClient.upload();
       }
     },
@@ -407,12 +424,12 @@ new Vue({
         message: this.$t("message.upload.upfail").concat(file.fileName),
       });
     },
-    removeUploadToast () {
+    removeUploadToast() {
       const uploadToast = document.querySelector("#upload-toast");
       if (uploadToast) {
         document.querySelector("#upload-toast").removeToast("upload-toast");
       }
-      
+
       this.$store.commit("toggleUploadNotification", false);
     },
     getUploadUrl: function (params) {
@@ -543,7 +560,7 @@ new Vue({
       }
 
       return retl;
-    },  
+    },
   },
   ...App,
 }).$mount("#app");

From 5a0f3b3f4f50a22ad45488cb956681c9ce7e4a41 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Wed, 7 Dec 2022 12:27:15 +0200
Subject: [PATCH 04/10] Update Changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de25515b1..b011112e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- (GH #884) Fixed multiple bugs
+  - Redirected to AllFolders view whenever the selected project changes
+  - Modified function and fixed notification for removing a shared permission
+  - Made modal's scroll position to be always on top when opening a modal
 - (GH #858) Fixed for multiple bugs related to modals and background page's scrolling effect
 - (GH #853) Fix Node 18 needing python for npm install
 - (GH #827) Fixed for updating folder's items count and size when deleting objects inside it

From 2cc7f14beb7819030eb53504e494b16fef8b34c0 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Fri, 9 Dec 2022 17:45:19 +0200
Subject: [PATCH 05/10] Add tooltip for Copy Share ID button

---
 swift_browser_ui_frontend/src/common/lang.js  | 16 +++++
 .../src/components/BrowserSecondaryNavbar.vue | 64 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 219108dbd..26e3ca8e7 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -173,6 +173,14 @@ let default_translations = {
       share: {
         share: "Share",
         share_id: "Share ID",
+        share_id_tooltip:
+          "When another project wants share a folder " +
+          "with your project: Select this button and " +
+          "send Share ID (now copied in your cache) " +
+          "to the project’s member. " +
+          "When you want to share a folder with " +
+          "another project. Ask Share ID from " +
+          "another project’s member.",
         close: "Close",
         instructions: "Share ID instructions",
         close_instructions: "Close instructions",
@@ -624,6 +632,14 @@ let default_translations = {
       share: {
         share: "Jaa",
         share_id: "Jaa tunnus",
+        share_id_tooltip:
+          "When another project wants share a folder " +
+          "with your project: Select this button and " +
+          "send Share ID (now copied in your cache) " +
+          "to the project’s member. " +
+          "When you want to share a folder with " +
+          "another project. Ask Share ID from " +
+          "another project’s member.",
         close: "Kiinni",
         instructions: "Jaa tunnus ohjeet",
         close_instructions: "Sulje ohjeet",
diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index 049f181d7..15b35d19d 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -37,15 +37,22 @@
           />
           {{ $t("message.copy") }} {{ $t("message.share.share_id") }}
         </c-button>
+        <div class="tooltip">
+          <c-icon-button text>
+            <i class="mdi mdi-information-outline" />
+          </c-icon-button>
+          <span class="tooltip-content">
+            {{ $t("message.share.share_id_tooltip") }}
+          </span>
+        </div>
+
       </div>
       <c-toasts
         id="copy-toasts"
         vertical="center"
         data-testid="copy-toasts"
       />
-
       <c-spacer />
-
       <div class="navbar-item">
         <c-button
           outlined
@@ -139,6 +146,9 @@ export default {
         });
       }
     },
+    hoverTooltip: function () {
+      console.log("HOVER!");
+    },
   },
 };
 </script>
@@ -179,4 +189,54 @@ export default {
       flex: auto;
     }
   }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip-content {
+    visibility: hidden;
+    text-align: left;
+    width: 20rem;
+    background-color: $white;
+    color: $text;
+    border: 1px solid $csc-primary;
+    border-radius: 0.375rem;
+    padding: 1rem;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+    top: 120%;
+    left: 50%;
+    margin-left: -10rem;
+  }
+
+  .tooltip:hover .tooltip-content {
+    visibility: visible;
+  }
+
+  .tooltip-content::before {
+    content: " ";
+    position: absolute;
+    left: 46%;
+    bottom: 100%;
+    width: 0;
+    height: 0;
+    border: 0.7rem solid transparent;
+    border-bottom-color: $csc-primary;
+  }
+  .tooltip-content::after {
+    content: " ";
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    width: 0;
+    height: 0;
+    margin-left: -0.75rem;
+    border: 0.65rem solid transparent;
+    border-bottom-color: $white;
+  }
+
   </style>

From 69c548bb54c59faa5e062325a09fe1e52a4f7fd5 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Tue, 13 Dec 2022 11:58:28 +0200
Subject: [PATCH 06/10] Fine-tune for modals

---
 swift_browser_ui_frontend/src/common/lang.js  |  3 +-
 .../src/components/CopyFolderModal.vue        |  4 +--
 .../src/components/CreateFolderModal.vue      |  4 +--
 .../src/components/EditTagsModal.vue          |  4 +--
 .../src/components/ShareModal.vue             | 12 ++++----
 .../src/components/ShareModalTable.vue        | 28 +++++++++++++------
 .../src/components/UploadModal.vue            |  4 +--
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 26e3ca8e7..a40c1612b 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -203,7 +203,7 @@ let default_translations = {
         write_perm: "Read and write",
         shared_successfully: "Folder was shared successfully!",
         remove_permission: "Permission was removed successfully!",
-        project_id: "Project ID",
+        shared_table_title: "Project's folder has been shared with",
         field_label: "Project Identifiers to share with",
         field_placeholder: "Add Share IDs",
         cancel: "Cancel",
@@ -658,6 +658,7 @@ let default_translations = {
         write_perm: "Salli säiliöön kirjoitus",
         shared_successfully: "Kansion jakaminen onnistui!",
         remove_permission: "Lupa poistettiin onnistuneesti!",
+        shared_table_title: "Projektin kansio on jaettu",
         project_id: "Projektin tunnus",
         field_label: "Jaa projektitunnisteille",
         field_placeholder: "Lisää projektitunnukset",
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index cdbb795ce..570c6f6e7 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -1,11 +1,11 @@
 <template>
   <c-card class="copy-folder">
     <div class="modal-content-wrapper">
-      <h3 class="title is-3 has-text-dark">
+      <h4 class="title is-4 has-text-dark">
         {{
           $t("message.replicate.copy_folder") + selectedFolderName
         }}
-      </h3>
+      </h4>
       <c-card-content>
         <c-alert
           v-show="folderExists"
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index 9139c8aaa..f68ca4cea 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -1,13 +1,13 @@
 <template>
   <c-card class="add-folder">
     <div class="modal-content-wrapper" id="createFolder-modal-content">
-      <h3 class="title is-3 has-text-dark">
+      <h4 class="title is-4 has-text-dark">
         {{
           create
             ? $t("message.container_ops.addContainer")
             : $t("message.container_ops.editContainer") + folderName
         }}
-      </h3>
+      </h4>
       <c-card-content>
         <p class="info-text is-size-6">
           {{ $t("message.container_ops.norename") }}
diff --git a/swift_browser_ui_frontend/src/components/EditTagsModal.vue b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
index cffc26b93..649d371e6 100644
--- a/swift_browser_ui_frontend/src/components/EditTagsModal.vue
+++ b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
@@ -1,8 +1,8 @@
 <template>
   <c-card class="edit-tags">
-    <h3 class="title is-3 has-text-dark">
+    <h4 class="title is-4 has-text-dark">
       {{ $t('message.objects.editObject') + object.name }}
-    </h3>
+    </h4>
     <c-card-content>
       <b-field
         custom-class="has-text-dark"
diff --git a/swift_browser_ui_frontend/src/components/ShareModal.vue b/swift_browser_ui_frontend/src/components/ShareModal.vue
index a5b94699b..a54ee02aa 100644
--- a/swift_browser_ui_frontend/src/components/ShareModal.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModal.vue
@@ -1,10 +1,10 @@
 <template>
   <c-card class="share-card">
     <header>
-      <h3 class="title is-3 has-text-dark">
+      <h4 class="title is-4 has-text-dark">
         {{ $t('message.share.share_title') }}
         {{ folderName }}
-      </h3>
+      </h4>
       <c-button
         text
         @click="toggleShareModal"
@@ -24,9 +24,9 @@
           justify="space-between"
           align="center"
         >
-          <h4 class="title is-4 has-text-dark">
+          <h5 class="title is-5 has-text-dark">
             {{ $t("message.share.share_other_projects") }}
-          </h4>
+          </h5>
           <c-flex
             class="toggle-instructions"
             @click="toggleShareGuide"
@@ -354,7 +354,7 @@ export default {
   c-card-content  {
     overflow-y: scroll;
     scrollbar-width: 0.5rem;
-    padding: 1rem 1rem 6rem 1rem;
+    padding: 0 1rem 6rem 1rem;
     &::-webkit-scrollbar {
       width: 0.5rem;
     }
@@ -395,7 +395,7 @@ export default {
     align-items: center;
   }
 
-  h4 {
+  h5 {
     margin: 0 !important;
   }
 
diff --git a/swift_browser_ui_frontend/src/components/ShareModalTable.vue b/swift_browser_ui_frontend/src/components/ShareModalTable.vue
index 2f73718fa..aa2b45d15 100644
--- a/swift_browser_ui_frontend/src/components/ShareModalTable.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModalTable.vue
@@ -1,12 +1,17 @@
 <template>
-  <c-data-table
-    v-if="tableData.length > 0"
-    :data.prop="tableData"
-    :headers.prop="headers"
-    :no-data-text="$t('message.encrypt.empty')"
-    :pagination.prop="pagination"
-    :footer-options.prop="footer"
-  />
+  <c-container>
+    <h5 class="title is-5 has-text-dark">
+      {{ $t("message.share.shared_table_title") }}
+    </h5>
+    <c-data-table
+      v-if="tableData.length > 0"
+      :data.prop="tableData"
+      :headers.prop="headers"
+      :no-data-text="$t('message.encrypt.empty')"
+      :pagination.prop="pagination"
+      :footer-options.prop="footer"
+    />
+  </c-container>
 </template>
 
 <script>
@@ -29,7 +34,7 @@ export default {
       return [
         {
           key: "projectId",
-          value: this.$t("message.share.project_id"),
+          value: this.$t("message.share.share_id"),
           width: "50%",
           sortable: true,
           align: "start",
@@ -148,6 +153,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+h5 {
+   margin: 0 !important;
+}
+
 c-data-table {
   color: var(--csc-dark-grey);
   margin-top: 1rem;
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index 74f2997df..54d9166c4 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -1,9 +1,9 @@
 <template>
   <c-card class="upload-card">
     <div class="modal-content-wrapper" id="upload-modal-content">
-      <h3 class="title is-3 has-text-dark">
+      <h4 class="title is-4 has-text-dark">
         {{ $t("message.encrypt.uploadFiles") }}
-      </h3>
+      </h4>
       <c-card-content>
         <h6 class="title is-6 has-text-dark">
           1. {{ $t("message.encrypt.upload_step1") }}

From 5b2eab34eaf3adcf3d788ee416ec8274a261b14b Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Tue, 13 Dec 2022 16:21:22 +0200
Subject: [PATCH 07/10] Update Changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b011112e3..d7cf1fcc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Redirected to AllFolders view whenever the selected project changes
   - Modified function and fixed notification for removing a shared permission
   - Made modal's scroll position to be always on top when opening a modal
+  - Add tooltip for Copy Share ID button
+  - Fine-tuned modals' font sizes and gaps between elements
 - (GH #858) Fixed for multiple bugs related to modals and background page's scrolling effect
 - (GH #853) Fix Node 18 needing python for npm install
 - (GH #827) Fixed for updating folder's items count and size when deleting objects inside it

From d3eef0bf029d01395e4045a14956c6a4098195f4 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Tue, 27 Dec 2022 12:24:26 +0200
Subject: [PATCH 08/10] Add Finnish translation for Share ID Tooltip

---
 .github/config/.finnishwords.txt             | 11 +++++++++++
 swift_browser_ui_frontend/src/common/lang.js | 12 +++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index e7ae7ee91..2aaa3e30f 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -42,7 +42,9 @@ haku
 hakuindeksi
 haluat
 haluatko
+halutaan
 halutako
+Halutessasi
 haluttu
 halutun
 hinnoittelulaskuri
@@ -63,6 +65,8 @@ jaettua
 jaettuja
 jaetun
 jaetut
+jakaa
+jakaa
 jakamaan
 jakamasi
 jakaminen
@@ -74,8 +78,12 @@ jakoa
 jakopyynnöt
 jakopyyntöjä
 jakopyyntöjen
+jakotunnus
+jakotunnusta
 jälkeen
 jälkeenpäin
+jäsenelle
+jäseneltä
 jäsenet
 jäsenille
 jäsenten
@@ -83,6 +91,7 @@ jne
 jo
 johtaa
 johtua
+joltakin
 jonka
 jos
 jota
@@ -231,6 +240,7 @@ muuttaa
 muuttaaksesi
 näkyvissä
 nämä
+nappi
 nappia
 navigointia
 näytä
@@ -457,6 +467,7 @@ tilapäisesti
 toiminto
 toiseen
 toisen
+toisesta
 toteuttaa
 tueta
 tuettu
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index a40c1612b..897720f9f 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -633,13 +633,11 @@ let default_translations = {
         share: "Jaa",
         share_id: "Jaa tunnus",
         share_id_tooltip:
-          "When another project wants share a folder " +
-          "with your project: Select this button and " +
-          "send Share ID (now copied in your cache) " +
-          "to the project’s member. " +
-          "When you want to share a folder with " +
-          "another project. Ask Share ID from " +
-          "another project’s member.",
+          "Mikäli toisesta projektista halutaan jakaa kansio projektisi " +
+          "kanssa: Valitse tämä nappi ja lähetä Jakotunnus toisen " +
+          "projektin jäsenelle. Halutessasi jakaa kansion toisen " +
+          "projektin kanssa, pyydä jakotunnusta joltakin kyseisen " +
+          "projektin jäseneltä.",
         close: "Kiinni",
         instructions: "Jaa tunnus ohjeet",
         close_instructions: "Sulje ohjeet",

From a1fbe78cec72daa11155cd2e2d6cce671a5dd11b Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Thu, 5 Jan 2023 11:31:36 +0200
Subject: [PATCH 09/10] Fix for Copy Modal conflicting errors

---
 .../src/components/BrowserSecondaryNavbar.vue       |  2 +-
 .../src/components/CopyFolderModal.vue              | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index 15b35d19d..347cdf49c 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -207,7 +207,7 @@ export default {
 
     /* Position the tooltip */
     position: absolute;
-    z-index: 1;
+    z-index: 5;
     top: 120%;
     left: 50%;
     margin-left: -10rem;
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index 570c6f6e7..cd6ac0b70 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -23,6 +23,7 @@
             v-model="folderName"
             name="foldername"
             custom-class="has-text-dark"
+            :loading="loadingFoldername"
           />
         </b-field>
         <b-field
@@ -81,6 +82,7 @@ export default {
     return {
       folderExists: false,
       folderName: "",
+      loadingFoldername: true,
       tags: [],
       taginputConfirmKeys,
       folders: [],
@@ -103,7 +105,9 @@ export default {
     selectedFolderName: function () {
       if (this.selectedFolderName && this.selectedFolderName.length > 0) {
         this.fetchFolders().then(() => {
-          this.getCopyFolder(this.selectedFolderName);
+          if(this.folders && this.folders.length > 0) {
+            this.getCopyFolder(this.selectedFolderName);
+          }
         });
       }
     },
@@ -133,7 +137,7 @@ export default {
       });
     },
     getCopyFolder: function (origFolderName) {
-      if (this.folders.value) {
+      if (this.folders) {
         // Check if current folder is a copy
         const reg = new RegExp("\\b(copy)\\s(\\d+)\\b$", "i");
         const isCopied = origFolderName.match(reg);
@@ -147,7 +151,7 @@ export default {
         }
 
         const existingCopiedFolders = [];
-        for (let folder of this.folders.value) {
+        for (let folder of this.folders) {
           // Check if folder is one of the copy versions
           // which ends in the form 'copy + number'
           const copiedReg = new RegExp(`\\b${copiedFolder}\\s(\\d+)\\b$`, "gi");
@@ -162,7 +166,10 @@ export default {
           const latestVer= existingCopiedFolders[
             existingCopiedFolders.length-1].match(reg);
           this.folderName = !isCopied ? `${copiedFolder} ${+latestVer[2] + 1}` : origFolderName.replace(/\d+$/, +latestVer[2]+1);
+        } else {
+          this.folderName = `${copiedFolder} 1`;
         }
+        this.loadingFoldername = false;
       }
     },
     checkSelectedFolder: function () {

From 9ccc9a17fc7c95f11f0c68bcf37f272835a520a8 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Thu, 5 Jan 2023 14:57:33 +0200
Subject: [PATCH 10/10] Fix for linting code

---
 .../src/components/BrowserSecondaryNavbar.vue                | 1 -
 .../src/components/CreateFolderModal.vue                     | 5 ++++-
 swift_browser_ui_frontend/src/components/ShareModal.vue      | 2 +-
 swift_browser_ui_frontend/src/components/UploadModal.vue     | 5 ++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index 347cdf49c..36f1b0859 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -45,7 +45,6 @@
             {{ $t("message.share.share_id_tooltip") }}
           </span>
         </div>
-
       </div>
       <c-toasts
         id="copy-toasts"
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index f68ca4cea..084c5d613 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -1,6 +1,9 @@
 <template>
   <c-card class="add-folder">
-    <div class="modal-content-wrapper" id="createFolder-modal-content">
+    <div
+      id="createFolder-modal-content"
+      class="modal-content-wrapper"
+    >
       <h4 class="title is-4 has-text-dark">
         {{
           create
diff --git a/swift_browser_ui_frontend/src/components/ShareModal.vue b/swift_browser_ui_frontend/src/components/ShareModal.vue
index a54ee02aa..f5213338c 100644
--- a/swift_browser_ui_frontend/src/components/ShareModal.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModal.vue
@@ -89,7 +89,7 @@
       >
         <div class="shared-notification">
           {{ isShared ? $t('message.share.shared_successfully')
-                      : $t('message.share.remove_permission')
+            : $t('message.share.remove_permission')
           }}
           <c-button
             text
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index 54d9166c4..2ad48abcb 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -1,6 +1,9 @@
 <template>
   <c-card class="upload-card">
-    <div class="modal-content-wrapper" id="upload-modal-content">
+    <div
+      id="upload-modal-content"
+      class="modal-content-wrapper"
+    >
       <h4 class="title is-4 has-text-dark">
         {{ $t("message.encrypt.uploadFiles") }}
       </h4>