From af30dd1e90c5fe29e604eea3c9d4f551e50344e4 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Sun, 9 Jul 2023 21:34:59 +0300
Subject: [PATCH] Feed page style fixes

---
 public/icons/rating-control-checked.svg       |  5 +++
 public/icons/rating-control-less.svg          |  4 ++
 public/icons/rating-control-more.svg          |  5 +++
 src/components/Article/Article.module.scss    | 40 ++++++++-----------
 src/components/Article/FullArticle.tsx        | 19 ++++++---
 .../Article/ShoutRatingControl.module.scss    | 22 ----------
 src/components/Article/ShoutRatingControl.tsx | 32 +++++++--------
 src/components/Author/Userpic.module.scss     | 15 +++++--
 src/components/Discours/Hero.scss             |  2 +
 src/components/Feed/ArticleCard.module.scss   | 18 ++++++++-
 src/components/Feed/ArticleCard.tsx           | 22 ++++++----
 .../Feed/Sidebar/Sidebar.module.scss          |  3 +-
 src/components/Nav/Header.module.scss         | 11 +++--
 src/components/Nav/Header.tsx                 | 12 +++++-
 src/components/Nav/Topics.scss                |  1 +
 src/components/Views/Feed.module.scss         | 33 +++++++++------
 .../_shared/VotersList/VotersList.module.scss |  4 ++
 .../_shared/VotersList/VotersList.tsx         |  6 +--
 18 files changed, 147 insertions(+), 107 deletions(-)
 create mode 100644 public/icons/rating-control-checked.svg
 create mode 100644 public/icons/rating-control-less.svg
 create mode 100644 public/icons/rating-control-more.svg

