diff --git a/client/src/components/navigation/ButtonLink/button-link.scss b/client/src/components/navigation/ButtonLink/button-link.scss index 24c52e6c3e2bfd93891558c9ff36f0838e376c2b..500e778e57fd5beea5cf3de8fede208c2fbe2b87 100644 --- a/client/src/components/navigation/ButtonLink/button-link.scss +++ b/client/src/components/navigation/ButtonLink/button-link.scss @@ -2,16 +2,10 @@ @use 'styles/settings'; .button.button-link { - padding: 0; + padding: 14px 50px; - a { - display: inline-block; - padding: 14px 50px; - width: 100%; - - &, &:hover, &:active, &:focus { - color: settings.$white; - } + &, &:hover, &:active, &:focus { + color: settings.$white; } } diff --git a/client/src/components/navigation/ButtonLink/index.tsx b/client/src/components/navigation/ButtonLink/index.tsx index 91fc715dd2f8e3a4cdc37d2a66dfc829d701049a..43cd7580144ed9a53cdc030becdabb93cdaec60d 100644 --- a/client/src/components/navigation/ButtonLink/index.tsx +++ b/client/src/components/navigation/ButtonLink/index.tsx @@ -2,8 +2,6 @@ import { ReactNode } from "react"; import { Link } from "react-router-dom"; -import Button from 'components/ui/Button'; - import './button-link.scss'; interface Props { @@ -14,13 +12,10 @@ interface Props { } export default function ButtonLink({ children, href, html, className }: Props) { - return ( - <Button className={'button-link ' + (className ?? '')}> - { html - ? <a href={href}>{children}</a> - : <Link to={href}>{children}</Link> - } - </Button> + const classes = 'button button-link ' + (className ?? ''); + return (html + ? <a className={classes} href={href}>{children}</a> + : <Link className={classes} to={href}>{children}</Link> ); } diff --git a/client/src/components/ui/Button/button.scss b/client/src/components/ui/Button/button.scss index e3339184f8fe58e70be2a4564f116f1e77b2a677..7389315804a6af69f74f78f8cf3fe56f1a206766 100644 --- a/client/src/components/ui/Button/button.scss +++ b/client/src/components/ui/Button/button.scss @@ -3,19 +3,21 @@ @use 'styles/functions' as fn; .button { - padding: 14px 50px; font-size: fn.toRem(18); font-weight: s.$weight-bold; background: s.$linear-gradient; box-shadow: 0px 5px 15px rgba(s.$black, 0.1); border-radius: 25px; - display: inline-block; color: s.$white; user-select: none; appearance: none; border: none; outline: none; will-change: transform; + padding: 14px 50px; + display: inline-flex; + justify-content: center; + align-items: center; &.expanded { width: 100%;