Мультиязночность + причесывание css

frontend/src/routes/migration/+page.svelte

@@ -21,6 +21,8 @@
   import { selectedTask } from '../../lib/stores.js';
   import { resumeTask } from '../../services/taskService.js';
   import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard';
+  import { t } from '$lib/i18n';
+  import { Button, Card, PageHeader } from '$lib/ui';
   // [/SECTION]
 
   // [SECTION: STATE]
@@ -294,19 +296,18 @@
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="max-w-4xl mx-auto p-6">
-  <h1 class="text-2xl font-bold mb-6">Migration Dashboard</h1>
+  <PageHeader title={$t.nav.migration} />
   
   <TaskHistory on:viewLogs={handleViewLogs} />
 
   {#if $selectedTask}
     <div class="mt-6">
       <TaskRunner />
-      <button
-        on:click={() => selectedTask.set(null)}
-        class="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-      >
-        Back to New Migration
-      </button>
+      <div class="mt-4">
+        <Button variant="secondary" on:click={() => selectedTask.set(null)}>
+          {$t.common.cancel}
+        </Button>
+      </div>
     </div>
   {:else}
     {#if loading}
@@ -383,13 +384,12 @@
       </div>
     {/if}
 
-    <button
+    <Button
       on:click={startMigration}
       disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0}
-      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
     >
       Start Migration
-    </button>
+    </Button>
   {/if}
 </div>
 

frontend/src/routes/migration/mappings/+page.svelte

@@ -14,6 +14,8 @@
   import { onMount } from 'svelte';
   import EnvSelector from '../../../components/EnvSelector.svelte';
   import MappingTable from '../../../components/MappingTable.svelte';
+  import { t } from '$lib/i18n';
+  import { Button, PageHeader } from '$lib/ui';
   // [/SECTION]
 
   // [SECTION: STATE]
@@ -128,7 +130,7 @@
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="max-w-6xl mx-auto p-6">
-  <h1 class="text-2xl font-bold mb-6">Database Mapping Management</h1>
+  <PageHeader title="Database Mapping Management" />
 
   {#if loading}
     <p>Loading environments...</p>
@@ -149,13 +151,13 @@
     </div>
 
     <div class="mb-8">
-      <button
+      <Button
         on:click={fetchDatabases}
         disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || fetchingDbs}
-        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
+        isLoading={fetchingDbs}
       >
-        {fetchingDbs ? 'Fetching...' : 'Fetch Databases & Suggestions'}
-      </button>
+        Fetch Databases & Suggestions
+      </Button>
     </div>
 
     {#if error}