fix: center button and toolbar text with relevant icons (#264)

* center button and toolbar text with relevant icons

* pr feedback

src/components/Swap/Toolbar/Caption.tsx

@@ -28,7 +28,9 @@ function Caption({ icon: Icon = AlertTriangle, caption }: CaptionProps) {
   return (
     <>
       <Icon color="secondary" />
-      <ThemedText.Caption color="secondary">{caption}</ThemedText.Caption>
+      <ThemedText.Caption color="secondary" lineHeight="14px">
+        {caption}
+      </ThemedText.Caption>
     </>
   )
 }

src/components/Swap/Toolbar/index.tsx

@@ -86,7 +86,7 @@ export default memo(function Toolbar() {
   ])
 
   return (
-    <ToolbarRow justify="flex-start" data-testid="toolbar" gap={3 / 8}>
+    <ToolbarRow flex justify="flex-start" data-testid="toolbar" gap={3 / 8} align="flex-end">
       {caption}
     </ToolbarRow>
   )

src/components/TokenSelect/TokenButton.tsx

@@ -23,7 +23,7 @@ const StyledTokenButton = styled(Button)`
 `
 
 const TokenButtonRow = styled(Row)<{ empty: boolean }>`
-  float: right;
+  flex-direction: row;
   height: 1.2em;
   max-width: 12em;
   overflow: hidden;
@@ -73,17 +73,19 @@ export default function TokenButton({ value, disabled, onClick }: TokenButtonPro
     >
       <ThemedText.ButtonLarge color={contentColor}>
         <TokenButtonRow
-          gap={0.4}
+          align="flex-end"
           empty={!value}
+          flex
+          gap={0.4}
           // ref is used to set an absolute width, so it must be reset for each value passed.
           // To force this, value?.symbol is passed as a key.
           ref={setRow}
-          key={value?.symbol}
+          key={value?.wrapped.address}
         >
           {value ? (
             <>
               <TokenImg token={value} size={1.2} />
-              {value.symbol}
+              <span>{value.symbol}</span>
             </>
           ) : (
             <Trans>Select a token</Trans>