Slack app settings polishing (#19666)

frontend/src/metabase/admin/settings/slack/components/SlackHelpCard/SlackHelpCard.tsx

@@ -26,9 +26,7 @@ const SlackHelpCard = ({ className }: SlackHelpCardProps): JSX.Element => {
         <CardTitle>{t`Need help?`}</CardTitle>
         <CardIcon name="external" />
       </CardHeader>
-      <CardBody>
-        {t`Check out documentation directions on how to create your metabase bot on Slack.`}
-      </CardBody>
+      <CardBody>{t`Check out our docs on how to connect to Slack.`}</CardBody>
     </CardRoot>
   );
 };

frontend/src/metabase/admin/settings/slack/components/SlackSetup/SlackSetup.tsx

@@ -65,7 +65,7 @@ const SetupHeader = ({ isBot, isValid }: SetupHeaderProps): JSX.Element => {
       ) : (
         <HeaderMessage>
           {t`Bring the power of Metabase to your Slack #channels.`}{" "}
-          {t`Follow these steps to connect your bot to Slack:`}
+          {t`Follow these steps to connect to Slack:`}
         </HeaderMessage>
       )}
     </HeaderRoot>
@@ -109,8 +109,8 @@ const CreateAppSection = (): JSX.Element => {
         )}, hit “${(
           <strong key="app">{t`Create New App`}</strong>
         )}” and pick “${(
-          <strong key="manifest">{t`From an app manifest`}</strong>
-        )}”.`}
+          <strong key="manifest">{t`From an app manifest.`}</strong>
+        )}”`}
       </SectionMessage>
       <SlackAppsButton />
     </SetupSection>

frontend/src/metabase/components/Input/Input.styled.tsx

@@ -19,7 +19,7 @@ export const InputField = styled.input<InputProps>`
   font-weight: 700;
   font-size: 1rem;
   color: ${color("text-dark")};
-  background-color: ${color("bg-white")};
+  background-color: ${props => color(props.readOnly ? "bg-light" : "bg-white")};
   padding: 0.75rem;
   border: 1px solid ${darken("border", 0.1)};
   border-radius: 4px;