feat(files): improved files error messages

components/views/files/controls/Controls.html

@@ -48,13 +48,13 @@
       multiple
     />
   </div>
-  <TypographyError
-    v-if="errors.length"
-    v-for="error in errors"
-    :key="error"
-    :text="error"
-    class="error"
-  />
+  <div class="error-container" v-if="errors.length">
+    <alert-triangle-icon size="1.3x" />
+    <div>
+      <TypographyError v-for="error in errors" :key="error" :text="error" />
+    </div>
+    <x-icon size="1.3x" class="close" @click="errors=[]" />
+  </div>
   <div class="switcher-container">
     <TypographyText :size="6" :text="$t('pages.files.browse.files')" />
     <FilesViewSwitcher :changeView="changeView" />

components/views/files/controls/Controls.less

@@ -22,8 +22,25 @@
     }
   }
 
-  .error {
+  .error-container {
+    &:extend(.round-corners);
+    display: flex;
+    gap: @light-spacing;
+    padding: @light-spacing;
+    border: 1px solid @red;
     margin-bottom: @normal-spacing;
+    div {
+      display: flex;
+      gap: @xlight-spacing;
+      flex-direction: column;
+    }
+    svg {
+      color: @red;
+      &.close {
+        margin-left: auto;
+        cursor: pointer;
+      }
+    }
   }
 
   .switcher-container {

components/views/files/controls/Controls.vue

@@ -2,14 +2,21 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { FolderPlusIcon, FilePlusIcon } from 'satellite-lucide-icons'
+import {
+  FolderPlusIcon,
+  FilePlusIcon,
+  AlertTriangleIcon,
+  XIcon,
+} from 'satellite-lucide-icons'
 import { isHeic } from '~/utilities/Heic'
 const convert = require('heic-convert')
 
 export default Vue.extend({
   components: {
     FolderPlusIcon,
     FilePlusIcon,
+    AlertTriangleIcon,
+    XIcon,
   },
   // todo - best practice would be emitting rather than passing function as a prop - AP-639
   props: {