fix: making colors correct on approval screen (#5444)

update approval button colors to be correct

src/pages/Swap/index.tsx

@@ -677,15 +677,17 @@ export default function Swap() {
                         }
                       >
                         <AutoRow justify="space-between" style={{ flexWrap: 'nowrap' }} height="20px">
-                          <ThemedText.SubHeader width="100%" textAlign="center" color="white">
-                            {/* we need to shorten this string on mobile */}
-                            {approvalState === ApprovalState.APPROVED ||
-                            signatureState === UseERC20PermitState.SIGNED ? (
+                          {/* we need to shorten this string on mobile */}
+                          {approvalState === ApprovalState.APPROVED || signatureState === UseERC20PermitState.SIGNED ? (
+                            <ThemedText.SubHeader width="100%" textAlign="center" color="textSecondary">
                               <Trans>You can now trade {currencies[Field.INPUT]?.symbol}</Trans>
-                            ) : (
+                            </ThemedText.SubHeader>
+                          ) : (
+                            <ThemedText.SubHeader width="100%" textAlign="center" color="white">
                               <Trans>Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}</Trans>
-                            )}
-                          </ThemedText.SubHeader>
+                            </ThemedText.SubHeader>
+                          )}
+
                           {approvalPending || approvalState === ApprovalState.PENDING ? (
                             <Loader stroke={theme.white} />
                           ) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||