made whole clickable

Signed-off-by: Ritik Saxena <[email protected]>

Author: ritiksaxena124

src/components/TopPromotionalBanner/index.js

@@ -6,7 +6,7 @@ const TopPromotionalBanner = () => {
   return (
     <>
       <TopBannercontainer>
-        <p><img src={Rocket} alt="Five on rocket"/>Soar to New Heights with Meshery v0.7.0 <a href="https://play.meshery.io/" rel="noreferrer" target="_blank">Try it now &rarr;</a></p>
+        <a href="https://play.meshery.io/" rel="noreferrer" target="_blank"><p className="content"><img src={Rocket} alt="Five on rocket" />Soar to New Heights with Meshery v0.7.0 <span>Try it now &rarr;</span></p></a>
       </TopBannercontainer>
     </>
   );

src/components/TopPromotionalBanner/style.js

@@ -2,25 +2,28 @@ import styled from "styled-components";
 
 export const TopBannercontainer = styled.div`
     background: ${props => props.theme.saffronColor};
-    color: ${props => props.theme.body};
     position: sticky;
-    & > p {
+    .content {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0.75rem 1rem;
+        padding: 0 1rem;
         font-weight: 500;
         line-height: 1.1875rem;
+        color: ${props => props.theme.body};
+        padding: 0.75rem 1rem;
 
        & > img {
         width: 3rem;
         margin-right: 0.5rem;
        }
 
-       & > a {
+       & > span {
         font-weight: 700;
         margin-left: 0.5rem;
-        color: ${props => props.theme.body};
+        &:hover {
+            text-decoration: underline;
+        }
        }
     }
 `;