refactor(about): Use button component

- tooltip accessibility improvements

src/components/Elements/Button/Button.jsx

@@ -3,7 +3,7 @@ import Tooltip from 'components/Elements/Tooltip/Tooltip';
 
 const Button = forwardRef(
   (
-    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
+    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey, href },
     ref,
   ) => {
     let className;
@@ -24,6 +24,12 @@ const Button = forwardRef(
       case 'collection':
         className = 'btn-collection';
         break;
+      case 'linkIconButton':
+        className = 'btn-icon';
+        break;
+      case 'linkButton':
+        className = 'btn-settings';
+        break;
       default:
         className = 'btn-default';
     }
@@ -43,13 +49,44 @@ const Button = forwardRef(
       </button>
     );
 
-    return type === 'icon' ? (
-      <Tooltip title={tooltipTitle} key={tooltipKey}>
-        {button}
-      </Tooltip>
-    ) : (
-      button
+    const linkButton = (
+      <a className={className} onClick={onClick} ref={ref} disabled={disabled} href={href}>
+        {icon}
+        {label}
+      </a>
     );
+
+    const linkIconButton = (
+      <Tooltip title={tooltipTitle} key={tooltipKey}>
+        <a
+          className={className}
+          onClick={onClick}
+          ref={ref}
+          disabled={disabled}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {icon}
+          {label}
+        </a>
+      </Tooltip>
+    );
+
+    switch (type) {
+      case 'linkIconButton':
+        return linkIconButton;
+      case 'linkButton':
+        return linkButton;
+      case 'icon':
+        return (
+          <Tooltip title={tooltipTitle} key={tooltipKey}>
+            {button}
+          </Tooltip>
+        );
+      default:
+        return button;
+    }
   },
 );
 

src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss

@@ -127,5 +127,9 @@ a.btn-collection {
 }
 
 .btn-icon {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-content: center;
   @include modal-button(standard);
 }

src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss

@@ -17,7 +17,7 @@
   gap: 15px;
 
   a {
-    @include basicIconButton(11px, 1.2rem, modal);
+    text-decoration: none;
   }
 }
 

src/components/Elements/Tooltip/Tooltip.jsx

@@ -1,10 +1,11 @@
-import { useState, memo } from 'react';
+import { useState, memo, useRef } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import './tooltip.scss';
 
 function Tooltip({ children, title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const [reference, setReference] = useState(null);
+  const tooltipId = useRef(`tooltip-${Math.random()}`);
 
   const { x, y, refs, strategy } = useFloating({
     placement: placement || 'bottom',
@@ -24,6 +25,7 @@ function Tooltip({ children, title, style, placement, subtitle }) {
         onFocus={() => setShowTooltip(true)}
         onBlur={() => setShowTooltip(false)}
         ref={setReference}
+        aria-describedby={tooltipId.current}
       >
         {children}
       </div>

src/components/Elements/Tooltip/tooltip.scss

@@ -96,3 +96,31 @@
     }
   }
 }
+
+#floating {
+  transition-property: opacity, transform;
+}
+#floating[data-status='open'],
+#floating[data-status='close'] {
+  transition-duration: 250ms;
+}
+#floating[data-status='initial'],
+#floating[data-status='close'] {
+  opacity: 0;
+}
+#floating[data-status='initial'][data-placement^='top'],
+#floating[data-status='close'][data-placement^='top'] {
+  transform: translateY(5px);
+}
+#floating[data-status='initial'][data-placement^='bottom'],
+#floating[data-status='close'][data-placement^='bottom'] {
+  transform: translateY(-5px);
+}
+#floating[data-status='initial'][data-placement^='left'],
+#floating[data-status='close'][data-placement^='left'] {
+  transform: translateX(5px);
+}
+#floating[data-status='initial'][data-placement^='right'],
+#floating[data-status='close'][data-placement^='right'] {
+  transform: translateX(-5px);
+}