chore(meta): update style objects to use CSS & Stylesheet interfaces

COSC-499-W2023 · Mar 4, 2024 · de2e62b · de2e62b
1 parent 0bccd88
commit de2e62b
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 48 deletions.
diff --git a/app/web/src/components/appointment/timeline/AppointmentTimeline.tsx b/app/web/src/components/appointment/timeline/AppointmentTimeline.tsx
@@ -35,31 +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",
   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",
 };

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/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",