chore: replace read more link with ButtonLink component

I also fix the load more button position since I removed the margin
auto.

1 files changed, 39 insertions, 6 deletions

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index e05bd1d..f46de82 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -16,6 +16,19 @@
   text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
   transition: all 0.3s ease-in-out 0s;
 
+  &--left {
+    margin-right: auto;
+  }
+
+  &--right {
+    margin-left: auto;
+  }
+
+  &--center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   &:hover,
   &:focus {
     background: var(--color-primary-light);
@@ -36,7 +49,7 @@
   padding: var(--spacing-2xs) var(--spacing-md);
   background: var(--color-bg);
   border: fun.convert-px(5) solid var(--color-primary);
-  border-radius: fun.convert-px(25);
+  border-radius: fun.convert-px(30);
   box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
       var(--color-shadow-light),
     fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
@@ -44,9 +57,22 @@
     fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
       var(--color-shadow-light);
   color: var(--color-primary);
-  font-weight: 500;
+  font-weight: 600;
   transition: all 0.35s ease-in-out 0s;
 
+  &--left {
+    margin-right: auto;
+  }
+
+  &--right {
+    margin-left: auto;
+  }
+
+  &--center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   &:disabled {
     color: var(--color-fg-light);
     border-color: var(--color-border);
@@ -94,8 +120,8 @@
       var(--color-shadow-light);
   color: var(--color-primary);
   font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease-in-out 0s;
+  text-decoration: underline transparent 0;
+  transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s;
 
   &--left {
     margin-right: auto;
@@ -110,6 +136,13 @@
     margin-right: auto;
   }
 
+  &--icon {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: var(--spacing-2xs);
+  }
+
   &:hover,
   &:focus {
     box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
@@ -120,7 +153,7 @@
         var(--color-shadow-lighter),
       fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
         var(--color-shadow-lighter);
-    transform: scale(1.08);
+    transform: scale(1.07);
   }
 
   &:focus {
@@ -129,7 +162,7 @@
 
   &:active {
     box-shadow: 0 0 0 0 var(--color-shadow-light);
-    text-decoration: none;
+    text-decoration: underline transparent 0;
     transform: scale(0.94);
   }
 }