chore: replace read more link with ButtonLink component

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

3 files changed, 50 insertions, 8 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 8256e6b..80acf8d 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -1,19 +1,24 @@
+import { ButtonPosition } from '@ts/types/app';
 import { ReactNode } from 'react';
 import styles from '../Buttons.module.scss';
 
 const Button = ({
   children,
   clickHandler,
+  position = 'left',
   isDisabled = false,
   isPrimary = false,
 }: {
   children: ReactNode;
   clickHandler: any;
+  position?: ButtonPosition;
   isDisabled?: boolean;
   isPrimary?: boolean;
 }) => {
   const classes = `${styles.btn} ${
-    isPrimary ? styles.primary : styles.secondary
+    isPrimary
+      ? `${styles.primary} ${styles[`primary--${position}`]}`
+      : `${styles.secondary} ${styles[`secondary--${position}`]}`
   }`;
 
   return (
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
index 70039a8..a2f75f2 100644
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx
@@ -8,13 +8,17 @@ const ButtonLink = ({
   target,
   position = 'left',
   isExternal = false,
+  hasIcon = false,
 }: {
   children: ReactNode;
   target: string;
   position?: ButtonPosition;
   isExternal?: boolean;
+  hasIcon?: boolean;
 }) => {
-  const classes = `${styles.btn} ${styles.link} ${styles[`link--${position}`]}`;
+  const classes = `${styles.btn} ${styles.link} ${styles[`link--${position}`]}${
+    hasIcon ? ` ${styles['link--icon']}` : ''
+  }`;
 
   return isExternal ? (
     <a className={classes} href={target}>
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);
   }
 }