Improve some styles

dantehemerson · May 23, 2020 · b378164 · b378164
1 parent 37ad8df
commit b378164
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/components/Shortened.js b/src/components/Shortened.js
@@ -3,7 +3,6 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
 import styled from 'styled-components'
 
 const Container = styled.div`
-  height: 200px;
   min-width: 100px;
   width: 100%;
   padding: 0 10px;
@@ -70,7 +69,7 @@ const CopiedTooltip = styled.p`
     box-shadow: 0 0 4px #00000047;
 `
 
-const Shortened = ({ url, urlCode })  => {
+const Shortened = ({ title='Your shortened URL is:', url, urlCode })  => {
   const [copied, setCopied] = useState(false)
   const myTimeout = useRef(null)
 
@@ -88,7 +87,7 @@ const Shortened = ({ url, urlCode })  => {
     <Container>
       {url &&
       <React.Fragment>
-          <p className='title_result'>Your shortened URL is:</p>
+          <p className='title_result'>{title}</p>
           <Result>
             <Url target="_blank" href={url}>{url}</Url>
             <CopyToClipboard text={url} onCopy={onCopy}>
@@ -98,7 +97,9 @@ const Shortened = ({ url, urlCode })  => {
               </Copy>
             </CopyToClipboard>
           </Result>
-          <p className='track_url'>You can track total clicks in your URL <a href={`/clicks/of?url=${urlCode}`}  target="_blank">here</a></p>
+          {
+            urlCode && <p className='track_url'>You can track total clicks in your URL <a href={`/clicks/of?url=${urlCode}`}  target="_blank">here</a></p>
+          }
         </React.Fragment>
       }
     </Container>

diff --git a/src/pages/clicks/of.js b/src/pages/clicks/of.js
@@ -7,6 +7,9 @@ import Button from '../../components/Button'
 import Input from '../../components/Input'
 import Layout from '../../components/Layout'
 import { config } from '../../config'
+import ErrorMessage from '../../components/ErrorMessage'
+import { generateFullURLCode } from '../../utils'
+import Shortened from '../../components/Shortened'
 
 const Clicks = ({ location }) => {
   const [error, setError] = useState('')
@@ -55,18 +58,17 @@ const Clicks = ({ location }) => {
       {
         error ?
         <React.Fragment>
-        <p>Invalid URL to track</p>
+        <ErrorMessage error={'Invalid URL to track'}/>
         <Button onClick={handleTryAnother}>Try another</Button>
         </React.Fragment> :
         shortened ?
         <React.Fragment>
-          <h2>Total URL Clicks for: </h2>
-          <h3><a href={shortened.originalUrl}>{shortened.originalUrl}</a></h3>
-          <h1>{shortened.clicksCounter}</h1>
-          <Button onClick={handleTryAnother}>Try another</Button>
+          <Shortened title='Total URL Clicks for:' url={generateFullURLCode(location, shortened.urlCode)}/>
+          <h1 className='total_clicks'>{shortened.clicksCounter}</h1>
+          <Button onClick={handleTryAnother}>Track another URL</Button>
         </React.Fragment>:
         <React.Fragment>
-          <Input value={trackUrl} onChange={e => setTrackUrl(e.target.value)}/>
+          <Input placeholder='Put your URL to track here' value={trackUrl} onChange={e => setTrackUrl(e.target.value)}/>
           <Button onClick={handleTrack}>Track</Button>
         </React.Fragment>
       }
@@ -79,6 +81,12 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
+
+  .total_clicks {
+    font-size: 90px;
+    line-height: 0;
+    color: #465266;
+  }
 `