From 6b82d36f963199f4166e9da1d0e5d8dc29f399fe Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 25 Oct 2022 22:43:24 +0300
Subject: [PATCH] Fixed header controls

---
 src/components/Author/Userpic.tsx      |  4 +++-
 src/components/Nav/Private.module.scss | 17 ++++++++++++++++-
 src/components/Nav/Private.tsx         |  4 ++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Author/Userpic.tsx b/src/components/Author/Userpic.tsx
index 0a075738..b89a1a0a 100644
--- a/src/components/Author/Userpic.tsx
+++ b/src/components/Author/Userpic.tsx
@@ -1,11 +1,13 @@
 import { Show } from 'solid-js/web'
 import type { Author } from '../../graphql/types.gen'
 import style from './Userpic.module.scss'
+import { clsx } from 'clsx'
 
 interface UserpicProps {
   user: Author
   hasLink?: boolean
   isBig?: boolean
+  class?: string
 }
 
 export default (props: UserpicProps) => {
@@ -16,7 +18,7 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class={style.circlewrap} classList={{ [style.big]: props.isBig }}>
+    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show
diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss
index dbe7bb26..5987a0fb 100644
--- a/src/components/Nav/Private.module.scss
+++ b/src/components/Nav/Private.module.scss
@@ -10,8 +10,13 @@
     padding: divide($container-padding-x, 2);
   }
 
-  .circlewrap {
+  .userpic {
     margin-right: 0;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
   }
 }
 
@@ -81,6 +86,8 @@
 }
 
 .userControlItemWritePost {
+  width: auto;
+
   @include media-breakpoint-up(lg) {
     .icon {
       display: none;
@@ -88,8 +95,16 @@
 
     .textLabel {
       display: inline;
+      padding: 0 1.2rem;
+      position: relative;
+      z-index: 1;
     }
   }
+
+  &,
+  a::before {
+    border-radius: 1.2em;
+  }
 }
 
 .userControlItemInbox,
diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx
index 2a3ad170..13f49885 100644
--- a/src/components/Nav/Private.tsx
+++ b/src/components/Nav/Private.tsx
@@ -15,7 +15,7 @@ export default () => {
       <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
         <a href="/create">
           <span class={styles.textLabel}>опубликовать материал</span>
-          <Icon name="pencil" />
+          <Icon name="pencil" class={styles.icon} />
         </a>
       </div>
       <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
@@ -30,7 +30,7 @@ export default () => {
         <a href={`/${session().user?.slug}`}>
           {/*FIXME: replace with route*/}
           <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
-            <Userpic user={session().user as Author} />
+            <Userpic user={session().user as Author} class={styles.userpic} />
           </div>
         </a>
       </div>