From 27e3c7d2ebbb000be6c9b9aa04cd0a9f0bb7a0f0 Mon Sep 17 00:00:00 2001
From: Nuary Pradipta <nuary.pradipta@gmail.com>
Date: Tue, 4 Oct 2022 17:21:28 +0700
Subject: [PATCH] Update send message button style

---
 src/components/Profile/Header/index.module.css |  6 ++++++
 src/components/Profile/Header/index.tsx        | 14 +++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Profile/Header/index.module.css b/src/components/Profile/Header/index.module.css
index 18056bead..62fcf2c94 100644
--- a/src/components/Profile/Header/index.module.css
+++ b/src/components/Profile/Header/index.module.css
@@ -52,3 +52,9 @@
   right: calc(var(--spacer) / 3);
   bottom: calc(var(--spacer) / 6);
 }
+
+.buttonWrap {
+  display: flex;
+  justify-content: end;
+  padding: calc(var(--spacer) / 4) 0;
+}
diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx
index 9146f77d9..61fb98961 100644
--- a/src/components/Profile/Header/index.tsx
+++ b/src/components/Profile/Header/index.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import PublisherLinks from './PublisherLinks'
 import Markdown from '@shared/Markdown'
+import Button from '@shared/atoms/Button'
 import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
@@ -78,6 +79,16 @@ export default function AccountHeader({
       </div>
 
       <div>
+        <div className={styles.buttonWrap}>
+          <Button
+            style="primary"
+            size="small"
+            className={styles.sendMessage}
+            onClick={clickHandler}
+          >
+            Send Messages
+          </Button>
+        </div>
         <Markdown text={profile?.description} className={styles.description} />
         {isDescriptionTextClamped() ? (
           <span className={styles.more} onClick={toogleShowMore}>
@@ -92,9 +103,6 @@ export default function AccountHeader({
         {profile?.links?.length > 0 && (
           <PublisherLinks className={styles.publisherLinks} />
         )}
-        <button className="sendMessage" onClick={clickHandler}>
-          Send Messages
-        </button>
       </div>
       <div className={styles.meta}>
         Profile data from{' '}