From 660e5ad101e41dffa94c5775491108f359cd8359 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Wed, 21 Feb 2024 15:32:18 +0330
Subject: [PATCH] [dark] change message by theme

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
---
 web/assets/css/custom.css               |  6 ++++++
 web/html/common/head.html               |  1 +
 web/html/xui/component/themeSwitch.html |  5 +++++
 web/html/xui/settings.html              | 22 +++++++++++-----------
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index c41bcc16..8eb5037f 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1050,6 +1050,12 @@ li.ant-select-dropdown-menu-item:empty:after {
     color: rgba(255, 255, 255, 0.25);
 }
 
+.dark .ant-message-notice-content {
+    background-color: #222d42;
+    border: 1px solid #2c3950; 
+    color: rgba(255, 255, 255, 0.65);
+}
+
 .ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
     :last-child
   ),
diff --git a/web/html/common/head.html b/web/html/common/head.html
index 6ae7247c..9d7919b6 100644
--- a/web/html/common/head.html
+++ b/web/html/common/head.html
@@ -38,4 +38,5 @@
     </style>
     <title>{{ .host }}-{{ i18n .title}}</title>
 </head>
+<div id="message"></div>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 3bc1ad7d..9ca080d9 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -21,6 +21,7 @@
         this.isDarkTheme = !this.isDarkTheme;
         localStorage.setItem('dark-mode', this.isDarkTheme);
         document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
+        document.getElementById('message').className = themeSwitcher.currentTheme;
       },
     };
   }
@@ -31,6 +32,10 @@
     props: [],
     template: `{{template "component/themeSwitchTemplate"}}`,
     data: () => ({ themeSwitcher }),
+    mounted() {
+      this.$message.config({getContainer: () => document.getElementById('message')});
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
   });
 </script>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index c6edc506..62c53379 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -95,23 +95,23 @@
                         </a-alert>
                     </transition>
                 <a-space direction="vertical">
-                    <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
-                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
-                            <a-col :xs="24" :sm="10" style="padding: 4px;">
+                    <a-card hoverable style="margin-bottom: .5rem;">
+                        <a-row>
+                            <a-col :xs="24" :sm="8" style="padding: 4px;">
                                 <a-space direction="horizontal">
                                     <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
                                     <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
                                 </a-space>
                             </a-col>
                             <a-col :xs="24" :sm="16">
-                                        <template>
-                                            <div>
-                                                <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
-                                                </a-back-top>
-                                                <a-alert type="warning" style="float: right; width: fit-content"
-                                                message='{{ i18n "pages.settings.infoDesc" }}'
-                                                show-icon
-                                                >
+                                <template>
+                                    <div>
+                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
+                                        </a-back-top>
+                                        <a-alert type="warning" style="float: right; width: fit-content"
+                                        message='{{ i18n "pages.settings.infoDesc" }}'
+                                        show-icon
+                                        >
                                     </div>
                                 </template>
                             </a-col>