From 5b20505515e22d3aefd5f1c5e85bba4268137f65 Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Wed, 6 Dec 2023 13:57:20 +0330
Subject: [PATCH] UI improvements (#708)

* Improved login page

* Improved login page

* Update inbound_client_table.html

* Update external_proxy.html

* Update custom.css
---
 web/assets/css/custom.css                    | 172 ++++++++++++++++++-
 web/html/login.html                          |  18 +-
 web/html/xui/form/stream/external_proxy.html |   4 +-
 web/html/xui/inbound_client_table.html       |   6 +-
 4 files changed, 186 insertions(+), 14 deletions(-)

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index bc20e563..ee511969 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -741,9 +741,27 @@ style attribute {
     border-right-color: #2C3950;
 }
 
+.has-warning .ant-input, .has-warning .ant-input:hover {
+    background-color: #fff6E6;
+    border-color: #ffd98c;
+}
+
+.has-warning .ant-input::placeholder {
+    color: #faad14;
+}
+
+.has-warning .ant-input:not([disabled]):hover {
+    border-color: #ffd98c;
+}
+
 .dark .has-warning .ant-input,
 .dark .has-warning .ant-input:hover {
-    border-color: #faad14;
+    border-color: #784e1d;
+    background: rgb(49, 35, 19);
+}
+
+.dark .has-warning .ant-input::placeholder {
+    color:rgb(255 160 49 / 70%);
 }
 
 .dark .has-warning .anticon {
@@ -811,3 +829,155 @@ li.ant-select-dropdown-menu-item:empty:after {
     font-weight:normal;
     color:rgb(0 0 0 / 25%);
 }
+
+.dark li.ant-select-dropdown-menu-item:empty:after {
+    content: "None";
+    font-weight:normal;
+    color:rgb(255 255 255 / 30%);
+}
+
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
+    color: rgba(0,0,0,.87)
+}
+
+.dark.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
+    color: rgb(255, 255, 255)
+}
+
+.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon {
+    color: #3c89e8
+}
+
+.ant-btn-primary-login {
+    color: #0e49b5;
+    background-color: #edf4fa;
+    border-color: #a9c5e7;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+    box-shadow: none;
+    width: 100%;
+}
+
+.ant-btn-primary-login:focus,
+.ant-btn-primary-login:hover {
+  color: #fff;
+  background-color: #0c3f9d;
+  border-color: #0e49b5;
+  background-image: linear-gradient(
+    270deg,
+    rgba(123, 199, 77, 0) 30%,
+    #2f67c2,
+    rgba(123, 199, 77, 0) 100%
+  );
+  background-repeat: no-repeat;
+  animation: ma-bg-move ease-in-out 5s infinite;
+  background-position-x: -500px;
+  width: 95%;
+  animation-delay: -.5s;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+}
+
+.ant-btn-primary-login.active, .ant-btn-primary-login:active {
+    color: #fff;
+    background-color: #04308f;
+    border-color: #04308f;
+}
+
+@keyframes ma-bg-move {
+    0% {
+      background-position: -500px 0;
+    }
+    50% {
+      background-position: 1000px 0;
+    }
+    100% {
+      background-position: 1000px 0;
+    }
+}
+
+.wave-btn-bg {
+    position: relative;
+    border-radius: 25px;
+    width: 100%;
+}
+
+.dark .wave-btn-bg {
+    color: #ffffff;
+    position: relative;
+    background: #0e49b5;
+    border: 2px double transparent;
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    background-size: 300%;
+    animation: wave-btn-tara 4s ease infinite;
+    transition: all 0.5s ease;
+    width: 100%;
+}
+
+.dark .wave-btn-bg-cl {
+    background-image: linear-gradient(rgb(13 14 33 / 0%), rgb(13 14 33 / 0%)), radial-gradient(circle at left top, #0e49b5, #387eff, #0e49b5) !important;
+    border-radius: 3em;
+}
+
+.dark .wave-btn-bg-cl:hover {
+    width:95%;
+}
+
+.dark .wave-btn-bg-cl:before {
+      position: absolute;
+      content: "";
+      top: -5px;
+      left: -5px;
+      bottom: -5px;
+      right: -5px;
+      z-index: -1;
+      background: inherit;
+      background-size: inherit;
+      border-radius: 4em;
+      opacity: 0;
+      transition: 0.5s;
+    }
+
+.dark .wave-btn-bg-cl:hover::before {
+      opacity: 1;
+      filter: blur(20px);
+      animation: wave-btn-tara 8s linear infinite;
+    }
+
+@keyframes wave-btn-tara {
+  to {
+    background-position: 300%;
+  }
+}
+
+.dark .ant-btn-primary-login {
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    background-image: linear-gradient(rgb(13 14 33 / 45%), rgb(13 14 33 / 35%));
+    border-radius: 2rem;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    height: 46px;
+    position: relative;
+    white-space: nowrap;
+    cursor: pointer;
+    touch-action: manipulation;
+    padding: 0 15px;
+    width: 100%;
+    animation:none;
+    background-position-x:0;
+    box-shadow: none;
+}
+
+.ant-input-number-focused, .ant-input-number:hover {
+    background-color: #edf4fa;
+}
+
+.ant-select-selection:hover {
+    background-color: #edf4fa;
+}
+
+.dark .ant-input-number-handler:active {
+    background: #0e49b5;
+}
diff --git a/web/html/login.html b/web/html/login.html
index bf5f242d..f4195dff 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -102,12 +102,12 @@
 <body>
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     <transition name="list" appear>
-        <a-layout-content class="under">
+        <a-layout-content class="under" style="min-height: 0;">
             <div class='wave'></div>
             <div class='wave wave2'></div>
             <div class='wave wave3'></div>
-            <a-row type="flex" justify="center" align="middle" style="height: 100%;">
-            <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="6" id="login">
+            <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
+            <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
             <a-row type="flex" justify="center">
                 <a-col>
                     <h1 class="title">{{ i18n "pages.login.title" }}</h1>
@@ -129,10 +129,12 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
-                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
-                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
-                                </a-button>
+                                <div class="wave-btn-bg wave-btn-bg-cl">
+                                    <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                              :style="loading ? { width: '50px' } : { display: 'inline-block' }">
+                                        [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                    </a-button>
+                                </div>
                             </a-row>
                         </a-form-item>
                         <a-form-item>
@@ -201,4 +203,4 @@
     });
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/web/html/xui/form/stream/external_proxy.html b/web/html/xui/form/stream/external_proxy.html
index fdb7d6df..bb80070c 100644
--- a/web/html/xui/form/stream/external_proxy.html
+++ b/web/html/xui/form/stream/external_proxy.html
@@ -5,7 +5,7 @@
     <a-switch v-model="externalProxy"></a-switch>
     <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
     </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="externalProxy">
+    <table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
         <tr style="line-height: 40px;">
             <td width="100%">
                 <a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
@@ -29,4 +29,4 @@
         </tr>
     </table>
 </a-form>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index bd981f8b..9f56ca46 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -20,7 +20,7 @@
             ok-text='{{ i18n "reset"}}'
             cancel-text='{{ i18n "cancel"}}'>
             <a-icon slot="icon" type="question-circle-o" style="color: blue"></a-icon>
-            <a-icon style="font-size: 24px;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
+            <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
         </a-popconfirm>
     </a-tooltip>
     <a-tooltip>
@@ -32,7 +32,7 @@
             ok-type="danger"
             cancel-text='{{ i18n "cancel"}}'>
             <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
-            <a-icon style="font-size: 24px" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
+            <a-icon style="font-size: 24px; cursor: pointer;" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
         </a-popconfirm>
     </a-tooltip>
 </template>
@@ -265,4 +265,4 @@
         </a-badge>
     </a-popover>
 </template>
-{{end}}
\ No newline at end of file
+{{end}}