refactor: add gap between icon and text message

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/Message.tsx

@@ -26,6 +26,13 @@ export const MessageDemo = () => {
           icon={<i className="pi pi-info-circle" />}
         />
       </Section>
+
+      <Section>
+        <Message
+          message="New features just launched! Check them out."
+          icon={<i className="pi pi-android" />}
+        />
+      </Section>
     </Page>
   );
 };

packages/ui/src/assets/css/message.css

@@ -1,7 +1,9 @@
 .message{
-    padding: 1rem;
     background-color: var(--blue-100);
     border-radius: 0.5rem;
     border: 1px solid var(--blue-800);
     color: solid var(--blue-800);
+    display: flex;
+    gap: 1rem;
+    padding: .5rem 1rem;
 }