From 976e6db43fd0bf54577c1376d8bafdfd5b138209 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 7 Jul 2021 00:41:47 +0800
Subject: [PATCH] docs: refactor design resources link

---
 README.md                                  |  2 +-
 README.zh-CN.md                            |  2 +-
 demo/pages/docs/installation/enUS/index.md | 36 ++++++++++++----------
 demo/pages/docs/installation/zhCN/index.md | 33 +++++++++++---------
 4 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 9e7556405..0968572ea 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ Naive UI recommends using [xicons](https://www.xicons.org) as icon library.
 
 ### Design Resources
 
-[Naive UI Design](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch).
+[Naive UI (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch).
 
 ## Contributing
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 9af318345..476d0fe03 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -66,7 +66,7 @@ naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。
 
 ### 设计资源
 
-[Naive UI 设计](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch)。
+[Naive UI (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch)。
 
 ## 贡献
 
diff --git a/demo/pages/docs/installation/enUS/index.md b/demo/pages/docs/installation/enUS/index.md
index 8ec78fe14..0b6babce0 100644
--- a/demo/pages/docs/installation/enUS/index.md
+++ b/demo/pages/docs/installation/enUS/index.md
@@ -22,26 +22,28 @@ naive-ui recommends using [xicons](https://www.xicons.org) as icon library.
 
 ## Design Resources
 
-
-<n-card :content-style="{padding: 0}" style="width: 420px; max-width: 100%;">
+<n-card size="small" footer-style="text-align: center;" style="width: 420px; max-width: 100%;">
   <template #cover>
     <img src="https://naive-ui.oss-accelerate.aliyuncs.com/naive-design.png">
   </template>
-  <n-text
-    tag="a"
-    href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch" 
-    download
-    strong
-    style="display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; text-decoration: none;"
-  >
-    Naive UI Design
-    <n-icon :size="20" style="margin-left: 8px;">
-      <MdDownload />
-    </n-icon>
-  </n-text>
+  <template #footer>
+    <n-button
+      tag="a"
+      href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch"
+      text
+      target="_blank"
+      icon-placement="right"
+    >
+      Naive UI (Sketch)
+      <template #icon>
+        <n-icon >
+          <ArrowDownload16Regular />
+        </n-icon>
+      </template>
+    </n-button>
+  </template>
 </n-card>
 
-
 ```component
-MdDownload: import { MdDownload } from '@vicons/ionicons4'
-```
\ No newline at end of file
+ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular'
+```
diff --git a/demo/pages/docs/installation/zhCN/index.md b/demo/pages/docs/installation/zhCN/index.md
index eecb258a1..d73ce6407 100644
--- a/demo/pages/docs/installation/zhCN/index.md
+++ b/demo/pages/docs/installation/zhCN/index.md
@@ -24,25 +24,28 @@ naive-ui 建议使用 [xicons](https://www.xicons.org) 作为图标库。
 
 ## 设计资源
 
-<n-card :content-style="{padding: 0}" style="width: 420px; max-width: 100%;">
+<n-card size="small"  footer-style="text-align: center;" style="width: 420px; max-width: 100%;">
   <template #cover>
     <img src="https://naive-ui.oss-accelerate.aliyuncs.com/naive-design.png">
   </template>
-  <n-text
-    tag="a"
-    href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch" 
-    download
-    strong
-    style="display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; text-decoration: none;"
-  >
-    Naive UI 设计
-    <n-icon :size="20" style="margin-left: 8px;">
-      <MdDownload />
-    </n-icon>
-  </n-text>
+  <template #footer>
+    <n-button
+      tag="a"
+      href="https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library%28Square-Corner%29.sketch"
+      text
+      target="_blank"
+      icon-placement="right"
+    >
+      Naive UI (Sketch)
+      <template #icon>
+        <n-icon >
+          <ArrowDownload16Regular />
+        </n-icon>
+      </template>
+    </n-button>
+  </template>
 </n-card>
 
-
 ```component
-MdDownload: import { MdDownload } from '@vicons/ionicons4'
+ArrowDownload16Regular: import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular'
 ```