Замена div на компоненты

PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor

@@ -6,32 +6,35 @@
     </MudText>
 
     <!-- Вертикальный список шагов -->
-    <div class="instruction-steps">
-        <div class="step-item">
-            <div class="step-number">1</div>
-            <div class="step-content">
+    <MudStack Class="my-4">
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">2</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Авторизуйтесь в Яндексе (если ещё не вошли)
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">3</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Нажмите «Разрешить»
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">4</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
-            </div>
-        </div>
-    </div>
+            </MudText>
+        </MudStack>
+    </MudStack>
 
     <MudAlert Severity="Severity.Info" Class="mt-4">
         Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>