From 2e8588b7efcbe6b2401c8880dfe1bb042128c0d4 Mon Sep 17 00:00:00 2001 From: Yummy_Bacon5 <68166338+YummyBacon5@users.noreply.github.com> Date: Mon, 5 Feb 2024 14:09:45 +0000 Subject: [PATCH] And fix accessibility issues with contrast, and fix updoot buttons --- frontend/src/AddNewWord.tsx | 8 +++++- frontend/src/DfnArea.tsx | 13 +++++----- frontend/src/hooks/utils.tsx | 2 +- frontend/src/index.tsx | 2 +- frontend/src/static_original/checkmark.svg | 2 +- frontend/src/static_original/index.html | 1 - frontend/src/static_original/style.css | 29 ++++++++++++---------- 7 files changed, 32 insertions(+), 25 deletions(-) diff --git a/frontend/src/AddNewWord.tsx b/frontend/src/AddNewWord.tsx index ac3766c..553ffdc 100644 --- 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) {
- +
diff --git a/frontend/src/DfnArea.tsx b/frontend/src/DfnArea.tsx index fe4c1d2..6bc99d1 100644 --- 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 (
- Id: {wordData.id}

{wordData.word}

@@ -143,8 +141,9 @@ export default function DfnArea({ word }: DfnAreaProps) { {wordData.uploader}

+

{wordData.id}

- Creation date:{" "} + Creation date: - diff --git a/frontend/src/hooks/utils.tsx b/frontend/src/hooks/utils.tsx index 7528d31..8600e0a 100644 --- a/frontend/src/hooks/utils.tsx +++ b/frontend/src/hooks/utils.tsx @@ -22,7 +22,7 @@ export function LinkIcon() { export function UpdootIcon() { return ( - + diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 645cc6d..aadbf45 100644 --- 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(); \ No newline at end of file diff --git a/frontend/src/static_original/checkmark.svg b/frontend/src/static_original/checkmark.svg index 1610663..54a65cf 100644 --- a/frontend/src/static_original/checkmark.svg +++ b/frontend/src/static_original/checkmark.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/src/static_original/index.html b/frontend/src/static_original/index.html index 8becedc..5129c5e 100644 --- a/frontend/src/static_original/index.html +++ b/frontend/src/static_original/index.html @@ -1,7 +1,6 @@ - Dict Word List diff --git a/frontend/src/static_original/style.css b/frontend/src/static_original/style.css index 6455ca3..0ac63ee 100644 --- 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;