diff --git a/public/icons/edit.svg b/public/icons/edit.svg index abc01f82..385b1c7e 100644 --- a/public/icons/edit.svg +++ b/public/icons/edit.svg @@ -1,4 +1,5 @@ - - + + diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss index f4283cf1..094e4fca 100644 --- a/src/components/Author/Card.module.scss +++ b/src/components/Author/Card.module.scss @@ -32,6 +32,9 @@ } .authorSubscribe { + align-items: center; + display: flex; + @include media-breakpoint-down(lg) { padding: 0 0 0 42px; } @@ -107,6 +110,10 @@ background-image: url(/icons/instagram-white.svg); } } + + button { + margin-right: 0.5em; + } } .buttonSubscribe { @@ -130,15 +137,26 @@ background: #f7f7f7; color: #000; display: inline-flex; + transition: background-color 0.3s, color 0.3s; @include font-size(1.5rem); + &:hover { + background: #000; + color: #fff; + + img { + filter: invert(1); + } + } + .icon { margin-right: 0.5em; } img { height: 15px; + transition: filter 0.3s; } } @@ -156,7 +174,6 @@ } .authorSubscribe { - display: flex; margin-top: 2rem; } diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx index 4931f4b3..b4d3c735 100644 --- a/src/components/Author/Card.tsx +++ b/src/components/Author/Card.tsx @@ -19,6 +19,7 @@ interface AuthorCardProps { subscribed?: boolean author: Author isAuthorPage?: boolean + noSocialButtons?: boolean } export const AuthorCard = (props: AuthorCardProps) => { @@ -84,7 +85,9 @@ export const AuthorCard = (props: AuthorCardProps) => { {t('Write')} - {(link) => } + + {(link) => } + diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx index 96f824e0..35592155 100644 --- a/src/components/Views/AllAuthors.tsx +++ b/src/components/Views/AllAuthors.tsx @@ -106,6 +106,7 @@ export const AllAuthorsView = (props: Props) => { compact={false} hasLink={true} subscribed={subscribed(author.slug)} + noSocialButtons={true} /> )}