feat: implement stuart's suggestions

Author: epiqueras

src/components/pnk-balance-card.js

@@ -10,6 +10,7 @@ import { ReactComponent as SectionArrowBackground } from '../assets/images/secti
 import styled from 'styled-components/macro'
 
 const StyledCard = styled(Card)`
+  cursor: initial;
   margin: 28px 0;
 
   .ant-card-body {

src/components/welcome-card.js

@@ -1,9 +1,10 @@
+import React, { useEffect, useState } from 'react'
 import { Card } from 'antd'
 import PropTypes from 'prop-types'
-import React from 'react'
 import { fluidRange } from 'polished'
 import styled from 'styled-components/macro'
 
+let cachedShow = true
 const StyledCard = styled(Card)`
   z-index: 1;
 
@@ -68,17 +69,31 @@ const StyledTextCardGrid = styled(StyledCardGrid)`
     padding: calc(10% + 20px) 0 10%;
   }
 `
-const WelcomeCard = ({ icon, text, version }) => (
-  <StyledCard bordered={false}>
-    <StyledIconCardGrid>
-      {icon}
-      <StyledDiv>{version}</StyledDiv>
-    </StyledIconCardGrid>
-    <StyledTextCardGrid className="secondary-linear-background theme-linear-background">
-      {text}
-    </StyledTextCardGrid>
-  </StyledCard>
-)
+const WelcomeCard = ({ icon, text, version }) => {
+  const [show, setShow] = useState(cachedShow)
+  useEffect(() => {
+    if (show) {
+      const timeout = setTimeout(() => setShow(false), 5000)
+      return () => {
+        clearTimeout(timeout)
+        cachedShow = false
+      }
+    }
+  }, [])
+  return (
+    show && (
+      <StyledCard bordered={false}>
+        <StyledIconCardGrid>
+          {icon}
+          <StyledDiv>{version}</StyledDiv>
+        </StyledIconCardGrid>
+        <StyledTextCardGrid className="secondary-linear-background theme-linear-background">
+          {text}
+        </StyledTextCardGrid>
+      </StyledCard>
+    )
+  )
+}
 
 WelcomeCard.propTypes = {
   icon: PropTypes.node.isRequired,

src/containers/cases.js

@@ -73,8 +73,8 @@ export default () => {
         onChange={useCallback(e => setFilter(e.target.value), [])}
         value={filter}
       >
-        <Radio.Button value>Active</Radio.Button>
-        <Radio.Button value={false}>Executed</Radio.Button>
+        <Radio.Button value>In Progress</Radio.Button>
+        <Radio.Button value={false}>Closed</Radio.Button>
       </StyledRadioGroup>
       <Divider />
       <Spin spinning={disputes.loading}>

src/containers/home.js

@@ -17,15 +17,15 @@ const StyledImg = styled.img`
 export default () => (
   <>
     <TopBanner
-      description="Get started by buying PNK if you don't have any already."
+      description="If you don't have some, buy PNK to get started."
       extra={
         <Link to="/tokens">
           <Button size="large" type="primary">
             Buy PNK
           </Button>
         </Link>
       }
-      title="Welcome to the Kleros Juror Dashboard!"
+      title="Kleros Juror Dashboard"
     />
     <WelcomeCard
       icon={<StyledImg alt="Kleros Logo with Dark Text" src={darkLogo} />}