restyling for navbar

src/lib/ui-components/navbar.svelte

@@ -1,19 +1,25 @@
 <script>
-// @ts-nocheck
+  // @ts-nocheck
-
 
   import { getAuthInfo, saveAuthInfo } from "$lib/auth/Auth";
   import { AuthStorage } from "$lib/tools/storages/auth-storage";
   import { redirect } from "$lib/tools/url/URLTools";
   import { jwtDecode } from "jwt-decode";
+  import { ChevronRightIcon } from "svelte-feather-icons";
 
   let showMenu = false;
-
 </script>
+
 <div class="navbar bg-base-100">
   <div class="navbar-start">
     <div class="dropdown">
-      <button on:click={()=>{showMenu = !showMenu;}} tabindex="0" class="btn btn-ghost lg:hidden">
+      <button
+        on:click={() => {
+          showMenu = !showMenu;
+        }}
+        tabindex="0"
+        class="btn btn-ghost lg:hidden"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="h-5 w-5"
@@ -31,9 +37,11 @@
       </button>
     </div>
     <a href="/admin/" class="btn btn-ghost text-xl">HostaPay</a>
-    <p class="text-sm ml-1 mt-2">{jwtDecode(getAuthInfo()?.a)?.role == "4" ? "Admin":"Moder"}</p>
+    <p class="text-sm ml-1 mt-2">
+      {jwtDecode(getAuthInfo()?.a)?.role == "4" ? "Admin" : "Moder"}
+    </p>
   </div>
-  <div class="navbar-center hidden lg:flex">
+  <div class="navbar-center hidden lg:flex font-semibold">
     <ul class="menu menu-horizontal px-1">
       <li>
         <a href="/admin/userslist">Пользователи</a>
@@ -54,34 +62,159 @@
     </ul>
   </div>
   <div class="navbar-end">
