Merge pull request #66

UI Uplift
vicr123 · Jun 30, 2024 · e065248 · e065248
2 parents 3bb867c + bf4841d
commit e065248
Show file tree

Hide file tree

Showing 89 changed files with 609 additions and 439 deletions.
diff --git a/Parlance.ClientApp/public/resources/translations/bg/translation.json b/Parlance.ClientApp/public/resources/translations/bg/translation.json
@@ -201,6 +201,9 @@
   "NOTIFICATIONS": "Известия",
   "NOTIFICATIONS_CHANNELS": "Канали",
   "NOTIFICATION_SETTINGS": "Настройки на известия",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/cs-CZ/translation.json b/Parlance.ClientApp/public/resources/translations/cs-CZ/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/da/translation.json b/Parlance.ClientApp/public/resources/translations/da/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/de/translation.json b/Parlance.ClientApp/public/resources/translations/de/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "Nicht angemeldet",
   "NO_GLOSSARIES": "",
   "OK": "Ok",

diff --git a/Parlance.ClientApp/public/resources/translations/en/translation.json b/Parlance.ClientApp/public/resources/translations/en/translation.json
@@ -201,6 +201,9 @@
   "NOTIFICATIONS": "Notifications",
   "NOTIFICATIONS_CHANNELS": "Channels",
   "NOTIFICATION_SETTINGS": "Notification Settings",
+  "NOT_FOUND_DESCRIPTION": "Let's get you back on the right track.",
+  "NOT_FOUND_GO_HOME": "Go Home",
+  "NOT_FOUND_TITLE": "Oh, bonkers!",
   "NOT_LOGGED_IN": "Not Logged In",
   "NO_GLOSSARIES": "No glossaries",
   "OK": "OK",

diff --git a/Parlance.ClientApp/public/resources/translations/es/translation.json b/Parlance.ClientApp/public/resources/translations/es/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/fr-CA/translation.json b/Parlance.ClientApp/public/resources/translations/fr-CA/translation.json
@@ -199,6 +199,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/he-IL/translation.json b/Parlance.ClientApp/public/resources/translations/he-IL/translation.json
@@ -203,6 +203,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "לא מחובר",
   "NO_GLOSSARIES": "",
   "OK": "אישור",

diff --git a/Parlance.ClientApp/public/resources/translations/nl/translation.json b/Parlance.ClientApp/public/resources/translations/nl/translation.json
@@ -199,6 +199,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "Niet Ingelogd",
   "NO_GLOSSARIES": "",
   "OK": "Oké",

diff --git a/Parlance.ClientApp/public/resources/translations/pt-BR/translation.json b/Parlance.ClientApp/public/resources/translations/pt-BR/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "Não conectado",
   "NO_GLOSSARIES": "",
   "OK": "OK",

diff --git a/Parlance.ClientApp/public/resources/translations/ro-RO/translation.json b/Parlance.ClientApp/public/resources/translations/ro-RO/translation.json
@@ -200,6 +200,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "Nu ești conectat",
   "NO_GLOSSARIES": "",
   "OK": "OK",

diff --git a/Parlance.ClientApp/public/resources/translations/uk/translation.json b/Parlance.ClientApp/public/resources/translations/uk/translation.json
@@ -198,6 +198,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "",
   "NO_GLOSSARIES": "",
   "OK": "",

diff --git a/Parlance.ClientApp/public/resources/translations/vi/translation.json b/Parlance.ClientApp/public/resources/translations/vi/translation.json
@@ -199,6 +199,9 @@
   "NOTIFICATIONS": "",
   "NOTIFICATIONS_CHANNELS": "",
   "NOTIFICATION_SETTINGS": "",
+  "NOT_FOUND_DESCRIPTION": "",
+  "NOT_FOUND_GO_HOME": "",
+  "NOT_FOUND_TITLE": "",
   "NOT_LOGGED_IN": "Chưa đăng nhập",
   "NO_GLOSSARIES": "Không có bảng chữ giải",
   "OK": "OK",

diff --git a/Parlance.ClientApp/src/components/BackButton.module.css b/Parlance.ClientApp/src/components/BackButton.module.css
@@ -3,6 +3,8 @@
     padding-bottom: 6px;
 
     cursor: default;
+    background-color: unset;
+    border-radius: var(--border-radius);
 }
 
 .backButton:hover {
@@ -14,14 +16,9 @@
 }
 
 .listPageContainer {
-    border-bottom: 1px solid var(--border-color);
     max-width: 600px;
 }
 
-.translationViewContainer {
-    border-bottom: 1px solid var(--border-color);
-}
-
 .listPageContainer.backButton {
     padding-left: 6px;
 }

