Feature/update confirm modal (#264)

Update confirm modal

public/locales/en/translation.json

@@ -28,6 +28,8 @@
   "All posts": "All posts",
   "All topics": "All topics",
   "Almost done! Check your email.": "Almost done! Just checking your email.",
+  "Are you sure you want to delete this comment?": "Are you sure you want to delete this comment?",
+  "Are you sure you want to delete this draft?": "Are you sure you want to delete this draft?",
   "Are you sure you want to to proceed the action?": "Are you sure you want to to proceed the action?",
   "Art": "Art",
   "Artist": "Artist",
@@ -100,6 +102,7 @@
   "Discussion rules": "Discussion rules",
   "Discussions": "Discussions",
   "Dogma": "Dogma",
+  "Draft successfully deleted": "Draft successfully deleted",
   "Drafts": "Drafts",
   "Drag the image to this area": "Drag the image to this area",
   "Each image must be no larger than 5 MB.": "Each image must be no larger than 5 MB.",
@@ -193,6 +196,7 @@
   "Manifesto": "Manifesto",
   "Many files, choose only one": "Many files, choose only one",
   "Material card": "Material card",
+  "Message": "Message",
   "More": "More",
   "Most commented": "Commented",
   "Most read": "Readable",
@@ -353,7 +357,6 @@
   "Where": "From",
   "Words": "Слов",
   "Work with us": "Cooperate with Discourse",
-  "Message": "Message",
   "Write a comment...": "Write a comment...",
   "Write a short introduction": "Write a short introduction",
   "Write about the topic": "Write about the topic",

public/locales/ru/translation.json

@@ -31,6 +31,8 @@
   "All posts": "Все публикации",
   "All topics": "Все темы",
   "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.",
+  "Are you sure you want to delete this comment?": "Уверены, что хотите удалить этот комментарий?",
+  "Are you sure you want to delete this draft?": "Уверены, что хотите удалить этот черновик?",
   "Are you sure you want to to proceed the action?": "Вы уверены, что хотите продолжить?",
   "Art": "Искусство",
   "Artist": "Исполнитель",
@@ -104,6 +106,7 @@
   "Discussion rules": "Правила сообществ самиздата в соцсетях",
   "Discussions": "Дискуссии",
   "Dogma": "Догма",
+  "Draft successfully deleted": "Черновик успешно удален",
   "Drafts": "Черновики",
   "Drag the image to this area": "Перетащите изображение в эту область",
   "Each image must be no larger than 5 MB.": "Каждое изображение должно быть размером не больше 5 мб.",

src/components/Article/Comment.tsx

@@ -62,7 +62,12 @@ export const Comment = (props: Props) => {
   const remove = async () => {
     if (comment()?.id) {
       try {
-        const isConfirmed = await showConfirm()
+        const isConfirmed = await showConfirm({
+          confirmBody: t('Are you sure you want to delete this comment?'),
+          confirmButtonLabel: t('Delete'),
+          confirmButtonVariant: 'danger',
+          declineButtonVariant: 'primary'
+        })
 
         if (isConfirmed) {
           await deleteReaction(comment().id)

src/components/Article/CommentsTree.tsx

@@ -1,4 +1,4 @@
-import { Show, createMemo, createSignal, onMount, For, createEffect } from 'solid-js'
+import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
 import { Comment } from './Comment'
 import styles from './Article.module.scss'
 import { clsx } from 'clsx'

src/components/Draft/Draft.tsx

@@ -35,11 +35,16 @@ export const Draft = (props: Props) => {
   const handleDeleteLinkClick = async (e) => {
     e.preventDefault()
 
-    const isConfirmed = await showConfirm()
+    const isConfirmed = await showConfirm({
+      confirmBody: t('Are you sure you want to delete this draft?'),
+      confirmButtonLabel: t('Delete'),
+      confirmButtonVariant: 'danger',
+      declineButtonVariant: 'primary'
+    })
     if (isConfirmed) {
       props.onDelete(props.shout)
 
-      await showSnackbar({ type: 'success', body: t('Success') })
+      await showSnackbar({ body: t('Draft successfully deleted') })
     }
   }
 

src/components/Inbox/Message.tsx

@@ -7,7 +7,6 @@ import formattedTime from '../../utils/formatDateTime'
 import { Icon } from '../_shared/Icon'
 import { MessageActionsPopup } from './MessageActionsPopup'
 import QuotedMessage from './QuotedMessage'
-import MD from '../Article/MD'
 
 type Props = {
   content: MessageType

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

@@ -1,48 +1,22 @@
 .confirmModal {
-  background: #fff;
-  min-height: 550px;
   position: relative;
 
-  @include media-breakpoint-up(md) {
-    min-height: 710px;
-  }
-}
-
-.confirmModalTitle {
-  font-size: 26px;
-  line-height: 32px;
-  font-weight: 700;
-  color: #141414;
-  text-align: left;
-}
-
-.confirmModalActions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 16px;
-}
-
-.confirmModalButton {
-  display: block;
-  width: 100%;
-  margin-right: 12px;
-  font-weight: 700;
-  margin-top: 32px;
-  padding: 1.6rem !important;
-  border: 1px solid black;
-
-  &:hover {
-    background-color: rgb(0 0 0 / 8%);
-  }
-}
-
-.confirmModalButtonPrimary {
-  margin-right: 0;
-  background-color: black;
-  color: white;
-  border: none;
-
-  &:hover {
-    background-color: rgb(0 0 0 / 60%);
+  .confirmModalTitle {
+    @include font-size(2rem);
+
+    font-weight: 700;
+    color: var(--default-color);
+    text-align: center;
+  }
+
+  .confirmModalActions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 4rem;
+    gap: 2rem;
+
+    .confirmAction {
+      flex: 1;
+    }
   }
 }

src/components/Nav/ConfirmModal/ConfirmModal.tsx

@@ -1,7 +1,7 @@
-import { clsx } from 'clsx'
 import { useConfirm } from '../../../context/confirm'
-import styles from './ConfirmModal.module.scss'
 import { useLocalize } from '../../../context/localize'
+import { Button } from '../../_shared/Button'
+import styles from './ConfirmModal.module.scss'
 
 export const ConfirmModal = () => {
   const { t } = useLocalize()
@@ -12,21 +12,26 @@ export const ConfirmModal = () => {
   } = useConfirm()
 
   return (
-    <div>
+    <div class={styles.confirmModal}>
       <h4 class={styles.confirmModalTitle}>
         {confirmMessage().confirmBody ?? t('Are you sure you want to to proceed the action?')}
       </h4>
 
       <div class={styles.confirmModalActions}>
-        <button class={styles.confirmModalButton} onClick={() => resolveConfirm(false)}>
-          {confirmMessage().declineButtonLabel ?? t('Decline')}
-        </button>
-        <button
-          class={clsx(styles.confirmModalButton, styles.confirmModalButtonPrimary)}
+        <Button
+          onClick={() => resolveConfirm(false)}
+          value={confirmMessage().declineButtonLabel ?? t('Decline')}
+          size="L"
+          variant={confirmMessage().declineButtonVariant ?? 'secondary'}
+          class={styles.confirmAction}
+        />
+        <Button
           onClick={() => resolveConfirm(true)}
-        >
-          {confirmMessage().confirmButtonLabel ?? t('Confirm')}
-        </button>
+          value={confirmMessage().confirmButtonLabel ?? t('Confirm')}
+          size="L"
+          variant={confirmMessage().confirmButtonVariant ?? 'primary'}
+          class={styles.confirmAction}
+        />
       </div>
     </div>
   )

src/components/Nav/Modal/Modal.module.scss

@@ -71,8 +71,8 @@
     }
 
     .close {
-      right: 3.6rem;
-      top: 12px;
+      right: 1.6rem;
+      top: 1.6rem;
     }
   }
 }

src/components/Nav/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, on, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { clsx } from 'clsx'
 import { hideModal, useModalStore } from '../../../stores/ui'
@@ -8,7 +8,6 @@ import styles from './Modal.module.scss'
 import { redirectPage } from '@nanostores/router'
 import { router } from '../../../stores/router'
 import { Icon } from '../../_shared/Icon'
-import { resetSortedArticles } from '../../../stores/zine/articles'
 
 interface Props {
   name: string

src/components/NotificationsPanel/NotificationView/NotificationView.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx'
 import styles from './NotificationView.module.scss'
 import type { Notification } from '../../../graphql/types.gen'
-import { formatDate } from '../../../utils'
 import { createMemo, createSignal, onMount, Show } from 'solid-js'
 import { NotificationType } from '../../../graphql/types.gen'
 import { openPage } from '@nanostores/router'
@@ -9,7 +8,6 @@ import { router } from '../../../stores/router'
 import { useNotifications } from '../../../context/notifications'
 import { Userpic } from '../../Author/Userpic'
 import { useLocalize } from '../../../context/localize'
-import notifications from '../../../graphql/query/notifications'
 
 type Props = {
   notification: Notification

src/components/NotificationsPanel/NotificationsPanel.tsx

@@ -4,7 +4,7 @@ import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
 import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
 import { useLocalize } from '../../context/localize'
 import { Icon } from '../_shared/Icon'
-import { createEffect, For, onCleanup, onMount } from 'solid-js'
+import { createEffect, For } from 'solid-js'
 import { useNotifications } from '../../context/notifications'
 import { NotificationView } from './NotificationView'
 

src/components/Views/Author/Author.tsx

@@ -16,7 +16,6 @@ import { apiClient } from '../../../utils/apiClient'
 import { Comment } from '../../Article/Comment'
 import { useLocalize } from '../../../context/localize'
 import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
-import { hideModal } from '../../../stores/ui'
 import { getPagePath } from '@nanostores/router'
 import { useSession } from '../../../context/session'
 import { Loading } from '../../_shared/Loading'

src/components/_shared/Button/Button.module.scss

@@ -31,6 +31,17 @@
     }
   }
 
+  &.danger {
+    border: 3px solid var(--danger-color);
+    background: var(--background-color);
+    color: var(--danger-color);
+
+    &:hover {
+      background: var(--danger-color);
+      color: #fff;
+    }
+  }
+
   &.inline {
     font-weight: 700;
     font-size: 16px;

src/components/_shared/Button/Button.tsx

@@ -2,10 +2,11 @@ import type { JSX } from 'solid-js'
 import { clsx } from 'clsx'
 import styles from './Button.module.scss'
 
+export type ButtonVariant = 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline' | 'danger'
 type Props = {
   value: string | JSX.Element
   size?: 'S' | 'M' | 'L'
-  variant?: 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline'
+  variant?: ButtonVariant
   type?: 'submit' | 'button'
   loading?: boolean
   disabled?: boolean

src/context/confirm.tsx

@@ -2,11 +2,14 @@ import { createContext, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
 import { hideModal, showModal } from '../stores/ui'
+import { ButtonVariant } from '../components/_shared/Button/Button'
 
 type ConfirmMessage = {
   confirmBody?: string | JSX.Element
   confirmButtonLabel?: string
+  confirmButtonVariant?: ButtonVariant
   declineButtonLabel?: string
+  declineButtonVariant?: ButtonVariant
 }
 
 type ConfirmContextType = {
@@ -15,7 +18,9 @@ type ConfirmContextType = {
     showConfirm: (message?: {
       confirmBody?: ConfirmMessage['confirmBody']
       confirmButtonLabel?: ConfirmMessage['confirmButtonLabel']
+      confirmButtonVariant?: ConfirmMessage['confirmButtonVariant']
       declineButtonLabel?: ConfirmMessage['declineButtonLabel']
+      declineButtonVariant?: ConfirmMessage['declineButtonVariant']
     }) => Promise<boolean>
     resolveConfirm: (value: boolean) => void
   }
@@ -36,13 +41,17 @@ export const ConfirmProvider = (props: { children: JSX.Element }) => {
     message: {
       confirmBody?: ConfirmMessage['confirmBody']
       confirmButtonLabel?: ConfirmMessage['confirmButtonLabel']
+      confirmButtonVariant?: ConfirmMessage['confirmButtonVariant']
       declineButtonLabel?: ConfirmMessage['declineButtonLabel']
+      declineButtonVariant?: ConfirmMessage['declineButtonVariant']
     } = {}
   ): Promise<boolean> => {
     const messageToShow = {
       confirmBody: message.confirmBody,
       confirmButtonLabel: message.confirmButtonLabel,
-      declineButtonLabel: message.declineButtonLabel
+      confirmButtonVariant: message.confirmButtonVariant,
+      declineButtonLabel: message.declineButtonLabel,
+      declineButtonVariant: message.declineButtonVariant
     }
 
     setConfirmMessage(messageToShow)