From b22e27bce6cf3fec3c3ff38835d68bc445b55325 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 17 Oct 2023 01:13:13 +0300
Subject: [PATCH] Minor style fixes

---
 src/components/Article/Comment.module.scss        |  2 +-
 src/components/Article/CommentDate.module.scss    |  3 ++-
 .../Author/AuthorBadge/AuthorBadge.module.scss    |  4 ++++
 .../Author/AuthorCard/AuthorCard.module.scss      |  3 ++-
 src/components/Nav/Header/Header.module.scss      |  5 +++++
 src/components/Nav/HeaderAuth.tsx                 | 15 ++++++++-------
 src/components/Nav/Modal/Modal.module.scss        |  1 +
 .../Topic/TopicBadge/TopicBadge.module.scss       |  4 ++++
 src/components/Views/Author/Author.module.scss    |  6 +++++-
 src/components/_shared/Button/Button.module.scss  |  2 +-
 10 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss
index 58f775ab..eb8eea1b 100644
--- a/src/components/Article/Comment.module.scss
+++ b/src/components/Article/Comment.module.scss
@@ -1,5 +1,5 @@
 .comment {
-  margin: 0.5em 0;
+  margin: 0 0 0.5em;
   padding: 1rem;
   transition: background-color 0.3s;
   position: relative;
diff --git a/src/components/Article/CommentDate.module.scss b/src/components/Article/CommentDate.module.scss
index edcb1ce9..f9672066 100644
--- a/src/components/Article/CommentDate.module.scss
+++ b/src/components/Article/CommentDate.module.scss
@@ -4,14 +4,15 @@
   align-self: center;
   display: flex;
   flex: 1;
+  flex-wrap: wrap;
   @include font-size(1.2rem);
   font-size: 1.2rem;
-  gap: 1rem;
   justify-content: flex-start;
   margin: 0 1em 0 0;
 
   .date {
     font-weight: 500;
+    margin-right: 1rem;
 
     .icon {
       line-height: 1;
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
index 5aa176e4..da653817 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@@ -9,6 +9,10 @@
     margin-bottom: 3rem;
   }
 
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
   .info {
     @include font-size(1.4rem);
     border: none;
diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 240e4be2..7a5368f4 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -42,7 +42,7 @@
   flex: 1;
 
   @include media-breakpoint-up(sm) {
-    align-items: baseline;
+    align-items: center;
     display: flex;
   }
 
@@ -490,6 +490,7 @@
     color: #696969;
     @include font-size(2rem);
     font-weight: 500;
+    margin-top: 1.5rem;
   }
 
   .authorSubscribe {
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 5dffec89..93bfe8aa 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -508,6 +508,7 @@
   a,
   a:link {
     border: none;
+    cursor: pointer;
     height: auto;
     margin: 0;
     padding: 0;
@@ -553,6 +554,10 @@
   &:global(.loginbtn) {
     background: #e9e9ee;
 
+    @include media-breakpoint-up(xl) {
+      background: none;
+    }
+
     .icon {
       height: 2.4rem;
       width: 2.4rem;
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 52ec142f..8668c093 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -129,13 +129,14 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={isNotificationsVisible()}>
               <div class={styles.userControlItem} onClick={handleBellIconClick}>
-                {/*TODO: check markup (cursor: pointer, hover)*/}
-                <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
-                <Icon
-                  name="bell-white-hover"
-                  counter={unreadNotificationsCount()}
-                  class={clsx(styles.icon, styles.iconHover)}
-                />
+                <div class={styles.button}>
+                  <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
+                  <Icon
+                    name="bell-white-hover"
+                    counter={unreadNotificationsCount()}
+                    class={clsx(styles.icon, styles.iconHover)}
+                  />
+                </div>
               </div>
             </Show>
 
diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index f69f99c2..9dafa21a 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -82,6 +82,7 @@
   overflow: auto;
   padding: 5.4rem 2.4rem 2.4rem;
   position: relative;
+  text-align: left;
 
   @include media-breakpoint-up(sm) {
     padding: 5rem;
diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 6c186a76..c6c5c8d6 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -9,6 +9,10 @@
     margin-bottom: 3rem;
   }
 
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
   .picture {
     display: block;
     width: 40px;
diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss
index e7da012c..a9215987 100644
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@@ -8,8 +8,12 @@
   }
 
   .groupControls {
-    margin-bottom: 6rem !important;
+    margin-bottom: 2rem !important;
     margin-top: 0 !important;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 6rem !important;
+    }
   }
 }
 
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss
index cb20f387..51498b5f 100644
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@@ -1,6 +1,6 @@
 .button {
   border-radius: 2px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;