UI tweaks

cypress/e2e/workContainer.test.ts

@@ -27,7 +27,7 @@ describe('workContainer with usage', () => {
   it('cite as', () => {
     cy.get('.cite-as')
       .select('ieee')
-      .get('.formatted-citation', { timeout: 30000 })
+      .get('#formatted-citation', { timeout: 30000 })
       .should('contain', 'NEXUS Head CT')
   })
 

src/components/CitationFormatter/CitationFormatter.module.scss

@@ -0,0 +1,3 @@
+.formattedCitation {
+  overflow-wrap: break-word;
+}

src/components/CitationFormatter/CitationFormatter.tsx

@@ -4,6 +4,7 @@ import Col from 'react-bootstrap/Col'
 import Alert from 'react-bootstrap/Alert'
 import ReactHtmlParser from 'html-react-parser'
 import { useFormattedCitationQuery } from 'src/data/queries/formattedCitationQuery'
+import styles from './CitationFormatter.module.scss'
 
 type Props = {
   id: string
@@ -35,7 +36,7 @@ export default function CitationFormatter({ id, style, locale }: Props) {
     <Col xs={12}>
       <h3 className="member-results">Cite as</h3>
     </Col>
-    <Col xs={12} className="formatted-citation">
+    <Col xs={12} className={styles.formattedCitation} id="formatted-citation">
       {ReactHtmlParser(formatted)}
     </Col>
   </ >

src/components/Claim/Claim.module.scss

@@ -1,9 +1,4 @@
 .claimDisabled {
   color: #1abc9c !important;
   width: 100%;
-}
-
-.claimWarning {
-  color: #1abc9c !important;
-  width: 100%;
-}
+}

src/components/Claim/Claim.tsx

@@ -108,7 +108,7 @@ export default function Claim({ doi_id }: Props) {
     return null
 
   if (loading) {
-    return <Button variant='warning' className={styles.claimWarning} disabled title="Checking claim status...">
+    return <Button variant='primary' className={styles.claimDisabled} disabled title="Checking claim status...">
       Checking claim status...
     </Button>
   }

src/components/ProductionChart/ProductionChart.tsx

@@ -66,7 +66,7 @@ export default function ProductionChart({ title, data, lowerBoundYear, color }:
     transform: [
       {
         calculate: 'toNumber(datum.title)',
-        as: 'period'
+        as: 'year'
       },
       {
         calculate: 'toNumber(datum.title)+1',
@@ -91,7 +91,7 @@ export default function ProductionChart({ title, data, lowerBoundYear, color }:
     },
     encoding: {
       x: {
-        field: 'period',
+        field: 'year',
         bin: {
           binned: true,
           step: 1,
@@ -106,14 +106,11 @@ export default function ProductionChart({ title, data, lowerBoundYear, color }:
           domain: [lowerBoundYear, thisYear]
         }
       },
-      x2: {
-        field: 'bin_end'
-      },
       y: {
         field: 'count',
         type: 'quantitative',
         axis: {
-          format: ',f',
+          format: ',d',
           tickMinStep: 1
         }
       },

src/components/RepositoryDetail/RepositoryDetail.module.scss

@@ -98,6 +98,10 @@
   flex-direction: column;
   align-items: flex-start;
   margin-top: 3em;
+
+  a {
+    width: 100%;
+  }
 }
 .share {
   display: flex;

src/components/RepositoryDetail/RepositoryDetail.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Link from 'next/link'
 import Button from 'react-bootstrap/Button'
 import Badge from 'react-bootstrap/Badge'
 import { faNewspaper } from '@fortawesome/free-solid-svg-icons'
@@ -21,20 +20,18 @@ export function RepositorySidebar({ repo }: Props) {
     return (
       <>
         {repo.url && (
-          <Button id="go-to-repo" variant="default" href={repo.url} className="w-100">
+          <Button id="go-to-repo" variant="default" href={repo.url} className="mb-2">
             <FontAwesomeIcon icon={faSignInAlt} />
             &nbsp;
             Go to Repository
           </Button>
         )}
         {repo.works && (repo.works.totalCount > 0) && (
-          <Link prefetch={false} href={"/doi.org?query=client.uid:" + repo.clientId}>
-            <Button variant="primary" id="find-related">
-              <FontAwesomeIcon icon={faNewspaper} />
-              &nbsp;
-              Find Related Works
-            </Button>
-          </Link>
+          <Button variant="primary" href={"/doi.org?query=client.uid:" + repo.clientId} id="find-related">
+            <FontAwesomeIcon icon={faNewspaper} />
+            &nbsp;
+            Find Related Works
+          </Button>
         )}
       </>
     )