Add theming changes to pet care apps

wso2 · Apr 24, 2024 · df421ae · df421ae
1 parent 75c8ebc
commit df421ae
Show file tree

Hide file tree

Showing 61 changed files with 422 additions and 304 deletions.
diff --git a/...s-admin-app/components/sections/sections/getStartedSection/getStartedSectionComponent.tsx b/...s-admin-app/components/sections/sections/getStartedSection/getStartedSectionComponent.tsx
@@ -19,7 +19,7 @@
 import Image from "next/image";
 import { FlexboxGrid } from "rsuite";
 import GetStartedText from "./otherComponents/getStartedText";
-import getStartedImage from "../../../../../../libs/business-admin-app/ui/ui-assets/src/lib/images/getStarted.svg";
+import getStartedImage from "../../../../../../libs/business-admin-app/ui/ui-assets/src/lib/images/getStarted.png";
 
 /**
  * 

diff --git a/...ss-admin-app/components/sections/sections/getStartedSection/getStartedSectionForAdmin.tsx b/...ss-admin-app/components/sections/sections/getStartedSection/getStartedSectionForAdmin.tsx
@@ -160,7 +160,7 @@ export default function GetStartedSectionComponentForAdmin(props: GetStartedSect
                                         filteredCount["nutrition"])
 
                                     ],
-                                    backgroundColor: [ "#4e40ed", "#4e5ded", "#4e7eed", "#4e9bed", "#77b0ed" ]
+                                    backgroundColor: [ "#", "#4e5ded", "#4e7eed", "#4e9bed", "#77b0ed" ]
                                 }
                             ]
                         },
@@ -229,7 +229,11 @@ export default function GetStartedSectionComponentForAdmin(props: GetStartedSect
             <div className={ styles.welcomeMainDiv }>
                 <AccountCircleIcon style={ { width: "8vh", height: "8vh" } }/>
                 <div className={ styles. welcomeDiv }>
-                    { "Welcome, " + session.user?.name.givenName + " " + session.user?.name.familyName + "!" }
+                    { "Welcome, " }
+                    <b>{ session.user?.name.givenName }</b> 
+                    { " " }
+                    <b>{ session.user?.name.familyName }</b>
+                    { "!" }
                 </div>
                 <div className={ styles.tagLine }>
                     { "Taking Veterinary Care to the Next Level of Excellence" }

diff --git a/...s-admin-app/components/sections/sections/getStartedSection/getStartedSectionForDoctor.tsx b/...s-admin-app/components/sections/sections/getStartedSection/getStartedSectionForDoctor.tsx
@@ -166,7 +166,7 @@ export default function GetStartedSectionComponentForDoctor(props: GetStartedSec
                             datasets: [
                                 {
                                     data: [ filteredCount["confirmed"], filteredCount["completed"] ],
-                                    backgroundColor: [ "#4e40ed", "#4e7eed" ]
+                                    backgroundColor: [ "#69A2F4", "#4e7eed" ]
                                 }
                             ]
                         },

diff --git a/...admin-app/components/sections/sections/getStartedSection/getStartedSectionForPetOwner.tsx b/...admin-app/components/sections/sections/getStartedSection/getStartedSectionForPetOwner.tsx
@@ -106,7 +106,7 @@ export default function GetStartedSectionComponentForPetOwner(props: GetStartedS
                                         filteredCount["rabbit"], 
                                         petList?.length-
                                     (filteredCount["dog"]+ filteredCount["cat"]+filteredCount["rabbit"]) ],
-                                    backgroundColor: [ "#4e40ed", "#4e5ded", "#4e7eed", "#4e9bed" ]
+                                    backgroundColor: [ "#69A2F4", "#4e5ded", "#4e7eed", "#4e9bed" ]
                                 }
                             ]
                         },

diff --git a/...min-app/components/sections/sections/getStartedSection/otherComponents/getStartedText.tsx b/...min-app/components/sections/sections/getStartedSection/otherComponents/getStartedText.tsx
@@ -20,8 +20,6 @@ import { LogoComponent } from "@pet-management-webapp/business-admin-app/ui/ui-c
 import PagePreviousIcon from "@rsuite/icons/PagePrevious";
 import Image from "next/image";
 import { Button, Panel, Stack } from "rsuite";
-import getStartedWelcomeImage from
-    "../../../../../../../libs/business-admin-app/ui/ui-assets/src/lib/images/getStartedWelcome.svg";
 import styles from "../../../../../styles/Settings.module.css";
 
 export default function GetStartedText() {
@@ -31,23 +29,18 @@ export default function GetStartedText() {
 
                 <Stack direction="column" spacing={ 50 } justifyContent="center">
 
-                    <Image src={ getStartedWelcomeImage } alt="profile image" width={ 150 } />
-
                     <Stack direction="column" spacing={ 10 } justifyContent="center">
                         <p><strong>Welcome to</strong></p>
                         <LogoComponent imageSize="medium" />
                     </Stack>
 
                     <p className={ styles.getStartedSectionComponentGetStartedTextP }>
-                    Welcome to Pet Care – the ultimate companion for every pet owner! 
-                    Our app is designed with a deep understanding of the unique bond between you and 
-                    your furry friends. Whether you have a playful pup, a curious cat, or any other beloved pet, 
-                    Pet Care is here to simplify and enhance every aspect of pet ownership.
+                        Schedule appointments & keep your furry friend healthy – all at your fingertips.
                     </p>
 
                     <Stack direction="column" spacing={ 20 } justifyContent="center">
                         <h4>Select one of the settings to get started</h4>
-                        <Button appearance="ghost" size="lg">
+                        <Button appearance="ghost" size="lg" className={ styles.getStartedButton }>
                             <Stack spacing={ 3 } justifyContent="center" alignItems="center">
                                 <PagePreviousIcon />
                                 <p>Get Started</p>

diff --git a/...apps/business-admin-app/components/sections/sections/sectionsReatedToPetOwner/petCard.tsx b/...apps/business-admin-app/components/sections/sections/sectionsReatedToPetOwner/petCard.tsx
@@ -84,7 +84,7 @@ function PetCard(props: PetCardProps) {
                                 />
                             ) : (
                                 <Image
-                                    style={ { borderRadius: "10%", height: "100%", width: "100%" } }
+                                    style={ { borderRadius: "10%", height: "70%", width: "70%" } }
                                     src={ PET_IMAGE }
                                     alt="pet-thumbnail"
                                 />

diff --git a/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/doctorProfile.tsx b/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/doctorProfile.tsx
@@ -102,6 +102,7 @@ export default function DoctorProfileSection(props: DoctorProfileSectionProps) {
                     <p>{ "Profile Information of the doctor" }</p>
                 </Stack>
                 <Button
+                    className={ styles.buttonCircular }
                     appearance="primary"
                     size="lg"
                     onClick={ onEditProfileClick }

diff --git a/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/imageUploader.tsx b/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/imageUploader.tsx
@@ -82,7 +82,7 @@ function FileUploadSingle(props: FileUploadProps) {
                 appearance="primary"
                 style={ {
                     border: "none",
-                    borderRadius: "5px",
+                    borderRadius: "22px",
                     boxShadow: "7px 6px 28px 1px rgba(0, 0, 0, 0.24)",
                     color: "#fff",
                     cursor: "pointer",
@@ -109,7 +109,7 @@ function FileUploadSingle(props: FileUploadProps) {
                 appearance="primary"
                 style={ {
                     border: "none",
-                    borderRadius: "5px",
+                    borderRadius: "22px",
                     boxShadow: "7px 6px 28px 1px rgba(0, 0, 0, 0.24)",
                     color: "#fff",
                     cursor: "pointer",

diff --git a/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/manageDoctors.tsx b/...business-admin-app/components/sections/sections/sectionsRelatedToDoctor/manageDoctors.tsx
@@ -95,8 +95,7 @@ export default function ManageDoctorsSection(props: ManageDoctorsSectionProps) {
                     <p>{ "Manage doctors in the organization" }</p>
                 </Stack>
                 <Button
-                    appearance="primary"
-                    size="lg"
+                    className={ styles.buttonCircular }
                     onClick={ onAddDoctorClick }
                 >
                         Add Doctor

diff --git a/...nts/sections/sections/settingsSection/manageUserSection/otherComponents/addUserButton.tsx b/...nts/sections/sections/settingsSection/manageUserSection/otherComponents/addUserButton.tsx
@@ -17,6 +17,7 @@
  */
 
 import { Button } from "rsuite";
