Fixed auth popup and userpic style

src/components/Author/Userpic.module.scss

@@ -1,4 +1,5 @@
 .circlewrap {
+  align-items: center;
   border-radius: 100%;
   display: flex;
   height: 32px;

src/components/Nav/Header.tsx

@@ -96,7 +96,7 @@ export const Header = (props: Props) => {
         [styles.headerWithTitle]: Boolean(props.title)
       }}
     >
-      <Modal variant="wide" name="auth">
+      <Modal variant="wide" name="auth" noPadding={true}>
         <AuthModal />
       </Modal>
 

src/components/Nav/Modal/Modal.module.scss

@@ -70,3 +70,7 @@
     }
   }
 }
+
+.noPadding {
+  padding: 0 2rem;
+}

src/components/Nav/Modal/Modal.tsx

@@ -10,6 +10,7 @@ interface ModalProps {
   variant: 'narrow' | 'wide'
   children: JSX.Element
   onClose?: () => void
+  noPadding?: boolean
 }
 
 export const Modal = (props: ModalProps) => {
@@ -35,13 +36,20 @@ export const Modal = (props: ModalProps) => {
       <div class={styles.backdrop} onClick={handleHide}>
         <div
           class={clsx(styles.modal, {
-            [styles.narrow]: props.variant === 'narrow'
+            [styles.narrow]: props.variant === 'narrow',
+            [styles.noPadding]: props.noPadding
           })}
           onClick={(event) => event.stopPropagation()}
         >
           {props.children}
           <div class={styles.close} onClick={handleHide}>
-            <svg width="16" height="18" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              class={styles.icon}
+              width="16"
+              height="18"
+              viewBox="0 0 16 18"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M7.99987 7.52552L14.1871 0.92334L15.9548 2.80968L9.76764 9.41185L15.9548 16.014L14.1871 17.9004L7.99987 11.2982L1.81269 17.9004L0.0449219 16.014L6.23211 9.41185L0.0449225 2.80968L1.81269 0.92334L7.99987 7.52552Z"
                 fill="currentColor"