Onboarding: Update WordPress Version Tooltip Icon and Position

[gavande1]

Related issues

• Fixes STU-458 and WordPress versions icon is not readable well #1338

Proposed Changes

• Replace warning sign icon with info icon.
• Reduce the gap between the title and the icon.

Testing Instructions

• Check out this PR.
• Apply temp change to see the onboarding screen.

diff --git a/src/components/app.tsx b/src/components/app.tsx
index c06b9cb..3224a7d 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -20,7 +20,7 @@ import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
 
 export default function App() {
        useLocalizationSupport();
-       const { needsOnboarding } = useOnboarding();
+       const { needsOnboarding } = { needsOnboarding: true }; //useOnboarding();
        const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
        const { showWhatsNew, closeWhatsNew } = useWhatsNew();

• Start the Studio by running npm start
• Click on Advanced settings
• Select a WordPress version number other than latest.
• The tooltip (i) will be displayed.
• Check that the icon is positioned close to the title.
• The updated icon is readable.
• Also, check the tooltip position on the add site and edit site form.

Before	After

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

Looks much better, thanks for making these changes:

[bcotrim]

LGTM 👍

Although it was not changed or part of the scope of this PR, I think it is still somehow related:

• Should we change the placement of the tooltip in the "Add site" workflow to match the one on the onboarding?

[gavande1]

Thanks for pointing that out. I will go ahead and update Add site tooltip as well.

[bcotrim]

Looks good, thanks for making the adjustment 👍