(refactor) formatting revolut link

app/ui/UserSettingsForm.tsx

@@ -10,6 +10,7 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import { formatIban } from "../lib/formatStrings";
 import { InfoBox } from "./InfoBox";
 import { NoteBox } from "./NoteBox";
+import { LinkIcon } from "@heroicons/react/24/outline";
 
 export type UserSettingsFormProps = {
     userSettings: UserSettings | null;
@@ -310,13 +311,17 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                         </div>
                          {
                             !errors?.ownerRevolutProfileName && formValues.ownerRevolutProfileName.length > 5 ? (
-                            <p className="p-3 text-center">{t("revolut-profile--test-link-label")} <Link
+                            <p className="p-2 text-center">
+                                    {t("revolut-profile--test-link-label")} {' '}
+                                    <LinkIcon className="h-[1.2em] w-[1.2em] inline-block ml-1 mr-1"/>
+                                    <Link
                                         href={`https://revolut.me/${formValues.ownerRevolutProfileName?.replace('@', '')}?amount=100&currency=${formValues.currency}`}
                                         target="_blank"
-                                    className="text-blue-600 underline"
+                                        className="underline"
                                     >
                                         {t("revolut-profile--test-link-text")}
-                                </Link></p>
+                                    </Link>
+                                </p>
                             ) : null
                          }
                     </div>