Minor table of contents fixes

public/icons/hide-table-of-contents.svg

@@ -1,4 +1,4 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.999512" y="27" width="26" height="26" transform="rotate(-90 0.999512 27)" stroke="currentColor" stroke-width="2"/>
+<rect fill="#fff" x="0.999512" y="27" width="26" height="26" transform="rotate(-90 0.999512 27)" stroke="currentColor" stroke-width="2"/>
 <path d="M10.9995 18V15H19.9995V13H10.9995V10L6.99951 14L10.9995 18Z" fill="currentColor"/>
 </svg>

public/icons/show-table-of-contents.svg

@@ -1,4 +1,4 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="currentColor"/>
+<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2" fill="#fff"/>
-<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2"/>
+ <path d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="currentColor"/>
 </svg>

public/locales/en/translation.json

@@ -144,6 +144,7 @@
   "Help": "Помощь",
   "Help to edit": "Help to edit",
   "Here you can customize your profile the way you want.": "Here you can customize your profile the way you want.",
+  "Hide table of contents": "Hide table of contents",
   "Highlight": "Highlight",
   "Hooray! Welcome!": "Hooray! Welcome!",
   "Horizontal collaborative journalistic platform": "Horizontal collaborative journalism platform",
@@ -265,6 +266,7 @@
   "Share": "Share",
   "Show": "Show",
   "Show lyrics": "Show lyrics",
+  "Show table of contents": "Show table of contents",
   "Slug": "Slug",
   "Social networks": "Social networks",
   "Something went wrong, check email and password": "Something went wrong. Check your email and password",

public/locales/ru/translation.json

@@ -152,6 +152,7 @@
   "Help": "Помощь",
   "Help to edit": "Помочь редактировать",
   "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.",
+  "Hide table of contents": "Скрыть главление",
   "Highlight": "Подсветка",
   "Hooray! Welcome!": "Ура! Добро пожаловать!",
   "Horizontal collaborative journalistic platform": "Горизонтальная платформа для коллаборативной журналистики",
@@ -282,6 +283,7 @@
   "Short opening": "Расскажите вашу историю...",
   "Show": "Показать",
   "Show lyrics": "Текст песни",
+  "Show table of contents": "Показать главление",
   "Slug": "Постоянная ссылка",
   "Social networks": "Социальные сети",
   "Something went wrong, check email and password": "Что-то пошло не так. Проверьте адрес электронной почты и пароль",

src/components/TableOfContents/TableOfContents.module.scss

@@ -3,14 +3,12 @@
   top: 0;
 
   &:not(.TableOfContentsFixedWrapperLefted) {
+    margin-top: -0.2em;
+
     .TableOfContentsPrimaryButton {
       margin-top: 5.4rem;
       transform: rotate(180deg);
     }
-
-    .TableOfContentsContainer {
-      padding-top: 2.7em;
-    }
   }
 }
 
@@ -72,6 +70,10 @@
   background: transparent;
   border: none;
   cursor: pointer;
+
+  &:hover {
+    filter: invert(1);
+  }
 }
 
 .TableOfContentsHeadingsList {

src/components/TableOfContents/TableOfContents.tsx

@@ -99,9 +99,9 @@ export const TableOfContents = (props: Props) => {
             })}
             onClick={(e) => {
               e.preventDefault()
-
               toggleIsVisible()
             }}
+            title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
           >
             <Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}>
               <Icon name="hide-table-of-contents" class="icon" />