askbot-dragon 1.6.78-beta → 1.6.78

package/src/assets/less/converSationContainer/converSatonContainer.less

@@ -1,5 +1,6 @@
 @import "../converSationContainer/common";
 @import "../iconfont.css";
+@import "../variables.less";
 .video-player{
     width: 260px!important;
 }
@@ -32,7 +33,7 @@
     }
     .test-box {
         height: 100vh;
-        background-color:#323232;
+        background-color: @background-color-black;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
@@ -40,14 +41,14 @@
             padding: 16px;
             height: 16px;
             flex: none;
-            border-bottom: solid 2px #424247;
+            border-bottom: solid 2px @background-color-bubble-r2;
             display: flex;
             justify-content: flex-start;
             font-size: 16px;
             .bot-name{
                 flex: auto;
                 text-align: left;
-                color: #ffffff;
+                color: @font-primary-light-color;
                 i{
                     margin-left: 10px;
                     cursor: pointer;
@@ -57,15 +58,14 @@
             .el-icon-refresh{
                 flex: none;
                 width: 24px;
-                /*color: @system_fontcolor_red;*/
-                color: #409EFF;
+                color: @primary-color;
                 font-weight: bolder;
                 cursor: pointer;
             }
             .el-icon-close{
                 flex: none;
                 width: 24px;
-                color: #409EFF;
+                color: @primary-color;
                 font-weight: bolder;
                 cursor: pointer;
             }
@@ -73,9 +73,9 @@
         .mod-loading{
             flex: none;
             padding: 5px;
-            background: #fff;
+            background: @background-color-light;
             font-size: 14px;
-            color: #5857579c;
+            color: @font-primary-color-r1;
             em {
                 font-size: 16px;
                 position: relative;
@@ -102,14 +102,14 @@
                     .chat-content{
                         border-radius: 0 8px 8px 8px;
                         a {
-                            color: royalblue !important;
+                            color: @primary-color !important;
                         }
                         a:link{
                             text-decoration: underline !important;
                         }
                         table{
-                            color: red !important;
-                            border: solid 1px red !important;
+                            color: @font-primary-accent-color !important;
+                            border: solid 1px @font-primary-accent-color !important;
                         }
                     }
                 }
@@ -118,8 +118,8 @@
                     justify-content: flex-end;
                     .chat-content{
                         border-radius:8px 0 8px 8px;
-                        background-color: @system_fontcolor_red;
-                        color: white;
+                        background-color: @primary-color;
+                        color: @font-primary-light-color;
                     }
                 }
                 li{
@@ -133,22 +133,22 @@
                         
                     }
                     .via-bot {
-                        border: solid 1px @system_fontcolor_sub;
+                        border: solid 1px @font-secondary-color;
                         margin-right: 8px; 
                         em {
-                            color: @system_fontcolor_sub;
+                            color: @font-secondary-color;
                         }
                         
                     }
                     .via-user {
-                        border: solid 1px @system_fontcolor_red;
+                        border: solid 1px @primary-color;
                         margin-left: 8px; 
                         em {
-                            color:@system_fontcolor_red;
+                            color: @primary-color;
                         }
                     }
                     .chat-content{
-                        background-color: white;
+                        background-color: @background-color-light;
                         line-height: 26px;
                         padding: 8px;
                         max-width: 300px;
@@ -162,7 +162,7 @@
                             .link-cell{
                                 line-height: 16px;
                                 display: block;
-                                color: @system_fontcolor_red;
+                                color: @primary-color;
                             }
                         }
                     }
@@ -175,8 +175,8 @@
             flex: none;
             .el-input{
                 .el-button{
-                    color: white;
-                    background-color: @system_fontcolor_red;
+                    color: @font-primary-light-color;
+                    background-color: @primary-color;
                 }
             }
         }
@@ -186,10 +186,10 @@
 .dialog{
     width: 51%;
     margin: 0 auto;
-    background-color: #ffffff;
+    background-color: @background-color-light;
     .list-paddingleft-2 {
         padding-left: 16px !important;
-        color: hotpink;
+        color: @font-primary-accent-color;
     }
 
     ul,
@@ -207,7 +207,7 @@
     }
 
     table,table tr th, table tr td {
-        border:1px solid #DDD !important;
+        border:1px solid @border-color-r4 !important;
     }
     table {
         width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse !important;
@@ -217,7 +217,7 @@
         text-align: center;
     }
     .dialogContent{
-        background-color: rgb(245, 245, 245);
+        background-color: @background-color-drawer;
         height: calc(100vh - 170px);
         display: flex;
         flex-direction: column;
@@ -235,8 +235,8 @@
             display: inline-block;
             padding: 5px 10px;
             border-radius: 5px;
-            background-color: #e8eaec;
-            color: #666666;
+            background-color: @background-color-voice;
+            color: @font-primary-color-r2;
             font-size: 12px;
         }
         .notice-content-day{
@@ -248,12 +248,10 @@
                 height:1px;
                 margin-bottom: 5px;
                 margin-right: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left, #fff -4%,#666666 50%);
-
+                background: -webkit-linear-gradient(left, @background-color-light -4%,@font-primary-color-r2 50%);
             }
             .line-text{
-                color: #666666;
+                color: @font-primary-color-r2;
                 font-size: 12px;
             }
             .line-right{
@@ -262,8 +260,7 @@
                 height:1px;
                 margin-bottom: 5px;
                 margin-left: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left,#666666 50%,#fff 100%);
+                background: -webkit-linear-gradient(left,@font-primary-color-r2 50%,@background-color-light 100%);
             }
         }
         //messages
