From f3099e8951f838c27ce15f6501ad1d71fc8e3a53 Mon Sep 17 00:00:00 2001
From: Bryceson Laing <bryceson.laing@datacite.org>
Date: Tue, 14 Mar 2023 12:32:00 -0500
Subject: [PATCH] fair vis release 1 - fixed claim button styles

---
 src/components/Claim/Claim.module.scss | 2 +-
 src/components/Claim/Claim.tsx         | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Claim/Claim.module.scss b/src/components/Claim/Claim.module.scss
index a0349bf3..a387591e 100644
--- a/src/components/Claim/Claim.module.scss
+++ b/src/components/Claim/Claim.module.scss
@@ -1,3 +1,3 @@
-.claimButton:hover {
+.claimDisabled:hover {
   color: #1abc9c;
 }
\ No newline at end of file
diff --git a/src/components/Claim/Claim.tsx b/src/components/Claim/Claim.tsx
index 694417fa..de680fdd 100644
--- a/src/components/Claim/Claim.tsx
+++ b/src/components/Claim/Claim.tsx
@@ -172,7 +172,7 @@ const Claim: React.FunctionComponent<Props> = ({ doi_id }) => {
     return null
 
   if (!user){
-    return <Button bsStyle='primary' className={styles.claimButton} disabled title="Sign in to Add to ORCID record" block>
+    return <Button bsStyle='primary' className={styles.claimDisabled} disabled title="Sign in to Add to ORCID record" block>
       <FontAwesomeIcon icon={faOrcid} /> Add to ORCID Record
     </Button>
   }
@@ -219,8 +219,8 @@ const Claim: React.FunctionComponent<Props> = ({ doi_id }) => {
                 {isClaimed ?
                   <Button
                     bsStyle={'warning'}
-                    className="claim"
                     onClick={onDelete}
+                    block
                   >
                     <FontAwesomeIcon icon={faOrcid} /> Remove Claim
                   </Button>
@@ -228,7 +228,7 @@ const Claim: React.FunctionComponent<Props> = ({ doi_id }) => {
                   <Button
                     bsStyle='primary'
                     onClick={onCreate}
-                    className={styles.claimButton}
+                    block
                   >
                     <FontAwesomeIcon icon={faOrcid} /> Add to ORCID Record
                   </Button>
@@ -239,8 +239,7 @@ const Claim: React.FunctionComponent<Props> = ({ doi_id }) => {
 
             {!isClaimed && claim.errorMessages && claim.errorMessages.length > 0 && (
               <>
-                <h5>Error</h5>
-                {claim.errorMessages[0].title}
+                <p>Error: {claim.errorMessages[0].title}</p>
               </>
             )}
     </>