feat: use feather icons

Author: coderbyheart

src/Chat/Twilio/ChannelView.tsx

@@ -26,6 +26,7 @@ import {
 	OtherChannelHeader,
 } from '../components/ChannelView'
 import { UserDescriptor } from 'twilio-chat/lib/userdescriptor'
+import { XSquare, Maximize2, Minimize2 } from 'react-feather'
 
 type AuthorMap = { [key: string]: User }
 type AuthorNicks = { [key: string]: string | undefined }
@@ -360,7 +361,7 @@ export const ChannelView = ({
 								onCloseChannel(otherChannel)
 							}}
 						>
-							X
+							<XSquare />
 						</MinimizeButton>
 					</OtherChannelHeader>
 				))}
@@ -372,26 +373,13 @@ export const ChannelView = ({
 					Chat: <strong>#{selectedChannel}</strong>
 				</Title>
 				<span>
-					{joinedChannels.length > 1 && (
-						<MinimizeButton
-							onClick={e => {
-								e.stopPropagation()
-								onSwitchChannel(
-									joinedChannels.find(c => c !== selectedChannel) as string,
-								)
-								onCloseChannel(selectedChannel)
-							}}
-						>
-							X
-						</MinimizeButton>
-					)}
 					{!isMinimized && (
 						<MinimizeButton
 							onClick={() => {
 								memoMinimized(true)
 							}}
 						>
-							_
+							<Minimize2 />
 						</MinimizeButton>
 					)}
 					{isMinimized && (
@@ -400,7 +388,20 @@ export const ChannelView = ({
 								memoMinimized(false)
 							}}
 						>
-							+
+							<Maximize2 />
+						</MinimizeButton>
+					)}
+					{joinedChannels.length > 1 && (
+						<MinimizeButton
+							onClick={e => {
+								e.stopPropagation()
+								onSwitchChannel(
+									joinedChannels.find(c => c !== selectedChannel) as string,
+								)
+								onCloseChannel(selectedChannel)
+							}}
+						>
+							<XSquare />
 						</MinimizeButton>
 					)}
 				</span>

src/Chat/components/ChannelView.ts

@@ -44,12 +44,15 @@ export const Button = styled.button`
 	margin: 0.5rem;
 `
 
-export const MinimizeButton = styled(Button)`
+export const MinimizeButton = styled.button`
 	width: 30px;
-	border-color: #fff;
+	height: 30px;
+	border: 0;
+	padding: 0;
 	${Header} & {
 		color: inherit;
 	}
+	background-color: transparent;
 	cursor: pointer;
 `