-    <button on:click={()=>{
+    <button
+      on:click={() => {
         saveAuthInfo("");
-      AuthStorage.update((s)=>{
+        AuthStorage.update((s) => {
           s.logged = false;
         });
         redirect("/admin/login");
-    }} class="btn btn-error btn-outline">Выход</button>
+      }}
+      class="btn btn-error btn-outline">Выход</button
+    >
   </div>
 </div>
 
-<div class={"fixed inset-0 top-16 z-50 flex flex-col items-center justify-center bg-base-100 transition-all duration-150 lg:hidden " + (showMenu ? "":"-translate-x-full")}>
+<div
+  class={"fixed inset-0 top-16 z-50 px-5 flex flex-col items-center justify-center bg-base-100 transition-all duration-150 lg:hidden " +
+    (showMenu ? "" : "-translate-x-full")}
+>
   <ul
-        class="menu menu-sm dropdown-content bg-base-300 rounded-box w-52 p-2 shadow"
+    class="menu menu-sm dropdown-content bg-base-300 rounded-box py-5 p-2 shadow w-full font-semibold"
   >
-        <li>
+    <li class="relative">
-          <a on:click={()=>{showMenu = false;}} href="/admin/userslist">Пользователи</a>
+      <a
+        class="text-lg"
+        on:click={() => {
+          showMenu = false;
+        }}
+        href="/admin/userslist">Пользователи</a
+      >
+      <div class="absolute right-0 top-[2px] pointer-events-none">
+        <ChevronRightIcon />
+      </div>
     </li>
-        <li>
+    <div
-          <a on:click={()=>{showMenu = false;}} href="/admin/newuser">Добавить пользователя</a>
+      class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+    ></div>
+    <li class="relative">
+      <a
+        class="text-lg"
+        on:click={() => {
+          showMenu = false;
+        }}
+        href="/admin/newuser">Добавить пользователя</a
+      >
+      <div class="absolute right-0 top-[2px] pointer-events-none">
+        <ChevronRightIcon />
+      </div>
+    </li>
+    <div
+      class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+    ></div>
+    <li class="relative">
+      <a
+        class="text-lg"
+        on:click={() => {
+          showMenu = false;
+        }}
+        href="/admin/disputes">Споры</a
+      >
+      <div class="absolute right-0 top-[2px] pointer-events-none">
+        <ChevronRightIcon />
+      </div>
+    </li>
+    <div
+      class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+    ></div>
+    <li class="relative">
+      <a
+        class="text-lg"
+        on:click={() => {
+          showMenu = false;
+        }}
+        href="/admin/payouts">Выплаты</a
+      >
+      <div class="absolute right-0 top-[2px] pointer-events-none">
+        <ChevronRightIcon />
+      </div>
+    </li>
+    <div
+      class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+    ></div>
+    <li class="relative">
+      <a
+        class="text-lg"
+        on:click={() => {
+          showMenu = false;
+        }}
+        href="/admin/orders">Заявки</a
+      >
+      <div class="absolute right-0 top-[2px] pointer-events-none">
+        <ChevronRightIcon />
+      </div>
     </li>
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/disputes">Споры</a></li>
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/payouts">Выплаты</a></li>
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/orders">Заявки</a></li>
     {#if jwtDecode(getAuthInfo()?.a)?.role == "4"}
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/merchants">Мерчанты</a></li>
+      <div
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/currencies">Валюты</a></li>
+        class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/sms">СМС</a></li>
+      ></div>
-        <li><a on:click={()=>{showMenu = false;}} href="/admin/withdrawals">Вывод средств</a></li>
+      <li class="relative">
+        <a
+          class="text-lg"
+          on:click={() => {
+            showMenu = false;
+          }}
+          href="/admin/merchants">Мерчанты</a
+        >
+        <div class="absolute right-0 top-[2px] pointer-events-none">
+          <ChevronRightIcon />
+        </div>
+      </li>
+      <div
+        class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+      ></div>
+      <li class="relative">
+        <a
+          class="text-lg"
+          on:click={() => {
+            showMenu = false;
+          }}
+          href="/admin/currencies">Валюты</a
+        >
+        <div class="absolute right-0 top-[2px] pointer-events-none">
+          <ChevronRightIcon />
+        </div>
+      </li>
+      <div
+        class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+      ></div>
+      <li class="relative">
+        <a
+          class="text-lg"
+          on:click={() => {
+            showMenu = false;
+          }}
+          href="/admin/sms">СМС</a
+        >
+        <div class="absolute right-0 top-[2px] pointer-events-none">
+          <ChevronRightIcon />
+        </div>
+      </li>
+      <div
+        class="h-[1px] w-full bg-neutral flex-shrink-0 opacity-50 my-[5px]"
+      ></div>
+      <li class="relative">
+        <a
+          class="text-lg"
+          on:click={() => {
+            showMenu = false;
+          }}
+          href="/admin/withdrawals">Вывод средств</a
+        >
+        <div class="absolute right-0 top-[2px] pointer-events-none">
+          <ChevronRightIcon />
+        </div>
+      </li>
     {/if}
   </ul>
 </div>

src/routes/+error.svelte

@@ -14,7 +14,7 @@
 <div class="w-full flex flex-col justify-center items-center">
   <span class="loading loading-lg"></span>
   {#if showError}
-    <p class="text-error font-medium">
+    <p class="text-error font-medium text-center mt-5">
       Возможно, данной страницы просто не существует
     </p>
   {/if}

src/routes/payouts/+page.svelte

@@ -12,6 +12,7 @@
   import { redirect } from "$lib/tools/url/URLTools";
   import axios from "axios";
   import { isStringEmptyOrSpaces } from "$lib/tools/strings/Strings";
+  import { SearchIcon } from "svelte-feather-icons";
 
   const payoutsStatusMap = {
     "0": "Открыта",
@@ -411,7 +412,17 @@
     <h1 class="text-2xl font-semibold">Выплаты</h1>
   </div>
   <div class="w-full flex flex-col bg-base-300 p-4 rounded-box">
-    <div class="flex p-4">
+    <div class="flex flex-col p-4 gap-2.5">
+      <div class="flex gap-2.5">
+        <input
+          type="text"
+          class="input max-w-full w-full"
+          placeholder="UUID или Реквизит"
+        />
+        <button class="btn btn-neutral">
+          <SearchIcon />
+        </button>
+      </div>
       <select
         on:change={(e) => {
           currentPayoutsFilter = Number(e.target.value);