Update all Send icons to Phosphor

This requires some more general refactoring to icons in a few other
places to fully support Phosphor icons as an option for source icons
everywhere.

Author: pimterry

src/components/common/icon-button.tsx

@@ -9,6 +9,7 @@ export const IconButton = styled((p: {
     className?: string,
     title: string,
     icon: IconProp | IconKey,
+    iconSize?: string,
     disabled?: boolean,
     fixedWidth?: boolean,
     tabIndex?: number,
@@ -26,11 +27,12 @@ export const IconButton = styled((p: {
         { Array.isArray(p.icon)
             ? <Icon
                 icon={p.icon}
+                size={p.iconSize}
                 fixedWidth={p.fixedWidth ? true : false}
             />
             : <PhosphorIcon
                 icon={p.icon as IconKey}
-                size='1.25em'
+                size={p.iconSize || '1.25em'}
             />
         }
     </UnstyledButton>

src/components/common/search-box.tsx

@@ -1,20 +1,34 @@
 import * as React from 'react';
 
 import { styled } from '../../styles';
-import { SourceIcons, Icon } from '../../icons';
+import { SourceIcons, Icon, PhosphorIcon, IconKey } from '../../icons';
 
 import { TrafficSource } from '../../model/http/sources';
 
 export const SourceIcon = styled(({ source, className }: {
     source: TrafficSource,
     className?: string
-}) => source.icon !== SourceIcons.Unknown
-    ? <Icon
-        className={className}
-        title={source.summary}
-        {...source.icon}
-    />
-    : null
-)`
+}) => {
+    if (source.icon === SourceIcons.Unknown) return null;
+
+    const iconId = source.icon.icon;
+
+    if (Array.isArray(iconId)) {
+        return <Icon
+            className={className}
+            title={source.summary}
+            {...source.icon}
+            icon={iconId}
+        />
+    } else {
+        return <PhosphorIcon
+            className={className}
+            alt={source.summary}
+            size='1.25em'
+            {...source.icon}
+            icon={iconId as IconKey}
+        />
+    }
+})`
     margin-left: 8px;
 `;

src/components/common/source-icon.tsx

@@ -25,7 +25,11 @@ export const ConnectedSources = styled((props: { activeSources: TrafficSource[],
             props.activeSources.length ?
                 props.activeSources.map((source) =>
                     <ConnectedSource key={source.ua} title={source.ua}>
-                        <Icon {...source.icon} fixedWidth={true} />
+                        <Icon
+                            {...source.icon}
+                            size='1.1em'
+                            fixedWidth={true}
+                        />
                         { source.summary }
                     </ConnectedSource>
                 )

src/components/intercept/connected-sources.tsx

@@ -13,7 +13,8 @@ import { MANUAL_INTERCEPT_ID } from '../../model/interception/interceptors';
 
 import { ConnectedSources } from './connected-sources';
 import { InterceptOption } from './intercept-option';
-import { SearchBox } from '../common/search-box';
+import { TextInput } from '../common/inputs';
+import { IconButton } from '../common/icon-button';
 
 interface InterceptPageProps {
     className?: string;
@@ -86,12 +87,50 @@ const InterceptInstructions = styled.div`
     }
 `;
 
-const InterceptSearchBox = styled(SearchBox).attrs(() => ({
-    autoFocus: true,
-    placeholder: 'Browsers, mobile, docker...',
-    'aria-label': "Filter the list of intercept options below",
-    iconSize: '2x'
-}))`
+const SearchInput = styled(TextInput)`
+    width: 100%;
+    padding: 15px;
+    box-sizing: border-box;
+
+    box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, ${p => p.theme.boxShadowAlpha / 2});
+
+    font-size: ${p => p.theme.headingSize};
+`;
+
+const ClearSearchButton = styled(IconButton)`
+    position: absolute;
+
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+`;
+
+const SearchBox = styled((props: {
+    className?: string,
+    value: string,
+    onSearch: (input: string) => void
+}) =>
+    <div className={props.className}>
+        <SearchInput
+            autoFocus={true}
+            value={props.value}
+            placeholder='Browsers, mobile, docker...'
+            aria-label='Filter the list of intercept options below'
+            onChange={(e) => props.onSearch(e.currentTarget.value)}
+        />
+        { !!props.value &&
+            <ClearSearchButton
+                icon={['fas', 'times']}
+                iconSize={'2x'}
+                onClick={() => props.onSearch('')}
+                title='Clear search input'
+            />
+        }
+    </div>
+)`
+    position: relative;
+
     @media (min-width: ${NARROW_LAYOUT_BREAKPOINT}px) {
         margin: 20px 0 0;
     }
@@ -138,7 +177,7 @@ class InterceptPage extends React.Component<InterceptPageProps> {
                         Click an option below to connect a traffic source, or
                         search for connectors that could work for you:
                     </p>
-                    <InterceptSearchBox
+                    <SearchBox
                         value={this.filter || ''}
                         onSearch={this.onSearchInput}
                     />

src/components/intercept/intercept-page.tsx

@@ -93,7 +93,7 @@ const SendButton = observer((p: {
     isPaidUser: boolean,
     onClick: () => void
 }) => <IconButton
-    icon={['far', 'paper-plane']}
+    icon='PaperPlaneTilt'
     onClick={p.onClick}
     title={p.isPaidUser
         ? `Resend this request (${Ctrl}+r)`

src/components/view/http/http-details-footer.tsx

@@ -28,8 +28,8 @@ export const PhosphorIcon = React.memo((props: { icon: IconKey } & PhosphorIconP
     const PIcon = Icons[props.icon];
 
     return <PIcon
-        className='phosphor-icon'
         {...otherProps}
+        className={'phosphor-icon ' + (props.className || '')}
     />;
 });
 
@@ -215,7 +215,7 @@ library.add(
 );
 
 export interface IconProps {
-    icon: ExtendedIconProp;
+    icon: ExtendedIconProp | IconKey;
     color: string;
     size?: SizeProp;
 }
@@ -281,18 +281,52 @@ export const SourceIcons = {
     Unknown: { icon: ['fas', 'question'], color: '#888' }
 } as const;
 
-import { FontAwesomeIcon, Props as FAIProps } from '@fortawesome/react-fontawesome';
+import * as FA from '@fortawesome/react-fontawesome';
 type ExtendedIconProp = IconProp | readonly ['fac', string] | readonly [IconPrefix, IconName];
-export const Icon = React.memo(
-    FontAwesomeIcon as (props: Omit<FAIProps, 'icon'> & {
+const FAIcon = React.memo(
+    FA.FontAwesomeIcon as (props: Omit<FA.FontAwesomeIconProps, 'icon'> & {
         icon: ExtendedIconProp,
         onClick?: (event: React.MouseEvent) => void,
         onKeyPress?: (event: React.KeyboardEvent) => void
     }) => JSX.Element
 );
+
+export const Icon = (props: {
+    icon: ExtendedIconProp | IconKey,
+    onClick?: (event: React.MouseEvent) => void,
+    onKeyPress?: (event: React.KeyboardEvent) => void,
+
+    spin?: boolean,
+    color?: string,
+    size?: string,
+    fixedWidth?: boolean,
+    className?: string,
+    title?: string
+}): JSX.Element => {
+    if (Array.isArray(props.icon)) {
+        return <FAIcon
+            {...props}
+            size={props.size as FA.FontAwesomeIconProps['size']}
+            icon={props.icon as ExtendedIconProp}
+        />
+    } else {
+        return <PhosphorIcon
+            icon={props.icon as IconKey}
+
+            onClick={props.onClick}
+            onKeyPress={props.onKeyPress}
+
+            color={props.color}
+            size={props.size || '1.25em'}
+            className={props.className}
+            alt={props.title}
+        />
+    }
+};
+
 export type { ExtendedIconProp as IconProp, SizeProp };
 
-export const SuggestionIcon = styled(Icon).attrs(() => ({
+export const SuggestionIcon = styled(FAIcon).attrs(() => ({
     icon: ['fas', 'lightbulb']
 }))`
     margin: 0 6px;
@@ -309,7 +343,7 @@ export const suggestionIconHtml = iconHtml(
     }
 );
 
-export const WarningIcon = styled(Icon).attrs(() => ({
+export const WarningIcon = styled(FAIcon).attrs(() => ({
     icon: ['fas', 'exclamation-triangle']
 }))`
     margin: 0 6px;
@@ -326,7 +360,7 @@ export const warningIconHtml = iconHtml(
     }
 );
 
-export const ArrowIcon = styled(Icon).attrs(() => ({
+export const ArrowIcon = styled(FAIcon).attrs(() => ({
     fixedWidth: true,
     icon: ['fas', 'arrow-left']
 }))`

src/icons.tsx

@@ -156,7 +156,7 @@ export const MANUALLY_SENT_SOURCE = {
     summary: 'HTTP Toolkit (Send)',
     description: 'Sent manually from HTTP Toolkit',
     icon: {
-        icon: ['far', 'paper-plane'],
+        icon: 'PaperPlaneTilt',
         color: popColor
     }
 };