Fix localStorage and Markdown styling in dashboard components

This commit addresses two minor issues:
- Add error handling for localStorage in complete-auth page
- Remove redundant CSS classes for Markdown preview and use Markdown component props instead

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

components/dashboard/public/complete-auth/index.html

@@ -18,7 +18,11 @@
             window.opener.postMessage(message + "&newUser=" + newUser, `https://${window.location.hostname}`);
 
             if (newUser === "true") {
-                localStorage.setItem("newUserOnboardingPending", newUser);
+                try {
+                    localStorage.setItem("newUserOnboardingPending", newUser);
+                } catch (e) {
+                    console.error("Failed to set localStorage item", e);
+                }
             }
         } else {
             console.log("This page is supposed to be opened by Gitpod.")

components/dashboard/src/index.css

@@ -98,18 +98,6 @@
         @apply text-sm text-pk-content-secondary;
     }
 
-    .md-preview p {
-        @apply text-base;
-    }
-
-    .md-preview ol {
-        @apply list-decimal list-inside;
-    }
-
-    .md-preview ul {
-        @apply list-disc list-inside;
-    }
-
     .app-container {
         @apply lg:px-28 px-4;
     }

components/dashboard/src/teams/onboarding/WelcomeMessagePreview.tsx

@@ -35,7 +35,13 @@ export const WelcomeMessagePreview = ({ disabled, setWelcomeMessageEditorOpen, h
             {welcomeMessage && (
                 <div className="p-8 my-4 bg-pk-surface-secondary text-pk-content-primary rounded-xl flex flex-col gap-5 items-center justify-center">
                     {avatarUrl && <img src={avatarUrl} alt="" className="w-12 h-12 rounded-full" />}
-                    <Markdown className="md-preview space-y-4 text-center bg-pk-surface-secondary">
+                    <Markdown
+                        className="space-y-4 text-center bg-pk-surface-secondary"
+                        components={{
+                            ul: ({ children }) => <ul className="list-disc list-inside">{children}</ul>,
+                            ol: ({ children }) => <ol className="list-decimal list-inside">{children}</ol>,
+                        }}
+                    >
                         {welcomeMessage}
                     </Markdown>
                 </div>