Conversation Colors

ts/components/conversation/Message.stories.tsx

@@ -9,7 +9,7 @@ import { boolean, number, select, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
 import { SignalService } from '../../protobuf';
-import { Colors } from '../../types/Colors';
+import { ConversationColors } from '../../types/Colors';
 import { EmojiPicker } from '../emoji/EmojiPicker';
 import { Message, Props, AudioAttachmentProps } from './Message';
 import {
@@ -70,10 +70,7 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   attachments: overrideProps.attachments,
-  author: overrideProps.author || {
-    ...getDefaultConversation(),
-    color: select('authorColor', Colors, 'red'),
-  },
+  author: overrideProps.author || getDefaultConversation(),
   reducedMotion: boolean('reducedMotion', false),
   bodyRanges: overrideProps.bodyRanges,
   canReply: true,
@@ -81,6 +78,9 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   canDeleteForEveryone: overrideProps.canDeleteForEveryone || false,
   clearSelectedMessage: action('clearSelectedMessage'),
   collapseMetadata: overrideProps.collapseMetadata,
+  conversationColor:
+    overrideProps.conversationColor ||
+    select('conversationColor', ConversationColors, ConversationColors[0]),
   conversationId: text('conversationId', overrideProps.conversationId || ''),
   conversationType: overrideProps.conversationType || 'direct',
   deletedForEveryone: overrideProps.deletedForEveryone,
@@ -137,7 +137,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   showMessageDetail: action('showMessageDetail'),
   showVisualAttachment: action('showVisualAttachment'),
   status: overrideProps.status || 'sent',
-  text: text('text', overrideProps.text || ''),
+  text: overrideProps.text || text('text', ''),
   textPending: boolean('textPending', overrideProps.textPending || false),
   timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
 });
@@ -1007,14 +1007,15 @@ story.add('Dangerous File Type', () => {
 story.add('Colors', () => {
   return (
     <>
-      {Colors.map(color => (
-        <Message
-          {...createProps({
-            author: getDefaultConversation({ color }),
-            text:
-              'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
-          })}
-        />
+      {ConversationColors.map(color => (
+        <div key={color}>
+          {renderBothDirections(
+            createProps({
+              conversationColor: color,
+              text: `Here is a preview of the chat color: ${color}. The color is visible to only you.`,
+            })
+          )}
+        </div>
       ))}
     </>
   );
@@ -1081,3 +1082,25 @@ story.add('Not approved, with link preview', () => {
 
   return renderBothDirections(props);
 });
+
+story.add('Custom Color', () => (
+  <>
+    <Message
+      {...createProps({ text: 'Solid.' })}
+      direction="outgoing"
+      customColor={{
+        start: { hue: 82, saturation: 35 },
+      }}
+    />
+    <br style={{ clear: 'both' }} />
+    <Message
+      {...createProps({ text: 'Gradient.' })}
+      direction="outgoing"
+      customColor={{
+        deg: 192,
+        start: { hue: 304, saturation: 85 },
+        end: { hue: 231, saturation: 76 },
+      }}
+    />
+  </>
+));