From 85443434a6869fc6bae68d075595fb633fd74876 Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Thu, 11 Jun 2020 02:59:57 +0200
Subject: a full restyle

---
 client/package.json                 |  3 +++
 client/public/index.html            |  1 +
 client/src/App.css                  | 46 +++++++++++++++----------------------
 client/src/Components/Button.js     |  6 ++++-
 client/src/Components/CopyButton.js |  2 +-
 client/src/Components/Form.js       |  4 ++--
 client/src/Components/Response.js   |  7 +++++-
 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;
-- 
cgit 1.4.1