Merge remote-tracking branch 'origin/dev' into prepare-inbox

.eslintrc.js

@@ -73,6 +73,7 @@ module.exports = {
     'unicorn/import-style': 'off',
     'unicorn/numeric-separators-style': 'off',
     'unicorn/prefer-node-protocol': 'off',
+    'unicorn/consistent-function-scoping': 'warn',
 
     'promise/always-return': 'off',
 

__checks__/discoursio-webapp.check.js

@@ -0,0 +1,25 @@
+const { chromium } = require('playwright')
+
+const checkUrl = async (page, targetUrl, pageName) => {
+  const response = await page.goto(targetUrl)
+  if (response.status() > 399) {
+    throw new Error(`Failed with response code ${response.status()}`)
+  }
+
+  await page.screenshot({ path: `${pageName}.jpg` })
+}
+
+async function run() {
+  const browser = await chromium.launch()
+  const page = await browser.newPage()
+
+  const targetUrl = process.env.ENVIRONMENT_URL || 'https://testing.discours.io'
+
+  await checkUrl(page, targetUrl, 'main')
+  await checkUrl(page, `${targetUrl}/authors`, 'authors')
+  await checkUrl(page, `${targetUrl}/topics`, 'topics')
+  await page.close()
+  await browser.close()
+}
+
+run()

package.json

@@ -25,7 +25,7 @@
     "preview": "astro preview",
     "server": "node server/server.mjs",
     "start": "astro dev",
-    "start:local": "cross-env PUBLIC_API_URL=http://localhost:8080 astro dev",
+    "start:local": "cross-env PUBLIC_API_URL=http://127.0.0.1:8080 astro dev",
     "start:staging": "cross-env PUBLIC_API_URL=https://testapi.discours.io astro dev",
     "typecheck": "astro check && tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch",

src/components/Article/FullArticle.tsx

@@ -3,13 +3,17 @@ import './Full.scss'
 import { Icon } from '../_shared/Icon'
 import ArticleComment from './Comment'
 import { AuthorCard } from '../Author/Card'
-import { createMemo, For, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
 import { useSession } from '../../context/session'
+import stylesHeader from '../Nav/Header.module.scss'
+import styles from '../../styles/Article.module.scss'
+import RatingControl from './RatingControl'
+import { clsx } from 'clsx'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -39,6 +43,7 @@ const formatDate = (date: Date) => {
 export const FullArticle = (props: ArticleProps) => {
   const { session } = useSession()
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
+  const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
 
   const mainTopic = () =>
     (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace(
@@ -64,8 +69,8 @@ export const FullArticle = (props: ArticleProps) => {
   return (
     <div class="shout wide-container">
       <article class="col-md-6 shift-content">
-        <div class="shout__header">
+        <div class={styles.shoutHeader}>
-          <div class="shout__topic">
+          <div class={styles.shoutTopic}>
             <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopic() || ''} />
           </div>
 
@@ -74,7 +79,7 @@ export const FullArticle = (props: ArticleProps) => {
             <h4>{capitalize(props.article.subtitle, false)}</h4>
           </Show>
 
-          <div class="shout__author">
+          <div class={styles.shoutAuthor}>
             <For each={props.article.authors}>
               {(a: Author, index) => (
                 <>
@@ -84,11 +89,11 @@ export const FullArticle = (props: ArticleProps) => {
               )}
             </For>
           </div>
-          <div class="shout__cover" style={{ 'background-image': `url('${props.article.cover}')` }} />
+          <div class={styles.shoutCover} style={{ 'background-image': `url('${props.article.cover}')` }} />
         </div>
 
         <Show when={Boolean(props.article.body)}>
-          <div class="shout__body">
+          <div class={styles.shoutBody}>
             <Show
               when={!props.article.body.startsWith('<')}
               fallback={<div innerHTML={props.article.body} />}
@@ -100,63 +105,82 @@ export const FullArticle = (props: ArticleProps) => {
       </article>
 
       <div class="col-md-8 shift-content">
-        <div class="shout-stats">
+        <div class={styles.shoutStats}>
-          <div class="shout-stats__item shout-stats__item--likes">
+          <div class={styles.shoutStatsItem}>
-            <Icon name="like" />
+            <RatingControl rating={props.article.stat?.rating} />
+          </div>
+
+          <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemLikes)}>
+            <Icon name="like" class={styles.icon} />
             {props.article.stat?.rating || ''}
           </div>
 
-          <div class="shout-stats__item">
+          <div class={styles.shoutStatsItem}>
-            <Icon name="comment" />
+            <Icon name="comment" class={styles.icon} />
             {props.article.stat?.commented || ''}
           </div>
-          <div class="shout-stats__item">
-            <Icon name="view" />
-            {props.article.stat?.viewed}
-          </div>
           {/*FIXME*/}
-          {/*<div class="shout-stats__item">*/}
+          {/*<div class={styles.shoutStatsItem}>*/}
           {/*  <a href="#bookmark" onClick={() => console.log(props.article.slug, 'articles')}>*/}
           {/*    <Icon name={'bookmark' + (bookmarked() ? '' : '-x')} />*/}
           {/*  </a>*/}
           {/*</div>*/}
-          <div class="shout-stats__item">
+          <div class={styles.shoutStatsItem}>
             <SharePopup
-              trigger={
+              onVisibilityChange={(isVisible) => {
-                <a href="#" onClick={(event) => event.preventDefault()}>
+                setIsSharePopupVisible(isVisible)
-                  <Icon name="share" />
+              }}
-                </a>
+              containerCssClass={stylesHeader.control}
-              }
+              trigger={<Icon name="share" class={styles.icon} />}
             />
           </div>
+          <div class={styles.shoutStatsItem}>
+            <Icon name="bookmark" class={styles.icon} />
+          </div>
+
           {/*FIXME*/}
           {/*<Show when={canEdit()}>*/}
-          {/*  <div class="shout-stats__item">*/}
+          {/*  <div class={styles.shoutStatsItem}>*/}
           {/*    <a href="/edit">*/}
           {/*      <Icon name="edit" />*/}
           {/*      {t('Edit')}*/}
           {/*    </a>*/}
           {/*  </div>*/}
           {/*</Show>*/}
-          <div class="shout-stats__item shout-stats__item--date">{formattedDate}</div>
+          <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
+            <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+              {formattedDate}
             </div>
 
-        <div class="topics-list">
+            <Show when={props.article.stat?.viewed}>
+              <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+                <Icon name="view" class={styles.icon} />
+                {props.article.stat?.viewed}
+              </div>
+            </Show>
+          </div>
+        </div>
+
+        <div class={styles.topicsList}>
           <For each={props.article.topics}>
             {(topic) => (
-              <div class="shout__topic">
+              <div class={styles.shoutTopic}>
                 <a href={`/topic/${topic.slug}`}>{topic.title}</a>
               </div>
             )}
           </For>
         </div>
 
-        <div class="shout__authors-list">
+        <div class={styles.shoutAuthorsList}>
           <Show when={props.article?.authors?.length > 1}>
             <h4>{t('Authors')}</h4>
           </Show>
           <For each={props.article?.authors}>
-            {(a: Author) => <AuthorCard author={a} compact={false} hasLink={true} />}
+            {(a: Author) => (
+              <div class="col-md-6">
+                <AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
+              </div>
+            )}
           </For>
         </div>
 
@@ -176,7 +200,7 @@ export const FullArticle = (props: ArticleProps) => {
           </For>
         </Show>
         <Show when={!session()?.user?.slug}>
-          <div class="comment-warning" id="comments">
+          <div class={styles.commentWarning} id="comments">
             {t('To leave a comment you please')}
             <a
               href={''}
@@ -190,7 +214,7 @@ export const FullArticle = (props: ArticleProps) => {
           </div>
         </Show>
         <Show when={session()?.user?.slug}>
-          <textarea class="write-comment" rows="1" placeholder={t('Write comment')} />
+          <textarea class={styles.writeComment} rows="1" placeholder={t('Write comment')} />
         </Show>
       </div>
     </div>

src/components/Article/RatingControl.module.scss

@@ -0,0 +1,29 @@
+.rating {
+  align-items: center;
+  display: flex;
+}
+
+.ratingValue {
+  font-weight: bold;
+  margin: 0 0.5em;
+}
+
+.ratingControl {
+  align-items: center;
+  border: 2px solid;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  height: 0.9em;
+  line-height: 0;
+  @include font-size(3.6rem);
+
+  padding: 0;
+  width: 0.9em;
+
+  &:hover {
+    background: #000;
+    border-color: #000;
+    color: #fff;
+  }
+}

src/components/Article/RatingControl.tsx

@@ -0,0 +1,19 @@
+import styles from './RatingControl.module.scss'
+import { clsx } from 'clsx'
+
+interface RatingControlProps {
+  rating?: number
+  class?: string
+}
+
+export const RatingControl = (props: RatingControlProps) => {
+  return (
+    <div class={clsx(props.class, styles.rating)}>
+      <button class={styles.ratingControl}>&minus;</button>
+      <span class={styles.ratingValue}>{props?.rating || ''}</span>
+      <button class={styles.ratingControl}>+</button>
+    </div>
+  )
+}
+
+export default RatingControl

src/components/Author/Card.module.scss

@@ -166,6 +166,7 @@
   }
 
   .icon {
+    display: inline-block;
     margin-right: 0.5em;
   }
 
@@ -206,6 +207,7 @@
     background-color: #000;
     border-color: #000;
     border-radius: 0.8rem;
+    color: #fff;
     float: none;
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;

src/components/Author/Card.tsx

@@ -9,7 +9,6 @@ import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
-import { StatMetrics } from '../_shared/StatMetrics'
 
 interface AuthorCardProps {
   caption?: string
@@ -23,6 +22,7 @@ interface AuthorCardProps {
   noSocialButtons?: boolean
   isAuthorsList?: boolean
   truncateBio?: boolean
+  liteButtons?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -117,9 +117,17 @@ export const AuthorCard = (props: AuthorCardProps) => {
             </Show>
 
             <Show when={!props.compact && !props.isAuthorsList}>
-              <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
+              <button
-                <Icon name="edit" class={styles.icon} />
+                class={styles.button}
-                {t('Write')}
+                classList={{
+                  [styles.buttonSubscribe]: !props.isAuthorsList,
+                  'button--subscribe': !props.isAuthorsList,
+                  'button--subscribe-topic': props.isAuthorsList,
+                  [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
+                }}
+              >
+                <Icon name="comment" class={styles.icon} />
+                <Show when={!props.liteButtons}>{t('Write')}</Show>
               </button>
 
               <Show when={!props.noSocialButtons}>

src/components/Author/Full.scss

@@ -1,11 +1,13 @@
 .user-details {
-  margin-bottom: 4.4rem;
+  margin-bottom: 5.4rem;
 }
 
 .author-page {
   .view-switcher {
     @include font-size(1.5rem);
 
+    margin-top: 0;
+
     button {
       font-size: 100%;
     }

src/components/Feed/Card.module.scss

@@ -460,36 +460,6 @@
   }
 }
 
-.rating {
-  align-items: center;
-  display: flex;
-}
-
-.ratingValue {
-  font-weight: bold;
-  margin: 0 0.5em;
-}
-
-.ratingControl {
-  align-items: center;
-  border: 2px solid;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  height: 0.9em;
-  line-height: 0;
-  @include font-size(3.6rem);
-
-  padding: 0;
-  width: 0.9em;
-
-  &:hover {
-    background: #000;
-    border-color: #000;
-    color: #fff;
-  }
-}
-
 .shoutCardVertical {
   aspect-ratio: auto;
   height: 100%;

src/components/Feed/Card.tsx

@@ -8,6 +8,7 @@ import styles from './Card.module.scss'
 import { locale } from '../../stores/ui'
 import { clsx } from 'clsx'
 import CardTopic from './CardTopic'
+import RatingControl from '../Article/RatingControl'
 
 interface ArticleCardProps {
   settings?: {
@@ -158,11 +159,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         <Show when={props.settings?.isFeedMode}>
           <section class={styles.shoutCardDetails}>
             <div class={styles.shoutCardDetailsContent}>
-              <div class={clsx(styles.shoutCardDetailsItem, styles.rating)}>
+              <RatingControl rating={stat?.rating} class={styles.shoutCardDetailsItem} />
-                <button class={styles.ratingControl}>&minus;</button>
-                <span class={styles.ratingValue}>{stat?.rating || ''}</span>
-                <button class={styles.ratingControl}>+</button>
-              </div>
               <div
                 class={clsx(
                   styles.shoutCardDetailsItem,

src/components/Pages/LayoutShoutsPage.tsx

@@ -70,7 +70,7 @@ export const LayoutShoutsPage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   const ModeSwitcher = () => (
-    <div class="container">
+    <div class="wide-container">
       <div class={clsx(styles.groupControls, 'row group__controls')}>
         <div class="col-md-8">
           <ul class="view-switcher">

src/components/Views/Article.tsx

@@ -4,8 +4,6 @@ import { t } from '../../utils/intl'
 import type { Shout, Reaction } from '../../graphql/types.gen'
 import { useReactionsStore } from '../../stores/zine/reactions'
 
-import '../../styles/Article.scss'
-
 interface ArticlePageProps {
   article: Shout
   reactions?: Reaction[]
@@ -32,7 +30,6 @@ export const ArticleView = (props: ArticlePageProps) => {
   })
 
   return (
-    <div class="article-page">
     <Show fallback={<div class="center">{t('Loading')}</div>} when={props.article}>
       <Suspense>
         <FullArticle
@@ -42,6 +39,5 @@ export const ArticleView = (props: ArticlePageProps) => {
         />
       </Suspense>
     </Show>
-    </div>
   )
 }

src/components/Views/Author.tsx

@@ -100,8 +100,6 @@ export const AuthorView = (props: AuthorProps) => {
                 <span class="mode-switcher__control">{t('All posts')}</span>
               </div>
             </div>
-
-            <h3 class="col-12">{title()}</h3>
           </div>
         </div>
 

src/components/Views/Topic.tsx

@@ -76,7 +76,7 @@ export const TopicView = (props: TopicProps) => {
     <div class={styles.topicPage}>
       <Show when={topic()}>
         <FullTopic topic={topic()} />
-        <div class="container">
+        <div class="wide-container">
           <div class={clsx(styles.groupControls, 'row group__controls')}>
             <div class="col-md-8">
               <ul class="view-switcher">

src/components/_shared/StatMetrics.tsx

@@ -23,7 +23,7 @@ const pseudonames = {
   authors: 'authors'
 }
 
-const nos = (s) => s.slice(0, -1)
+const nos = (s) => s.slice(-1)
 
 export const StatMetrics = (props: StatMetricsProps) => {
   return (

src/styles/Article.module.scss

@@ -0,0 +1,212 @@
+h1 {
+  @include font-size(4rem);
+
+  line-height: 1.1;
+  margin-top: 0.5em;
+}
+
+h2 {
+  line-height: 1.1;
+}
+
+img {
+  max-width: 100%;
+}
+
+.shoutHeader {
+  margin-bottom: 2em;
+
+  @include media-breakpoint-up(md) {
+    margin: 0 0 2em;
+  }
+}
+
+.shoutCover {
+  background-size: cover;
+  height: 0;
+  padding-bottom: 56.2%;
+}
+
+.shoutBody {
+  font-size: 1.7rem;
+  line-height: 1.6;
+
+  img {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+
+  blockquote {
+    border-left: 4px solid;
+    font-size: 2rem;
+    font-weight: 500;
+    font-style: italic;
+    line-height: 1.4;
+    margin: 1.5em 0;
+    padding: 0 0 0 1em;
+
+    @include media-breakpoint-up(md) {
+      margin-left: -16.6666%;
+    }
+  }
+
+  mark {
+    background: none;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.4;
+  }
+}
+
+.shoutAuthor,
+.shoutDate {
+  @include font-size(1.5rem);
+}
+
+.shoutAuthor {
+  margin-bottom: 1.5em;
+
+  a {
+    border: none;
+    color: rgb(0 0 0 / 60%);
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.shoutAuthorsList {
+  margin-top: 2em;
+
+  h4 {
+    color: #696969;
+    font-size: 1.5rem;
+    font-weight: normal;
+  }
+}
+
+.writeComment {
+  border: 2px solid #f6f6f6;
+  @include font-size(1.7rem);
+
+  outline: none;
+  padding: 0.2em 0.4em;
+  width: 100%;
+
+  &::placeholder {
+    color: #858585;
+  }
+}
+
+.commentWarning {
+  background: #f6f6f6;
+  @include font-size(2.2rem);
+
+  margin-bottom: 1em;
+  padding: 2.4rem 1.8rem;
+}
+
+.topic a {
+  /* white-space: nowrap; */
+  color: black;
+  padding: 0.3vh;
+
+  &:hover {
+    font-weight: 500;
+  }
+}
+
+.shoutStats {
+  border-bottom: 1px solid #e8e8e8;
+  border-top: 4px solid #000;
+  display: flex;
+  justify-content: flex-start;
+  padding: 3.2rem 0;
+}
+
+.shoutStatsItem {
+  @include font-size(1.7rem);
+
+  font-weight: 500;
+  display: inline-block;
+  margin: 0 3.2rem 1em 0;
+  vertical-align: baseline;
+
+  .icon {
+    display: inline-block;
+    margin-right: 0.2em;
+    transition: filter 0.2s;
+    vertical-align: middle;
+  }
+
+  img {
+    display: block;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      .icon {
+        filter: invert(1);
+      }
+    }
+  }
+}
+
+.shoutStatsItemLikes {
+  .icon {
+    vertical-align: baseline;
+  }
+
+  .icon:last-of-type {
+    // transform: rotate(180deg);
+    transform-origin: center;
+    margin-left: 0.3em;
+    vertical-align: middle;
+  }
+}
+
+.shoutStatsItemAdditionalData {
+  color: rgb(0 0 0 / 40%);
+  font-weight: normal;
+  justify-self: flex-end;
+  margin-right: 0;
+  margin-left: auto;
+  white-space: nowrap;
+
+  .icon {
+    opacity: 0.4;
+  }
+}
+
+.shoutStatsItemAdditionalDataItem {
+  display: inline-block;
+  margin-left: 2rem;
+}
+
+.topicsList {
+  @include font-size(1.2rem);
+
+  letter-spacing: 0.08em;
+  margin: 1.6rem 0;
+
+  .shoutTopic {
+    display: inline-block;
+    margin: 0.8rem 0.8rem 0.8rem 0;
+
+    a {
+      background: #f6f6f6;
+      color: #000;
+      border: none;
+      padding: 0.4rem 0.8rem;
+      transition: background-color 0.2s;
+      text-transform: uppercase;
+
+      &:hover {
+        background-color: rgb(0 0 0 / 20%);
+      }
+    }
+  }
+}

src/styles/Article.scss

@@ -1,204 +0,0 @@
-.article-page {
-  h1 {
-    @include font-size(4rem);
-
-    line-height: 1.1;
-    margin-top: 0.5em;
-  }
-
-  h2 {
-    line-height: 1.1;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  .shout__header {
-    margin-bottom: 2em;
-
-    @include media-breakpoint-up(md) {
-      margin: 0 0 2em;
-    }
-  }
-
-  .shout__cover {
-    background-size: cover;
-    height: 0;
-    padding-bottom: 56.2%;
-  }
-
-  .shout__body {
-    font-size: 1.7rem;
-    line-height: 1.6;
-
-    img {
-      display: block;
-      margin-bottom: 0.5em;
-    }
-
-    blockquote {
-      border-left: 4px solid;
-      font-size: 2rem;
-      font-weight: 500;
-      font-style: italic;
-      line-height: 1.4;
-      margin: 1.5em 0;
-      padding: 0 0 0 1em;
-
-      @include media-breakpoint-up(md) {
-        margin-left: -16.6666%;
-      }
-    }
-
-    mark {
-      background: none;
-      font-size: 2rem;
-      font-weight: bold;
-      line-height: 1.4;
-    }
-  }
-
-  .shout__author,
-  .shout__date {
-    @include font-size(1.5rem);
-  }
-
-  .shout__author {
-    margin-bottom: 1.5em;
-
-    a {
-      border: none;
-      color: rgb(0 0 0 / 60%);
-
-      &:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  .shout__authors-list {
-    margin-top: 2em;
-
-    h4 {
-      color: #696969;
-      font-size: 1.5rem;
-      font-weight: normal;
-    }
-  }
-
-  .write-comment {
-    border: 2px solid #f6f6f6;
-    @include font-size(1.7rem);
-
-    outline: none;
-    padding: 0.2em 0.4em;
-    width: 100%;
-
-    &::placeholder {
-      color: #858585;
-    }
-  }
-
-  .comment-warning {
-    background: #f6f6f6;
-    @include font-size(2.2rem);
-
-    margin-bottom: 1em;
-    padding: 2.4rem 1.8rem;
-  }
-
-  .topic a {
-    /* white-space: nowrap; */
-    color: black;
-    padding: 0.3vh;
-
-    &:hover {
-      font-weight: 500;
-    }
-  }
-
-  .shout-stats {
-    border-bottom: 1px solid #e8e8e8;
-    border-top: 4px solid #000;
-    display: flex;
-    justify-content: flex-start;
-    padding: 3.2rem 0;
-  }
-
-  .shout-stats__item {
-    @include font-size(1.7rem);
-
-    font-weight: 500;
-    display: inline-block;
-    margin: 0 3.2rem 1em 0;
-    vertical-align: baseline;
-
-    .icon {
-      display: inline-block;
-      margin-right: 0.2em;
-      transition: filter 0.2s;
-      vertical-align: middle;
-    }
-
-    img {
-      display: block;
-    }
-
-    a {
-      border: none;
-
-      &:hover {
-        .icon {
-          filter: invert(1);
-        }
-      }
-    }
-  }
-
-  .shout-stats__item--likes {
-    .icon {
-      vertical-align: baseline;
-    }
-
-    .icon:last-of-type {
-      // transform: rotate(180deg);
-      transform-origin: center;
-      margin-left: 0.3em;
-      vertical-align: middle;
-    }
-  }
-
-  .shout-stats__item--date {
-    color: rgb(0 0 0 / 40%);
-    font-weight: normal;
-    justify-self: flex-end;
-    margin-right: 0;
-    margin-left: auto;
-  }
-
-  .topics-list {
-    @include font-size(1.2rem);
-
-    letter-spacing: 0.08em;
-    margin: 1.6rem 0;
-
-    .shout__topic {
-      display: inline-block;
-      margin: 0.8rem 0.8rem 0.8rem 0;
-
-      a {
-        background: #f6f6f6;
-        color: #000;
-        border: none;
-        padding: 0.4rem 0.8rem;
-        transition: background-color 0.2s;
-        text-transform: uppercase;
-
-        &:hover {
-          background-color: rgb(0 0 0 / 20%);
-        }
-      }
-    }
-  }
-}