From 8ffa30f1be7b2418077f55eb9f1799facb8a0820 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 11 Nov 2022 12:34:40 +0300
Subject: [PATCH] Minor fixes about pages

---
 src/components/Pages/about/GuidePage.tsx      |  6 +++--
 src/components/Pages/about/HelpPage.tsx       |  6 +++--
 src/components/Pages/about/ManifestPage.tsx   |  8 ++++---
 src/components/Pages/about/TermsOfUsePage.tsx |  6 +++--
 src/styles/app.scss                           | 24 +++++++++++++++++--
 5 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx
index b4d690ff..b1158c60 100644
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 export const GuidePage = () => {
   const title = t('How it works')
 
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -28,12 +28,14 @@ export const GuidePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#how-it-works">{title}</a>
diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx
index 1a8cd4bb..34180213 100644
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Support us')
 
 export const HelpPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -25,12 +25,14 @@ export const HelpPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index f5cb088a..3e7101af 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../../Nav/Icon'
 // title={t('Manifest')}
 
 export const ManifestPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -29,12 +29,14 @@ export const ManifestPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#manifest">Манифест</a>
@@ -104,7 +106,7 @@ export const ManifestPage = () => {
               независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
               следующими способами:
             </p>
-            <details>
+            <details open>
               <summary>
                 <h3 id="contribute">Предлагать материалы</h3>
               </summary>
diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx
index 7dad2295..3a300c00 100644
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@@ -5,7 +5,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Terms of use')
 
 export const TermsOfUsePage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -23,12 +23,14 @@ export const TermsOfUsePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#terms-of-use">Пользовательское соглашение</a>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 40b47d56..f8566695 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -250,8 +250,8 @@ button {
 }
 
 .button--content-index {
-  border: 2px solid #fff;
   background: none;
+  border: 2px solid #fff;
   height: 3.2rem;
   float: right;
   padding: 0;
@@ -271,15 +271,31 @@ button {
     right: $container-padding-x;
   }
 
+  .icon {
+    background: #fff;
+    transition: filter 0.3s;
+  }
+
   .icon,
   img {
+    height: 100%;
     vertical-align: middle;
     width: auto;
   }
 
   &:hover {
     .icon {
-      opacity: 0.5;
+      filter: invert(1);
+    }
+  }
+
+  .expanded {
+    border-radius: 100%;
+    overflow: hidden;
+
+    img {
+      height: auto;
+      margin-top: 0.8rem;
     }
   }
 }
@@ -723,6 +739,10 @@ astro-island {
   a {
     border: none;
   }
+
+  h4 {
+    @include font-size(1.6rem);
+  }
 }
 
 .load-more-container {