Fix TextLink component

.changeset/dry-pears-camp.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-search": patch
+---
+
+Fixed how TextLink is displayed - added missing space between spans

.changeset/weak-avocados-care.md

@@ -0,0 +1,5 @@
+---
+"@saleor/apps-ui": patch
+---
+
+Fixed TextLink color and style

apps/search/src/components/MainInstructions.tsx

@@ -15,10 +15,10 @@ export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => {
         Saleor database.
       </Text>
       <Text as="p">
-        The app supports following
+        The app supports following{" "}
         <TextLink href={SALEOR_EVENTS_DOCS_URL} newTab>
           events
-        </TextLink>
+        </TextLink>{" "}
         that will synchronize Algolia in the background:
       </Text>
       <ul>

apps/search/src/views/configuration/configuration.view.tsx

@@ -37,7 +37,7 @@ export const ConfigurationView = () => {
               Provide Algolia settings.{" "}
             </Text>
             <Text>
-              You can find your tokens in Algolia Dashboard
+              You can find your tokens in Algolia Dashboard{" "}
               <TextLink href={ALGOLIA_DASHBOARD_TOKENS_URL} newTab>
                 here
               </TextLink>

packages/ui/src/text-link.tsx

@@ -9,17 +9,14 @@ export interface TextLinkProps extends TextProps {
 
 const BaseTextLink = (props: TextLinkProps) => {
   return (
+    <Text target="_blank" as={"a"} textDecoration={"none"} rel="noopener noreferrer" {...props}>
       <Text
-      target="_blank"
-      as={"a"}
-      textDecoration={"underline"}
+        transition={"ease"}
         variant={"bodyStrong"}
-      rel="noopener noreferrer"
-      {...props}
-    >
-      <Text
-        __margin={0}
-        color={"text2Decorative"} /* TODO Color not applied - looks like Macaw issue*/
+        color={{
+          default: "text3Decorative",
+          hover: "text1Decorative",
+        }}
       >
         {props.children}
       </Text>