chore(ux): mild ux improvements and CSS fixes (#652)

COSC-499-W2023 · Mar 4, 2024 · c2e10a9 · c2e10a9
1 parent ac2374d
commit c2e10a9
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 66 deletions.
diff --git a/app/web/src/app/upload/status/[id]/page.tsx b/app/web/src/app/upload/status/[id]/page.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import Content from "@components/layout/Content";
 import { UploadStatus } from "@components/upload/UploadStatus";
 import { Metadata } from "next";
 
@@ -29,8 +30,8 @@ export default async function VideoReviewPage({
   params,
 }: VideoReviewPageProps) {
   return (
-    <main>
+    <Content>
       <UploadStatus filename={params.id} />
-    </main>
+    </Content>
   );
 }
diff --git a/app/web/src/components/VideoReview.tsx b/app/web/src/components/VideoReview.tsx
@@ -30,6 +30,7 @@ import { redirectAfterReview } from "@app/actions";
 import { useEffect, useState } from "react";
 import { GetObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import Loading from "@app/loading";
 
 export const videoReviewStyle = {
   ...style,
@@ -110,7 +111,10 @@ export const VideoReview = ({ videoId }: VideoReviewProps) => {
       <CardTitle component="h1">Review Your Submission</CardTitle>
       <CardBody>
         {loading ? (
-          "Loading video data..."
+          <>
+            <Loading />
+            <p>Loading video data...</p>
+          </>
         ) : (
           <video controls autoPlay={false} style={videoReviewStyle.videoPlayer}>
             <source src={videoSrc} />

diff --git a/app/web/src/components/appointment/AppointmentManagementList.tsx b/app/web/src/components/appointment/AppointmentManagementList.tsx
@@ -21,6 +21,7 @@ import { getAllProfessionalAppointmentDetails } from "@app/actions";
 import AppointmentViewer from "./AppointmentViewer";
 import { CognitoUser } from "@lib/cognito";
 import { User } from "next-auth";
+import Loading from "@app/loading";
 
 interface AppointmentManagementListProps {
   professional: User;
@@ -51,7 +52,7 @@ export default function AppointmentManagementList({
   return (
     <main>
       {loading ? (
-        <div>Loading...</div>
+        <Loading />
       ) : appointments.length > 0 ? (
         appointments
       ) : (

diff --git a/app/web/src/components/appointment/timeline/AppointmentTimeline.tsx b/app/web/src/components/appointment/timeline/AppointmentTimeline.tsx
@@ -35,30 +35,32 @@ import { CognitoUser } from "@lib/cognito";
 import Loading from "@app/loading";
 import { ConversationVideo } from "./ConversationVideo";
 import { Appointment } from "@prisma/client";
+import { CSS } from "@lib/utils";
 
-const messageStyle: React.CSSProperties = {
+const messageStyle: CSS = {
   position: "relative",
   top: "-1rem",
   display: "flex",
   flexDirection: "column",
   width: "100%",
 };
 
-const timelineStyles: React.CSSProperties = {
+const timelineStyles: CSS = {
   position: "relative",
-  padding: "0rem 1rem 2rem 1rem",
+  padding: "0rem 1rem",
+  transform: `translate(0, 2rem)`,
 };
 
-const alertGroupStyles: React.CSSProperties = {
+const alertGroupStyles: CSS = {
   position: "relative",
 };
 
-const alertStyles: React.CSSProperties = {
+const alertStyles: CSS = {
   marginTop: "1.5rem",
   zIndex: 2,
 };
 
-const videoPlayerStyles: React.CSSProperties = {
+const videoPlayerStyles: CSS = {
   position: "relative",
   top: "-1rem",
 };
@@ -124,11 +126,6 @@ export const AppointmentTimeline = ({
       .finally(() => setLoading(false));
   }, [appointment]);
 
-  const finalizedTimelineStyles: React.CSSProperties = {
-    ...timelineStyles,
-    transform: `translate(0, calc(${100 / chatTimeline.length}% / 5 + 2rem))`,
-  };
-
   const handleChatSend = async (message: string) => {
     try {
       setErrorMessage("");
@@ -225,7 +222,7 @@ export const AppointmentTimeline = ({
             isVertical={true}
             isCenterAligned={false}
             aria-label="Basic progress stepper with alignment"
-            style={finalizedTimelineStyles}
+            style={timelineStyles}
           >
             {progressSteps}
             <ProgressStep

diff --git a/app/web/src/components/appointment/timeline/ChatBox.tsx b/app/web/src/components/appointment/timeline/ChatBox.tsx
@@ -23,18 +23,19 @@ import {
   Title,
 } from "@patternfly/react-core";
 import React, { FormEvent, useEffect, useState } from "react";
+import { CSS } from "@lib/utils";
 
-const chatboxContainerStyles: React.CSSProperties = {
+const chatboxContainerStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   gap: "0.5rem",
 };
 
-const inputGroupStyles: React.CSSProperties = {
+const inputGroupStyles: CSS = {
   display: "flex",
 };
 
-const buttonStyles: React.CSSProperties = {
+const buttonStyles: CSS = {
   alignSelf: "flex-end",
   borderTopLeftRadius: "0",
   borderBottomLeftRadius: "0",

diff --git a/app/web/src/components/appointment/timeline/ConversationMessage.tsx b/app/web/src/components/appointment/timeline/ConversationMessage.tsx
@@ -16,19 +16,16 @@
 "use client";
 
 import {
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
   Panel,
   PanelFooter,
   PanelHeader,
   PanelMain,
   PanelMainBody,
   Title,
 } from "@patternfly/react-core";
+import { CSS } from "@lib/utils";
 
-const headerStyles: React.CSSProperties = {
+const headerStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -42,7 +39,7 @@ const titleStyles = {
   fontWeight: "bold",
 };
 
-const mainStyles: React.CSSProperties = {
+const mainStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -51,7 +48,7 @@ const mainStyles: React.CSSProperties = {
   paddingBottom: "0",
 };
 
-const footerStyles: React.CSSProperties = {
+const footerStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -60,7 +57,7 @@ const footerStyles: React.CSSProperties = {
   paddingBottom: "0",
 };
 
-const timeStyles: React.CSSProperties = {
+const timeStyles: CSS = {
   fontSize: "0.67rem",
   color: "grey",
 };
@@ -70,7 +67,7 @@ interface ConversationMessageProps {
   sender: string;
   time: string;
   showTitle?: boolean;
-  style?: React.CSSProperties;
+  style?: CSS;
 }
 
 export const ConversationMessage = ({

diff --git a/app/web/src/components/appointment/timeline/ConversationVideo.tsx b/app/web/src/components/appointment/timeline/ConversationVideo.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Loading from "@app/loading";
 import {
   Panel,
   PanelHeader,
@@ -22,11 +21,9 @@ import {
   PanelMainBody,
   PanelFooter,
 } from "@patternfly/react-core";
-import { time } from "console";
-import { Suspense, lazy } from "react";
-import style from "styled-jsx/style";
+import { CSS } from "@lib/utils";
 
-const headerStyles: React.CSSProperties = {
+const headerStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -35,12 +32,11 @@ const headerStyles: React.CSSProperties = {
   paddingBottom: "0",
 };
 
-const titleStyles = {
-  fontSize: "1.5rem",
-  fontWeight: "bold",
+const videoStyles = {
+  width: "100%",
 };
 
-const mainStyles: React.CSSProperties = {
+const mainStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -49,7 +45,7 @@ const mainStyles: React.CSSProperties = {
   paddingBottom: "0",
 };
 
-const footerStyles: React.CSSProperties = {
+const footerStyles: CSS = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "flex-start",
@@ -58,7 +54,7 @@ const footerStyles: React.CSSProperties = {
   paddingBottom: "0",
 };
 
-const timeStyles: React.CSSProperties = {
+const timeStyles: CSS = {
   fontSize: "0.67rem",
   color: "grey",
 };
@@ -67,7 +63,7 @@ interface ConversationVideoProps {
   url: string;
   sender: string;
   time: string;
-  style?: React.CSSProperties;
+  style?: CSS;
 }
 
 export const ConversationVideo = ({
@@ -83,7 +79,7 @@ export const ConversationVideo = ({
       </PanelHeader>
       <PanelMain>
         <PanelMainBody style={mainStyles}>
-          <video controls>
+          <video controls style={videoStyles}>
             <source src={url} />
             Your browser does not support HTML video.
           </video>

diff --git a/app/web/src/components/form/LoadingButton.tsx b/app/web/src/components/form/LoadingButton.tsx
@@ -18,14 +18,15 @@
 import { Button } from "@patternfly/react-core";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import { CSS } from "@lib/utils";
 
 interface LoadingButtonProps {
   href?: string;
   target?: string;
   children?: React.ReactNode;
   isLoading?: boolean;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSS;
   icon?: React.ReactNode;
   disabled?: boolean;
   onClick?: React.MouseEventHandler;

diff --git a/app/web/src/components/layout/Content.tsx b/app/web/src/components/layout/Content.tsx
@@ -27,9 +27,10 @@ const contentStyles: CSS = {
 };
 
 interface ContentProps {
+  style?: CSS;
   children?: React.ReactNode;
 }
 
-export default async function Content({ children }: ContentProps) {
-  return <div style={contentStyles}>{children}</div>;
+export default async function Content({ style, children }: ContentProps) {
+  return <div style={{ ...contentStyles, ...style }}>{children}</div>;
 }
diff --git a/app/web/src/components/layout/NavigationBar.tsx b/app/web/src/components/layout/NavigationBar.tsx
@@ -19,7 +19,7 @@ import PrivacyPalLogo from "./PrivacyPalLogo";
 import { LoginLogout } from "@components/auth/button/LoginLogout";
 import { User } from "next-auth";
 import ProfilePicture from "./ProfilePicture";
-import { Stylesheet } from "@lib/utils";
+import { Stylesheet, CSS } from "@lib/utils";
 
 const styles: Stylesheet = {
   navbar: {
@@ -57,7 +57,7 @@ const styles: Stylesheet = {
 interface NavigationBarProps {
   user?: User;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSS;
 }
 
 export default function NavigationBar({

diff --git a/app/web/src/components/layout/PrivacyPalLogo.tsx b/app/web/src/components/layout/PrivacyPalLogo.tsx
@@ -18,12 +18,13 @@
 import Image from "next/image";
 import logo_dark from "@assets/dark_logo_no_name.png";
 import logo_light from "@assets/light_logo_no_name.png";
+import { CSS } from "@lib/utils";
 
 interface PrivacyPalLogoProps {
   w?: number;
   h?: number;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSS;
   dark?: boolean;
 }
 

diff --git a/app/web/src/components/layout/ProfilePicture.tsx b/app/web/src/components/layout/ProfilePicture.tsx
@@ -19,8 +19,9 @@ import { Avatar } from "@patternfly/react-core";
 import avatarImg from "@assets/pf_avatar.svg";
 import { User } from "next-auth";
 import Link from "next/link";
+import { CSS, Stylesheet } from "@lib/utils";
 
-const styles: { [key: string]: React.CSSProperties } = {
+const styles: Stylesheet = {
   avatar: {
     cursor: "pointer",
   },
@@ -47,7 +48,7 @@ interface ProfilePictureProps {
   user: User;
   tooltip?: string;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSS;
 }
 
 export default function ProfilePicture({

diff --git a/app/web/src/components/registration/RegistrationForm.tsx b/app/web/src/components/registration/RegistrationForm.tsx
@@ -31,19 +31,9 @@ import {
 } from "@patternfly/react-core";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import { useRouter } from "next/navigation";
+import { Stylesheet } from "@lib/utils";
 
-const styles: {
-  main: React.CSSProperties;
-  titleHeading: React.CSSProperties;
-  card: React.CSSProperties;
-  cardBody: React.CSSProperties;
-  actionList: React.CSSProperties;
-  actionListItem: React.CSSProperties;
-  datePicker: React.CSSProperties;
-  imageFileUpload: React.CSSProperties;
-  form: React.CSSProperties;
-  formGroup: React.CSSProperties;
-} = {
+const styles: Stylesheet = {
   main: {
     display: "flex",
     flexDirection: "column",

diff --git a/app/web/src/components/staff/NewAppointmentForm.tsx b/app/web/src/components/staff/NewAppointmentForm.tsx
@@ -17,6 +17,7 @@
 "use client";
 
 import { createAppointment, getLoggedInUser } from "@app/actions";
+import Loading from "@app/loading";
 import LoadingButton from "@components/form/LoadingButton";
 import {
   ActionList,
@@ -151,7 +152,7 @@ export const NewAppointmentForm = ({
               data-ouia-component-id="login_pro_name"
             />
           </FormGroup>
-          <Suspense fallback={<p>Loading...</p>}>
+          <Suspense fallback={<Loading />}>
             <FormGroup
               label="The client's name:"
               type="string"