Merge pull request #260 from datacite/fix-claim-button

fair vis release 1 - fixed claim button styles
datacite · Mar 14, 2023 · c30efc0 · c30efc0
2 parents 67d26aa + f3099e8
commit c30efc0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/Claim/Claim.module.scss b/src/components/Claim/Claim.module.scss
@@ -1,3 +1,3 @@
-.claimButton:hover {
+.claimDisabled:hover {
   color: #1abc9c;
 }
diff --git 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,16 +219,16 @@ const Claim: React.FunctionComponent<Props> = ({ doi_id }) => {
                 {isClaimed ?
                   <Button
                     bsStyle={'warning'}
-                    className="claim"
                     onClick={onDelete}
+                    block
                   >
                     <FontAwesomeIcon icon={faOrcid} /> Remove Claim
                   </Button>
                   :
                   <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>
               </>
             )}
     </>