aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/package.json3
-rw-r--r--client/public/index.html1
-rw-r--r--client/src/App.css46
-rw-r--r--client/src/Components/Button.js6
-rw-r--r--client/src/Components/CopyButton.js2
-rw-r--r--client/src/Components/Form.js4
-rw-r--r--client/src/Components/Response.js7
-rw-r--r--client/src/index.css7
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;
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-18 16:17:21 +0000