Design tweaks to add-story-button hover

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;
     }
   }
 }

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;
     }
   }

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,

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}

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'),

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
             }