From 9aac827816fd0a54631054fb1b9d79437502bce3 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 21 Feb 2024 15:14:20 +0800
Subject: [PATCH] =?UTF-8?q?style(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E9=93=BE=E6=8E=A5=E6=A0=B7=E5=BC=8F=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E7=AD=89=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue |  57 +-------
 .../canvas/components/editor/LinkOptBar.vue   | 133 +++++++++++++-----
 .../canvas/components/editor/Preview.vue      |   8 +-
 .../icons/svg/icon_down-right_outlined.svg    |   6 +-
 .../src/icons/svg/icon_download_outlined.svg  |   4 +-
 .../src/icons/svg/icon_left_outlined.svg      |   4 +-
 .../src/icons/svg/icon_magnify_outlined.svg   |   4 +-
 .../src/icons/svg/icon_minify_outlined.svg    |   4 +-
 .../src/icons/svg/icon_up-left_outlined.svg   |   6 +-
 9 files changed, 114 insertions(+), 112 deletions(-)

diff --git a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index b28d5402b2..9bd24d65db 100644
--- a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -3,53 +3,8 @@
   <div
     :class="containerClass"
   >
-
     <div
-      v-if="isPublicLink"
-      ref="widget-div"
-      class="function-div"
-      :class="[{['function-back-div']: backToTopBtn},functionClass]"
-    >
-      <el-button-group size="mini">
-        <el-button
-          v-if="fromLink"
-          size="mini"
-          type="button"
-          @click="back2Last"
-        ><span><svg-icon
-          style="width: 12px;height: 12px"
-          icon-class="link-back"
-        />{{ $t('pblink.back_parent') }}</span></el-button>
-        <el-button
-          v-if="existLinkage"
-          size="mini"
-          @click="clearAllLinkage"
-        ><i
-          style="width: 12px;height: 12px"
-          class="icon iconfont icon-quxiaoliandong"
-        />{{ $t('panel.remove_all_linkage') }}</el-button>
-        <el-button
-          v-if="isPcTerminal"
-          size="mini"
-          @click="exportPDF"
-        >
-          <span><svg-icon
-            style="width: 12px;height: 12px"
-            icon-class="link-down"
-          />{{ $t('panel.down') }}</span></el-button>
-        <el-button
-          v-if="isPcTerminal"
-          size="mini"
-          @click="toggleFullscreen"
-        >
-          <span><svg-icon
-            style="width: 12px;height: 12px"
-            :icon-class="fullscreenState?'public_fullscreen_exit':'public_fullscreen'"
-          />{{ fullscreenState?$t('panel.fullscreen_exit'): $t('panel.fullscreen_preview') }}</span></el-button>
-      </el-button-group>
-    </div>
-    <div
-      v-else-if="existLinkage || backToTopBtn"
+      v-if="existLinkage || backToTopBtn"
       class="bar-main-right"
     >
       <el-button
@@ -66,16 +21,6 @@
         @click="backToTop"
       ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
     </div>
-    <div
-      v-show="isPublicLink && backToTopBtn"
-      class="link-public"
-    >
-      <el-button
-        size="mini"
-        type="warning"
-        @click="backToTop"
-      ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
-    </div>
   </div>
 </template>
 
diff --git a/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue b/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
index 1fd9448f2b..dec52f3409 100644
--- a/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/LinkOptBar.vue
@@ -1,14 +1,15 @@
 <template>
   <div
-    class="link-bar-main bar-light"
+    v-if="isPublicLink && isPcTerminal"
     id="fullscreenElement"
-    v-if="isPublicLink"
     ref="widget-div"
-    :class="{'link-bar-main-active':barActive}"
+    class="link-bar-main bar-light"
+    :class="[{['link-bar-main-active']: barActive},functionClass]"
+    :style="{ '--fullWidth': fullWidth+'px','--fullContent': 28-fullWidth+'px','--firstHoveMove': 32-fullWidth+'px' }"
   >
     <div class="bar-first">
       <el-tooltip
-        :content="barActive?'收起':'展开'"
+        :content="barActive?$t('panel.fold'):$t('panel.expand')"
       >
         <svg-icon
           style="width: 16px;height: 16px"
@@ -19,26 +20,45 @@
     </div>
     <div class="bar-content">
       <div class="bar-diver" />
-      <div class="link-icon-active">
-        <svg-icon
-          style="width: 16px;height: 16px"
-          icon-class="icon_left_outlined"
-          @click="back2Last"
-        />
+      <div
+        v-show="fromLink"
+        class="link-icon-active"
+      >
+        <el-tooltip
+          :content="$t('pblink.back_parent')"
+        >
+          <svg-icon
+            style="width: 16px;height: 16px"
+            icon-class="icon_left_outlined"
+            @click="back2Last"
+          />
+        </el-tooltip>
       </div>
       <div class="link-icon-active">
-        <svg-icon
-          style="width: 16px;height: 16px"
-          icon-class="icon_download_outlined"
-          @click="exportPDF"
-        />
+        <el-tooltip
+          :content="$t('panel.panel')"
+        >
+          <svg-icon
+            style="width: 16px;height: 16px"
+            icon-class="icon_download_outlined"
+            @click="exportPDF"
+          />
+        </el-tooltip>
       </div>
-      <div class="link-icon-active" id="fullscreenElement">
-        <svg-icon
-          style="width: 16px;height: 16px"
-          :icon-class="fullscreenState?'icon_minify_outlined':'icon_magnify_outlined'"
-          @click="toggleFullscreen"
-        />
+      <div
+        id="fullscreenElement"
+        class="link-icon-active"
+        style="padding-right: 4px"
+      >
+        <el-tooltip
+          :content="fullscreenState? $t('panel.fullscreen_exit'): $t('panel.fullscreen_preview')"
+        >
+          <svg-icon
+            style="width: 16px;height: 16px"
+            :icon-class="fullscreenState?'icon_minify_outlined':'icon_magnify_outlined'"
+            @click="toggleFullscreen"
+          />
+        </el-tooltip>
       </div>
     </div>
   </div>
@@ -68,7 +88,8 @@ export default {
     return {
       fullscreenElement: null,
       fullscreenState: false,
-      barActive: false
+      barActive: false,
+      fullWidth: this.$route.query.fromLink === 'true' ? 126 : 94
     }
   },
   computed: {
@@ -76,9 +97,9 @@ export default {
       return this.terminal === 'pc'
     },
     functionClass() {
-      let result = 'function-light'
+      let result = 'link-bar-main-light'
       if (this.canvasStyleData?.panel?.themeColor === 'dark') {
-        result = 'function-dark'
+        result = 'link-bar-main-dark'
       }
       return result
     },
@@ -158,16 +179,14 @@ export default {
       }
     },
     exportPDF() {
-      this.$refs['widget-div'].style.display = ''
+      this.$refs['widget-div'].style.display = 'none'
       this.$emit('link-export-pdf')
     },
     setWidgetStatus() {
       if (!this.isPublicLink || !this.$refs['widget-div']) {
         return
       }
-      const val = this.$refs['widget-div'].style.display
-
-      this.$refs['widget-div'].style.display = val ? '' : 'block'
+      this.$refs['widget-div'].style.display = 'flex'
     },
     backToTop() {
       this.$emit('back-to-top')
@@ -182,19 +201,62 @@ export default {
   display: flex;
   z-index: 10;
   height: 30px;
-  width: 130px;
+  width: var(--fullWidth);
   bottom: 24px;
-  right: -102px;
+  right: var(--fullContent);
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
 
   &:hover {
-    right: -96px;
+    right: var(--firstHoveMove);
   }
 
   transition: 0.2s; /* 添加过渡动画 */
 }
 
+.link-bar-main-light {
+  color: rgba(31, 35, 41, 1);
+
+  .bar-first {
+    border-left: 1px solid rgba(222, 224, 227, 1);
+    border-top: 1px solid rgba(222, 224, 227, 1);
+    border-bottom: 1px solid rgba(222, 224, 227, 1);
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .bar-content {
+    border-top: 1px solid rgba(222, 224, 227, 1);
+    border-bottom: 1px solid rgba(222, 224, 227, 1);
+    background-color: rgba(255, 255, 255, 1);
+
+    .bar-diver {
+      background: rgba(187, 191, 196, 1);
+    }
+
+  }
+}
+
+.link-bar-main-dark {
+  color: rgba(255, 255, 255, 1);
+
+  .bar-first {
+    border-left: 1px solid rgba(67, 67, 67, 1);
+    border-top: 1px solid rgba(67, 67, 67, 1);
+    border-bottom: 1px solid rgba(67, 67, 67, 1);
+    background-color: rgba(26, 26, 26, 1);
+  }
+
+  .bar-content {
+    border-top: 1px solid rgba(67, 67, 67, 1);
+    border-bottom: 1px solid rgba(67, 67, 67, 1);
+    background-color: rgba(26, 26, 26, 1);
+
+    .bar-diver {
+      background: rgba(95, 95, 95, 1);
+    }
+  }
+}
+
 .link-bar-main-active {
   right: 0px !important;
   transition: 0.2s; /* 添加过渡动画 */
@@ -202,10 +264,6 @@ export default {
 
 .bar-first {
   width: 36px;
-  border-left: 1px solid rgba(222, 224, 227, 1);
-  border-top: 1px solid rgba(222, 224, 227, 1);
-  border-bottom: 1px solid rgba(222, 224, 227, 1);
-  background-color: rgba(255, 255, 255, 1);
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
   padding: 3px 0px 4px 8px;
@@ -219,15 +277,12 @@ export default {
 .bar-diver {
   width: 1px;
   height: 18px;
-  background: rgba(187, 191, 196, 1);
 }
 
 .bar-content {
   display: flex;
   align-items: center;
-  border-top: 1px solid rgba(222, 224, 227, 1);
-  border-bottom: 1px solid rgba(222, 224, 227, 1);
-  background-color: rgba(255, 255, 255, 1);
+  padding-right: 4px;
 }
 
 .link-icon-active {
diff --git a/core/frontend/src/components/canvas/components/editor/Preview.vue b/core/frontend/src/components/canvas/components/editor/Preview.vue
index 4a5e3879c3..c5a38a57cf 100644
--- a/core/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/core/frontend/src/components/canvas/components/editor/Preview.vue
@@ -17,7 +17,9 @@
     />
     <link-opt-bar
       v-if="canvasId==='canvas-main'"
+      ref="link-opt-bar"
       :terminal="terminal"
+      :canvas-style-data="canvasStyleData"
       @link-export-pdf="downloadAsPDF"
       @back-to-top="backToTop"
     />
@@ -852,9 +854,6 @@ export default {
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
         this.$store.commit('setCurComponent', { component: null, index: null })
-        if (this.$refs?.['canvas-opt-bar']) {
-          this.$refs['canvas-opt-bar'].setWidgetStatus()
-        }
       }
     },
     handleMouseDown() {
@@ -920,6 +919,9 @@ export default {
               this.snapshotInfo = snapshot
               this.pdfExportShow = true
             }
+            if (this.$refs?.['link-opt-bar']) {
+              this.$refs['link-opt-bar'].setWidgetStatus()
+            }
           })
         }, 2500)
       }, 500)
diff --git a/core/frontend/src/icons/svg/icon_down-right_outlined.svg b/core/frontend/src/icons/svg/icon_down-right_outlined.svg
index 97b63a06b5..aea7c5f4f4 100644
--- a/core/frontend/src/icons/svg/icon_down-right_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_down-right_outlined.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.90488 12.7618L6.65937 8.00732L1.90488 3.25284C1.77471 3.12266 1.77471 2.9116 1.90488 2.78143L2.37629 2.31003C2.50646 2.17985 2.71752 2.17985 2.84769 2.31003L8.07358 7.53592C8.33393 7.79627 8.33393 8.21838 8.07358 8.47873L2.84769 13.7046C2.71752 13.8348 2.50646 13.8348 2.37629 13.7046L1.90488 13.2332C1.77471 13.103 1.77471 12.892 1.90488 12.7618Z" fill="#1F2329"/>
-<path d="M7.82871 12.7618L12.5832 8.00732L7.82871 3.25284C7.69854 3.12266 7.69854 2.9116 7.82871 2.78143L8.30012 2.31003C8.43029 2.17985 8.64134 2.17985 8.77152 2.31003L13.9974 7.53592C14.2578 7.79627 14.2578 8.21838 13.9974 8.47873L8.77152 13.7046C8.64134 13.8348 8.43029 13.8348 8.30012 13.7046L7.82871 13.2332C7.69854 13.103 7.69854 12.892 7.82871 12.7618Z" fill="#1F2329"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.90488 12.7618L6.65937 8.00732L1.90488 3.25284C1.77471 3.12266 1.77471 2.9116 1.90488 2.78143L2.37629 2.31003C2.50646 2.17985 2.71752 2.17985 2.84769 2.31003L8.07358 7.53592C8.33393 7.79627 8.33393 8.21838 8.07358 8.47873L2.84769 13.7046C2.71752 13.8348 2.50646 13.8348 2.37629 13.7046L1.90488 13.2332C1.77471 13.103 1.77471 12.892 1.90488 12.7618Z"/>
+<path d="M7.82871 12.7618L12.5832 8.00732L7.82871 3.25284C7.69854 3.12266 7.69854 2.9116 7.82871 2.78143L8.30012 2.31003C8.43029 2.17985 8.64134 2.17985 8.77152 2.31003L13.9974 7.53592C14.2578 7.79627 14.2578 8.21838 13.9974 8.47873L8.77152 13.7046C8.64134 13.8348 8.43029 13.8348 8.30012 13.7046L7.82871 13.2332C7.69854 13.103 7.69854 12.892 7.82871 12.7618Z"/>
 </svg>
diff --git a/core/frontend/src/icons/svg/icon_download_outlined.svg b/core/frontend/src/icons/svg/icon_download_outlined.svg
index c626135454..4b8aeb1881 100644
--- a/core/frontend/src/icons/svg/icon_download_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_download_outlined.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 12.3334V14.0001C14 14.3683 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.3683 2 14.0001V12.3334C2 12.1493 2.14924 12.0001 2.33333 12.0001H3C3.18409 12.0001 3.33333 12.1493 3.33333 12.3334V13.3334H12.6667V12.3334C12.6667 12.1493 12.8159 12.0001 13 12.0001H13.6667C13.8508 12.0001 14 12.1493 14 12.3334ZM8.66667 9.35723L10.6736 7.35025C10.8038 7.22007 11.0149 7.22007 11.1451 7.35025L11.6165 7.82165C11.7466 7.95183 11.7466 8.16288 11.6165 8.29306L8.31663 11.5929C8.25154 11.658 8.16623 11.6905 8.08092 11.6905C7.99562 11.6905 7.91031 11.658 7.84522 11.5929L4.54539 8.29306C4.41521 8.16288 4.41521 7.95183 4.54539 7.82165L5.01679 7.35025C5.14697 7.22007 5.35802 7.22007 5.4882 7.35025L7.33334 9.19539V2.00008C7.33334 1.81599 7.48257 1.66675 7.66667 1.66675H8.33334C8.51743 1.66675 8.66667 1.81599 8.66667 2.00008V9.35723Z" fill="#1F2329"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12.3334V14.0001C14 14.3683 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.3683 2 14.0001V12.3334C2 12.1493 2.14924 12.0001 2.33333 12.0001H3C3.18409 12.0001 3.33333 12.1493 3.33333 12.3334V13.3334H12.6667V12.3334C12.6667 12.1493 12.8159 12.0001 13 12.0001H13.6667C13.8508 12.0001 14 12.1493 14 12.3334ZM8.66667 9.35723L10.6736 7.35025C10.8038 7.22007 11.0149 7.22007 11.1451 7.35025L11.6165 7.82165C11.7466 7.95183 11.7466 8.16288 11.6165 8.29306L8.31663 11.5929C8.25154 11.658 8.16623 11.6905 8.08092 11.6905C7.99562 11.6905 7.91031 11.658 7.84522 11.5929L4.54539 8.29306C4.41521 8.16288 4.41521 7.95183 4.54539 7.82165L5.01679 7.35025C5.14697 7.22007 5.35802 7.22007 5.4882 7.35025L7.33334 9.19539V2.00008C7.33334 1.81599 7.48257 1.66675 7.66667 1.66675H8.33334C8.51743 1.66675 8.66667 1.81599 8.66667 2.00008V9.35723Z"/>
 </svg>
diff --git a/core/frontend/src/icons/svg/icon_left_outlined.svg b/core/frontend/src/icons/svg/icon_left_outlined.svg
index 3badd60058..689986c557 100644
--- a/core/frontend/src/icons/svg/icon_left_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_left_outlined.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.36341 10.0001L13.1398 16.7765C13.3026 16.9392 13.3026 17.2031 13.1398 17.3658L12.5506 17.955C12.3879 18.1178 12.1241 18.1178 11.9613 17.955L4.59564 10.5893C4.2702 10.2639 4.2702 9.73627 4.59564 9.41083L11.9613 2.04513C12.1241 1.88242 12.3879 1.88242 12.5506 2.04513L13.1398 2.63439C13.3026 2.79711 13.3026 3.06093 13.1398 3.22365L6.36341 10.0001Z" fill="#1F2329"/>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.36341 10.0001L13.1398 16.7765C13.3026 16.9392 13.3026 17.2031 13.1398 17.3658L12.5506 17.955C12.3879 18.1178 12.1241 18.1178 11.9613 17.955L4.59564 10.5893C4.2702 10.2639 4.2702 9.73627 4.59564 9.41083L11.9613 2.04513C12.1241 1.88242 12.3879 1.88242 12.5506 2.04513L13.1398 2.63439C13.3026 2.79711 13.3026 3.06093 13.1398 3.22365L6.36341 10.0001Z"/>
 </svg>
diff --git a/core/frontend/src/icons/svg/icon_magnify_outlined.svg b/core/frontend/src/icons/svg/icon_magnify_outlined.svg
index 4bce7bca29..66b03498fd 100644
--- a/core/frontend/src/icons/svg/icon_magnify_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_magnify_outlined.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.1518 11.5968C7.31452 11.4341 7.57834 11.4341 7.74106 11.5968L8.33031 12.186C8.49303 12.3487 8.49303 12.6126 8.33031 12.7753L4.99587 16.1086H7.36621C7.59633 16.1086 7.78288 16.2952 7.78288 16.5253V17.3586C7.78288 17.5887 7.59633 17.7753 7.36621 17.7753H3.05555C2.82544 17.7753 2.6171 17.682 2.4663 17.5312C2.3155 17.3804 2.22222 17.1721 2.22222 16.9419V12.6421C2.22222 12.412 2.40877 12.2255 2.63889 12.2255H3.47222C3.70234 12.2255 3.88889 12.412 3.88889 12.6421V14.8586L7.1518 11.5968ZM16.9367 2.22217C17.1668 2.22217 17.3751 2.31544 17.5259 2.46625C17.6767 2.61705 17.77 2.82538 17.77 3.0555V7.35531C17.77 7.58543 17.5835 7.77198 17.3533 7.77198H16.52C16.2899 7.77198 16.1033 7.58543 16.1033 7.35531V5.13888L12.8404 8.40068C12.6777 8.5634 12.4139 8.5634 12.2512 8.40068L11.6619 7.81142C11.4992 7.6487 11.4992 7.38489 11.6619 7.22217L14.9964 3.88883H12.626C12.3959 3.88883 12.2094 3.70229 12.2094 3.47217V2.63883C12.2094 2.40872 12.3959 2.22217 12.626 2.22217H16.9367Z" fill="#1F2329"/>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.1518 11.5968C7.31452 11.4341 7.57834 11.4341 7.74106 11.5968L8.33031 12.186C8.49303 12.3487 8.49303 12.6126 8.33031 12.7753L4.99587 16.1086H7.36621C7.59633 16.1086 7.78288 16.2952 7.78288 16.5253V17.3586C7.78288 17.5887 7.59633 17.7753 7.36621 17.7753H3.05555C2.82544 17.7753 2.6171 17.682 2.4663 17.5312C2.3155 17.3804 2.22222 17.1721 2.22222 16.9419V12.6421C2.22222 12.412 2.40877 12.2255 2.63889 12.2255H3.47222C3.70234 12.2255 3.88889 12.412 3.88889 12.6421V14.8586L7.1518 11.5968ZM16.9367 2.22217C17.1668 2.22217 17.3751 2.31544 17.5259 2.46625C17.6767 2.61705 17.77 2.82538 17.77 3.0555V7.35531C17.77 7.58543 17.5835 7.77198 17.3533 7.77198H16.52C16.2899 7.77198 16.1033 7.58543 16.1033 7.35531V5.13888L12.8404 8.40068C12.6777 8.5634 12.4139 8.5634 12.2512 8.40068L11.6619 7.81142C11.4992 7.6487 11.4992 7.38489 11.6619 7.22217L14.9964 3.88883H12.626C12.3959 3.88883 12.2094 3.70229 12.2094 3.47217V2.63883C12.2094 2.40872 12.3959 2.22217 12.626 2.22217H16.9367Z"/>
 </svg>
diff --git a/core/frontend/src/icons/svg/icon_minify_outlined.svg b/core/frontend/src/icons/svg/icon_minify_outlined.svg
index 02889e7918..5482ce1d2f 100644
--- a/core/frontend/src/icons/svg/icon_minify_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_minify_outlined.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.00555 9.33163C6.18964 9.33163 6.35631 9.40625 6.47695 9.5269C6.5976 9.64754 6.67222 9.81421 6.67222 9.9983V13.4381C6.67222 13.6222 6.52298 13.7715 6.33888 13.7715H5.67222C5.48812 13.7715 5.33888 13.6222 5.33888 13.4381V11.665L2.72855 14.2744C2.59838 14.4046 2.38732 14.4046 2.25715 14.2744L1.78574 13.803C1.65557 13.6729 1.65557 13.4618 1.78574 13.3316L4.4533 10.665H2.55702C2.37293 10.665 2.22369 10.5157 2.22369 10.3316V9.66497C2.22369 9.48087 2.37293 9.33163 2.55702 9.33163H6.00555ZM13.2793 1.7258C13.4094 1.59563 13.6205 1.59563 13.7507 1.7258L14.2221 2.19721C14.3522 2.32738 14.3522 2.53844 14.2221 2.66861L11.5545 5.33528H13.4508C13.6349 5.33528 13.7841 5.48452 13.7841 5.66861V6.33528C13.7841 6.51938 13.6349 6.66861 13.4508 6.66861H10.0023C9.81817 6.66861 9.65151 6.594 9.53086 6.47335C9.41022 6.35271 9.3356 6.18604 9.3356 6.00195V2.5621C9.3356 2.37801 9.48484 2.22877 9.66893 2.22877H10.3356C10.5197 2.22877 10.6689 2.37801 10.6689 2.5621V4.33525L13.2793 1.7258Z" fill="#1F2329"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.00555 9.33163C6.18964 9.33163 6.35631 9.40625 6.47695 9.5269C6.5976 9.64754 6.67222 9.81421 6.67222 9.9983V13.4381C6.67222 13.6222 6.52298 13.7715 6.33888 13.7715H5.67222C5.48812 13.7715 5.33888 13.6222 5.33888 13.4381V11.665L2.72855 14.2744C2.59838 14.4046 2.38732 14.4046 2.25715 14.2744L1.78574 13.803C1.65557 13.6729 1.65557 13.4618 1.78574 13.3316L4.4533 10.665H2.55702C2.37293 10.665 2.22369 10.5157 2.22369 10.3316V9.66497C2.22369 9.48087 2.37293 9.33163 2.55702 9.33163H6.00555ZM13.2793 1.7258C13.4094 1.59563 13.6205 1.59563 13.7507 1.7258L14.2221 2.19721C14.3522 2.32738 14.3522 2.53844 14.2221 2.66861L11.5545 5.33528H13.4508C13.6349 5.33528 13.7841 5.48452 13.7841 5.66861V6.33528C13.7841 6.51938 13.6349 6.66861 13.4508 6.66861H10.0023C9.81817 6.66861 9.65151 6.594 9.53086 6.47335C9.41022 6.35271 9.3356 6.18604 9.3356 6.00195V2.5621C9.3356 2.37801 9.48484 2.22877 9.66893 2.22877H10.3356C10.5197 2.22877 10.6689 2.37801 10.6689 2.5621V4.33525L13.2793 1.7258Z"/>
 </svg>
diff --git a/core/frontend/src/icons/svg/icon_up-left_outlined.svg b/core/frontend/src/icons/svg/icon_up-left_outlined.svg
index 7c4ab015ad..5d02fb172a 100644
--- a/core/frontend/src/icons/svg/icon_up-left_outlined.svg
+++ b/core/frontend/src/icons/svg/icon_up-left_outlined.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16645 3.24307L3.41197 7.99755L8.16645 12.752C8.29663 12.8822 8.29663 13.0933 8.16645 13.2234L7.69505 13.6948C7.56487 13.825 7.35382 13.825 7.22364 13.6948L1.99775 8.46896C1.7374 8.20861 1.7374 7.7865 1.99775 7.52615L7.22364 2.30026C7.35382 2.17009 7.56487 2.17009 7.69505 2.30026L8.16645 2.77166C8.29663 2.90184 8.29663 3.11289 8.16645 3.24307Z" fill="#1F2329"/>
-<path d="M14.0999 3.24307L9.3454 7.99755L14.0999 12.752C14.2301 12.8822 14.2301 13.0933 14.0999 13.2234L13.6285 13.6948C13.4983 13.825 13.2872 13.825 13.1571 13.6948L7.93118 8.46896C7.67083 8.20861 7.67083 7.7865 7.93118 7.52615L13.1571 2.30026C13.2872 2.17009 13.4983 2.17009 13.6285 2.30026L14.0999 2.77166C14.2301 2.90184 14.2301 3.11289 14.0999 3.24307Z" fill="#1F2329"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.16645 3.24307L3.41197 7.99755L8.16645 12.752C8.29663 12.8822 8.29663 13.0933 8.16645 13.2234L7.69505 13.6948C7.56487 13.825 7.35382 13.825 7.22364 13.6948L1.99775 8.46896C1.7374 8.20861 1.7374 7.7865 1.99775 7.52615L7.22364 2.30026C7.35382 2.17009 7.56487 2.17009 7.69505 2.30026L8.16645 2.77166C8.29663 2.90184 8.29663 3.11289 8.16645 3.24307Z"/>
+<path d="M14.0999 3.24307L9.3454 7.99755L14.0999 12.752C14.2301 12.8822 14.2301 13.0933 14.0999 13.2234L13.6285 13.6948C13.4983 13.825 13.2872 13.825 13.1571 13.6948L7.93118 8.46896C7.67083 8.20861 7.67083 7.7865 7.93118 7.52615L13.1571 2.30026C13.2872 2.17009 13.4983 2.17009 13.6285 2.30026L14.0999 2.77166C14.2301 2.90184 14.2301 3.11289 14.0999 3.24307Z"/>
 </svg>