Merge remote-tracking branch 'origin/main' into revert-173-revert-155-fix/useconfirm_n_tableofcont (#176)

# Conflicts:
#	package.json

public/locales/en/translation.json

@@ -302,6 +302,8 @@
   "Topic is supported by": "Topic is supported by",
   "Topics": "Topics",
   "Topics which supported by author": "Topics which supported by author",
+  "There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?": "There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?",
+  "There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?": "There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?",
   "Try to find another way": "Try to find another way",
   "Unfollow": "Unfollow",
   "Unfollow the topic": "Unfollow the topic",

public/locales/ru/translation.json

@@ -319,6 +319,8 @@
   "Topic is supported by": "Тему поддерживают",
   "Topics": "Темы",
   "Topics which supported by author": "Автор поддерживает темы",
+  "There are unsaved changes in your publishing settings. Are you sure you want to leave the page without saving?": "В настройках публикации есть несохраненные изменения. Уверены, что хотите покинуть страницу без сохранения?",
+  "There are unsaved changes in your profile settings. Are you sure you want to leave the page without saving?": "В настройках вашего профиля есть несохраненные изменения. Уверены, что хотите покинуть страницу без сохранения?",
   "Try to find another way": "Попробуйте найти по-другому",
   "Unfollow": "Отписаться",
   "Unfollow the topic": "Отписаться от темы",

src/components/Article/Article.module.scss

@@ -1,11 +1,13 @@
 h1 {
   @include font-size(4rem);
+
   line-height: 1.1;
   margin-top: 0.5em;
 }
 
 h2 {
   @include font-size(4rem);
+
   line-height: 1.1;
 }
 
@@ -44,7 +46,7 @@ img {
     margin: 3.2rem 0;
     position: relative;
 
-    &:before {
+    &::before {
       background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyMSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwLjUwMDFWMjFIMTAuNzA2MVYxMC41MDAxSDQuNTg4MzNDNC41ODgzMyA3LjE4NjU4IDcuMzI3NTggNC41MDAwOCAxMC43MDYxIDQuNTAwMDhWMEM0Ljc5Mjk3IDAgMCA0LjcwMDczIDAgMTAuNDk5OVYxMC41MDAxWk0yNiA0LjUwMDA4VjBDMjAuMDg2OSAwIDE1LjI5MzkgNC43MDA3MyAxNS4yOTM5IDEwLjQ5OTlWMjAuOTk5OUgyNlYxMC41MDA1SDE5Ljg4MjJDMTkuODgyNCA3LjE4NyAyMi42MjE3IDQuNTAwNSAyNiA0LjUwMDVWNC41MDAwOFoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+')
         no-repeat;
       content: '';
@@ -60,17 +62,19 @@ img {
   blockquote[data-type='quote'],
   ta-quotation {
     @include font-size(1.4rem);
+
     border: solid #000;
     border-width: 0 0 0 2px;
     display: block;
     font-weight: 500;
     line-height: 1.6;
-    margin: 1.6rem 0 0 calc(-8.33333% - 2px);
-    padding: 0 0 0 8.33333%;
+    margin: 1.6rem 0 0 calc(-8.3333% - 2px);
+    padding: 0 0 0 8.3333%;
 
     &[data-float='left'],
     &[data-float='right'] {
       @include font-size(2.2rem);
+
       line-height: 1.4;
     }
 
@@ -84,7 +88,7 @@ img {
       }
     }
 
-    &:before {
+    &::before {
       display: none;
     }
   }
@@ -95,13 +99,15 @@ img {
   ta-border-sub {
     background: #f1f2f3;
     display: block;
+
     @include font-size(1.4rem);
+
     margin: 3.2rem 0;
     padding: 3.2rem;
 
     @include media-breakpoint-up(md) {
-      margin: 3.2rem -8.33333%;
-      padding: 3.2rem 8.33333%;
+      margin: 3.2rem -8.3333%;
+      padding: 3.2rem 8.3333%;
     }
 
     p:last-child {
@@ -144,7 +150,7 @@ img {
     }
 
     @include media-breakpoint-up(md) {
-      margin: 0 8.33333% 3.2rem -16.66666%;
+      margin: 0 8.3333% 3.2rem -16.6666%;
     }
   }
 
@@ -154,7 +160,7 @@ img {
     }
 
     @include media-breakpoint-up(md) {
-      margin: 0 -16.66666% 3.2rem 8.33333%;
+      margin: 0 -16.6666% 3.2rem 8.3333%;
     }
   }
 
@@ -168,13 +174,13 @@ img {
 
   h2 {
     @include media-breakpoint-up(xl) {
-      margin-left: -16.6666666666%;
+      margin-left: -16.6666%;
     }
   }
 
   :global(.img-align-left) {
     float: left;
-    margin: 1em 8.333333333% 0.5em 0;
+    margin: 1em 8.3333% 0.5em 0;
   }
 
   :global(.width-30) {
@@ -187,18 +193,18 @@ img {
 
   :global(.img-align-left.width-50) {
     @include media-breakpoint-up(xl) {
-      margin-left: -16.6666666666%;
+      margin-left: -16.6666%;
     }
   }
 
   :global(.img-align-right) {
     float: right;
-    margin: 1em 0 0.5em 8.333333333%;
+    margin: 1em 0 0.5em 8.3333%;
   }
 
   :global(.img-align-right.width-50) {
     @include media-breakpoint-up(xl) {
-      margin-right: -16.6666666666%;
+      margin-right: -16.6666%;
     }
   }
 
@@ -498,6 +504,7 @@ img {
 
   button {
     @include font-size(1.5rem);
+
     border-radius: 0.8rem;
     margin-right: 1.2rem;
     padding: 0.9rem 1.2rem;

src/components/Article/Comment.tsx

@@ -17,7 +17,6 @@ import { useSnackbar } from '../../context/snackbar'
 import { useConfirm } from '../../context/confirm'
 
 import { Author, Reaction, ReactionKind } from '../../graphql/types.gen'
-
 import { router } from '../../stores/router'
 
 import styles from './Comment.module.scss'
@@ -48,6 +47,7 @@ export const Comment = (props: Props) => {
   const {
     actions: { showConfirm }
   } = useConfirm()
+
   const {
     actions: { showSnackbar }
   } = useSnackbar()

src/components/Author/Userpic/Userpic.tsx

@@ -1,5 +1,4 @@
 import { Show } from 'solid-js'
-import type { Author, User } from '../../../graphql/types.gen'
 import styles from './Userpic.module.scss'
 import { clsx } from 'clsx'
 import { imageProxy } from '../../../utils/imageProxy'

src/components/Editor/Prosemirror.scss

@@ -24,11 +24,12 @@
   box-sizing: content-box;
   flex: 0 0 auto;
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     padding-left: calc(21.9% + 3px);
     max-width: 72.7%;
   }
-  @media (min-width: 1200px) {
+
+  @media (width >= 1200px) {
     padding-left: calc(21.5% + 3px);
     max-width: 64.9%;
   }
@@ -38,32 +39,35 @@
 .articleEditor figure,
 .articleEditor .uploadedImage,
 .articleEditor article[data-type='incut'] {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     margin-left: calc(21.9% + 3px) !important;
     max-width: 73.6%;
   }
-  @media (min-width: 1200px) {
+
+  @media (width >= 1200px) {
     margin-left: calc(21.4% + 3px) !important;
     max-width: 65.3%;
   }
 }
 
 .articleEditor h2 {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     padding-left: calc(21.9% + 2px);
     max-width: 72.7%;
   }
-  @media (min-width: 1200px) {
+
+  @media (width >= 1200px) {
     padding-left: 21.5%;
     max-width: 87.1%;
   }
 }
 
 .articleEditor h3 {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     padding-left: calc(21.9% + 2px);
   }
-  @media (min-width: 1200px) {
+
+  @media (width >= 1200px) {
     padding-left: 21.5%;
     max-width: 87.1%;
   }
@@ -73,7 +77,7 @@
 .articleEditor * h2,
 .articleEditor * h3,
 .articleEditor * h4 {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     padding-left: unset;
     max-width: unset;
   }
@@ -183,6 +187,7 @@ mark.highlight {
 
   &[data-type='quote'] {
     @include font-size(1.4rem);
+
     border: solid #000;
     border-width: 0 0 0 2px;
     margin: 1.6rem 0;
@@ -204,7 +209,9 @@ mark.highlight {
   &[data-type='punchline'] {
     border: solid #000;
     border-width: 2px 0;
+
     @include font-size(3.2rem);
+
     font-weight: 700;
     line-height: 1.2;
     margin: 1em 0;
@@ -213,6 +220,7 @@ mark.highlight {
     &[data-float='left'],
     &[data-float='right'] {
       @include font-size(2.2rem);
+
       line-height: 1.4;
     }
 
@@ -230,7 +238,9 @@ mark.highlight {
 
 .ProseMirror article[data-type='incut'] {
   background: #f1f2f3;
+
   @include font-size(1.4rem);
+
   margin: 1em -1rem;
   padding: 2em 2rem;
   transition: background 0.3s ease-in-out;

src/components/Nav/ConfirmModal/ConfirmModal.module.scss

@@ -19,7 +19,6 @@
 .confirmModalActions {
   display: flex;
   justify-content: space-between;
-
   margin-top: 16px;
 }
 
@@ -27,26 +26,23 @@
   display: block;
   width: 100%;
   margin-right: 12px;
-
   font-weight: 700;
-
   margin-top: 32px;
   padding: 1.6rem !important;
   border: 1px solid black;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: rgb(0 0 0 / 8%);
   }
 }
 
 .confirmModalButtonPrimary {
   margin-right: 0;
-
   background-color: black;
   color: white;
   border: none;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgb(0 0 0 / 60%);
   }
 }

src/components/Nav/Header.tsx

@@ -1,7 +1,6 @@
 import { Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
-import { getPagePath } from '@nanostores/router'
+import { getPagePath, redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { redirectPage } from '@nanostores/router'
 
 import { Modal } from './Modal'
 import { AuthModal } from './AuthModal'

src/components/TableOfContents/TableOfContents.module.scss

@@ -1,28 +1,26 @@
 .TableOfContentsFixedWrapper {
-  position: fixed;
-  top: 150px;
-  right: 20px;
-
+  position: absolute;
+  top: 0;
+  right: 0;
   width: 281px;
+  min-height: 100%;
 }
 
 .TableOfContentsFixedWrapperLefted {
   right: auto;
-  left: 20px;
+  left: 70px;
 }
 
 .TableOfContentsContainer {
-  position: absolute;
-  right: 0;
-  top: 0;
-
+  position: sticky;
+  top: 150px;
+  right: 20px;
   display: flex;
   width: 100%;
   height: auto;
   padding: 20px;
   flex-direction: column;
   align-items: flex-start;
-
   background-color: transparent;
 }
 
@@ -34,7 +32,6 @@
 
 .TableOfContentsHeading {
   margin: 0;
-
   color: #000;
   font-size: 22px;
   font-style: normal;
@@ -46,20 +43,17 @@
   position: absolute;
   right: 20px;
   top: 10px;
-
   display: flex;
   align-items: center;
   justify-content: center;
-
   width: 40px;
   height: 40px;
-
   background: transparent;
   border: none;
   cursor: pointer;
 
   &:hover {
-    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 1px 1px rgb(0 0 0 / 30%);
   }
 }
 
@@ -70,18 +64,16 @@
 
 .TableOfContentsHeadingsList {
   position: relative;
-
   display: flex;
   flex-direction: column;
   list-style-type: none;
-
   margin: 0;
   padding: 0 38px 0 0;
+  width: 100%;
 }
 
 .TableOfContentsHeadingsItem {
   margin-top: 20px;
-
   color: #000;
   font-size: 14px;
   font-style: normal;
@@ -91,7 +83,7 @@
   letter-spacing: -0.14px;
 
   &:hover {
-    transform: scale(1.05);
+    color: rgb(0 0 0 / 50%);
   }
 }
 

src/components/Views/PublishSettings/PublishSettings.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import styles from './PublishSettings.module.scss'
-import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { createSignal, onMount, Show } from 'solid-js'
 import { TopicSelect, UploadModalContent } from '../../Editor'
 import { Button } from '../../_shared/Button'
 import { hideModal, showModal } from '../../../stores/ui'

src/components/_shared/GrowingTextarea/GrowingTextarea.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx'
 import styles from './GrowingTextarea.module.scss'
-import { createSignal, Show, Switch } from 'solid-js'
-import { style } from 'solid-js/web'
+import { createSignal, Show } from 'solid-js'
 
 type Props = {
   class?: string

src/context/editor.tsx

@@ -65,6 +65,17 @@ const topic2topicInput = (topic: Topic): TopicInput => {
   }
 }
 
+const saveDraftToLocalStorage = (formToSave: ShoutForm) => {
+  localStorage.setItem(`shout-${formToSave.shoutId}`, JSON.stringify(formToSave))
+}
+const getDraftFromLocalStorage = (shoutId: number) => {
+  return JSON.parse(localStorage.getItem(`shout-${shoutId}`))
+}
+
+const removeDraftFromLocalStorage = (shoutId: number) => {
+  localStorage.removeItem(`shout-${shoutId}`)
+}
+
 export const EditorProvider = (props: { children: JSX.Element }) => {
   const { t } = useLocalize()
 
@@ -164,17 +175,6 @@ export const EditorProvider = (props: { children: JSX.Element }) => {
     await updateShout(draftForm, { publish: false })
   }
 
-  const saveDraftToLocalStorage = (formToSave: ShoutForm) => {
-    localStorage.setItem(`shout-${formToSave.shoutId}`, JSON.stringify(formToSave))
-  }
-  const getDraftFromLocalStorage = (shoutId: number) => {
-    return JSON.parse(localStorage.getItem(`shout-${shoutId}`))
-  }
-
-  const removeDraftFromLocalStorage = (shoutId: number) => {
-    localStorage.removeItem(`shout-${shoutId}`)
-  }
-
   const publishShout = async (formToPublish: ShoutForm) => {
     if (isEditorPanelVisible()) {
       toggleEditorPanel()