refactor(MikrotikTools): update UI text and layout for server check functionality, enhancing user experience

frontend/src/MikrotikTools.jsx

@@ -216,25 +216,25 @@ function MikrotikTools() {
         <div className="card-header">
           <div className="row align-items-center g-2">
             <div className="col">
-              <h3 className="card-title mb-1">Сервер для трассировки</h3>
+              <h3 className="card-title mb-1">Сервер для проверки</h3>
               <div className="text-muted small">
                 Доступно Jumphost-серверов: {jumphostServers.length}.{' '}
                 {serverId
                   ? 'Кликните по другой карточке, чтобы сменить сервер.'
-                  : 'Выберите сервер, чтобы выполнять трассировку через него.'}
+                  : 'Выберите сервер, чтобы выполнять проверки через него.'}
               </div>
             </div>
-            <div className="col-auto">
+            <div className="col-auto" style={{ minWidth: 260 }}>
-              <div className="input-icon" style={{ minWidth: 240 }}>
+              <div className="input-group input-group-flat">
                 <input
                   type="text"
-                  className="form-control form-control-sm"
+                  className="form-control"
                   placeholder="Поиск серверов по IP, DNS, провайдеру..."
                   value={serverSearch}
                   onChange={(e) => setServerSearch(e.target.value)}
                 />
-                <span className="input-icon-addon">
+                <span className="input-group-text">
-                  <IconSearch size={16} />
+                  <IconSearch size={16} className="text-muted" />
                 </span>
               </div>
             </div>
@@ -304,23 +304,27 @@ function MikrotikTools() {
         <div className="col-md-4">
           <div className="card">
             <div className="card-header">
-              <div className="d-flex align-items-center justify-content-between">
+              <div className="row align-items-center g-2">
-                <h3 className="card-title mb-0">Параметры проверки</h3>
+                <div className="col">
-                <div className="btn-group btn-group-sm" role="group" aria-label="Тип проверки">
+                  <h3 className="card-title mb-0">Параметры проверки</h3>
-                  <button
+                </div>
-                    type="button"
+                <div className="col-auto">
-                    className={`btn ${mode === 'traceroute' ? 'btn-primary' : 'btn-outline-primary'}`}
+                  <div className="btn-group btn-group-sm" role="group" aria-label="Тип проверки">
-                    onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                    <button
-                  >
+                      type="button"
-                    Traceroute
+                      className={`btn ${mode === 'traceroute' ? 'btn-secondary' : 'btn-outline-secondary'}`}
-                  </button>
+                      onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
-                  <button
+                    >
-                    type="button"
+                      Traceroute
-                    className={`btn ${mode === 'ping' ? 'btn-primary' : 'btn-outline-primary'}`}
+                    </button>
-                    onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                    <button
-                  >
+                      type="button"
-                    Ping
+                      className={`btn ${mode === 'ping' ? 'btn-secondary' : 'btn-outline-secondary'}`}
-                  </button>
+                      onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                    >
+                      Ping
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>