Add new CSS, JS, and icon assets to rustfs-gui (#221)

* Add new CSS, JS, and icon assets to rustfs-gui

- Add `navbar.css` for styling the navigation bar.
- Add `sts.js` for handling tab switching and password toggling.
- Include new icon assets in `assets/icons` directory.
- Update `Dioxus.toml` to reference new assets.

* Remove unused icons from dioxus.toml

- Remove `assets/icons/icon_*.png` from the icon list.

cli/rustfs-gui/Dioxus.toml

@@ -36,16 +36,6 @@ category = "Utility"
 copyright = "Copyright 2025 rustfs.com"
 
 icon = [
-    "assets/icons/icon_16x16.png",
-    "assets/icons/icon_16x16@2x.png",
-    "assets/icons/icon_32x32.png",
-    "assets/icons/icon_32x32@2x.png",
-    "assets/icons/icon_128x128.png",
-    "assets/icons/icon_128x128@2x.png",
-    "assets/icons/icon_256x256.png",
-    "assets/icons/icon_256x256@2x.png",
-    "assets/icons/icon_512x512.png",
-    "assets/icons/icon_512x512@2x.png",
     "assets/icons/icon.icns",
     "assets/icons/icon.ico"
 ]

cli/rustfs-gui/assets/js/sts.js

@@ -0,0 +1,32 @@
+window.switchTab = function (tabId) {
+    // Hide everything
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.add('hidden');
+    });
+
+    // Reset all label styles
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+        btn.classList.remove('border-b-2', 'border-black');
+        btn.classList.add('text-gray-500');
+    });
+
+    // Displays the selected content
+    const activeContent = document.getElementById(tabId);
+    if (activeContent) {
+        activeContent.classList.remove('hidden');
+    }
+
+    // Updates the selected label style
+    const activeBtn = document.querySelector(`[data-tab="${tabId}"]`);
+    if (activeBtn) {
+        activeBtn.classList.add('border-b-2', 'border-black');
+        activeBtn.classList.remove('text-gray-500');
+    }
+};
+
+window.togglePassword = function (button) {
+    const input = button.parentElement.querySelector('input[type="password"], input[type="text"]');
+    if (input) {
+        input.type = input.type === 'password' ? 'text' : 'password';
+    }
+};

cli/rustfs-gui/assets/rustfs-logo.svg

@@ -0,0 +1,15 @@
+<svg width="1558" height="260" viewBox="0 0 1558 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_3)">
+<path d="M1288.5 112.905H1159.75V58.4404H1262L1270 0L1074 0V260H1159.75V162.997H1296.95L1288.5 112.905Z" fill="#0196D0"/>
+<path d="M1058.62 58.4404V0H789V58.4404H881.133V260H966.885V58.4404H1058.62Z" fill="#0196D0"/>
+<path d="M521 179.102V0L454.973 15V161C454.973 181.124 452.084 193.146 443.5 202C434.916 211.257 419.318 214.5 400.5 214.5C381.022 214.5 366.744 210.854 357.5 202C348.916 193.548 346.357 175.721 346.357 156V0L280 15V175.48C280 208.08 290.234 229.412 309.712 241.486C329.19 253.56 358.903 260 400.5 260C440.447 260 470.159 253.56 490.297 241.486C510.766 229.412 521 208.483 521 179.102Z" fill="#0196D0"/>
+<path d="M172.84 84.2813C172.84 97.7982 168.249 107.737 158.41 113.303C149.883 118.471 137.092 121.254 120.693 122.049V162.997C129.876 163.792 138.076 166.177 144.307 176.514L184.647 260H265L225.316 180.489C213.181 155.046 201.374 149.48 178.744 143.517C212.197 138.349 241.386 118.471 241.386 73.1499C241.386 53.2722 233.843 30.2141 218.756 17.8899C203.998 5.56575 183.991 0 159.394 0H120.693V48.5015H127.58C142.23 48.5015 153.6 51.4169 161.689 57.2477C169.233 62.8135 172.84 71.5596 172.84 84.2813ZM120.693 122.049C119.163 122.049 117.741 122.049 116.43 122.049H68.5457V48.5015H120.693V0H0V260H70.5137V162.997H110.526C113.806 162.997 117.741 162.997 120.693 162.997V122.049Z" fill="#0196D0"/>
+<path d="M774 179.297C774 160.829 766.671 144.669 752.013 131.972C738.127 119.66 712.025 110.169 673.708 103.5C662.136 101.191 651.722 99.6523 643.235 97.3437C586.532 84.6467 594.632 52.7118 650.564 52.7118C680.651 52.7118 709.582 61.946 738.127 66.9478C742.37 67.7174 743.913 68.1021 744.298 68.1021L750.47 12.697C720.383 3.46282 684.895 0 654.036 0C616.619 0 587.689 6.54088 567.245 19.2379C546.801 31.9349 536 57.7137 536 82.3382C536 103.5 543.715 119.66 559.916 131.972C575.731 143.515 604.276 152.749 645.55 160.059C658.279 162.368 668.694 163.907 676.794 166.215C685.023 168.524 691.066 170.704 694.924 172.756C702.253 176.604 706.11 182.375 706.11 188.531C706.11 196.611 701.481 202.767 692.224 207C664.836 220.081 587.689 212.001 556.83 198.15L543.715 247.784C547.186 248.169 552.972 249.323 559.916 250.477C616.619 259.327 690.681 270.869 741.212 238.935C762.814 225.468 774 206.23 774 179.297Z" fill="#0196D0"/>
+<path d="M1558 179.568C1558 160.383 1550.42 144.268 1535.67 131.99C1521.32 119.968 1494.34 110.631 1454.74 103.981C1442.38 101.679 1432.01 99.3764 1422.84 97.8416C1422.44 97.8416 1422.04 97.8416 1422.04 97.4579V112.422L1361.04 75.2038L1422.04 38.3692V52.9496C1424.7 52.9496 1427.49 52.9496 1430.41 52.9496C1461.51 52.9496 1491.42 62.5419 1521.32 67.5299C1525.31 67.9136 1526.9 67.9136 1527.3 67.9136L1533.68 12.6619C1502.98 3.83692 1465.9 0 1434 0C1395.33 0 1365.43 6.52277 1345.09 19.5683C1323.16 32.6139 1312 57.9376 1312 82.8776C1312 103.981 1320.37 120.096 1336.72 131.607C1353.46 143.885 1382.97 153.093 1425.23 160.383C1434 161.535 1441.18 162.686 1447.56 164.22L1448.36 150.791L1507.36 190.312L1445.57 224.844L1445.96 212.949C1409.68 215.635 1357.45 209.112 1333.53 197.985L1320.37 247.482C1323.56 248.249 1329.54 248.633 1336.72 250.551C1395.33 259.376 1471.88 270.887 1524.11 238.657C1546.84 225.611 1558 205.659 1558 179.568Z" fill="#0196D0"/>
+</g>
+<defs>
+<clipPath id="clip0_0_3">
+<rect width="1558" height="260" fill="white"/>
+</clipPath>
+</defs>
+</svg>

cli/rustfs-gui/assets/styling/navbar.css

@@ -0,0 +1,16 @@
+#navbar {
+  display: flex;
+  flex-direction: row;
+}
+
+#navbar a {
+  color: #ffffff;
+  margin-right: 20px;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+#navbar a:hover {
+  cursor: pointer;
+  color: #ffffff; // #91a4d2;
+}