From a4c5b1dd98337c6979fff4ed0f36e8cf12b0e06e Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Fri, 11 Jul 2025 13:01:45 +0700
Subject: [PATCH] refactor: Update button styles and layout in ServerManager
 for improved accessibility and visual consistency

---
 frontend/src/ServerManager.jsx | 76 ++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/frontend/src/ServerManager.jsx b/frontend/src/ServerManager.jsx
index e71449d..f861b69 100644
--- a/frontend/src/ServerManager.jsx
+++ b/frontend/src/ServerManager.jsx
@@ -398,38 +398,29 @@ function ServerManager() {
       <div className="d-flex flex-wrap gap-2 mb-3 align-items-center">
         <button 
           type="button" 
-          className="btn btn-primary"
+          className="btn btn-primary d-flex align-items-center"
           onClick={handleOpenAddServerModal}
         >
-          <IconPlus className="icon me-2" />
-          Добавить новый сервер
+          <span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
+          <span className="fw-bold">Добавить</span>
         </button>
         <button 
           type="button" 
-          className="btn btn-success"
+          className="btn btn-outline-primary d-flex align-items-center"
           onClick={handleSaveChanges}
           disabled={loading}
         >
-          {loading ? (
-            <>
-              <IconRefresh className="icon me-2 spin" />
-              Сохранение...
-            </>
-          ) : (
-            <>
-              <IconDatabase className="icon me-2" />
-              Сохранить в S3
-            </>
-          )}
+          <span className="me-2 d-flex align-items-center"><IconDatabase className={loading ? 'spin' : ''} /></span>
+          <span className="fw-bold">Сохранить</span>
         </button>
         <button 
           type="button" 
-          className="btn btn-outline-primary"
+          className="btn btn-outline-primary d-flex align-items-center"
           onClick={exportAllLinks}
           disabled={servers.length === 0}
         >
-          <IconDownload className="icon me-2" />
-          Экспорт всех ссылок (CSV)
+          <span className="me-2 d-flex align-items-center"><IconDownload className="icon" /></span>
+          <span className="fw-bold">Экспорт</span>
         </button>
       </div>
 
@@ -524,7 +515,7 @@ function ServerManager() {
                   )}
                 </th>
                 <th className="text-center">Статус</th>
-                <th className="text-end" style={{ minWidth: 140 }}>Действия</th>
+                <th className="text-end w-1" style={{ minWidth: 140 }}></th>
               </tr>
             </thead>
             <tbody>
@@ -543,15 +534,15 @@ function ServerManager() {
                   <td className="text-center">
                     <span className="badge bg-success-lt text-success">Онлайн</span>
                   </td>
-                  <td className="text-end" style={{ minWidth: 140 }}>
+                  <td className="text-end w-1" style={{ minWidth: 140 }}>
                     <div className="btn-list gap-1 mb-0">
-                      <button className="btn btn-icon btn-sm btn-outline-primary" title="Ссылка" onClick={() => handleGenerateLink(server)} onContextMenu={(e) => { e.preventDefault(); quickCopyLink(server); }}>
+                      <button className="btn btn-icon btn-sm btn-outline-primary rounded" title="Ссылка" onClick={() => handleGenerateLink(server)} onContextMenu={(e) => { e.preventDefault(); quickCopyLink(server); }}>
                         <IconLink size={18} />
                       </button>
-                      <button className="btn btn-icon btn-sm btn-outline-secondary" title="Редактировать" onClick={() => handleEdit(server)}>
+                      <button className="btn btn-icon btn-sm btn-outline-secondary rounded" title="Редактировать" onClick={() => handleEdit(server)}>
                         <IconEdit size={18} />
                       </button>
-                      <button className="btn btn-icon btn-sm btn-outline-danger" title="Удалить" onClick={() => confirmDelete(server)}>
+                      <button className="btn btn-icon btn-sm btn-outline-danger rounded" title="Удалить" onClick={() => confirmDelete(server)}>
                         <IconTrash size={18} />
                       </button>
                     </div>
@@ -697,8 +688,12 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
             </form>
           </div>
           <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
-            <button type="button" className="btn btn-primary" onClick={() => onSave && onSave(localServer)}>Сохранить</button>
+            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
+              <span className="fw-bold">Отмена</span>
+            </button>
+            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={() => onSave && onSave(localServer)}>
+              <span className="fw-bold">Сохранить</span>
+            </button>
           </div>
         </div>
       </div>
@@ -742,8 +737,12 @@ function DeleteServerModal({ show, server, onDelete, onClose }) {
             <p className="text-muted">Это действие нельзя отменить.</p>
           </div>
           <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
-            <button type="button" className="btn btn-danger" onClick={onDelete}>Удалить</button>
+            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
+              <span className="fw-bold">Отмена</span>
+            </button>
+            <button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
+              <span className="fw-bold">Удалить</span>
+            </button>
           </div>
         </div>
       </div>
@@ -904,19 +903,24 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
                   style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
                 />
                 <button
-                  className="btn btn-outline-secondary"
+                  className="btn btn-outline-secondary d-flex align-items-center"
                   type="button"
                   onClick={() => onCopyToClipboard(generatedUrl)}
                   title="Копировать в буфер обмена"
                 >
-                  <IconDownload size={18} />
+                  <span className="me-2 d-flex align-items-center"><IconDownload size={18} /></span>
+                  <span className="fw-bold">Копировать</span>
                 </button>
               </div>
             </div>
           </div>
           <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
-            <button type="button" className="btn btn-primary" onClick={handleSaveSettings}>Сохранить настройки</button>
+            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
+              <span className="fw-bold">Закрыть</span>
+            </button>
+            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={handleSaveSettings}>
+              <span className="fw-bold">Сохранить настройки</span>
+            </button>
           </div>
         </div>
       </div>
@@ -1072,10 +1076,12 @@ function AddServerModal({ show, newServer, customProvider, onNewServerChange, on
             </form>
           </div>
           <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
-            <button type="button" className="btn btn-primary" onClick={onAddServer}>
-              <IconPlus className="icon me-2" />
-              Добавить сервер
+            <button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
+              <span className="fw-bold">Отмена</span>
+            </button>
+            <button type="button" className="btn btn-primary d-flex align-items-center" onClick={onAddServer}>
+              <span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
+              <span className="fw-bold">Добавить сервер</span>
             </button>
           </div>
         </div>