изменение стилей

src/pages/Config.svelte

@@ -257,7 +257,7 @@
                         </td>
                         {#if element[key] != "nil"}
                           <td class="tbl-bdy-sm text-center">
-                            <input bind:value={element[key]} class="ipt-sm w-full" type="text" />
+                            <input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
                           </td>
                         {/if}
                       {:else}
@@ -265,7 +265,7 @@
                           <p class="txt-ita">{key}</p>
                         </td>
                         <td class="tbl-bdy-sm text-center">
-                          <input bind:value={element[key]} class="ipt-sm w-full" type="text" />
+                          <input bind:value={element[key]} class="ipt-sm w-full text-sm" type="text" />
                         </td>
                       {/if}
                     </tr>

src/pages/Connection.svelte

@@ -18,36 +18,33 @@
   <div class="my-4">
     <div class="grd-2col1">
       <Card title="Подключение к WiFi">
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+        <div class="grid grid-cols-2 gap-2">
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Название устройства</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.name} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.name} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Точка доступа</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.apssid} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.apssid} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Пароль точки доступа</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.appass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.appass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Название wifi сети</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <select class="ipt-rnd text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
+          <div class="flex justify-end w-full">
+            <select class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" bind:value={settingsJson.routerssid} on:click={() => ssidClick()}>
               {#each Object.entries(ssidJson) as [num, ssid]}
                 <option value={ssid}>
                   {ssid}
@@ -55,21 +52,19 @@
               {/each}
             </select>
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Пароль</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.routerpass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.routerpass} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Сервер обновления</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.serverip} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.serverip} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
         </div>
         {#if errorsJson.passer === 1}
@@ -82,13 +77,13 @@
       </Card>
 
       <Card title="Подключение к MQTT">
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+        <div class="grid grid-cols-2 gap-2">
+          <div class="w-full">
             <p class="wgt-dscr-stl text-gray-500 truncate">Состояние подключения</p>
           </div>
-          <div class="flex justify-center w-3/6 align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base break-words">
+          <div class="flex justify-center w-full align-baseline text-sm sm:text-sm md:text-base lg:text-base xl:text-base 2xl:text-base truncate align-text-middle">
             {#if errorsJson.mqtt === "e5"}
-              <p class="text-green-500 font-bold h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p>
+              <p class="text-green-500 font-bold m-0 p-0 h-8 bg-green-50 border-2 border-gray-200 rounded w-full text-center">Подключено</p>
             {:else if errorsJson.mqtt === "e13"}
               <p class="text-yellow-500 font-bold h-8 bg-yellow-50 border-2 border-gray-200 rounded w-full text-center">Подключение</p>
             {:else if errorsJson.mqtt === undefined}
@@ -97,45 +92,40 @@
               <p class="text-red-500 font-bold h-8 bg-red-50 border-2 border-gray-200 rounded w-full text-center">Ошибка</p>
             {/if}
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Название сервера</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.mqttServer} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttServer} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Порт</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.mqttPort} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPort} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Префикс</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.mqttPrefix} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPrefix} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Имя пользователя</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.mqttUser} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttUser} class="content-center px-2 h-8 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
-        </div>
-        <div class="crd-itm-psn">
-          <div class="w-4/6">
+
+          <div class="w-full">
             <p class="wgt-dscr-stl truncate">Пароль</p>
           </div>
-          <div class="flex justify-end w-3/6">
-            <input bind:value={settingsJson.mqttPass} class="ipt-rnd text-left focus:border-indigo-500" type="text" />
+          <div class="flex justify-end w-full">
+            <input bind:value={settingsJson.mqttPass} class="content-center px-2 h-8 mb-4 bg-gray-50 border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-left focus:border-indigo-500" type="text" />
           </div>
         </div>
         <button class="btn-lg" on:click={() => saveMqtt()}>{"Сохранить"}</button>

src/pages/Dashboard.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { onMount } from "svelte";
   import Card from "../components/Card.svelte";
   import Input from "../widgets/Input.svelte";
   import Range from "../widgets/Range.svelte";
@@ -8,8 +7,6 @@
   import Anydata from "../widgets/Anydata.svelte";
   import Alarm from "../components/Alarm.svelte";
 
-  onMount(async () => {});
-
   export let layoutJson;
 
   $: layoutJson.length, timeOut();