+import styles from "../../../../../../styles/app.module.css";
 
 interface AddUserButtonProps {
     onClick : ()=>void
@@ -28,8 +29,7 @@ export default function AddUserButton(props : AddUserButtonProps) {
 
     return (
         <Button
-            appearance="primary"
-            size="lg"
+            className={ styles.buttonCircular }
             onClick={ onClick }>
             Add User
         </Button>

diff --git a/...business-admin-app/components/sections/sections/settingsSection/mfaSection/emailAsMFA.tsx b/...business-admin-app/components/sections/sections/settingsSection/mfaSection/emailAsMFA.tsx
@@ -118,7 +118,7 @@ export default function EmailAsMFA(props: EmailAsMFAProps) {
                             : (
                                 <FlexboxGrid.Item colspan={ 6 }>
                                     <Button 
-                                        style={ { width: "125%", opacity:"0.9" } } 
+                                        style={ { width: "125%", opacity:"0.9", borderRadius: "22px" } } 
                                         appearance="primary" 
                                         onClick={ onAddToLoginFlowClick }>
                                         Add to the Login Flow

diff --git a/...s/business-admin-app/components/sections/sections/settingsSection/mfaSection/smsAsMFA.tsx b/...s/business-admin-app/components/sections/sections/settingsSection/mfaSection/smsAsMFA.tsx
@@ -112,7 +112,7 @@ export default function SmsAsMFA(props: SmsAsMFAProps) {
                             : (
                                 <FlexboxGrid.Item colspan={ 6 }>
                                     <Button 
-                                        style={ { width: "125%", opacity:"0.9" } } 
+                                        style={ { width: "125%", opacity:"0.9", borderRadius: "22px" } } 
                                         appearance="primary" 
                                         onClick={ onAddToLoginFlowClick }>
                                         Add to the Login Flow

diff --git a/.../business-admin-app/components/sections/sections/settingsSection/mfaSection/totpAsMFA.tsx b/.../business-admin-app/components/sections/sections/settingsSection/mfaSection/totpAsMFA.tsx
@@ -111,7 +111,7 @@ export default function TotpAsMFA(props: TotpAsMFAProps) {
                             : (
                                 <FlexboxGrid.Item colspan={ 6 }>
                                     <Button 
-                                        style={ { width: "125%", opacity:"0.9" } } 
+                                        style={ { width: "125%", opacity:"0.9", borderRadius: "22px" } } 
                                         appearance="primary" 
                                         onClick={ onAddToLoginFlowClick }>
                                         Add to the Login Flow

diff --git a/...tions/sections/settingsSection/personalizationSection/personalizationSectionComponent.tsx b/...tions/sections/settingsSection/personalizationSection/personalizationSectionComponent.tsx
@@ -266,7 +266,7 @@ export default function PersonalizationSectionComponent(props: PersonalizationSe
                 />
                 <Divider style={ { background: "#bebebe" } }/>
                 <Button
-                    style={ { background: "rgba(255, 0, 0, 0.8)", width: "25%" } }
+                    className={ styles["revertButton"] }
                     size="lg"
                     appearance="primary"
                     onClick={ onRevert } >

diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/pages/index.tsx b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/pages/index.tsx
@@ -20,7 +20,7 @@ import { IndexHomeComponent } from "@pet-management-webapp/shared/ui/ui-componen
 import { NextRouter, useRouter } from "next/router";
 import React, { useEffect } from "react";
 import "rsuite/dist/rsuite.min.css";
-import homeImage from "../../../libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.jpeg";
+import homeImage from "../../../libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.png";
 import { getPersonalization } from "../APICalls/GetPersonalization/get-personalization";
 import personalize from "../components/sections/sections/settingsSection/personalizationSection/personalize";
 import { Personalization } from "../types/personalization";

diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/pages/o/[id].tsx b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/pages/o/[id].tsx
@@ -85,7 +85,7 @@ export default function Org(props : OrgProps) {
     useEffect(() => {
         getDoctor(session.accessToken, session.user.emails[0])
             .catch((err) => {
-                if (err.response.status === 404 && session.group === "doctor") {
+                if (err.response?.status === 404 && session.group === "doctor") {
                     const payload: DoctorInfo = {
                         address: "",
                         availability: [],
@@ -106,7 +106,7 @@ export default function Org(props : OrgProps) {
                 personalize(response.data);
             })
             .catch(async (err) => {
-                if (err.response.status === 404 && session.group === "admin") {
+                if (err.response?.status === 404 && session.group === "admin") {
                     const res: BrandingPreference = 
                         (await controllerDecodeGetBrandingPreference(session) as BrandingPreference);
                     const activeTheme: string = res["preference"]["theme"]["activeTheme"];

diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/Home.module.css b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/Home.module.css
@@ -178,7 +178,7 @@
 .welcomeDiv {
     margin-top: -8vh;
     margin-left: 9vh;
-    font-weight: bold;
+    font-weight: 200;
     font-size: 3vh;
 }
 
@@ -194,7 +194,7 @@
 .tagLine {
     margin-top: 0vh;
     margin-left: 9vh;
-    font-size: 2vh;
+    font-size: 16px;
 }
 
 .upcomingBookingsDivForUser {
@@ -230,8 +230,6 @@
 
 .orgInfoInputStyle {
     width: 25vw;
-    font-size: 2vh;
-    margin-bottom: 1.5vh;
     /* padding: 0.1vh;
     margin-bottom: 1vh; */
 }

diff --git a/...e-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/Settings.module.css b/...e-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/Settings.module.css
@@ -53,10 +53,32 @@
     justify-content: center;
     align-items: center;
     padding: 10px;
+    border: none;
 }
 
 /* getStartedSectionComponent-GetStartedText-P */
 .getStartedSectionComponentGetStartedTextP {
     text-align: center ;
 }
 
+.revertButton{
+    width: 25%;
+    height: 50px;
+    font-size: 18px;
+    border-radius: 22px;
+    box-shadow: none;
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 14px 24px;
+    background-color: rgba(255, 0, 0, 0.8);
+    color: #ffffff;
+    border-color: #e2e2e2;
+    border-width: 0;
+}
+
+.getStartedButton{
+    height: 50px;
+    font-size: 18px;
+    border-radius: 22px;
+}
+
diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/app.module.css b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/app.module.css
@@ -100,3 +100,17 @@
     background: #fafafa;
     cursor: pointer;
 }
+
+.buttonCircular {
+    height: 50px;
+    font-size: 18px;
+    border-radius: 22px;
+    box-shadow: none;
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 14px 24px;
+    background-color: #69A2F4;
+    color: #ffffff;
+    border-color: #e2e2e2;
+    border-width: 0;
+}
diff --git a/...are-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/custom-theme.less b/...are-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/custom-theme.less
@@ -18,7 +18,15 @@
 
 @import "~rsuite/styles/index.less";
 @import "custom-theme.less"; 
+@import url('https://fonts.googleapis.com/css2?family=Montserrat');
 
-@primary-color: #4e40ed;
+@primary-color: #69A2F4;
 @primary-color-dark: #35c2ff;
 @primary-color-high-contrast: #ffff00;
+body{ 
+  font-family: 'Montserrat', sans-serif;
+}
+@apply bg-[#06202A] text-gray-100; 
+.button {
+  border-radius: 22px;
+}
diff --git a/...are-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/doctor.module.css b/...are-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/doctor.module.css
@@ -21,7 +21,7 @@
     flex-direction: column;
     gap: 40px;
     height: 100%;
-    background-color: rgb(228, 228, 228);
+    background-color: rgb(255, 255, 255);
 }
 
 .tableMainPanelDivDoc .rs-table-body-row-wrapper {
@@ -293,7 +293,7 @@
     font-size: 2vh;
     background-color: var(--primary-color);
     color: #fff;
-    border-radius: 5px;
+    border-radius: 22px;
     box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
     cursor: pointer;
     outline: none;
@@ -589,3 +589,17 @@
     margin-left: 20%;
     margin-top: 5%;
 }
+
+.buttonCircular {
+    height: 50px;
+    font-size: 18px;
+    border-radius: 22px;
+    box-shadow: none;
+    font-size: 1rem;
+    font-weight: 400;
+    padding: 14px 24px;
+    background-color: #69A2F4;
+    color: #ffffff;
+    border-color: #e2e2e2;
+    border-width: 0;
+}
diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/globals.css b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/globals.css
@@ -27,7 +27,16 @@ a {
     text-decoration: none;
 }
 
+button {
+    border-radius: 22px !important;
+}
+
+h2 {
+    color: #3E4747;
+    font-weight: 200;
+}
+
 * {
     box-sizing: border-box;
-    font-family: 'Nunito Sans', sans-serif;
+    font-family: 'montserrat', sans-serif;
 }
diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/idp.module.css b/petcare-sample/b2b/web-app/petvet/web/nextjs/apps/business-admin-app/styles/idp.module.css
@@ -33,7 +33,7 @@
 }
 
 .idp__template__card:hover {
-    background-color: rgba(245, 245, 245, 0.2);
+    background-color: rgb(255, 255, 255);
     transition: background-color 10ms linear;
     cursor: pointer;
 }

diff --git a/petcare-sample/b2b/web-app/petvet/web/nextjs/config.json b/petcare-sample/b2b/web-app/petvet/web/nextjs/config.json
@@ -81,7 +81,7 @@
             ],
             "Branding": {
                 "name": "Pet Care App",
-                "tag": "Taking good care of your pet"
+                "tag": "Helping you to take good care  of your pets"
             }
         },
         "resourceServerURLs": {

diff --git a/...xtjs/libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.jpeg b/...xtjs/libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.jpeg
diff --git a/...extjs/libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.png b/...extjs/libs/business-admin-app/ui/ui-assets/src/lib/images/businessAdminHome.png
diff --git a/...t/web/nextjs/libs/business-admin-app/ui/ui-assets/src/lib/images/getStarted.png b/...t/web/nextjs/libs/business-admin-app/ui/ui-assets/src/lib/images/getStarted.png
diff --git a/...eb/nextjs/libs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo.png b/...eb/nextjs/libs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo.png
diff --git a/...ibs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo_deprecated.png b/...ibs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo_deprecated.png
diff --git a/...tjs/libs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo_light.png b/...tjs/libs/business-admin-app/ui/ui-assets/src/lib/images/pet_care_logo_light.png
diff --git a/...ness-admin-app/ui/ui-components/src/lib/components/logoComponent/logoComponent.module.css b/...ness-admin-app/ui/ui-components/src/lib/components/logoComponent/logoComponent.module.css
@@ -19,6 +19,7 @@
 .nameTag {
     position: relative;
     font-size: 16px;
+    padding: 3vh;
 }
 
 .logoDiv {