[Clipclops] Replace 🐴 with real icon (#3802)

* replace 🐴 with paper plane icon

* replace envelope with plus

assets/icons/paperPlane_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z" clip-rule="evenodd"/></svg>

assets/icons/plusSmall_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 6a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

src/components/dms/NewChat.tsx

@@ -18,8 +18,8 @@ import {atoms as a, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {Button} from '../Button'
-import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '../icons/Envelope'
 import {ListMaybePlaceholder} from '../Lists'
 import {Text} from '../Typography'
 
@@ -54,7 +54,7 @@ export function NewChat({
       <FAB
         testID="newChatFAB"
         onPress={control.open}
-        icon={<Envelope size="xl" fill={t.palette.white} />}
+        icon={<Plus size="lg" fill={t.palette.white} />}
         accessibilityRole="button"
         accessibilityLabel={_(msg`New chat`)}
         accessibilityHint=""

src/components/icons/PaperPlane.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const PaperPlane_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z',
+})

src/components/icons/Plus.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const PlusLarge_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z',
 })
+
+export const PlusSmall_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 6a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z',
+})

src/screens/Messages/Conversation/MessageInput.tsx

@@ -13,7 +13,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
 
 export function MessageInput({
   onSendMessage,
@@ -96,7 +96,7 @@ export function MessageInput({
           {height: 30, width: 30, backgroundColor: t.palette.primary_500},
         ]}
         onPress={onSubmit}>
-        <Text style={a.text_md}>🐴</Text>
+        <PaperPlane fill={t.palette.white} />
       </Pressable>
     </View>
   )

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 import TextareaAutosize from 'react-textarea-autosize'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
 
 export function MessageInput({
   onSendMessage,
@@ -84,7 +84,7 @@ export function MessageInput({
           a.justify_center,
           {height: 30, width: 30, backgroundColor: t.palette.primary_500},
         ]}>
-        <Text style={a.text_md}>🐴</Text>
+        <PaperPlane fill={t.palette.white} />
       </Pressable>
     </View>
   )

src/screens/Messages/List/index.tsx

@@ -23,7 +23,7 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/NewChat'
-import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import {Link} from '#/components/Link'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
@@ -328,7 +328,7 @@ function DesktopHeader({
             variant="solid"
             style={[{height: 'auto', width: 'auto'}, a.px_md, a.py_sm]}
             onPress={newChatControl.open}>
-            <ButtonIcon icon={Envelope} position="right" />
+            <ButtonIcon icon={Plus} position="right" />
             <ButtonText>
               <Trans>New chat</Trans>
             </ButtonText>