New compose UX for usernames/e164

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>

ts/components/conversationList/ComposeStepButton.tsx

@@ -0,0 +1,36 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { FunctionComponent } from 'react';
+import React from 'react';
+
+import { ListTile } from '../ListTile';
+
+export enum Icon {
+  Group = 'group',
+  Username = 'username',
+  PhoneNumber = 'phone-number',
+}
+
+type PropsType = {
+  icon: Icon;
+  title: string;
+  onClick: () => void;
+};
+
+export const ComposeStepButton: FunctionComponent<PropsType> = React.memo(
+  function ComposeStepButton({ icon, onClick, title }) {
+    return (
+      <ListTile
+        testId={`ComposeStepButton--${icon}`}
+        leading={
+          <i
+            className={`ComposeStepButton__icon ComposeStepButton__icon--${icon}`}
+          />
+        }
+        title={title}
+        onClick={onClick}
+      />
+    );
+  }
+);