Tweak the Model explanation banner (#42413)

e2e/test/scenarios/models/models-metadata.cy.spec.js

@@ -334,6 +334,7 @@ describe("scenarios > models metadata", () => {
           cy.findByText("68883"); // zip
           cy.findAllByText("Hudson Borer");
           cy.icon("close").click();
+          // FIXME: the problem occurs here
           cy.wait("@dataset");
         });
 

frontend/src/metabase/browse/components/ModelExplanationBanner.tsx

-import { useState } from "react";
 import { t } from "ttag";
 
-import { useDispatch, useSelector } from "metabase/lib/redux";
-import { updateUserSetting } from "metabase/redux/settings";
-import { getSetting } from "metabase/selectors/settings";
-import { Flex, Paper, Icon, Text } from "metabase/ui";
+import { useUserSetting } from "metabase/common/hooks";
+import { Flex, Icon, Paper, Text } from "metabase/ui";
 
 import { BannerCloseButton, BannerModelIcon } from "./BrowseModels.styled";
 
 export const ModelExplanationBanner = () => {
-  const hasDismissedBanner = useSelector(state =>
-    getSetting(state, "dismissed-browse-models-banner"),
+  const [hasDismissedBanner, setHasDismissedBanner] = useUserSetting(
+    "dismissed-browse-models-banner",
   );
-  const dispatch = useDispatch();
-
-  const [shouldShowBanner, setShouldShowBanner] = useState(!hasDismissedBanner);
-
   const dismissBanner = () => {
-    setShouldShowBanner(false);
-    dispatch(
-      updateUserSetting({
-        key: "dismissed-browse-models-banner",
-        value: true,
-      }),
-    );
+    setHasDismissedBanner(true);
   };
 
-  if (!shouldShowBanner) {
+  if (hasDismissedBanner) {
     return null;
   }
 
@@ -42,7 +29,7 @@ export const ModelExplanationBanner = () => {
     >
       <Flex>
         <BannerModelIcon name="model" />
-        <Text size="md" lh="1rem" mr="1rem">
+        <Text size="md" lh="1rem" style={{ marginInlineEnd: "1rem" }}>
           {t`Models help curate data to make it easier to find answers to questions all in one place.`}
         </Text>
         <BannerCloseButton onClick={dismissBanner}>