Fix profile markup (#259)

src/components/Article/AudioHeader/AudioHeader.tsx

@@ -5,8 +5,6 @@ import { MediaItem } from '../../../pages/types'
 import { createSignal, Show } from 'solid-js'
 import { Icon } from '../../_shared/Icon'
 import { Topic } from '../../../graphql/types.gen'
-import { getPagePath } from '@nanostores/router'
-import { router } from '../../../stores/router'
 import { CardTopic } from '../../Feed/CardTopic'
 
 type Props = {

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -625,7 +625,7 @@
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4rem;
-  margin-top: 0.5rem;
+  margin-top: 1.5rem;
   gap: 1rem;
 
   @include media-breakpoint-down(md) {
@@ -637,7 +637,6 @@
   align-items: center;
   cursor: pointer;
   display: inline-flex;
-  margin-top: 1rem;
   margin-right: 3rem;
   vertical-align: top;
   border-bottom: unset !important;
@@ -669,10 +668,6 @@
 .subscribersCounter {
   font-weight: 500;
   margin-left: -0.6rem;
-
-  &:hover {
-    color: #696969;
-  }
 }
 
 .listWrapper {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -126,7 +126,6 @@ export const AuthorCard = (props: Props) => {
     setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
   }
   return (
-    <>
     <div
       class={clsx(styles.author, props.class)}
       classList={{
@@ -368,9 +367,6 @@ export const AuthorCard = (props: Props) => {
             </Show>
           </Show>
         </ShowOnlyOnClient>
-        </div>
-      </div>
-
         <Show when={props.followers}>
           <Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
             <>
@@ -435,6 +431,7 @@ export const AuthorCard = (props: Props) => {
             </>
           </Modal>
         </Show>
-    </>
+      </div>
+    </div>
   )
 }

src/components/Views/Author/Author.module.scss

@@ -14,10 +14,13 @@
 }
 
 .authorHeader {
-  border-bottom: 2px solid #000;
+  border-bottom: 2px solid var(--default-color);
   margin-bottom: 2.4rem;
-  margin-top: -3.2rem;
   padding-bottom: 4rem;
+
+  @include media-breakpoint-up(lg) {
+    margin-top: -3.2rem;
+  }
 }
 
 .ratingContainer {