📧 Improve descriptions (#666)

* Update description of the API key input

* Add space between description and link

* Add changeset

.changeset/poor-needles-burn.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Improved descriptions in the events section and API key inputs.

apps/emails-and-messages/src/modules/sendgrid/ui/api-connection-section.tsx

@@ -62,7 +62,7 @@ export const ApiConnectionSection = ({ configuration }: ApiConnectionSectionProp
               label="API Key"
               name="apiKey"
               control={control}
-              helperText="Name of the configuration, for example 'Production' or 'Test'"
+              helperText="The API key can be generated in your Sendgrid dashboard"
             />
 
             <label>

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx

@@ -68,7 +68,7 @@ export const SendgridEventsSection = ({ configuration }: SendgridEventsSectionPr
       description={
         <Text as="p">
           Choose which Saleor events should send emails via Sendgrid. You can create and modify your
-          templates in the
+          templates in the{" "}
           <TextLink href="https://mc.sendgrid.com/dynamic-templates" newTab={true}>
             Sendgrid dashboard
           </TextLink>

apps/emails-and-messages/src/pages/configuration/sendgrid/new.tsx

@@ -76,7 +76,12 @@ const NewSendgridConfigurationPage: NextPage = () => {
                 helperText={"Name of the configuration, for example 'Production' or 'Test'"}
               />
               {/* TODO: add key validation */}
-              <Input name="apiKey" control={control} label="API key" helperText={"Your API key"} />
+              <Input
+                name="apiKey"
+                control={control}
+                label="API key"
+                helperText={"The API key can be generated in your Sendgrid dashboard"}
+              />
             </Box>
             <BoxFooter>
               <Button type="submit">Save provider</Button>