From ad1e597b5c80fbfe75700ab249aa1b1180509275 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 10 Jan 2023 10:05:59 +0100
Subject: [PATCH] feat: no borders in cards (#925)

---
 components/account/AccountFollowButton.vue |  2 +-
 components/status/StatusAttachment.vue     |  3 ---
 components/status/StatusMedia.vue          |  2 +-
 components/status/StatusPreviewCard.vue    | 10 +++++-----
 components/status/StatusPreviewGitHub.vue  |  2 +-
 styles/vars.css                            |  2 ++
 unocss.config.ts                           |  1 +
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 6ee4bff3..5a39eaa0 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -65,7 +65,7 @@ const buttonStyle = $computed(() => {
     return 'text-inverted bg-red border-red'
 
   if (relationship?.muting)
-    return 'text-base bg-code border-base'
+    return 'text-base bg-card border-base'
 
   // If following, use a label style with a strong border for Mutuals
   if (relationship ? relationship.following : context === 'following')
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index cf527d09..bb47e330 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -98,7 +98,6 @@ useIntersectionObserver(video, (entries) => {
         loop
         playsinline
         controls
-        border="~ base"
         rounded-lg
         object-cover
         :width="attachment.meta?.original?.width"
@@ -119,7 +118,6 @@ useIntersectionObserver(video, (entries) => {
         muted
         loop
         playsinline
-        border="~ base"
         rounded-lg
         object-cover
         :width="attachment.meta?.original?.width"
@@ -160,7 +158,6 @@ useIntersectionObserver(video, (entries) => {
             aspectRatio,
             objectPosition,
           }"
-          border="~ base"
           rounded-lg
           h-full
           w-full
diff --git a/components/status/StatusMedia.vue b/components/status/StatusMedia.vue
index e5d6f6f5..a51629fb 100644
--- a/components/status/StatusMedia.vue
+++ b/components/status/StatusMedia.vue
@@ -23,7 +23,7 @@ const { status } = defineProps<{
 
 <style lang="postcss">
 .status-media-container {
-  --at-apply: gap-0.5;
+  --at-apply: gap-2;
   position: relative;
   width: 100%;
   overflow: hidden;
diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue
index b8edb7c6..ba32154d 100644
--- a/components/status/StatusPreviewCard.vue
+++ b/components/status/StatusPreviewCard.vue
@@ -38,12 +38,13 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
     v-else
     block
     of-hidden
-    hover:bg-active
     :to="card.url"
+    bg-card
+    hover:bg-active
     :class="{
       'flex': isSquare,
       'p-4': root,
-      'rounded-lg border border-base': !root,
+      'rounded-lg': !root,
     }"
     target="_blank"
     external
@@ -52,10 +53,9 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
       v-if="card.image"
       flex flex-col
       display-block of-hidden
-      border="base"
       :class="{
-        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
-        'w-full aspect-[1.91] border-b': !isSquare,
+        'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare,
+        'w-full aspect-[1.91]': !isSquare,
         'rounded-lg': root,
       }"
     >
diff --git a/components/status/StatusPreviewGitHub.vue b/components/status/StatusPreviewGitHub.vue
index 545636ec..d47eb0ca 100644
--- a/components/status/StatusPreviewGitHub.vue
+++ b/components/status/StatusPreviewGitHub.vue
@@ -89,7 +89,7 @@ const meta = $computed(() => {
     v-if="card.image"
     flex flex-col
     display-block of-hidden
-    bg-code
+    bg-card
     relative
     w-full min-h-50 md:min-h-60
     justify-center
diff --git a/styles/vars.css b/styles/vars.css
index 71aab4f0..a22c3dc6 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -8,6 +8,7 @@
   --c-bg-base: #fafafa;
   --c-bg-base-rgb: 250, 250, 250;
   --c-bg-active: #f2f2f2;
+  --c-bg-card: #00000006;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
   --c-bg-fade: #EA9E4411;
@@ -38,6 +39,7 @@
   --c-bg-base: #111;
   --c-bg-base-rgb: 17, 17, 17;
   --c-bg-active: #191919;
+  --c-bg-card: #ffffff06;
   --c-bg-code: #ffffff06;
   --c-bg-fade: #EA9E4411;
   --c-bg-dm: #0a2f35;
diff --git a/unocss.config.ts b/unocss.config.ts
index 44dec046..f2774999 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -23,6 +23,7 @@ export default defineConfig({
       'bg-border': 'bg-$c-border',
       'bg-active': 'bg-$c-bg-active',
       'bg-primary-light': 'bg-$c-primary-light',
+      'bg-card': 'bg-$c-bg-card',
       'bg-code': 'bg-$c-bg-code',
       'bg-fade': 'bg-$c-bg-fade',
       'bg-dm': 'bg-$c-bg-dm',