From 538d09f7be9c986942d6111b9ab9ef84a948509e Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 4 Feb 2023 18:44:14 +0100
Subject: [PATCH] feat: change artist links into round buttons

---
 src/components/AttributionTable.vue | 41 ++++++++++++++++++++++++++---
 src/scss/base.scss                  | 10 +++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/AttributionTable.vue b/src/components/AttributionTable.vue
index 6e1b0d1..263d94b 100644
--- a/src/components/AttributionTable.vue
+++ b/src/components/AttributionTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PawIcon from "@/assets/icons/PawIcon.vue";
+import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
 import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
 
 interface ArtistLink {
@@ -44,7 +44,7 @@ defineProps<Props>();
           <ul>
             <li v-if="attrib.links.furaffinity">
               <a :href="attrib.links.furaffinity" title="Fur Affinity">
-                <PawIcon />
+                <FAIcon />
               </a>
             </li>
             <li v-if="attrib.links.twitter">
@@ -72,6 +72,7 @@ defineProps<Props>();
 
     &.artist {
       p {
+        margin: 0.5rem 0;
         text-align: center;
       }
 
@@ -79,6 +80,7 @@ defineProps<Props>();
         display: flex;
         flex-flow: row wrap;
         justify-content: center;
+        align-items: center;
 
         list-style: none;
         margin: 0;
@@ -87,12 +89,43 @@ defineProps<Props>();
 
       li {
         flex: 0 0 2rem;
-        max-width: 2rem;
-        padding: 0 0.5rem;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+
+        background: var(--color-artist-link-background);
+
+        width: 2rem;
+        height: 2rem;
+        margin: 0 0.25rem;
+        border-radius: 100%;
       }
 
       a {
+        flex: 1 1 auto;
+        padding: 0.375rem;
         box-shadow: none;
+
+        &:hover {
+          box-shadow: none;
+        }
+      }
+
+      svg {
+        fill: var(--color-artist-link-icon);
+      }
+    }
+  }
+
+  &__row {
+    &:hover {
+      li {
+        background: var(--color-artist-link-background-hover);
+      }
+
+      svg {
+        fill: var(--color-artist-link-icon-hover);
       }
     }
   }
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 4202c07..80e0cb3 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -147,6 +147,11 @@
   --table-cell-text-color: var(--theme-c-text-light);
   --table-cell-text-color-hover: var(--theme-c-text-dark);
 
+  --color-artist-link-background: var(--theme-c-text-light);
+  --color-artist-link-background-hover: var(--theme-c-text-dark);
+  --color-artist-link-icon: var(--theme-c-text-dark);
+  --color-artist-link-icon-hover: var(--theme-c-text-light);
+
   --timeline-stroke-color: var(--theme-c-dark-grey-blue);
   --timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
   --timeline-icon-color: var(--theme-c-antique-white);
@@ -174,6 +179,11 @@
     --table-cell-text-color: var(--theme-c-text-dark);
     --table-cell-text-color-hover: var(--theme-c-text-dark);
 
+    --color-artist-link-background: var(--theme-c-text-dark);
+    --color-artist-link-background-hover: var(--theme-c-text-dark);
+    --color-artist-link-icon: var(--theme-c-text-light);
+    --color-artist-link-icon-hover: var(--theme-c-text-light);
+
     --timeline-stroke-color: var(--theme-c-crystal-blue);
     --timeline-circle-background: var(--theme-c-crystal-blue-translucent);
     --timeline-icon-color: var(--theme-c-antique-white);