diff --git a/Parlance.ClientApp/src/components/Button.module.css b/Parlance.ClientApp/src/components/Button.module.css
@@ -1,10 +1,12 @@
 .button {
-    padding: 15px;
+    padding: 12px;
     cursor: default;
 
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: var(--border-radius);
+    margin: 3px;
 }
 
 .button:not(.disabled):hover {

diff --git a/Parlance.ClientApp/src/components/Container.module.css b/Parlance.ClientApp/src/components/Container.module.css
@@ -2,14 +2,22 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.containerWrapper {
+
 }
 
 .containerInner {
-    width: 100vw;
+    width: calc(100vw - 6px);
     max-width: var(--content-width);
-    padding-left: 9px;
-    padding-right: 9px;
+    padding: 9px;
     box-sizing: border-box;
+    border-radius: var(--border-radius);
+    background-color: var(--layer-color);
 }
 
 .bottomBorder {

diff --git a/Parlance.ClientApp/src/components/Container.tsx b/Parlance.ClientApp/src/components/Container.tsx
@@ -11,11 +11,13 @@ interface ContainerProps {
 
 export default function Container(props: ContainerProps) {
     let styles = [Styles.container];
-    if (props.bottomBorder) styles.push(Styles.bottomBorder);
-    if (props.className) styles.push(props.className);
+    // if (props.bottomBorder) styles.push(Styles.bottomBorder);
 
-    return <div className={styles.join(" ")} style={props.style} onClick={props.onClick}>
-        <div className={Styles.containerInner}>
+    let innerStyles = [Styles.containerInner];
+    if (props.className) innerStyles.push(props.className);
+
+    return <div className={styles.join(" ")}>
+        <div className={innerStyles.join(" ")} style={props.style} onClick={props.onClick}>
             {props.children}
         </div>
     </div>

diff --git a/Parlance.ClientApp/src/components/Footer.module.css b/Parlance.ClientApp/src/components/Footer.module.css
@@ -5,7 +5,7 @@
     align-items: center;
     justify-content: center;
 
-    border-top: 1px solid var(--border-color);
+    background-color: var(--layer-color);
 }
 
 .footer {

diff --git a/Parlance.ClientApp/src/components/Footer.jsx → Parlance.ClientApp/src/components/Footer.tsx b/Parlance.ClientApp/src/components/Footer.jsx → Parlance.ClientApp/src/components/Footer.tsx
diff --git a/Parlance.ClientApp/src/components/Hero.module.css b/Parlance.ClientApp/src/components/Hero.module.css
@@ -1,10 +1,12 @@
-.heroContainer {
+.heroContainer.heroContainer {
     background-color: var(--hover-color);
 }
 
 .heroInner {
     padding-top: 20px;
     padding-bottom: 20px;
+    padding-left: 9px;
+    padding-right: 9px;
 }
 
 .buttonBox {

diff --git a/Parlance.ClientApp/src/components/Hero.tsx b/Parlance.ClientApp/src/components/Hero.tsx
@@ -12,7 +12,7 @@ interface HeroButton {
 interface HeroProps {
     heading: string
     subheading?: string
-    buttons: HeroButton[]
+    buttons?: HeroButton[]
 }
 
 export default function Hero({heading, subheading, buttons}: HeroProps) {
@@ -21,7 +21,7 @@ export default function Hero({heading, subheading, buttons}: HeroProps) {
             <PageHeading>{heading}</PageHeading>
             <PageHeading level={2}>{subheading}</PageHeading>
             <div className={Styles.buttonBox}>
-                {buttons.map((button, i) => <SmallButton key={i} onClick={button.onClick}>{button.text}</SmallButton>)}
+                {buttons?.map((button, i) => <SmallButton key={i} onClick={button.onClick}>{button.text}</SmallButton>)}
             </div>
         </div>
     </Container>

diff --git a/Parlance.ClientApp/src/components/Layout.jsx → Parlance.ClientApp/src/components/Layout.tsx b/Parlance.ClientApp/src/components/Layout.jsx → Parlance.ClientApp/src/components/Layout.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import NavMenu from './NavMenu';
 import Styles from "./Layout.module.css";
 import Footer from "./Footer";
 
-export default function Layout({dir, children}) {
+export default function Layout({dir, children}: {
+    dir: "ltr" | "rtl",
+    children: ReactNode
+}) {
     return <div className={`${Styles.rootLayout} ${dir}`} dir={dir}>
         <NavMenu/>
         {children}

diff --git a/Parlance.ClientApp/src/components/LineEdit.module.css b/Parlance.ClientApp/src/components/LineEdit.module.css
@@ -1,7 +1,17 @@
 .container {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid var(--border-color);
+
+    background: var(--layer-color);
+    border-radius: var(--border-radius);
+
+    cursor: text;
+    border: 3px solid transparent;
+    transition: border 0.1s ease-out;
+}
+
+.container:has(.input:focus) {
+    animation: focusDecoration 1s linear 0s infinite;
 }
 
 .label {
@@ -20,7 +30,7 @@
 }
 
 .input:placeholder-shown + .label {
-    transform: translateY(60%) translateX(2%);
+    transform: translateY(40%) translateX(2%);
     font-size: 12pt;
     color: var(--foreground-disabled-color);
     cursor: text;
@@ -31,3 +41,15 @@
     font-size: 8pt;
     color: var(--foreground-color);
 }
+
+@keyframes focusDecoration {
+    0% {
+        border: 3px solid var(--focus-decoration-start);
+    }
+    50% {
+        border: 3px solid var(--focus-decoration-end);
+    }
+    100% {
+        border: 3px solid var(--focus-decoration-start);
+    }
+}
diff --git a/Parlance.ClientApp/src/components/LineEdit.tsx b/Parlance.ClientApp/src/components/LineEdit.tsx
@@ -1,23 +1,25 @@
 import Styles from "./LineEdit.module.css";
-import {HTMLProps, useId} from "react";
+import {HTMLProps, useId, useRef} from "react";
 
 interface LineEditProps extends HTMLProps<HTMLInputElement> {
     password?: boolean;
 }
 
 export default function LineEdit(props: LineEditProps) {
     const id = useId();
+    const input = useRef<HTMLInputElement>(null);
 
     let inputProps = {...props};
     inputProps.placeholder = "";
     inputProps.style = {};
     inputProps.password = false;
 
     return <div style={props.style}>
-        <div className={Styles.container}>
+        <div className={Styles.container} onClick={() => input.current?.focus()}>
             <input className={Styles.input} type={props.password ? "password" : "text"} required={true}
-                   id={id} {...inputProps} />
+                   id={id} ref={input} {...inputProps} />
             <label className={Styles.label} htmlFor={id}>{props.placeholder}</label>
+            <div className={Styles.focusDecoration} />
         </div>
     </div>
 }