adjust ui

module/webui/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title data-i18n="title">Document</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="/styles.css" type="text/css">
     <link rel="stylesheet" type="text/css" href="/mmrl/insets.css" />
     <script type="module" crossorigin src="/index.js"></script>
@@ -16,13 +17,13 @@
     <div class="header-block"></div>
     <div class="header">
         <div id="title" data-i18n="title"></div>
-        <button id="help-button" class="help-button"><i class="fa fa-question-circle"></i></button>
+        <button id="help-button" class="help-button"><svg xmlns="http://www.w3.org/2000/svg" height="21px" viewBox="0 -1060 960 990" width="21px" fill="#6E6E6E"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></button>
         <div class="no-connection">
-            <img src="wifi-slash.svg" alt="No Connection Icon" class="wifi-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -920 960 960" width="20px" fill="#6E6E6E"><path d="M790-56 414-434q-47 11-87.5 33T254-346l-84-86q32-32 69-56t79-42l-90-90q-41 21-76.5 46.5T84-516L0-602q32-32 66.5-57.5T140-708l-84-84 56-56 736 736-58 56Zm-310-64q-42 0-71-29.5T380-220q0-42 29-71t71-29q42 0 71 29t29 71q0 41-29 70.5T480-120Zm236-238-29-29-29-29-144-144q81 8 151.5 41T790-432l-74 74Zm160-158q-77-77-178.5-120.5T480-680q-21 0-40.5 1.5T400-674L298-776q44-12 89.5-18t92.5-6q142 0 265 53t215 145l-84 86Z"/></svg>
         </div>
         <div class="language-dropdown">
             <button class="language-button">
-                <i class="fa fa-compass"></i>
+                <i class="material-icons">language</i>
             </button>
             <div class="language-menu">
                 <button class="language-option" data-lang="en-US">English</button>
@@ -49,7 +50,9 @@
     <!-- Menu Options -->
     <div class="search-menu-container">
         <div class="search-card">
-            <span class="search-icon"><i class="fa fa-search"></i></span>
+            <span class="search-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" height="19px" viewBox="0 -960 960 960" width="24px" fill="#6E6E6E"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
+            </span>
             <input type="text" class="search-input" id="search" placeholder="Search" data-i18n="search_placeholder">
             <button class="clear-btn" id="clear-btn">&#x2715;</button>
         </div>
@@ -125,7 +128,10 @@
                 <p data-i18n="disclaimer"></p>
                 <br>
                 <p>
-                    <span id="telegram" data-i18n="telegram_channel"></span><span id="github" data-i18n="github"></span>
+                    <div class="link">
+                        <i class="fa fa-telegram" id="telegram" aria-hidden="true"> <span id="link-text" data-i18n="telegram_channel"></span></i>
+                        <i class="fa fa-github" id="github" aria-hidden="true"> <span id="link-text" data-i18n="github"></span></i>
+                    </div>
                 </p>
                 <br>
                 <p data-i18n="acknowledgment"></p>
@@ -137,7 +143,7 @@
     <!-- Footer -->
     <div class="footer">
         <div class="uninstall-container hidden-uninstall">
-            <i class="fa fa-trash"></i>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
             <span data-i18n="uninstall_webui"></span>
         </div>
     </div>

module/webui/styles.css

@@ -45,17 +45,11 @@ body {
 }
 
 .no-connection {
-    padding-bottom: 2px;
+    padding: 0;
     display: none;
-    position: relative;
     margin-right: 0px;
-    color: #7E7E7E;
+    background: none;
-}
+    border: none;
-
-.no-connection .wifi-icon {
-    width: 22px;
-    height: 22px;
-    filter: invert(0.6) sepia(0) saturate(0) hue-rotate(180deg) brightness(0.8) contrast(1);
 }
 
 .language-dropdown {
@@ -64,10 +58,9 @@ body {
 }
 
 .language-button {
+    padding-top: 5px;
     background: none;
     border: none;
-    font-size: 23px;
-    color: #333;
 }
 
 .language-menu {
@@ -125,12 +118,10 @@ body {
 }
 
 .help-button {
+    padding-left: 5px;
     margin-right: auto;
     background: none;
     border: none;
-    font-size: 22px;
-    align-items: center;
-    justify-content: center;
 }
 
 .help-overlay {
@@ -361,25 +352,36 @@ body {
     font-size: 16px;
 }
 
+.link{
+    flex: 0 1 auto;
+}
+
 #telegram {
-    font-weight: bold;
+    font-size: 18px;
     padding: 5px 10px;
     background-color: #38A7ED;
     color: #fff;
     border-radius: 8px;
-    margin-right: 5px;
+    margin-right: 3px;
+    margin-bottom: 5px;
     transition: background-color 0.2s ease;
 }
 
 #github {
-    font-weight: bold;
+    font-size: 18px;
     padding: 5px 10px;
-    background-color: #1E1E1E;
+    background-color: #606060;
     color: #fff;
     border-radius: 8px;
+    margin-bottom: 5px;
     transition: background-color 0.2s ease;
 }
 
+#link-text {
+    font-size: 17px;
+    font-weight: bold;
+}
+
 .search-menu-container {
     display: flex;
     position: fixed;
@@ -410,8 +412,8 @@ body {
 
 .search-icon {
     position: absolute;
-    left: 18px;
+    padding-top: 5px;
-    font-size: 15px;
+    left: 15px;
     z-index: 1000;
 }
 
@@ -577,7 +579,7 @@ body {
 .card {
     background-color: white;
     border: none;
-    border-radius: 10px;
+    border-radius: 12px;
     margin: 0 auto;
     margin-bottom: 10px;
     outline: none;
@@ -734,8 +736,6 @@ body {
 
 .uninstall-container i {
     margin-right: 5px;
-    font-size: 18px;
-    color: #fff;
 }
 
 .uninstall-container span {
@@ -769,13 +769,13 @@ body {
 }
 
 #github:active {
-    background-color: #585858;
+    background-color: #4D4D4D;
 }
 
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #121212;
-        color: #eee;
+        color: #fff;
     }
     
     .header-block,

module/webui/wifi-slash.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.92,5.51h0L3.71,2.29A1,1,0,0,0,2.29,3.71L4.56,6A15.21,15.21,0,0,0,1.4,8.39a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.29A13.07,13.07,0,0,1,6.05,7.46L7.54,9a10.78,10.78,0,0,0-3.32,2.27,1,1,0,1,0,1.42,1.4,8.8,8.8,0,0,1,3.45-2.12l1.62,1.61a7.07,7.07,0,0,0-3.66,1.94,1,1,0,1,0,1.42,1.4A5,5,0,0,1,12,14a4.13,4.13,0,0,1,.63.05l7.66,7.66a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42ZM12,16a3,3,0,1,0,3,3A3,3,0,0,0,12,16Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,12,20ZM22.61,8.39A15,15,0,0,0,10.29,4.1a1,1,0,1,0,.22,2A13.07,13.07,0,0,1,21.2,9.81a1,1,0,0,0,1.41-1.42Zm-4.25,4.24a1,1,0,0,0,1.42-1.4,10.75,10.75,0,0,0-4.84-2.82,1,1,0,1,0-.52,1.92A8.94,8.94,0,0,1,18.36,12.63Z"/></svg>