diff options
| -rw-r--r-- | client/package.json | 3 | ||||
| -rw-r--r-- | client/public/index.html | 1 | ||||
| -rw-r--r-- | client/src/App.css | 46 | ||||
| -rw-r--r-- | client/src/Components/Button.js | 6 | ||||
| -rw-r--r-- | client/src/Components/CopyButton.js | 2 | ||||
| -rw-r--r-- | client/src/Components/Form.js | 4 | ||||
| -rw-r--r-- | client/src/Components/Response.js | 7 | ||||
| -rw-r--r-- | client/src/index.css | 7 |
8 files changed, 42 insertions, 34 deletions
diff --git a/client/package.json b/client/package.json index 0650abf..63096ae 100644 --- a/client/package.json +++ b/client/package.json @@ -4,6 +4,9 @@ "private": true, "homepage": "/client/", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.28", + "@fortawesome/free-solid-svg-icons": "^5.13.0", + "@fortawesome/react-fontawesome": "^0.1.10", "axios": "^0.19.2", "clipboard-copy": "^3.1.0", "react": "^16.13.1", diff --git a/client/public/index.html b/client/public/index.html index f8ac79c..9aabd98 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -7,6 +7,7 @@ name="description" content="A simple URL shortener!" /> + <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet"> <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" /> diff --git a/client/src/App.css b/client/src/App.css index 07c14c2..cf0e529 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -2,17 +2,22 @@ padding-left: 30px; margin-bottom: 10px; line-height: 1.42857143; - color: #E0E0E0; + color: #ffffff; } .response-text { margin-bottom: 0; + color: #C5C5D3; } -.copy-text { - color: #E0E0E0; +.right-item { + color: #ffffff; padding-right: 30px; text-align: right; +} + +.copy-text { + color: #c5c5d3; -webkit-touch-callout: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; @@ -23,19 +28,17 @@ .input-group { position: relative; display: table; - border-color: #E0E0E0; border-collapse: separate; - transition: border-color 1s; } .response-container { display: flex; align-items: center; - border: 2px solid #E0E0E0; margin: 15px 30px 0 30px; height: 14vh; justify-content: space-between; border-radius: 0 5vh 5vh 5vh; + background-color: #ffffff; } .input-field { @@ -43,7 +46,7 @@ z-index: 2; margin-bottom: 0; text-indent: 0; - color: #727272; + color: #3A3A5C; background-color: #fff; background-image: none; box-sizing: border-box; @@ -56,7 +59,7 @@ .input-field-text { margin-left: 30px; box-sizing: border-box; - color: #E0E0E0; + color: #C5C5D3; } .input-container { @@ -68,11 +71,10 @@ position: relative; padding: 0; border-radius: 5vh 0 0 5vh; - border: 2px solid; - border-color: inherit; margin: 0; box-sizing: border-box; height: 10vh; + background-color: white; } .button-container { @@ -83,12 +85,10 @@ width: 1%; height: 0; vertical-align: middle; - border-color: inherit; } .button { z-index: 2; - margin-left: -1px; display: inline-block; margin-bottom: 0; font-weight: 400; @@ -100,7 +100,7 @@ cursor: pointer; background-image: none; background-color: #fff; - color: #727272; + color: #3A3A5C; padding: 4px 5vw; height: 10vh; -webkit-user-select: none; @@ -108,17 +108,15 @@ -ms-user-select: none; user-select: none; border-radius: 0 5vh 5vh 0; - border: 2px solid; - border-left-style: none; - transition: color 1s; -webkit-appearance: none; -moz-appearance: none; appearance: none; + border: none; } strong { font-weight: normal; - color: #727272; + color: #3A3A5C; } a { @@ -126,16 +124,8 @@ a { } .disabled { - border-color: #ffbcbc; - color: #ffbcbc; -} - -.border-r-none { - border-right: none; -} - -#btn { - border-color: inherit; + background-color: #ff1a61; + color: #ffffff; } @-webkit-keyframes scale { @@ -179,7 +169,7 @@ a { animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); } .ball-pulse > div { - background-color: #727272; + background-color: #3A3A5C; width: 6px; height: 6px; margin: 5px; diff --git a/client/src/Components/Button.js b/client/src/Components/Button.js index 46c0c27..b6ed91b 100644 --- a/client/src/Components/Button.js +++ b/client/src/Components/Button.js @@ -1,9 +1,13 @@ import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import {faArrowRight, faTimes} from '@fortawesome/free-solid-svg-icons'; function Button(props) { return ( <div className="button-container"> - <input type="submit" value={props.valid ? "→" : ""} className="button" id="btn" onClick={props.submit}/> + <button type="submit" className={"button" + (props.valid ? "" : " disabled")} id="btn" onClick={props.submit}> + <FontAwesomeIcon icon={props.valid ? faArrowRight : faTimes}/> + </button> </div> ) } diff --git a/client/src/Components/CopyButton.js b/client/src/Components/CopyButton.js index 0ae8e83..65c4cb9 100644 --- a/client/src/Components/CopyButton.js +++ b/client/src/Components/CopyButton.js @@ -17,7 +17,7 @@ function CopyButton(props) { } return ( - <span className="copy-text" onClick={handleClick}>{content}</span> + <span className="copy-text right-item" onClick={handleClick}>{content}</span> ) } diff --git a/client/src/Components/Form.js b/client/src/Components/Form.js index 077cb58..979d9c9 100644 --- a/client/src/Components/Form.js +++ b/client/src/Components/Form.js @@ -25,8 +25,8 @@ function Form(props) { return ( <form id="form" onSubmit={(e) => e.preventDefault()}> - <div className={"input-group" + (state.valid ? "" : " disabled")}> - <div className={"input-container" + (state.valid ? "" : " border-r-none")}> + <div className="input-group"> + <div className="input-container"> <span className="input-field-text">https://</span> <input className="input-field" required value={state.value} onChange={handleChange} onPaste={handlePaste}/> </div> diff --git a/client/src/Components/Response.js b/client/src/Components/Response.js index 83c6ff1..f69000a 100644 --- a/client/src/Components/Response.js +++ b/client/src/Components/Response.js @@ -2,6 +2,8 @@ import React, {useEffect, useState} from 'react'; import axios from "axios"; import Loader from "./Loader"; import CopyButton from "./CopyButton"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBomb } from '@fortawesome/free-solid-svg-icons'; function Response(props){ const CancelToken = axios.CancelToken; @@ -23,8 +25,10 @@ function Response(props){ }, [props.url, requestState.cancel]) let text; + let rightItem; if (!requestState.loading) { if (!requestState.error) { + rightItem = <CopyButton hash={requestState.hash}/>; if (props.url.length < 20) { text = <span>The short link for <strong>{props.url}</strong> is<br/><strong>sho.rest/{requestState.hash}</strong></span>; @@ -33,6 +37,7 @@ function Response(props){ <span>The short link for your URL is<br/><strong>sho.rest/{requestState.hash}</strong></span>; } } else { + rightItem = <FontAwesomeIcon className="right-item" icon={faBomb}/>; text = <span>There was an error.</span> } } else { @@ -42,7 +47,7 @@ function Response(props){ return ( <div className={"response-container" + (requestState.error ? " disabled" : "")}> <div className={"title response-text" + (requestState.error ? " disabled" : "")}>{text}</div> - {requestState.error || requestState.loading ? "" : <CopyButton hash={requestState.hash}/>} + {rightItem} </div> ) } diff --git a/client/src/index.css b/client/src/index.css index d007edc..b7be091 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,8 +1,13 @@ html * { - font-family: Roboto, sans-serif; + font-family: 'Ubuntu', sans-serif; font-size: 3vmin; } +body { + background-color: #3A3A5C; + margin: 0; +} + #root { justify-content: center; position: absolute; |