Обновление: улучшен компонент IntroStage с изменением отображения аватара и добавлением нового стиля для имени пользователя

Author: RXDCODX

src/components/OBS_Components/MikuMonday/MikuMonday.module.scss

@@ -39,10 +39,10 @@
 }
 
 .intro-avatar-wrapper {
+  display: none;
   width: 160px;
   height: 160px;
   flex: 0 0 160px;
-  display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
@@ -78,12 +78,52 @@
   flex-direction: column;
   gap: 14px;
   color: var(--site-text-light);
+  grid-column: 1 / -1;
+  text-align: center;
 }
 
 .intro-heading {
   font-size: clamp(2.2rem, 4vw, 2.8rem);
   font-weight: 600;
   letter-spacing: 0.05em;
+  color: rgb(57, 197, 187);
+}
+
+.intro-name-with-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.intro-small-avatar {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: none;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(5, 8, 16, 0.85) 100%);
+  box-shadow:
+    0 0 24px rgba(var(--bs-primary-rgb), 0.65),
+    inset 0 0 18px rgba(0, 0, 0, 0.55);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.intro-small-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.intro-small-avatar-placeholder {
+  font-size: 2.4rem;
+  font-weight: 800;
+  color: #fff;
+  background: rgba(var(--bs-primary-rgb), 0.4);
+  text-transform: uppercase;
 }
 
 .intro-name {
@@ -101,7 +141,8 @@
 }
 
 .intro-subtitle {
-  margin-top: 8px;
+  display: block;
+  margin: 8px auto 0;
   font-size: 1.4rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.82);

src/components/OBS_Components/MikuMonday/components/stages/IntroStage.tsx

@@ -29,7 +29,6 @@ export default function IntroStage({
   }, [durationMs, onComplete]);
 
   const displayName = twitchUser.displayName ?? twitchUser.userLogin;
-  const loginTag = `@${twitchUser.userLogin}`;
   const avatarUrl = twitchUser.profileImageUrl ?? fallbackAvatar ?? "";
 
   const fallbackSymbol = useMemo(() => {
@@ -45,33 +44,31 @@ export default function IntroStage({
     <article
       className={`${styles["intro-stage"]} ${animate.animated} ${animate.fadeIn}`}
     >
-      <div className={styles["intro-avatar-wrapper"]}>
-        {hasAvatar ? (
-          <img
-            src={avatarUrl}
-            alt={displayName}
-            className={styles["intro-avatar"]}
-          />
-        ) : (
-          <div className={styles["intro-avatar-placeholder"]}>
-            {fallbackSymbol}
-          </div>
-        )}
-      </div>
       <div className={styles["intro-text-block"]}>
         <span
           className={`${styles["intro-heading"]} ${commonStyles.textStrokeShadow}`}
         >
           Мику обратила свой взор на
         </span>
-        <span
-          className={`${styles["intro-name"]} ${commonStyles.textStrokeShadow}`}
-        >
-          {displayName}
-        </span>
-        <span className={styles["intro-login"]}>{loginTag}</span>
+        <div className={styles["intro-name-with-avatar"]}>
+          <div className={styles["intro-small-avatar"]}>
+            {hasAvatar ? (
+              <img src={avatarUrl} alt={displayName} />
+            ) : (
+              <div className={styles["intro-small-avatar-placeholder"]}>
+                {fallbackSymbol}
+              </div>
+            )}
+          </div>
+          <span
+            className={`${styles["intro-name"]} ${commonStyles.textStrokeShadow}`}
+            style={{ color: twitchUser.chatColor ?? "#fff" }}
+          >
+            {displayName}
+          </span>
+        </div>
         <span className={styles["intro-subtitle"]}>
-          Приготовься к волшебству — твой трек уже на подходе!
+          Всем приготовься к волшебству — новый трек уже на подходе!
         </span>
       </div>
     </article>