Fixes bugs with the story viewer

images/icons/v2/arrow-left-32.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m23.2028 3.06066c.5857.58579.5857 1.53553 0 2.12132l-11.0104 11.01042 11.0104 11.0104c.5858.5858.5858 1.5356 0 2.1213-.5858.5858-1.5355.5858-2.1213 0l-12.02084-12.0208c-.3055-.3055-.45168-.71-.43852-1.1102-.01354-.4007.13262-.8058.43847-1.1116l12.02079-12.02084c.5858-.58579 1.5356-.58579 2.1214 0z" fill="#000" fill-rule="evenodd"/></svg>

images/icons/v2/arrow-right-32.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.06066 3.06066c-.58578.58579-.58578 1.53553 0 2.12132l11.01044 11.01042-11.01048 11.0104c-.58579.5858-.58579 1.5356 0 2.1213.58578.5858 1.53558.5858 2.12128 0l12.0209-12.0208c.3055-.3055.4516-.71.4385-1.1102.0135-.4007-.1326-.8058-.4385-1.1116l-12.0208-12.02084c-.5858-.58579-1.53555-.58579-2.12134 0z" fill="#000" fill-rule="evenodd"/></svg>

stylesheets/components/StoryViewer.scss

@@ -56,8 +56,6 @@
   &__container {
     flex-grow: 1;
     overflow: hidden;
-    position: relative;
-    z-index: $z-index-base;
   }
 
   &__story {
@@ -74,7 +72,7 @@
     transform: translateX(-50%);
     min-width: 284px;
     width: 56.25vh;
-    z-index: $z-index-above-base;
+    z-index: $z-index-above-above-base;
 
     &--group-avatar {
       margin-left: -8px;
@@ -156,14 +154,16 @@
   }
 
   &__arrow {
+    @include button-reset;
     align-items: center;
     display: flex;
     height: 100vh;
     position: absolute;
     width: 25%;
+    z-index: $z-index-above-above-base;
 
-    button {
-      @include button-reset;
+    &::before {
+      content: '';
       height: 24px;
       opacity: 0;
       width: 24px;
@@ -174,10 +174,10 @@
       justify-content: flex-start;
       left: 0;
 
-      button {
+      &::before {
         margin-left: 24px;
         @include color-svg(
-          '../images/icons/v2/chevron-left-24.svg',
+          '../images/icons/v2/arrow-left-32.svg',
           $color-white
         );
       }
@@ -187,25 +187,24 @@
       justify-content: flex-end;
       right: 0;
 
-      button {
+      &::before {
         margin-right: 24px;
         @include color-svg(
-          '../images/icons/v2/chevron-right-24.svg',
+          '../images/icons/v2/arrow-right-32.svg',
           $color-white
         );
       }
     }
 
-    &--visible button {
+    &--visible::before {
       opacity: 1;
-      visibility: visible;
     }
   }
 
   &__protection {
     position: absolute;
     width: 100%;
-    z-index: $z-index-above-base;
+    z-index: $z-index-base;
 
     &--top {
       background: linear-gradient($color-black-alpha-16, $color-transparent);

ts/components/StoryViewer.stories.tsx

@@ -45,6 +45,7 @@ function getDefaultProps(): PropsType {
           path: 'snow.jpg',
           url: '/fixtures/snow.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender,
         timestamp: Date.now(),
@@ -64,6 +65,7 @@ story.add('Wide story', () => (
           path: 'file.jpg',
           url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),
@@ -103,6 +105,7 @@ story.add('Multi story', () => {
             path: 'file.jpg',
             url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
           }),
+          canReply: true,
           messageId: '456',
           sender,
           timestamp: Date.now() - 3600,
@@ -122,6 +125,7 @@ story.add('Caption', () => (
           path: 'file.jpg',
           url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),
@@ -141,6 +145,7 @@ story.add('Long Caption', () => (
           path: 'file.jpg',
           url: '/fixtures/snow.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),

ts/components/StoryViewer.tsx

@@ -370,21 +370,18 @@ export const StoryViewer = ({
           style={{ background: getStoryBackground(attachment) }}
         />
         <div className="StoryViewer__content">
-          <div
+          <button
+            aria-label={i18n('back')}
             className={classNames(
               'StoryViewer__arrow StoryViewer__arrow--left',
               {
                 'StoryViewer__arrow--visible': arrowToShow === Arrow.Left,
               }
             )}
-            onMouseMove={() => setArrowToShow(Arrow.Left)}
-          >
-            <button
-              aria-label={i18n('back')}
             onClick={showPrevStory}
+            onMouseMove={() => setArrowToShow(Arrow.Left)}
             type="button"
           />
-          </div>
           <div className="StoryViewer__protection StoryViewer__protection--top" />
           <div className="StoryViewer__container">
             <StoryImage
@@ -415,6 +412,7 @@ export const StoryViewer = ({
                 type="button"
               />
             )}
+          </div>
           <div className="StoryViewer__meta">
             {caption && (
               <div className="StoryViewer__caption">
@@ -550,22 +548,18 @@ export const StoryViewer = ({
               )}
             </div>
           </div>
-          </div>
-          <div
+          <button
+            aria-label={i18n('forward')}
             className={classNames(
               'StoryViewer__arrow StoryViewer__arrow--right',
               {
                 'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
               }
             )}
-            onMouseMove={() => setArrowToShow(Arrow.Right)}
-          >
-            <button
-              aria-label={i18n('forward')}
             onClick={showNextStory}
+            onMouseMove={() => setArrowToShow(Arrow.Right)}
             type="button"
           />
-          </div>
           <div className="StoryViewer__protection StoryViewer__protection--bottom" />
           <button
             aria-label={i18n('MyStories__more')}