Minor style fixes

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -451,8 +451,10 @@
 }
 
 .buttonWrite {
+  background: #ccc;
   color: #000;
   display: inline-flex;
+  font-weight: 500;
   transition:
     background-color 0.3s,
     color 0.3s;

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -327,9 +327,9 @@ export const AuthorCard = (props: Props) => {
 
                 <Show when={!props.hideWriteButton}>
                   <button
-                    class={clsx(styles.button, styles.buttonSubscribe)}
+                    class={styles.button}
                     classList={{
-                      'button--subscribe': !props.isAuthorsList,
+                      'button--light': !props.isAuthorsList,
                       'button--subscribe-topic': props.isAuthorsList,
                       [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
                     }}

src/components/Feed/ArticleCard.module.scss

@@ -115,12 +115,8 @@
   }
 }
 
-.shoutAuthor,
-.shoutDate {
-  @include font-size(1.4rem);
-}
-
 .shoutAuthor {
+  @include font-size(1.4rem);
   font-weight: 500;
   margin-right: 1.6rem;
 
@@ -139,9 +135,11 @@
 .shoutDate {
   color: #9fa1a7;
   font-weight: 500;
+  @include font-size(1.2rem);
 }
 
 .shoutDetails {
+  align-items: end;
   display: flex;
   margin-bottom: 1rem;
 }
@@ -149,8 +147,7 @@
 .shoutDetailsFeedMode {
   justify-content: space-between;
 
-  .shoutAuthor,
+  .shoutAuthor {
-  .shoutDate {
     @include font-size(1.2rem);
   }
 }
@@ -194,19 +191,27 @@
   font-weight: 400;
   line-height: 1.3;
   margin-bottom: 1.4rem;
-  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .shoutCardLinkContainer {
   position: relative;
-  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .shoutCardEditControl {
   border-radius: 2em;
   min-height: 2.6em;
   padding: 0 1.4em;
-  transition: background-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 
   &:hover {
     background: var(--background-color-invert);

src/components/Nav/Header/Header.module.scss

@@ -421,6 +421,10 @@
   transform: translateY(-50%);
   width: 100%;
 
+  @include media-breakpoint-up(xl) {
+    right: 2rem;
+  }
+
   .control {
     cursor: pointer;
     border: 0;

src/components/Nav/Header/Header.tsx

@@ -219,6 +219,7 @@ export const Header = (props: Props) => {
                 <Link
                   onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
                   onMouseOut={() => hideSubnavigation}
+                  routeName="guide"
                   body={t('Knowledge base')}
                   active={isKnowledgeBaseVisible()}
                 />

src/components/TableOfContents/TableOfContents.module.scss

@@ -158,8 +158,9 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 1.8rem;
   text-align: left;
+  vertical-align: bottom;
 
   &:hover {
     color: rgb(0 0 0 / 50%);

src/styles/app.scss

@@ -289,12 +289,16 @@ button {
 
 .button--light {
   @include font-size(1.5rem);
-
   background-color: #f6f6f6;
+  border-radius: 0.8rem;
   color: #000;
-  font-weight: 400;
+  font-weight: 500;
   height: auto;
   padding: 0.6rem 1.2rem 0.6rem 1rem;
+
+  &:hover {
+    background: #e9e9ee;
+  }
 }
 
 .button--subscribe-topic {