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}
/>
)}