refactor: improve button-like links styles

The goal was to replace the "read more articles about" links with
button-like links to keep a certain consistence between buttons.
The hasIcon variable was useless so I update some components and
especially the back to top link.

2 files changed, 6 insertions, 4 deletions

diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
index 3e78440..4c94b34 100644
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx
@@ -8,17 +8,14 @@ const ButtonLink = ({
   target,
   position = 'left',
   isExternal = false,
-  hasIcon = false,
 }: {
   children: ReactNode;
   target: string;
   position?: ButtonPosition;
   isExternal?: boolean;
-  hasIcon?: boolean;
 }) => {
   const positionModifier = `link--${position}`;
-  const iconModifier = hasIcon ? ` ${styles['link--icon']}` : '';
-  const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}${iconModifier}`;
+  const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}`;
 
   return isExternal ? (
     <a className={classes} href={target}>
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 08dc8b4..15065b2 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -117,8 +117,13 @@
 }
 
 .link {
+  display: flex;
+  flex-flow: row wrap;
+  place-items: center;
+  gap: var(--spacing-2xs);
   width: max-content;
   padding: var(--spacing-2xs) var(--spacing-sm);
+  position: relative;
   background: var(--color-bg);
   border: fun.convert-px(3) solid var(--color-primary);
   border-radius: fun.convert-px(5);