a full restyle

4 files changed, 14 insertions, 5 deletions

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>
     )
 }