@@ -275,9 +272,7 @@
                 display: flex;
                 align-items: flex-start;
                 .media-body{
-                    //max-width: calc(100vw - 800px);
-                    background-color: white;
-                    // border: 1px solid #e4e3e3;
+                    background-color: @background-color-light;
                     word-break: break-word;
                     flex: 1;
                     min-height: 25px;
@@ -301,7 +296,7 @@
                         width: 200px;
                         height: 35px;
                         line-height: 35px;
-                        background-color: #e8eaec;
+                        background-color: @background-color-voice;
                         border-radius: 10px;
                         .icon-vioce{
                             font-size: 24px;
@@ -317,7 +312,7 @@
                     span{
                         margin-bottom: 5px;
                         font-size: 12px;
-                        color: #a3a4a5;
+                        color: @font-primary-color-r1;
                         float: left;
                     }
                     .botname{
@@ -333,9 +328,8 @@
                     }
                 }
                 .media-body-ps{
-                    //max-width: calc(100vw - 800px);
-                    background-color: #f8f8f8;
-                    border: 1px solid #e4e3e3;
+                    background-color: @background-color-list-r2;
+                    border: 1px solid @border-color-r3;
                     word-break: break-word;
                     flex: 1;
                     min-height: 25px;
@@ -358,9 +352,9 @@
                         padding: 5px 10px 5px 15px;
                         height: 25px;
                         line-height: 25px;
-                        border-top: 1px solid #e4e3e3;
-                        background-color: #ffffff;
-                        color: #409eff;
+                        border-top: 1px solid @border-color-r3;
+                        background-color: @background-color-light;
+                        color: @primary-color;
                         cursor:pointer;
                     }
                     .end{
@@ -371,7 +365,7 @@
                         width: 200px;
                         height: 35px;
                         line-height: 35px;
-                        background-color: #e8eaec;
+                        background-color: @background-color-voice;
                         border-radius: 10px;
                         .icon-vioce{
                             font-size: 24px;
@@ -387,7 +381,7 @@
                     span{
                         margin-bottom: 5px;
                         font-size: 12px;
-                        color: #a3a4a5;
+                        color: @font-primary-color-r1;
                         float: left;
                     }
                     .botname{
@@ -422,9 +416,8 @@
                 display: flex;
                 align-items: flex-start;
                 .media-body{
-                    //max-width: calc(100vw - 800px);
-                    border:  1px solid #c1e5ff !important;
-                    background-color: #c1e5ff !important;
+                    border: 1px solid @border-color-copy !important;
+                    background-color: @border-color-copy !important;
                     word-break: break-word;
                     flex: 1;
                     min-height: 25px;
@@ -447,7 +440,7 @@
                         width: 200px;
                         height: 35px;
                         line-height: 35px;
-                        background-color: #e8eaec;
+                        background-color: @background-color-voice;
                         border-radius: 10px;
                         .icon-vioce{
                             font-size: 24px;
@@ -463,7 +456,7 @@
                     span{
                         margin-bottom: 5px;
                         font-size: 12px;
-                        color: #a3a4a5;
+                        color: @font-primary-color-r1;
                         float: right;
                     }
                     .botname{

package/src/assets/less/variables.less

@@ -0,0 +1,122 @@
+// 定义全局颜色变量
+
+/** ---- 主题色 ---- */
+:root {
+  --primary-color: #366aff;
+  --background-content-color: #f5f7fb;
+  --background-color-bubble: #f2f5ff;
+  --background-color-btn-sure: #366aff;
+  --font-primary-accent-color: #366aff;
+  --font-secondary-color: #616161;
+  --border-color-primary: #366aff;
+  --border-color-copy: #a1b9ff;
+  --background-color-btn-gradient-left: #366aff;
+  --background-color-list: #eaefff;
+  --border-color-search-ipt: #e0e0e0;
+}
+
+:root[data-theme="LN_OA"] {
+  --primary-color: #f04f5b;
+  --background-content-color: #fdf9fa;
+  --background-color-bubble: #feeeef;
+  --background-color-btn-sure: #f04f5b;
+  --font-primary-accent-color: #f04f5b;
+  --font-secondary-color: #f04f5b;
+  --border-color-primary: #f04f5b;
+    --border-color-copy: #f04f5b;
+  --background-color-btn-gradient-left: #f04f5b;
+  --background-color-list: #feeeef;
+  --border-color-search-ipt: #feeeef;
+}
+
+@primary-color: var(--primary-color);
+@background-content-color: var(--background-content-color);
+@background-color-bubble: var(--background-color-bubble);
+@background-color-btn-sure: var(--background-color-btn-sure);
+@font-primary-accent-color: var(--font-primary-accent-color);
+@font-secondary-color: var(--font-secondary-color);
+@border-color-primary: var(--border-color-primary);
+@border-color-copy: var(--border-color-copy);
+@background-color-btn-gradient-left: var(--background-color-btn-gradient-left); //  按钮 渐变左色
+@background-color-list: var(--background-color-list); //  列表选中背景色
+@border-color-search-ipt: var(--border-color-search-ipt); //  搜索框边框色
+
+/** ---- 背景色 ---- */
+@background-color-light: #fff; //    一般 可操作 区域背景色
+@background-color-black: #000;
+@background-color-bubble-r2: #7a7c80; //  醒目 可操作气泡 区域背景色
+
+@background-color-disable: #c9d0e5; //  一般 禁用 区域背景色
+@background-color-icon: #7596f5; //  头像 空白区背景色
+@background-color-btn-gradient-right: #7836ff; //  按钮 渐变右色
+@background-color-list-r2: #f8fafc;
+@background-color-example: #e5ebff; //  列表hover背景色
+@background-color-btn-cancel: #eff2f5; //  取消按钮背景色
+@background-color-scrollbar: #e8e8e8; //  滚动条背景色
+@background-color-drawer: #f2f2f2; //  弹窗浮层
+@background-color-voice: #eef1f7; //  语音 背景色
+@background-color-tab: #f0f4f8; //  语音 背景色
+@background-color-line: #87a6ff; 
+@background-color-asset-text-r1: #e1faf9;
+@background-color-asset-text-r2: #edf2ff;
+@background-color-asset-text-r3: #ffebec;
+@background-color-dept: #d1d6e3;
+@background-color-pagination: #EDF0F6;
+@background-color-custom: #f5f7fa;
+@background-color-excel: #e3ebff;
+@background-color-ipt-hover: #e0e0e0;
+@background-color-ipt-active: #d0d0d0;
+@background-color-link: #eee;
+@background-color-prev: #F2F5FA;
+@background-color-guide: #d9e3fa;
+
+
+/** ---- 背景 一个很奇怪的颜色 暂时先抽出来保持原色 ---- */
+@background-color-alc: #e9f9f8;
+@background-color-alc-source: #f2f6ff;
+@background-color-summary: #eef1ff;
+
+/** ---- 字体颜色 ---- */
+@font-primary-color: #000;
+@font-primary-color-r1: #999;
+@font-primary-color-r2: #888;
+@font-primary-color-r3: #ccc;
+@font-primary-color-r4: #a9b3c6;
+
+/** ---- 一般背景为主题色时文字对应色 ---- */
+@font-primary-light-color: #fff;
+
+@font-desc-color: #9e9e9e;
+@font-icon-color: #909399;
+@font-disable-color: #c0c4cc;
+
+@font-color-voice: #ADC0F6;
+@font-pagination-color: #717b90;
+
+/** ---- 字体 一个很奇怪的颜色 暂时先抽出来保持原色 ---- */
+@font-alc-color: #00c2bb;
+@font-asset-text: #ffbbc0;
+
+
+
+/** ---- 边框颜色 ---- */
+@border-color-secondary: #616161;
+@border-color-r1: #fff;
+@border-color-r2: #f4f8fc;
+@border-color-r3: #eee;
+@border-color-r4: #d9d9d9;
+@border-color-r5: #ccc;
+@border-color-r6: #EBEDF4;
+@border-color-r7: #555;
+@border-color-r8: #BEC5DB;
+@border-color-r9: #BBCDFF;
+
+@border-color-table: #e0e6f7;
+@border-color-loading: #7aa3ff;
+@border-color-radio: #c8c9cc;
+
+/** ---- 边框 一个很奇怪的颜色 暂时先抽出来保持原色 ---- */
+@border-color-alc: #aff2cd;
+
+/** ---- icon颜色 ---- */
+@icon-btn-upload-color: #747fa1;

package/src/components/ActionAlertIframe.vue

@@ -26,7 +26,7 @@
                 class="grzh-iframe"
                 :src="actionAlertIframe.template"
                 width="100%"
-                height="90%"
+                height="95%"
                 :scrolling="actionAlertIframe.scrolling"
                 frameborder="no"
                 border="0"
@@ -65,6 +65,7 @@ export default {
     },
     methods: {},
     mounted() {
+        this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
         this.tampId = 'iframeId++' + new Date().getTime();
         let tampUrl = this.actionAlertIframe.template;
         function GetRequest() {
@@ -87,34 +88,11 @@ export default {
           this.actionAlertIframe.template = this.actionAlertIframe.template  + "&iframeId=" + this.tampId
         }
         this.actionAlertIframe.template = this.actionAlertIframe.template.split("&").join("&")
-
-        // 监听回退事件
-        let _that = this;
-
-        (function () {
-            console.log(95, 'addEventListener window.onpopstate');
-            if (window.history && window.history.pushState) {
-                console.log(97, 'window.history && window.history.pushState');
-                window.onpopstate = function (e) {
-                    console.log(9999, 'window.onpopstate innner', e);
-                    if (_that.showAskFullScreen) {
-                        window.history.go(1);
-                    }
-                    // window.history.pushState('forward', null, '');
-                    // window.history.forward(1);
-                    _that.showAskFullScreen = false;
-                    if ( e && e.stopPropagation ) {
-                        console.log(105, 'e.stopPropagation');
-                        e.stopPropagation();
-                    }
-                };
-            }
-        })();
     },
 };
 </script>
 <style lang="less" scoped>
-// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+@import "../assets/less/variables.less";
 
 #action_alert_iframe {
     width: 100%;
@@ -130,7 +108,7 @@ export default {
     }
 
     .ask-full-screen{
-        background-color: white;
+        background-color: @background-color-light;
         position: fixed;
         top: 0;
         left: 0;
@@ -157,7 +135,7 @@ export default {
             height: 5px;
         }
         ::-webkit-scrollbar-thumb {
-            background-color: #999;
+            background-color: @font-primary-color-r1;
             -webkit-border-radius: 5px;
             border-radius: 5px;
         }

package/src/components/AiGuide.vue

@@ -16,7 +16,7 @@
                 <span v-html="aiGuide.content.description"></span>
             </div>
             <!-- 一级分类 -->
-            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options && aiGuide.content.options.length > 0" class="ig-types-f">
+            <div v-show="aiGuide.content.typesVisible" class="ig-types-f">
                 <span
                     v-for="(fType, fTypeIndex) in aiGuide.content.options"
                     :key="`f_${fTypeIndex}`"
@@ -31,7 +31,9 @@
                 >
             </div>
             <!-- 二级分类 -->
-           <div v-if="aiGuide.content.typesVisible && aiGuide.content.options[activeFirstTypeIndex] && aiGuide.content.options[activeFirstTypeIndex].types && aiGuide.content.options[activeFirstTypeIndex].types.length !== 0" class="ig-types-s">
+            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options[
+                        activeFirstTypeIndex
+                    ].types.length !== 0" class="ig-types-s">
                 <span
                     v-for="(sType, sTypeIndex) in aiGuide.content.options[
                         activeFirstTypeIndex
@@ -92,7 +94,7 @@
                     class="ig-types-list-cell"
                 >
                     <span>{{ intentCell.questionName }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
                 ></span>
             </div>
             <!-- 横向排版 -->
@@ -136,7 +138,7 @@
                     class="ig-types-list-cell"
                 >
                     <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
                 ></span>
             </div>
             <!-- 横向排版 -->
@@ -180,7 +182,7 @@
                     class="ig-types-list-cell"
                 >
                     <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><i class="el-icon-arrow-right"></i></span
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
                 ></span>
             </div>
             <div
@@ -188,7 +190,8 @@
                 class="ig-change-list"
             >
                 <span @click="changeIntellectGuide" class="ig-change-list-btn">
-                    <i class="el-icon-refresh">换一批</i></span
+                    <svg t="1720148246364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136175" width="16" height="16"><path d="M225.6 540.8C240 686.4 363.2 800 512 800c76.8 0 150.4-30.4 203.2-84.8 12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8c-64 65.6-153.6 104-248 104-184 0-336-142.4-350.4-323.2l-43.2 41.6c-12.8 12.8-33.6 11.2-44.8 0s-11.2-33.6 0-44.8l99.2-96c12.8-12.8 33.6-11.2 44.8 0l92.8 96c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6l-38.4-40zM800 497.6C792 345.6 665.6 224 512 224c-76.8 0-148.8 30.4-203.2 83.2-12.8 12.8-33.6 12.8-44.8 0-12.8-12.8-12.8-33.6 0-44.8 65.6-64 153.6-102.4 248-102.4 192 0 347.2 153.6 352 342.4l41.6-40c12.8-12.8 33.6-11.2 44.8 1.6 12.8 12.8 11.2 33.6-1.6 44.8l-94.4 89.6c-12.8 11.2-32 11.2-44.8 0l-97.6-96c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l43.2 40z" p-id="136176" fill="#366aff"></path></svg>
+                    {{$t('dragonCommon.refresh')}}</span
                 >
             </div>
         </div>
@@ -232,11 +235,11 @@ export default {
     beforeMount() {},
     mounted() {
         this.isMobile();
-        if (this.aiGuide.content.options[0] && this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types.length === 0) {
+        if (this.aiGuide.content.options[0].types.length === 0) {
             this.activeOtherObj = this.aiGuide.content.options[0];
         } else {
             this.activeSecondTypeIndex = 0;
-            this.activeOtherObj = this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types[0] ? this.aiGuide.content.options[0].types[0] : [];
+            this.activeOtherObj = this.aiGuide.content.options[0].types[0];
         }
     },
     methods: {
@@ -317,6 +320,8 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "../assets/less/variables.less";
+
 .ig-view-cli {
     // background: #fbfcfd;
     font-size: 0.9em;
@@ -347,27 +352,27 @@ export default {
             margin-left: 5px;
             margin-right: 5px;
             margin-top: 4px;
-            background: #ffffff;
-            border: 1px solid #e0e6f7;
+            background: @background-color-light;
+            border: 1px solid @border-color-table;
             border-radius: 1em;
-            color: #a3adc6;
+            color: @font-primary-color-r4;
             cursor: pointer;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             &:hover {
-                border: 1px solid #366aff;
-                color: #366aff;
+                border: 1px solid @border-color-primary;
+                color: @primary-color;
             }
             &-active {
-                background-color: #366aff;
-                border: 1px solid #366aff;
-                color: white;
+                background-color: @primary-color;
+                border: 1px solid @border-color-primary;
+                color: @font-primary-light-color;
             }
         }
         .ig-types-f-cell-active {
             &:hover {
-                color: white;
+                color: @font-primary-light-color;
             }
         }
     }
@@ -388,11 +393,11 @@ export default {
             text-overflow: ellipsis;
             white-space: nowrap;
             &:hover {
-                color: #366aff;
+                color: @font-primary-accent-color;
             }
             &-active {
-                border-bottom: 2px solid #366aff;
-                color: #366aff;
+                border-bottom: 2px solid @border-color-primary;
+                color: @font-primary-accent-color;
             }
         }
     }
@@ -407,9 +412,9 @@ export default {
             padding: 2px 8px;
             margin-right: 6px;
             margin-top: 4px;
-            color: #366aff;
-            background: #ffffff;
-            border: 1px solid #a1b9ff;
+            color: @font-primary-accent-color;
+            background: @background-color-light;
+            border: 1px solid @border-color-copy;
             border-radius: 5px;
             cursor: pointer;
         }
@@ -436,7 +441,7 @@ export default {
             overflow: hidden;
             display: flex;
             justify-content: space-between;
-            color: #366aff;
+            color: @font-primary-accent-color;
             cursor: pointer;
             align-items: center;
             text-align: left;
@@ -456,11 +461,13 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-        border-top: 1px solid #eeeeee;
+        border-top: 1px solid @border-color-r3;
         .ig-change-list-btn {
             font-weight: 600;
-            color: #366aff;
+            color: @font-primary-accent-color;
             cursor: pointer;
+            display: flex;
+            align-items: center;
         }
     }
 }