From e3691850ad6824d72db0907ed95132058d99bdc6 Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Wed, 12 Feb 2025 09:10:08 +0000
Subject: [PATCH] fix(editor): figma ui issues (#10123)

---
 .../src/embed-figma-block/embed-figma-block.ts     | 14 +++++++-------
 .../block-embed/src/embed-figma-block/styles.ts    |  7 ++++---
 .../snapshots/bookmark.spec.ts/embed-figma.json    |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts b/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts
index b162ff6b4..91df6d9e3 100644
--- a/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts
+++ b/blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts
@@ -4,7 +4,7 @@ import type {
   EmbedFigmaStyles,
 } from '@blocksuite/affine-model';
 import { BlockSelection } from '@blocksuite/block-std';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -57,11 +57,10 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
     super.connectedCallback();
     this._cardStyle = this.model.style;
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.title) {
       this.doc.withoutTransact(() => {
         this.doc.updateBlock(this.model, {
           title: 'Figma',
-          description: this.model.url,
         });
       });
     }
@@ -97,7 +96,6 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
   override renderBlock() {
     const { title, description, url } = this.model;
     const titleText = title ?? 'Figma';
-    const descriptionText = description ?? url;
 
     return this.renderEmbed(
       () => html`
@@ -140,9 +138,11 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
               </div>
             </div>
 
-            <div class="affine-embed-figma-content-description">
-              ${descriptionText}
-            </div>
+            ${description
+              ? html`<div class="affine-embed-figma-content-description">
+                  ${description}
+                </div>`
+              : nothing}
 
             <div class="affine-embed-figma-content-url" @click=${this.open}>
               <span>www.figma.com</span>
diff --git a/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts b/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts
index 2c8023bfa..c65af5ba4 100644
--- a/blocksuite/affine/block-embed/src/embed-figma-block/styles.ts
+++ b/blocksuite/affine/block-embed/src/embed-figma-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`
@@ -161,7 +162,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);
@@ -183,10 +184,10 @@ export const styles = css`
     width: 12px;
     height: 12px;
   }
-  .affine-embed-figma-content-url-icon .open-icon {
+  .affine-embed-figma-content-url-icon svg {
     height: 12px;
     width: 12px;
-    fill: var(--affine-text-secondary-color);
+    fill: ${unsafeCSSVarV2('icon/primary')};
   }
 
   .affine-embed-figma-block.selected {
diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json
index bd9bc5b3b..4363fa616 100644
--- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json
+++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json
@@ -49,7 +49,7 @@
             "url": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123",
             "caption": null,
             "title": "Figma",
-            "description": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123"
+            "description": null
           },
           "children": []
         }