From 2278bf2994726a12f4d2bfbbace17dfeeafb888e Mon Sep 17 00:00:00 2001
From: Alvaro <110414366+alvaro-signal@users.noreply.github.com>
Date: Thu, 10 Nov 2022 14:01:40 -0700
Subject: [PATCH] Design tweaks to add-story-button hover

---
 stylesheets/_modules.scss                          |  4 ++--
 stylesheets/components/StoryListItem.scss          |  5 ++++-
 ...utton.stories.tsx => MyStoryButton.stories.tsx} |  8 ++++----
 .../{MyStoriesButton.tsx => MyStoryButton.tsx}     | 14 +++++++++++---
 ts/components/StoriesAddStoryButton.tsx            |  3 +++
 ts/components/StoriesPane.tsx                      |  4 ++--
 6 files changed, 26 insertions(+), 12 deletions(-)
 rename ts/components/{MyStoriesButton.stories.tsx => MyStoryButton.stories.tsx} (93%)
 rename ts/components/{MyStoriesButton.tsx => MyStoryButton.tsx} (95%)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 6866c32db29d..f9ea8381d41b 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5353,9 +5353,9 @@ button.module-image__border-overlay:focus {
   }
 
   @include dark-theme {
-    background: $color-gray-80;
+    background: $color-gray-75;
     ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-80;
+      border: 2px solid $color-gray-75;
     }
   }
 }
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index 38db787bca63..02e36b0e1935 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -18,7 +18,10 @@
       }
     }
 
-    &:hover {
+    // highlighted on hover and when it has triggered a context menu
+    // that has not been closed yet (active)
+    &:hover,
+    &--active {
       background: $color-gray-65;
     }
   }
diff --git a/ts/components/MyStoriesButton.stories.tsx b/ts/components/MyStoryButton.stories.tsx
similarity index 93%
rename from ts/components/MyStoriesButton.stories.tsx
rename to ts/components/MyStoryButton.stories.tsx
index d5b7ca8add24..bdbad995e32c 100644
--- a/ts/components/MyStoriesButton.stories.tsx
+++ b/ts/components/MyStoryButton.stories.tsx
@@ -7,9 +7,9 @@ import React from 'react';
 import { expect } from '@storybook/jest';
 import { within, userEvent } from '@storybook/testing-library';
 
-import type { PropsType } from './MyStoriesButton';
+import type { PropsType } from './MyStoryButton';
 import enMessages from '../../_locales/en/messages.json';
-import { MyStoriesButton } from './MyStoriesButton';
+import { MyStoryButton } from './MyStoryButton';
 import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
 import { setupI18n } from '../util/setupI18n';
@@ -19,7 +19,7 @@ const i18n = setupI18n('en', enMessages);
 
 export default {
   title: 'Components/MyStoriesButton',
-  component: MyStoriesButton,
+  component: MyStoryButton,
   argTypes: {
     hasMultiple: {
       control: 'checkbox',
@@ -41,7 +41,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<PropsType> = args => <MyStoriesButton {...args} />;
+const Template: Story<PropsType> = args => <MyStoryButton {...args} />;
 
 const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
   args,
diff --git a/ts/components/MyStoriesButton.tsx b/ts/components/MyStoryButton.tsx
similarity index 95%
rename from ts/components/MyStoriesButton.tsx
rename to ts/components/MyStoryButton.tsx
index 3f3ccb2eb9d3..b3273c54be5e 100644
--- a/ts/components/MyStoriesButton.tsx
+++ b/ts/components/MyStoryButton.tsx
@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
@@ -53,7 +53,7 @@ function resolveSendStatus(
   return ResolvedSendStatus.Sent;
 }
 
-export const MyStoriesButton = ({
+export const MyStoryButton = ({
   hasMultiple,
   i18n,
   me,
@@ -63,6 +63,8 @@ export const MyStoriesButton = ({
   queueStoryDownload,
   showToast,
 }: PropsType): JSX.Element => {
+  const [active, setActive] = useState(false);
+
   const {
     acceptedMessageRequest,
     avatarPath,
@@ -116,13 +118,19 @@ export const MyStoriesButton = ({
   );
 
   return (
-    <div className="StoryListItem__button">
+    <div
+      className={classNames(
+        'StoryListItem__button',
+        active && 'StoryListItem__button--active'
+      )}
+    >
       <div className="MyStories__avatar-container">
         <StoriesAddStoryButton
           i18n={i18n}
           moduleClassName="StoryListItem--active-opacity"
           onAddStory={onAddStory}
           showToast={showToast}
+          onContextMenuShowingChanged={setActive}
         >
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
diff --git a/ts/components/StoriesAddStoryButton.tsx b/ts/components/StoriesAddStoryButton.tsx
index 666b7aaf49dd..77b08cbf2f0e 100644
--- a/ts/components/StoriesAddStoryButton.tsx
+++ b/ts/components/StoriesAddStoryButton.tsx
@@ -19,6 +19,7 @@ export type PropsType = {
   i18n: LocalizerType;
   moduleClassName?: string;
   onAddStory: (file?: File) => unknown;
+  onContextMenuShowingChanged?: (value: boolean) => void;
   showToast: ShowToastActionCreatorType;
 };
 
@@ -28,11 +29,13 @@ export const StoriesAddStoryButton = ({
   moduleClassName,
   onAddStory,
   showToast,
+  onContextMenuShowingChanged,
 }: PropsType): JSX.Element => {
   return (
     <ContextMenu
       ariaLabel={i18n('Stories__add')}
       i18n={i18n}
+      onMenuShowingChanged={onContextMenuShowingChanged}
       menuOptions={[
         {
           label: i18n('Stories__add-story--media'),
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
index 10f0eb985fdb..526a79242bbb 100644
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@@ -19,7 +19,7 @@ import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { ViewUserStoriesActionCreatorType } from '../state/ducks/stories';
 import { ContextMenu } from './ContextMenu';
-import { MyStoriesButton } from './MyStoriesButton';
+import { MyStoryButton } from './MyStoryButton';
 import { SearchInput } from './SearchInput';
 import { StoriesAddStoryButton } from './StoriesAddStoryButton';
 import { StoryListItem } from './StoryListItem';
@@ -160,7 +160,7 @@ export const StoriesPane = ({
       />
       <div className="Stories__pane__list">
         <>
-          <MyStoriesButton
+          <MyStoryButton
             hasMultiple={
               myStories.length ? myStories[0].stories.length > 1 : false
             }