diff --git a/public/icons/rating-control-checked.svg b/public/icons/rating-control-checked.svg
new file mode 100644
index 00000000..8479d52a
--- /dev/null
+++ b/public/icons/rating-control-checked.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path
+  d="M12 3.75C16.5573 3.75 20.25 7.44271 20.25 12C20.25 16.5573 16.5573 20.25 12 20.25C7.44271 20.25 3.75 16.5573 3.75 12C3.75 7.44271 7.44271 3.75 12 3.75ZM16.0052 9.55729C16.2292 9.20833 16.1302 8.74479 15.7839 8.52083C15.4349 8.29427 14.9714 8.39323 14.7448 8.74219L11.1042 14.362L9.1875 12.1823C8.91406 11.8724 8.4401 11.8411 8.13021 12.1146C7.81771 12.388 7.78906 12.862 8.0625 13.1745L10.6328 16.0964C10.776 16.2578 10.9818 16.3516 11.1953 16.3516C11.2135 16.3516 11.2318 16.349 11.25 16.349C11.4844 16.3307 11.6979 16.2057 11.8255 16.0078L16.0052 9.55729Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/rating-control-less.svg b/public/icons/rating-control-less.svg
new file mode 100644
index 00000000..151b041f
--- /dev/null
+++ b/public/icons/rating-control-less.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path d="M7 12H17" stroke="currentColor" stroke-width="1.5"/>
+</svg>
diff --git a/public/icons/rating-control-more.svg b/public/icons/rating-control-more.svg
new file mode 100644
index 00000000..0ada4203
--- /dev/null
+++ b/public/icons/rating-control-more.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="currentColor" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd"
+      d="M11.25 12.75V17H12.75V12.75H17V11.25H12.75V7H11.25V11.25H7V12.75H11.25Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss
index f5c0a5cf..c908cf1b 100644
--- a/src/components/Article/Article.module.scss
+++ b/src/components/Article/Article.module.scss
@@ -177,10 +177,10 @@ img {
 }
 
 .shoutStatsItem {
+  align-items: center;
   @include font-size(1.5rem);
-
   font-weight: 500;
-  display: inline-block;
+  display: flex;
   margin: 0 6% 1em 0;
   vertical-align: baseline;
   cursor: pointer;
@@ -190,25 +190,30 @@ img {
   }
 
   .icon {
-    height: 1.6em;
     display: inline-block;
     margin-right: 0.2em;
-    max-width: 1.4em;
-    max-height: 1.4em;
     transition: filter 0.2s;
     vertical-align: middle;
   }
 
-  .iconEye {
-    height: 1.8em;
-    max-width: 1.8em;
-    max-height: 1.8em;
-  }
-
   img {
     display: block;
   }
 
+  .iconHover {
+    display: none;
+  }
+
+  &:hover {
+    .icon {
+      display: none;
+    }
+
+    .iconHover {
+      display: inline-block;
+    }
+  }
+
   a {
     border: none;
     text-decoration: none;
@@ -225,21 +230,11 @@ img {
 }
 
 .shoutStatsItemInner {
-  margin: -0.3em -0.3em 0;
-  padding: 0.3em;
   cursor: pointer;
 
   .icon {
     margin-right: 0;
   }
-
-  &:hover {
-    background: #000;
-
-    img {
-      filter: invert(1);
-    }
-  }
 }
 
 .shoutStatsItemLikes {
@@ -275,8 +270,6 @@ img {
 }
 
 .shoutStatsItemViews {
-  margin-left: 2rem;
-  margin-right: 0;
   cursor: default;
 }
 
@@ -285,6 +278,7 @@ img {
   display: inline-block;
   margin-left: 2rem;
   margin-right: 0;
+  margin-bottom: 0;
   cursor: default;
 
   @include media-breakpoint-down(sm) {
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 5f15083a..158d915f 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -196,10 +196,20 @@ export const FullArticle = (props: ArticleProps) => {
                 {(triggerRef: (el) => void) => (
                   <div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
                     <Icon name="comment" class={styles.icon} />
+                    <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
                     {props.article.stat?.commented ?? ''}
                   </div>
                 )}
               </Popover>
+
+              <Show when={props.article.stat?.viewed}>
+                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
+                  <Icon name="eye" class={styles.icon} />
+                  <Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
+                  {props.article.stat?.viewed}
+                </div>
+              </Show>
+
               <Popover content={t('Share')}>
                 {(triggerRef: (el) => void) => (
                   <div class={styles.shoutStatsItem} ref={triggerRef}>
@@ -211,6 +221,7 @@ export const FullArticle = (props: ArticleProps) => {
                       trigger={
                         <div class={styles.shoutStatsItemInner}>
                           <Icon name="share-outline" class={styles.icon} />
+                          <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                         </div>
                       }
                     />
@@ -222,6 +233,7 @@ export const FullArticle = (props: ArticleProps) => {
                   <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
                     <div class={styles.shoutStatsItemInner}>
                       <Icon name="bookmark" class={styles.icon} />
+                      <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
                     </div>
                   </div>
                 )}
@@ -235,6 +247,7 @@ export const FullArticle = (props: ArticleProps) => {
                         class={styles.shoutStatsItemInner}
                       >
                         <Icon name="pencil-outline" class={styles.icon} />
+                        <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                       </a>
                     </div>
                   )}
@@ -244,12 +257,6 @@ export const FullArticle = (props: ArticleProps) => {
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
                   {formattedDate()}
                 </div>
-                <Show when={props.article.stat?.viewed}>
-                  <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
-                    <Icon name="eye" class={clsx(styles.icon, styles.iconEye)} />
-                    {props.article.stat?.viewed}
-                  </div>
-                </Show>
               </div>
             </div>
             <div class={styles.help}>
diff --git a/src/components/Article/ShoutRatingControl.module.scss b/src/components/Article/ShoutRatingControl.module.scss
index 0f5dee2d..16b55d89 100644
--- a/src/components/Article/ShoutRatingControl.module.scss
+++ b/src/components/Article/ShoutRatingControl.module.scss
@@ -2,36 +2,14 @@
   align-items: center;
   display: flex;
 
-  &.isDownvoted .downvoteButton,
-  &.isUpvoted .upvoteButton {
-    background: #000;
-    border-color: #000;
-    color: #fff;
-  }
-
   .ratingControl {
-    align-items: center;
-    border: 2px solid;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    height: 0.9em;
-    line-height: 0;
-    font-size: 1.6em;
-    padding: 0;
-    width: 0.9em;
-
     &:hover {
-      background: #000;
-      border-color: #000;
-      color: #fff;
     }
   }
 }
 
 .ratingValue {
   font-weight: bold;
-  margin: 0 4px;
   padding: 0 4px;
   cursor: pointer;
 
diff --git a/src/components/Article/ShoutRatingControl.tsx b/src/components/Article/ShoutRatingControl.tsx
index 982d40d9..70aa65f8 100644
--- a/src/components/Article/ShoutRatingControl.tsx
+++ b/src/components/Article/ShoutRatingControl.tsx
@@ -8,6 +8,7 @@ import { useReactions } from '../../context/reactions'
 import { Popup } from '../_shared/Popup'
 import { VotersList } from '../_shared/VotersList'
 import { useLocalize } from '../../context/localize'
+import { Icon } from '../_shared/Icon'
 
 interface ShoutRatingControlProps {
   shout: Shout
@@ -80,17 +81,14 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   }
 
   return (
-    <div
-      class={clsx(styles.rating, props.class, {
-        [styles.isUpvoted]: isUpvoted(),
-        [styles.isDownvoted]: isDownvoted()
-      })}
-    >
-      <button
-        class={clsx(styles.ratingControl, styles.downvoteButton)}
-        onClick={() => handleRatingChange(false)}
-      >
-        &minus;
+    <div class={clsx(styles.rating, props.class)}>
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(false)}>
+        <Show when={!isDownvoted()}>
+          <Icon name="rating-control-less" />
+        </Show>
+        <Show when={isDownvoted()}>
+          <Icon name="rating-control-checked" />
+        </Show>
       </button>
 
       <Popup trigger={<span class={styles.ratingValue}>{props.shout.stat.rating}</span>} variant="tiny">
@@ -100,11 +98,13 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
         />
       </Popup>
 
-      <button
-        class={clsx(styles.ratingControl, styles.upvoteButton)}
-        onClick={() => handleRatingChange(true)}
-      >
-        +
+      <button class={styles.ratingControl} onClick={() => handleRatingChange(true)}>
+        <Show when={!isUpvoted()}>
+          <Icon name="rating-control-more" />
+        </Show>
+        <Show when={isUpvoted()}>
+          <Icon name="rating-control-checked" />
+        </Show>
       </button>
     </div>
   )
diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index 8d6c541e..a1ac3082 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -19,9 +19,11 @@
   }
 
   .userpic {
+    background-color: white;
     border-radius: 50%;
+    border: 1.5px solid black;
+    color: #000;
     font-size: small;
-    border: 2px solid black;
     text-align: center;
     line-height: 28px;
     min-width: 32px;
@@ -34,12 +36,17 @@
     width: 20px !important;
   }
 
-  a:link {
+  a:link,
+  a:visited {
+    border: none;
     display: block;
     height: 100%;
-    padding: 0;
+    padding: 0 !important;
+    text-align: center;
+    width: 100%;
 
     &:hover {
+      background: none;
       color: #000;
     }
   }
@@ -78,6 +85,8 @@
 
 .feedMode {
   .userpic {
+    font-size: 0.8rem;
+    line-height: 14px;
     min-width: 16px;
     max-width: 16px;
   }
diff --git a/src/components/Discours/Hero.scss b/src/components/Discours/Hero.scss
index 33a06344..10a45736 100644
--- a/src/components/Discours/Hero.scss
+++ b/src/components/Discours/Hero.scss
@@ -28,11 +28,13 @@
   .button {
     border: 3px solid;
     border-radius: 1.2em;
+    color: inherit;
     cursor: pointer;
     display: inline-block;
     font-weight: bold;
     margin-right: 0.8rem;
     margin-bottom: 0.8em;
+    padding-bottom: 0.6rem;
     transition: all 0.2s;
 
     &:hover {
diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index c7009357..76845704 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -56,7 +56,16 @@
   padding-top: 2.4rem;
 }
 
+.shoutCardLinkWrapper {
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
 .shoutCardTitlesContainer {
+  &.shoutCardTitlesContainerFeedMode {
+    margin-bottom: 1.4rem;
+  }
+
   a:link {
     border: none;
 
@@ -71,7 +80,7 @@
     }
 
     &:hover {
-      .shoutCardTitle .shoutCardLinkContainer {
+      .shoutCardTitle .shoutCardLinkWrapper {
         background-color: var(--default-color);
         color: var(--link-hover-color);
       }
@@ -166,7 +175,7 @@
 
   .shoutCardTitlesContainerFeedMode & {
     @include font-size(3.2rem);
-    line-height: 1.25;
+    line-height: 1.1;
   }
 }
 
@@ -246,6 +255,7 @@
       background: #000;
 
       .icon {
+        display: inline-block;
         filter: invert(1);
       }
     }
@@ -511,6 +521,10 @@
 
   &:first-child {
     padding: 0 1em 1em 0;
+
+    .shoutCardDetailsItem {
+      margin-right: 2rem;
+    }
   }
 }
 
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index b4b4e697..beda05d3 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -37,6 +37,7 @@ interface ArticleCardProps {
     isCompact?: boolean
     isSingle?: boolean
     isBeside?: boolean
+    withViewed?: boolean
   }
   article: Shout
 }
@@ -123,7 +124,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
           <div class={styles.shoutCardType}>
             <a href={`/expo/${layout}`}>
               <Icon name={layout} class={styles.icon} />
-              <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+              {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
             </a>
           </div>
         </Show>
@@ -147,7 +148,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
         >
           <a href={`/${slug || ''}`}>
             <div class={styles.shoutCardTitle}>
-              <span class={styles.shoutCardLinkContainer}>{title}</span>
+              <span class={styles.shoutCardLinkWrapper}>
+                <span class={styles.shoutCardLinkContainer}>{title}</span>
+              </span>
             </div>
 
             <Show when={!props.settings?.nosubtitle && subtitle}>
@@ -195,7 +198,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
               >
                 <div class={styles.shoutCardType}>
                   <a href={`/expo/${layout}`}>
-                    <Icon name={layout} class={clsx(styles.icon, styles.iconHover)} />
+                    <Icon name={layout} class={styles.icon} />
+                    {/*<Icon name={`${layout}-hover`} class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>
               </Show>
@@ -212,11 +216,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
             <div class={styles.shoutCardDetailsContent}>
               <ShoutRatingControl shout={props.article} class={styles.shoutCardDetailsItem} />
 
-              <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
-                <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
-                {stat?.viewed}
-              </div>
-
               <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
                 <a href="#" onClick={(event) => scrollToComments(event)}>
                   <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
@@ -227,6 +226,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
                   <span class={styles.shoutCardLinkContainer}>{stat?.commented || t('Add comment')}</span>
                 </a>
               </div>
+
+              <Show when={props.settings?.withViewed}>
+                <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardDetailsViewed)}>
+                  <Icon name="eye" class={clsx(styles.icon, styles.feedControlIcon)} />
+                  {stat?.viewed}
+                </div>
+              </Show>
             </div>
 
             <div class={styles.shoutCardDetailsContent}>
diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss
index c0c09805..0895f54d 100644
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@@ -79,9 +79,10 @@
     display: inline-block;
     line-height: 1;
     height: 2.4rem;
+    margin-bottom: 0.2rem;
     margin-right: 0.8rem;
-    vertical-align: middle;
     text-align: center;
+    vertical-align: middle;
     width: 2.4rem;
 
     img {
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index fa47f654..2edf81ee 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -315,16 +315,15 @@
     cursor: pointer;
     border: 0;
 
-    .icon {
-      opacity: 0.6;
-      transition: opacity 0.3s;
-    }
-
     &:hover {
       background: none;
 
       .icon {
-        opacity: 1;
+        display: none;
+      }
+
+      .iconHover {
+        display: block;
       }
     }
   }
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 080e430f..8d9fe47e 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -130,16 +130,24 @@ export const Header = (props: Props) => {
                   setIsSharePopupVisible(isVisible)
                 }}
                 containerCssClass={styles.control}
-                trigger={<Icon name="share-outline" class={styles.icon} />}
+                trigger={
+                  <>
+                    <Icon name="share-outline" class={styles.icon} />
+                    <Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
+                  </>
+                }
               />
               <div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
-                <Icon name="comments-outline" class={styles.icon} />
+                <Icon name="comment" class={styles.icon} />
+                <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
               </div>
               <a href={getPagePath(router, 'create')} class={styles.control}>
                 <Icon name="pencil-outline" class={styles.icon} />
+                <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>
               <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
                 <Icon name="bookmark" class={styles.icon} />
+                <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
               </a>
             </div>
           </Show>
diff --git a/src/components/Nav/Topics.scss b/src/components/Nav/Topics.scss
index c5d07b87..a676f74b 100644
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics.scss
@@ -14,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    font-weight: 500;
     list-style: none;
     margin-top: 0;
     padding: 0 7em 0 0;
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index e0789630..07d6875a 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -1,5 +1,5 @@
 .feedFilter {
-  margin: 0.2em 0 1.6rem;
+  margin: 0.2em 0 4.8rem;
 }
 
 .feedNavigation {
@@ -98,27 +98,34 @@
     line-height: 1.3;
 
     li {
-      margin-bottom: 1.2rem;
-      padding-left: 2.6rem;
+      margin-bottom: 1.6rem;
+      padding-left: 3.4rem;
       position: relative;
 
-      &::before {
-        background: url(/icons/knowledge-base-bullet.svg) no-repeat;
-        content: '';
-        height: 1.6rem;
-        left: 0;
-        position: absolute;
-        width: 2rem;
-      }
-
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
 
-  a {
+  a:link {
     border: none;
+
+    &::before {
+      background: url(/public/icons/knowledge-base-bullet.svg) no-repeat;
+      content: '';
+      height: 2.4rem;
+      left: 0;
+      position: absolute;
+      top: -0.1em;
+      width: 2.4rem;
+    }
+
+    &:hover {
+      &:before {
+        background-image: url(/public/icons/knowledge-base-bullet-hover.svg);
+      }
+    }
   }
 }
 
diff --git a/src/components/_shared/VotersList/VotersList.module.scss b/src/components/_shared/VotersList/VotersList.module.scss
index 84f6d9f4..ebfdc439 100644
--- a/src/components/_shared/VotersList/VotersList.module.scss
+++ b/src/components/_shared/VotersList/VotersList.module.scss
@@ -36,4 +36,8 @@
   .commentRatingNegative {
     color: #d00820;
   }
+
+  .fallbackMessage {
+    font-size: 1.2rem;
+  }
 }
diff --git a/src/components/_shared/VotersList/VotersList.tsx b/src/components/_shared/VotersList/VotersList.tsx
index 601750b8..60e69705 100644
--- a/src/components/_shared/VotersList/VotersList.tsx
+++ b/src/components/_shared/VotersList/VotersList.tsx
@@ -16,11 +16,7 @@ export const VotersList = (props: Props) => {
       <ul class={clsx('nodash', styles.users)}>
         <Show
           when={props.reactions.length > 0}
-          fallback={
-            <li class={styles.item}>
-              <small>{props.fallbackMessage}</small>
-            </li>
-          }
+          fallback={<li class={clsx(styles.item, styles.fallbackMessage)}>{props.fallbackMessage}</li>}
         >
           <For each={props.reactions}>
             {(reaction) => (