scarlettmiss · scarlettmiss · Jan 4, 2024 · Jan 4, 2024
diff --git a/ui/next.config.js b/ui/next.config.js
@@ -4,8 +4,8 @@ const nextConfig = {
     // reactStrictMode: true,
     env: {
         // // apiUrl: "http://localhost:8080/api",
-        // apiUrl: "https://mypetjournal-lqkz3.ondigitalocean.app/api",
-        apiUrl: "/api",
+        apiUrl: "https://mypetjournal-lqkz3.ondigitalocean.app/api",
+        // apiUrl: "/api",
     },
     images: {
         unoptimized: true

diff --git a/ui/src/components/LineRecordDialog.tsx b/ui/src/components/LineRecordDialog.tsx
@@ -188,7 +188,7 @@ export default class LineRecordDialog extends Component<LineRecordDialogProps, L
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/60 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             <h3 className="text-xl font-semibold text-gray-900 dark:text-white capitalize">

diff --git a/ui/src/components/NavBar.tsx b/ui/src/components/NavBar.tsx
@@ -70,7 +70,9 @@ class NavBar extends BaseComponent<NavBarProps, NavBarState> {
                                 />
 
                                 <ArrowLeftOnRectangleIcon
-                                    className={"h-10 w-10 text-slate-300 p-2 rounded-full hover:bg-gray-600"}
+                                    className={
+                                        "h-10 w-10 text-cyan-50 dark:text-slate-300 p-2 rounded-full hover:bg-indigo-500/20 hover:dark:bg-gray-600"
+                                    }
                                     onClick={() => this.logout(() => this.props.router.replace("/auth/login"))}
                                 />
                             </div>

diff --git a/ui/src/components/PhoneInput.tsx b/ui/src/components/PhoneInput.tsx
@@ -29,6 +29,7 @@ export default function PhoneInput(props: PhoneInputProps) {
             <Input
                 autoFormat={props.autoFormat}
                 countryCodeEditable={props.countryCodeEditable}
+                disableDropdown={props.disabled}
                 preferredCountries={props.preferredCountries}
                 inputProps={{
                     id: props.id,

diff --git a/ui/src/components/ProtectedPage.tsx b/ui/src/components/ProtectedPage.tsx
@@ -42,7 +42,7 @@ class ProtectedPage extends BaseComponent<ProtectedPageProps, ProtectedPageState
 
     render() {
         return TextUtils.isNotEmpty(this.state.token) ? (
-            <div className={`flex flex-col h-screen bg-slate-700`}>
+            <div className={`flex flex-col h-screen bg-slate-100 dark:bg-slate-700`}>
                 {!this.props.hideNav && <NavBar />}
                 <span className={`flex flex-col grow overflow-y-auto ${this.props.className}`}>{this.props.children}</span>
             </div>

diff --git a/ui/src/components/RecordDialog.tsx b/ui/src/components/RecordDialog.tsx
@@ -469,7 +469,7 @@ export default class RecordDialog extends Component<RecordDialogProps, RecordDia
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/70 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             {this.state.pet && (

diff --git a/ui/src/components/TextInput.tsx b/ui/src/components/TextInput.tsx
@@ -4,6 +4,7 @@ import styles from "./textInput.module.css"
 interface ButtonProps {
     id: string
     name: string
+    icon?: React.ReactElement
     type?: HTMLInputTypeAttribute
     required?: boolean
     autoComplete: string
@@ -35,6 +36,9 @@ export default function TextInput(props: ButtonProps) {
             <label htmlFor={props.id} className={props.showLabel ? styles.label : "sr-only"}>
                 {props.placeholder}
             </label>
+            {props.icon !== undefined && <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                {props.icon}
+            </div>}
             <input
                 required={props.required}
                 id={props.id}

diff --git a/ui/src/components/VetDialog.tsx → ui/src/components/UserDialog.tsx b/ui/src/components/VetDialog.tsx → ui/src/components/UserDialog.tsx
@@ -1,21 +1,21 @@
 import React, {Component} from "react"
-import {EnvelopeIcon, MapIcon, PhoneIcon, UserIcon, XMarkIcon} from "@heroicons/react/20/solid"
+import {EnvelopeIcon, MapIcon, PhoneIcon, XMarkIcon} from "@heroicons/react/20/solid"
 import TextUtils from "@/Utils/TextUtils"
 import {User} from "@/models/user/User"
 import Avatar from "@/components/Avatar"
 
-interface VetDialogProps {
+interface UserDialogProps {
     onDismiss: () => void
 }
 
-interface VetDialogState {
+interface UserDialogState {
     title: string
     info: User
     show: boolean
 }
 
-export default class VetDialog extends Component<VetDialogProps, VetDialogState> {
-    constructor(props: VetDialogProps) {
+export default class UserDialog extends Component<UserDialogProps, UserDialogState> {
+    constructor(props: UserDialogProps) {
         super(props)
         this.state = {
             title: "Vet Information",
@@ -45,12 +45,12 @@ export default class VetDialog extends Component<VetDialogProps, VetDialogState>
     }
 
     render() {
-        const vet = this.state.info
+        const user = this.state.info
         return (
             <div id="defaultModal" tabIndex={-1} className={`fixed flex grow ${this.state?.show ? "" : "hidden"} z-50 h-screen w-full`}>
                 <div className="relative self-center mx-auto w-full max-w-2xl max-h-full">
                     {/*Modal content*/}
-                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700/60 backdrop-blur-lg">
                         {/*Modal header*/}
                         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                             <h3 className="text-xl font-semibold text-gray-900 dark:text-white text-center">{this.state.title}</h3>
@@ -67,31 +67,34 @@ export default class VetDialog extends Component<VetDialogProps, VetDialogState>
                         {this.state.info !== undefined && (
                             <div className="px-12 py-4 space-y-4 max-h-96 overflow-y-auto justify-center">
                                 <div className={"flex items-center justify-center"}>
-                                    <Avatar icon={<UserIcon className={"flex p-1 h-[70px] w-[70px]"} />} />
+                                    <Avatar
+                                        avatarTitle={`${user.surname?.slice(0, 1) ?? ""}${user.name?.slice(0, 1) ?? ""}`}
+                                        className={"flex p-1 h-[70px] w-[70px]"}
+                                    />
                                 </div>
                                 <h3 className="text-center text-2xl text-indigo-100">
-                                    {vet.surname} {vet.name}
+                                    {user.surname} {user.name}
                                 </h3>
 
                                 <div className={"flex flex-col gap-2 mt-3"}>
-                                    {vet.email && (
+                                    {user.email && (
                                         <a
-                                            href={`mailto: ${vet.email}`}
+                                            href={`mailto: ${user.email}`}
                                             target={"_blank"}
                                             className={"flex gap-2 items-center text-indigo-100 hover:text-indigo-300 underline"}
                                         >
                                             <EnvelopeIcon className={"h-5 w-5"} />
-                                            {vet.email}
+                                            {user.email}
                                         </a>
                                     )}
-                                    {vet.phone && (
+                                    {user.phone && user.phone.length > 3 && (
                                         <a
-                                            href={`tel:${vet.phone}`}
+                                            href={`tel:${user.phone}`}
                                             target={"_parent"}
                                             className={"flex gap-2 items-center text-indigo-100 hover:text-indigo-300 underline"}
                                         >
                                             <PhoneIcon className={"h-5 w-5"} />
-                                            {vet.phone}
+                                            {user.phone}
                                         </a>
                                     )}
                                 </div>

diff --git a/ui/src/components/button.module.css b/ui/src/components/button.module.css
@@ -16,15 +16,15 @@
 }
 
 .btnSecondary:hover {
-    @apply ring-2 ring-indigo-700 text-white;
+    @apply ring-1 ring-indigo-700 shadow-lg text-indigo-500 dark:text-white;
 }
 
 .btnSecondary:focus-visible {
     @apply outline-indigo-600  dark:outline-indigo-600 text-white border-transparent;
 }
 
 .btnGroup {
-    @apply m-0 rounded-none first:rounded-l-lg first:ml-0 last:rounded-r-lg border focus:z-10;
+    @apply m-0 rounded-none first:rounded-l-lg first:ml-0 last:rounded-r-lg border-0 focus:z-10 shadow-sm;
 }
 
 .btnPrimaryDisabled {

diff --git a/ui/src/components/deleteModal.module.css b/ui/src/components/deleteModal.module.css
@@ -7,7 +7,7 @@
 }
 
 .content {
-    @apply relative rounded-lg shadow bg-gray-700
+    @apply relative rounded-lg shadow bg-gray-700/60 backdrop-blur-lg
 }
 
 .btnDelete {

diff --git a/ui/src/components/navbar.module.css b/ui/src/components/navbar.module.css
@@ -1,5 +1,5 @@
 .navbar {
-    @apply sticky border-gray-200 bg-slate-800;
+    @apply sticky border-gray-200 bg-slate-900;
 }
 
 .rightSideContainer {

diff --git a/ui/src/components/textInput.module.css b/ui/src/components/textInput.module.css
@@ -1,5 +1,5 @@
 .textInput {
-    @apply relative flex border-0 py-1.5 text-gray-900 dark:text-slate-300 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6
+    @apply flex border-0 py-1.5 text-gray-900 dark:text-slate-300 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6
     dark:bg-slate-700 dark:ring-slate-600;
 }
 
@@ -8,7 +8,7 @@
 }
 
 .label {
-    @apply text-gray-900 dark:text-slate-300 text-sm mb-2;
+    @apply text-indigo-900 dark:text-slate-300 text-sm mb-2;
 }
 
 .textInputFull {
@@ -24,7 +24,7 @@
 }
 
 .textInputContainer {
-    @apply w-full flex flex-col;
+    @apply w-full flex flex-col relative;
 }
 
 .phoneInput {

diff --git a/ui/src/pages/account.tsx b/ui/src/pages/account.tsx
@@ -207,15 +207,16 @@ class Account extends BaseComponent<AccountProps, AccountState> {
         }
 
         return (
-            <ProtectedPage init={this.initPage} key={"account"} className={"bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}>
-                <div className="flex items-center mx-auto my-auto bg-slate-800 max-w-sm lg:max-w-xl border rounded-md border-indigo-600">
+            <ProtectedPage
+                init={this.initPage}
+                key={"account"}
+                className={"bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center"}
+            >
+                <div className="flex items-center mx-auto my-auto bg-white/40 dark:bg-slate-800/60 backdrop-blur-lg max-w-sm lg:max-w-xl shadow-lg rounded-md">
                     <div className="shadow-sm z-10 px-4 py-6">
-                        <div className="flex w-full justify-center">
-                            <h2 className="mb-6 text-center text-3xl font-bold tracking-tight text-indigo-100"></h2>
-                        </div>
                         <div className={"flex flex-row items-baseline justify-end"}>
                             <div className="flex justify-center pb-4 grow">
-                                <h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-indigo-100  text-center">
+                                <h2 className="text-3xl font-bold tracking-tight text-indigo-900 dark:text-indigo-100  text-center">
                                     {this.state.viewOnly ? "Account Information" : "Update Account Information"}
                                 </h2>
                             </div>

diff --git a/ui/src/pages/auth/login.tsx b/ui/src/pages/auth/login.tsx
@@ -74,9 +74,19 @@ class Login extends BaseComponent<LoginProps, LoginState> {
     render() {
         return (
             <main className="flex flex-col grow h-screen">
-                <NavBar hideAllPages buttons={<Button title={"Sign Up"} variant={"primary"} onClick={this.navigateToSignUp} />} />
+                <NavBar
+                    hideAllPages
+                    buttons={
+                        <Button
+                            title={"Sign Up"}
+                            variant={"primary"}
+                            onClick={this.navigateToSignUp}
+                            className={"shadow-sm shadow-indigo-700 hover:shadow-md hover:shadow-indigo-800"}
+                        />
+                    }
+                />
                 <div className="flex items-center justify-center h-full bg-[url('/register-bg.jpg')] dark:bg-[url('/register-bg-dark.jpg')] bg-contain bg-center">
-                    <div className="container items-center mx-auto bg-white dark:bg-slate-800 max-w-sm lg:max-w-md border rounded-md border-indigo-600  px-4 py-12 sm:px-6 lg:px-8">
+                    <div className="isolate container items-center mx-auto bg-white dark:bg-slate-800/30 max-w-sm lg:max-w-md rounded-md px-4 py-12 sm:px-6 lg:px-8 shadow-md backdrop-blur-sm">
                         <div className="w-full max-w-md space-y-8">
                             <div>
                                 <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -122,7 +132,14 @@ class Login extends BaseComponent<LoginProps, LoginState> {
                                     />
                                 </div>
                                 <ErrorMessage message={this.state.serverError} />
-                                <Button variant={"primary"} type={"submit"} title={"LogIn"} width={"full"} onClick={this.onSubmit} />
+                                <Button
+                                    variant={"primary"}
+                                    type={"submit"}
+                                    title={"LogIn"}
+                                    width={"full"}
+                                    onClick={this.onSubmit}
+                                    className={"drop-shadow-sm drop-shadow-indigo-600 hover:shadow-md hover:shadow-indigo-800"}
+                                />
                             </form>
                         </div>
                     </div>