console: update Neon Banner and adjust button

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6144
Co-authored-by: Abhijeet Khangarot <26903230+abhi40308@users.noreply.github.com>
GitOrigin-RevId: 09fe0008f004977cf0fbcbdb873df791656f82a8

console/src/components/Services/Data/DataSources/CreateDataSource/Neon/components/HerokuBanner/Banner.tsx

@@ -5,23 +5,25 @@ import { GrHeroku } from 'react-icons/gr';
 export function HerokuBanner() {
   return (
     <div className="flex items-center justify-between border border-gray-300 border-l-4 border-l-[#430098] shadow-md rounded bg-white p-md">
-      <div className="flex items-center">
-        <div className="ml-sm">
-          <GrHeroku size={24} color="#430098" />
+      <div className="w-[70%] flex items-center">
+        <div className="mr-2">
+          <GrHeroku size={30} color="#430098" />
         </div>
-        <div className="text-lg text-gray-700 ml-sm">
+        <div className="text-md text-gray-700">
           Starting <b>November 28th, 2022,</b> free Heroku Dynos, free Heroku
           Postgres, and free Heroku Data for Redis will no longer be available.
         </div>
       </div>
-      <a
-        href="https://help.heroku.com/RSBRUH58/removal-of-heroku-free-product-plans-faq"
-        className="no-underline"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Button className="ml-auto">Know more</Button>
-      </a>
+      <div>
+        <a
+          href="https://help.heroku.com/RSBRUH58/removal-of-heroku-free-product-plans-faq"
+          className="hover:no-underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button className="ml-auto">Know more</Button>
+        </a>
+      </div>
     </div>
   );
 }

console/src/components/Services/Data/DataSources/CreateDataSource/Neon/components/Neon/NeonBanner.tsx

@@ -42,21 +42,20 @@ export function NeonBanner(props: Props) {
         </span>
       </div>
       <img
-        src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/neon_banner.png"
+        src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/neon.jpg"
         alt="neon_banner"
+        className="rounded"
       />
       <div className="mt-sm mb-sm text-gray-700 text-lg">
         <b>Hasura</b> + <b>Neon</b> are partners now!
       </div>
       <div className="flex justify-between items-center mb-sm">
-        <div className="w-3/4 text-md text-gray-700">
-          <p>
-            The multi-cloud fully managed Postgres with a generous free tier. We
-            separated storage and compute to offer autoscaling, branching, and
-            bottomless storage.
-          </p>
+        <div className="w-[70%] text-md text-gray-700">
+          The multi-cloud fully managed Postgres with a generous free tier. We
+          separated storage and compute to offer autoscaling, branching, and
+          bottomless storage.
         </div>
-        <div className="flex w-1/4 justify-end">
+        <div>
           <Button
             data-trackid="neon-connect-db-button"
             data-testid="neon-connect-db-button"
@@ -72,7 +71,7 @@ export function NeonBanner(props: Props) {
             }}
             disabled={isButtonDisabled}
           >
-            {props.buttonText}
+            <div className="text-xs 2xl:text-sm">{props.buttonText}</div>
           </Button>
         </div>
       </div>