And fix accessibility issues with contrast, and fix updoot buttons

likes-gay · Feb 5, 2024 · 2e8588b · 2e8588b
1 parent 57d72c5
commit 2e8588b
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 25 deletions.
diff --git a/frontend/src/AddNewWord.tsx b/frontend/src/AddNewWord.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { UploadWord, UploadWordError, Word } from "./types";
 import { ChevronIcon, createWordDomId } from "./hooks/utils";
+import Tooltip from "./components/Tooltip";
 
 type AddNewWordProps = {
 	onSubmitFinished?: () => void
@@ -86,7 +87,12 @@ export default function	AddNewWord(props: AddNewWordProps) {
 
 				<div className="field-checkbox">
 					<input type="checkbox" id="robot" name="robot" />
-					<label htmlFor="robot">Are you a robot?</label>
+					<label htmlFor="robot">
+						Are you a robot?
+						<Tooltip toolTipContent="Robot emoji">
+							<span>🤖</span>
+						</Tooltip>
+					</label>
 				</div>
 
 				<div className="button-wrapper">

diff --git a/frontend/src/DfnArea.tsx b/frontend/src/DfnArea.tsx
@@ -19,11 +19,10 @@ function UpdootButtons({ word, onUpdootUpdate: updateState }: UpdootButtonsProps
 	async function handleUpdootClick(state: UpdootStates) {
 		setUpdootState(state);
 
-		if(state == "none") {
+		if(state == "none")
 			localStorage.removeItem(`${word.id}-updootState`);
-			return;
-		}
-		localStorage.setItem(`${word.id}-updootState`, state);
+		else
+			localStorage.setItem(`${word.id}-updootState`, state);
 
 		const updatedWord: Word = await fetch("/api/update_updoot", {
 			headers: {
@@ -101,7 +100,6 @@ export default function	DfnArea({ word }: DfnAreaProps) {
 	return (
 		<article id={domId} className="dictionary-entry">
 			<header className="header-section">
-				<small className="word-id">Id: {wordData.id}</small>
 				<h2 className="word">
 					<dfn aria-details={descriptionDomId}>{wordData.word}</dfn>
 				</h2>
@@ -143,8 +141,9 @@ export default function	DfnArea({ word }: DfnAreaProps) {
 						{wordData.uploader}
 					</span>
 				</p>
+				<p>{wordData.id}</p>
 				<p>
-					Creation date:{" "}
+					Creation date:
 					<Tooltip
 						toolTipContent={new Intl.DateTimeFormat("en-GB", {
 							year: "numeric",
@@ -156,7 +155,7 @@ export default function	DfnArea({ word }: DfnAreaProps) {
 							hour12: true,
 						}).format(creationDateAsDate)}
 					>
-						<time className="creation-date" dateTime={creationDateAsDate.toISOString()}>
+						<time className="new-line" dateTime={creationDateAsDate.toISOString()}>
 							{relativeTime}
 						</time>
 					</Tooltip>

diff --git a/frontend/src/hooks/utils.tsx b/frontend/src/hooks/utils.tsx
@@ -22,7 +22,7 @@ export function LinkIcon() {
 
 export function UpdootIcon() {
 	return (
-		<svg className="arrow-icon" width={30} height={30} viewBox="0 0 256 256">
+		<svg className="arrow-icon" width={30} height={30} viewBox="0 0 256 256" stroke="gray" strokeWidth={16}>
 			<path
 				d="M231.39062,123.06152A8,8,0,0,1,224,128H184v80a16.01833,16.01833,0,0,1-16,16H88a16.01833,16.01833,0,0,1-16-16V128H32a8.00065,8.00065,0,0,1-5.65723-13.65723l96-96a8.003,8.003,0,0,1,11.31446,0l96,96A8.002,8.002,0,0,1,231.39062,123.06152Z"
 			/>

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,7 +1,7 @@
 import ReactDOM	from "react-dom/client";
 import Home	from "./Home";
 
-const version = "2.0.0";
+const version = "2.5.0";
 console.log(`Version: ${version}`);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<Home />);
diff --git a/frontend/src/static_original/checkmark.svg b/frontend/src/static_original/checkmark.svg
diff --git a/frontend/src/static_original/index.html b/frontend/src/static_original/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en-GB">
 <head>
-	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Dict Word List</title>
 	<meta property="og:title" content="Dict Word List">

diff --git a/frontend/src/static_original/style.css b/frontend/src/static_original/style.css
@@ -11,7 +11,7 @@ body {
 	margin: 0;
 	font-family: "Roboto", sans-serif;
 	background: #1b262c;
-	color: #3282ba;
+	color: #79c6ff;
 }
 
 #root {
@@ -50,8 +50,8 @@ body {
 }
 
 .button {
-	min-width: 22px;
-	min-height: 22px;
+	min-width: 44px;
+	min-height: 44px;
 	cursor: pointer;
 	padding: 10px 20px;
 	font-size: inherit;
@@ -173,7 +173,7 @@ a:active {
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
-	background: #2980b9;
+	background: #1e5780;
 	color: white;
 	padding: 18px;
 	text-align: center;
@@ -187,8 +187,8 @@ a:active {
 .interactive-metadata {
 	display: flex;
 	justify-content: left;
-	gap: 0.5rem;
-	background: #2980b9;
+	gap: 0.25rem;
+	background: #1e5780;
 	color: white;
 	border-radius: 0.5rem;
 	padding: 0.5rem;
@@ -200,6 +200,8 @@ a:active {
 .speak-button {
 	background: none;
 	border: none;
+	min-width: 44px;
+	min-height: 44px;
 	width: 2rem;
 	height: 2rem;
 	display: flex;
@@ -235,7 +237,7 @@ a:active {
 }
 
 .metadata-wrapper {
-	background: #2980b9;
+	background: #1e5780;
 	color: white;
 }
 
@@ -250,7 +252,7 @@ a:active {
 	display: block;
 }
 
-.creation-date {
+.footer-section .new-line {
 	display: block;
 }
 
@@ -262,6 +264,7 @@ a:active {
 .definition-section {
 	margin: 20px;
 	padding: 5px;
+	color: #004677;
 	border-top: solid thin #ff9900 4px;
 	border-bottom: solid thin #ff9900 4px;
 	white-space: pre;
@@ -440,10 +443,11 @@ output {
 
 [aria-pressed=true] .arrow-icon {
 	fill: orangered;
+	stroke: orange;
 }
 
 [aria-pressed=false] .arrow-icon {
-	fill: gray;
+	fill: none;
 }
 
 [aria-disabled=true] .audio-icon {
@@ -466,15 +470,14 @@ output {
 }
 
 .combobox-button {
-	grid-area: button;
-	min-width: 22px;
-	min-height: 22px;
+	min-width: 44px;
+	min-height: 44px;
 	cursor: pointer;
 	border-radius: 0.5rem;
 	font-size: inherit;
 	font-family: inherit;
 	color: white;
-	background: #2980b9;
+	background: #1e5780;
 	border: 2px solid #606060;
 	display: flex;
 	align-items: center;