From 4e488a1ba13a6b9215eea9575e59ada3605418db Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Thu, 13 Feb 2025 13:56:18 +0000
Subject: [PATCH] fix(editor): figma block ui issues (#10167)

---
 .../src/embed-youtube-block/embed-youtube-block.ts | 14 ++++++++++----
 .../block-embed/src/embed-youtube-block/styles.ts  |  7 ++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts b/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts
index de42a7d99..baec8260c 100644
--- a/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts
+++ b/blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-block.ts
@@ -132,7 +132,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : YoutubeIcon;
     const titleText = loading ? 'Loading...' : title;
-    const descriptionText = loading ? '' : description;
+    const descriptionText = loading ? null : description;
     const bannerImage =
       !loading && image
         ? html`<object type="image/webp" data=${image} draggable="false">
@@ -216,9 +216,15 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
               </div>
             </div>
 
-            <div class="affine-embed-youtube-content-description">
-              ${descriptionText}
-            </div>
+            ${loading
+              ? html`<div
+                  class="affine-embed-youtube-content-description"
+                ></div>`
+              : descriptionText
+                ? html`<div class="affine-embed-youtube-content-description">
+                    ${descriptionText}
+                  </div>`
+                : nothing}
 
             <div class="affine-embed-youtube-content-url" @click=${this.open}>
               <span>www.youtube.com</span>
diff --git a/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts b/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts
index a4526a1f7..f43329893 100644
--- a/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts
+++ b/blocksuite/affine/block-embed/src/embed-youtube-block/styles.ts
@@ -2,6 +2,7 @@ import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const styles = css`
@@ -194,7 +195,7 @@ export const styles = css`
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--affine-text-secondary-color);
+    color: ${unsafeCSSVarV2('icon/primary')};
 
     font-family: var(--affine-font-family);
     font-size: var(--affine-font-xs);
@@ -216,10 +217,10 @@ export const styles = css`
     width: 12px;
     height: 12px;
   }
-  .affine-embed-youtube-content-url-icon .open-icon {
+  .affine-embed-youtube-content-url-icon svg {
     height: 12px;
     width: 12px;
-    fill: var(--affine-text-secondary-color);
+    fill: ${unsafeCSSVarV2('icon/primary')};
   }
 
   .affine-embed-youtube-block.loading {