From 1bd710daa4a6f744b7655a1bd893b69fd2e546fd Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 12:48:23 +0800
Subject: [PATCH] ui: border around account header avatar

---
 components/account/AccountHeader.vue | 2 +-
 unocss.config.ts                     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 752a99f7..c63287bf 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -67,7 +67,7 @@ function previewAvatar() {
     <div p4 mt--17 flex flex-col gap-6>
       <div flex justify-between>
         <div flex="~ col gap-2 1">
-          <button w-30 h-30 rounded-full bg-black z-2 @click="previewAvatar">
+          <button w-30 h-30 rounded-full bg-gray border-4 border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>
diff --git a/unocss.config.ts b/unocss.config.ts
index a3743521..9ec146be 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
   shortcuts: [
     {
       'border-base': 'border-$c-border',
+      'border-bg-base': 'border-$c-bg-base',
 
       // background
       'bg-base': 'bg-$c-bg-base',