From e045a06fd65b380c0bb78b5dc5cc88dd8870fafb Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 14 Jun 2023 23:16:44 +0300
Subject: [PATCH] Fixed auth popup and userpic style

---
 src/components/Author/Userpic.module.scss  |  1 +
 src/components/Nav/Header.tsx              |  2 +-
 src/components/Nav/Modal/Modal.module.scss |  4 ++++
 src/components/Nav/Modal/Modal.tsx         | 12 ++++++++++--
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index 6c879269..d9870b35 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -1,4 +1,5 @@
 .circlewrap {
+  align-items: center;
   border-radius: 100%;
   display: flex;
   height: 32px;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 4884437d..6c43ddbe 100644
--- a/src/components/Nav/Header.tsx
+++ b/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>
 
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index dab7eb7b..47098b1f 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -70,3 +70,7 @@
     }
   }
 }
+
+.noPadding {
+  padding: 0 2rem;
+}
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index 29e3d26c..c1e89acf 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/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"