Minor style fixes

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;

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;

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;

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 {

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;

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>
 

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;

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;

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;
+    }
   }
 }
 

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;