Fix minor UI issues

ts/components/conversation/ScrollDownButton.stories.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
+import type { Meta, Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
 
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
@@ -14,26 +14,31 @@ const i18n = setupI18n('en', enMessages);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
-  withNewMessages: boolean(
-    'withNewMessages',
-    overrideProps.withNewMessages || false
-  ),
   scrollDown: action('scrollDown'),
   conversationId: 'fake-conversation-id',
+  ...overrideProps,
 });
 
 export default {
   title: 'Components/Conversation/ScrollDownButton',
-};
-
-export const NoNewMessages = (): JSX.Element => {
-  const props = createProps();
-
-  return <ScrollDownButton {...props} />;
-};
-
-export const NewMessages = (): JSX.Element => {
-  const props = createProps({ withNewMessages: true });
-
-  return <ScrollDownButton {...props} />;
+  component: ScrollDownButton,
+  argTypes: {
+    unreadCount: {
+      control: { type: 'radio' },
+      options: {
+        None: undefined,
+        Some: 5,
+        Plenty: 85,
+        'Please Stop': 1000,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<Props> = args => <ScrollDownButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = createProps({});
+Default.story = {
+  name: 'Default',
 };