From 64907a84e6e7273889d2a47002dbc15682771558 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 9 Nov 2022 22:51:41 +0300
Subject: [PATCH] Fixed content index control style

---
 .../icons/content-index-control-expanded.svg  |  3 ++
 public/icons/content-index-control.svg        |  4 +++
 src/components/Pages/about/GuidePage.tsx      | 12 ++++++--
 src/components/Pages/about/HelpPage.tsx       | 12 ++++++--
 src/components/Pages/about/ManifestPage.tsx   | 12 ++++++--
 src/components/Pages/about/TermsOfUsePage.tsx | 12 ++++++--
 src/styles/app.scss                           | 30 ++++++++++++++++++-
 7 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 public/icons/content-index-control-expanded.svg
 create mode 100644 public/icons/content-index-control.svg

diff --git a/public/icons/content-index-control-expanded.svg b/public/icons/content-index-control-expanded.svg
new file mode 100644
index 00000000..01980281
--- /dev/null
+++ b/public/icons/content-index-control-expanded.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 8V5H0V3H10V0L14 4L10 8Z" fill="black"/>
+</svg>
diff --git a/public/icons/content-index-control.svg b/public/icons/content-index-control.svg
new file mode 100644
index 00000000..7d2861d0
--- /dev/null
+++ b/public/icons/content-index-control.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" 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="black"/>
+<rect x="1" y="1" width="26" height="26" stroke="black" stroke-width="2"/>
+</svg>
diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx
index 3b55056f..4d216ea6 100644
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@@ -1,6 +1,7 @@
 import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { t } from '../../../utils/intl'
+import { Icon } from '../../Nav/Icon'
 
 export const GuidePage = () => {
   const title = t('How it works')
@@ -22,9 +23,14 @@ export const GuidePage = () => {
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
-            <p>
-              <button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
-                {indexExpanded() ? 'Свернуть' : 'Оглавление'}
+            <p class="content-index-control-container">
+              <button class="button button--content-index" onClick={toggleIndexExpanded}>
+                <Show when={!indexExpanded()}>
+                  <Icon name="content-index-control" />
+                </Show>
+                <Show when={indexExpanded()}>
+                  <Icon name="content-index-control-expanded" />
+                </Show>
               </button>
             </p>
 
diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx
index 6e0275bd..ce728c2c 100644
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@@ -1,6 +1,7 @@
 import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { Donate } from '../../Discours/Donate'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Support us')
 
@@ -19,9 +20,14 @@ export const HelpPage = () => {
       <article class="container container--static-page discours-help">
         <div class="row">
           <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
-            <p>
-              <button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
-                {indexExpanded() ? 'Свернуть' : 'Оглавление'}
+            <p class="content-index-control-container">
+              <button class="button button--content-index" onClick={toggleIndexExpanded}>
+                <Show when={!indexExpanded()}>
+                  <Icon name="content-index-control" />
+                </Show>
+                <Show when={indexExpanded()}>
+                  <Icon name="content-index-control-expanded" />
+                </Show>
               </button>
             </p>
 
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index 4b42465e..9834ad81 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -4,6 +4,7 @@ import { Modal } from '../../Nav/Modal'
 import { Feedback } from '../../Discours/Feedback'
 import Subscribe from '../../Discours/Subscribe'
 import Opener from '../../Nav/Opener'
+import { Icon } from '../../Nav/Icon'
 
 // title={t('Manifest')}
 
@@ -23,9 +24,14 @@ export const ManifestPage = () => {
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
-            <p>
-              <button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
-                {indexExpanded() ? 'Свернуть' : 'Оглавление'}
+            <p class="content-index-control-container">
+              <button class="button button--content-index" onClick={toggleIndexExpanded}>
+                <Show when={!indexExpanded()}>
+                  <Icon name="content-index-control" />
+                </Show>
+                <Show when={indexExpanded()}>
+                  <Icon name="content-index-control-expanded" />
+                </Show>
               </button>
             </p>
 
diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx
index 9ea7e9bc..67293a2c 100644
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@@ -1,5 +1,6 @@
 import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Terms of use')
 
@@ -17,9 +18,14 @@ export const TermsOfUsePage = () => {
       <article class="container container--static-page">
         <div class="row">
           <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
-            <p>
-              <button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
-                {indexExpanded() ? 'Свернуть' : 'Оглавление'}
+            <p class="content-index-control-container">
+              <button class="button button--content-index" onClick={toggleIndexExpanded}>
+                <Show when={!indexExpanded()}>
+                  <Icon name="content-index-control" />
+                </Show>
+                <Show when={indexExpanded()}>
+                  <Icon name="content-index-control-expanded" />
+                </Show>
               </button>
             </p>
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 7258a3ed..5697045b 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -32,7 +32,7 @@ html {
 body {
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
-  line-height: 1.4;
+  line-height: 1.6;
   min-height: 100%;
   text-size-adjust: 100%;
 
@@ -239,6 +239,30 @@ button {
   }
 }
 
+.button--content-index {
+  border: 2px solid #fff;
+  background: none;
+  height: 3.2rem;
+  padding: 0;
+  width: 3.2rem;
+
+  .icon,
+  img {
+    vertical-align: middle;
+    width: auto;
+  }
+
+  &:hover {
+    .icon {
+      opacity: 0.5;
+    }
+  }
+}
+
+.content-index-control-container {
+  text-align: right;
+}
+
 form {
   .pretty-form__item {
     position: relative;
@@ -654,6 +678,10 @@ astro-island {
   li {
     margin-bottom: 1em;
   }
+
+  a {
+    border: none;
+  }
 }
 
 .load-more-container {