Merge pull request #221 from amosproj/minor-ui-fixes

Minor UI fixes
amosproj · Feb 6, 2023 · e8ae955 · e8ae955
2 parents 1776567 + dc513af
commit e8ae955
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 41 deletions.
diff --git a/src/deskstar-frontend/components/RegisterPanel.tsx b/src/deskstar-frontend/components/RegisterPanel.tsx
@@ -169,19 +169,16 @@ export default function RegisterPanel({ companies }: { companies: Company[] }) {
             placeholder="Repeat password"
           />
         </div>
-
-        {/* <p className="text-green-500 text-center py-4">{msg}</p> */}
-
         {!clicked ? (
           <button
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            className="btn btn-info text-white font-bold py-2 px-4 rounded"
             type="submit"
           >
             Register
           </button>
         ) : (
           <button
-            className="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded loading"
+            className="btn btn-info text-white font-bold py-2 px-4 rounded loading"
             type="submit"
           >
             Loading

diff --git a/src/deskstar-frontend/components/UsersTable.tsx b/src/deskstar-frontend/components/UsersTable.tsx
@@ -30,13 +30,11 @@ export function UsersTable({
 }) {
   const [allUsersButtonState, setAllUsersButtonState] = useState(false);
 
-  // define selection handler
   let toggleUserSelection: (user: IUser) => void;
   let toggleAllUsersSelection: () => void;
   let selectedUsersCount = 0;
   if (onUsersSelection) {
     toggleUserSelection = (selectedUser: IUser) => {
-      // update user state
       const updatedUser: IUser = {
         ...selectedUser,
         selected: !selectedUser.selected,
@@ -45,10 +43,7 @@ export function UsersTable({
       const updatedUsers = users.map((u: IUser) =>
         u.userId !== selectedUser.userId ? u : updatedUser
       );
-
       onUsersSelection(updatedUsers);
-
-      // update all users selection button, if needed
       setAllUsersButtonState(
         updatedUsers.reduce((acc: boolean, currUser: IUser): boolean => {
           if (!currUser.selected) return false;
@@ -126,7 +121,7 @@ export function UsersTable({
       {onApprovalUpdate && onUsersSelection && selectedUsersCount > 0 && (
         <div className="mt-10 flex md:justify-center flex-col lg:flex-row">
           <button
-            className="btn bg-green-900 mb-5 lg:mr-5"
+            className="btn btn-primary mb-5 lg:mr-5"
             onClick={() =>
               onApprovalUpdate(
                 users.filter((u) => u.selected),

diff --git a/src/deskstar-frontend/components/forms/Combobox.tsx b/src/deskstar-frontend/components/forms/Combobox.tsx
@@ -21,6 +21,7 @@ export default function OwnCombobox<T>({
   return (
     <div className="dropdown my-2">
       <Combobox value={selected} onChange={setSelected} nullable>
+        <p>Your Company</p>
         <Combobox.Input
           className="input w-full border-2 border-gray-300 p-2 rounded-lg"
           placeholder="Company"

diff --git a/src/deskstar-frontend/components/resources/BuildingResourceTable.tsx b/src/deskstar-frontend/components/resources/BuildingResourceTable.tsx
@@ -19,12 +19,11 @@ const BuildingResourceTable = ({
       <table className="table table-zebra w-full">
         <thead className="dark:text-black">
           <tr>
-            {/* set size of Desk column */}
             <th className="bg-secondary text-left">Building</th>
             <th className="bg-secondary text-left">Location</th>
             {(onDelete || onEdit) && <th className="bg-secondary"></th>}
             {onRestoreUpdate && (
-              <th className="bg-secondary text-left">Restore</th>
+              <th className="bg-secondary text-right">Restore</th>
             )}
           </tr>
         </thead>

diff --git a/src/deskstar-frontend/components/resources/DeskResourceTable.tsx b/src/deskstar-frontend/components/resources/DeskResourceTable.tsx
@@ -28,7 +28,7 @@ const DeskResourceTable = ({
             <th className="bg-secondary text-left">Location</th>
             {(onDelete || onEdit) && <th className="bg-secondary"></th>}
             {onRestoreUpdate && (
-              <th className="bg-secondary text-left">Restore</th>
+              <th className="bg-secondary text-right">Restore</th>
             )}
           </tr>
         </thead>

diff --git a/src/deskstar-frontend/components/resources/DeskTypeResourceTable.tsx b/src/deskstar-frontend/components/resources/DeskTypeResourceTable.tsx
@@ -18,11 +18,10 @@ const DeskTypeResourceTable = ({
       <table className="table table-zebra w-full">
         <thead className="dark:text-black">
           <tr>
-            {/* set size of Desk column */}
             <th className="bg-secondary text-left">Desk Type</th>
             {(onDelete || onEdit) && <th className="bg-secondary"></th>}
             {onRestoreUpdate && (
-              <th className="bg-secondary text-left">Restore</th>
+              <th className="bg-secondary text-right">Restore</th>
             )}
           </tr>
         </thead>

diff --git a/src/deskstar-frontend/components/resources/FloorResourceTable.tsx b/src/deskstar-frontend/components/resources/FloorResourceTable.tsx
@@ -24,7 +24,7 @@ const FloorResourceTable = ({
             <th className="bg-secondary text-left">Location</th>
             {(onDelete || onEdit) && <th className="bg-secondary"></th>}
             {onRestoreUpdate && (
-              <th className="bg-secondary text-left">Restore</th>
+              <th className="bg-secondary text-right">Restore</th>
             )}
           </tr>
         </thead>

diff --git a/src/deskstar-frontend/components/resources/RoomResourceTable.tsx b/src/deskstar-frontend/components/resources/RoomResourceTable.tsx
@@ -18,14 +18,13 @@ const RoomResourceTable = ({
       <table className="table table-zebra w-full">
         <thead className="dark:text-black">
           <tr>
-            {/* set size of Desk column */}
             <th className="bg-secondary text-left">Room</th>
             <th className="bg-secondary text-left">Floor</th>
             <th className="bg-secondary text-left">Building</th>
             <th className="bg-secondary text-left">Location</th>
             {(onDelete || onEdit) && <th className="bg-secondary"></th>}
             {onRestoreUpdate && (
-              <th className="bg-secondary text-left">Restore</th>
+              <th className="bg-secondary text-right">Restore</th>
             )}
           </tr>
         </thead>

diff --git a/src/deskstar-frontend/pages/bookings/add.tsx b/src/deskstar-frontend/pages/bookings/add.tsx
@@ -111,7 +111,8 @@ export default function AddBooking() {
       <Head>
         <title>Add New Booking</title>
       </Head>
-      <h1 className="text-4xl mb-5">Book a Desk</h1>
+
+      <h1 className="text-3xl font-bold text-center my-10">Book a Desk</h1>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <div className="form-control">

diff --git a/src/deskstar-frontend/pages/resources/restoration.tsx b/src/deskstar-frontend/pages/resources/restoration.tsx
@@ -233,50 +233,74 @@ export default function DeletedRessourceOverview({
       </div>
       {selectedResourceOption === "Desk types" && (
         <>
-          <DeskTypeResourceTable
-            deskTypes={deskTypes}
-            onRestoreUpdate={onRestoreDeskTypesUpdate}
-          />
+          {deskTypes.length === 0 && (
+            <p className="text-center text-xl">No archived Desk Types</p>
+          )}
+          {deskTypes.length > 0 && (
+            <DeskTypeResourceTable
+              deskTypes={deskTypes}
+              onRestoreUpdate={onRestoreDeskTypesUpdate}
+            />
+          )}
         </>
       )}
       {selectedResourceOption === "Desks" && (
         <>
-          <DeskResourceTable
-            desks={desks}
-            onRestoreUpdate={onRestoreDesksUpdate}
-          />
+          {desks.length === 0 && (
+            <p className="text-center text-xl">No archived Desks</p>
+          )}
+          {desks.length > 0 && (
+            <DeskResourceTable
+              desks={desks}
+              onRestoreUpdate={onRestoreDesksUpdate}
+            />
+          )}
         </>
       )}
       {selectedResourceOption === "Rooms" && (
         <>
-          <RoomResourceTable
-            rooms={rooms}
-            onRestoreUpdate={onRestoreRoomsUpdate}
-          />
+          {rooms.length === 0 && (
+            <p className="text-center text-xl">No archived Rooms</p>
+          )}
+          {rooms.length > 0 && (
+            <RoomResourceTable
+              rooms={rooms}
+              onRestoreUpdate={onRestoreRoomsUpdate}
+            />
+          )}
         </>
       )}
       {selectedResourceOption === "Floors" && (
         <>
-          <FloorResourceTable
-            floors={floors}
-            onRestoreUpdate={onRestoreFloorsUpdate}
-          />
+          {floors.length === 0 && (
+            <p className="text-center text-xl">No archived Floors</p>
+          )}
+          {floors.length > 0 && (
+            <FloorResourceTable
+              floors={floors}
+              onRestoreUpdate={onRestoreFloorsUpdate}
+            />
+          )}
         </>
       )}
 
       {selectedResourceOption === "Buildings" && (
         <>
-          <BuildingResourceTable
-            buildings={buildings}
-            onRestoreUpdate={onRestoreBuildingsUpdate}
-          />
+          {buildings.length === 0 && (
+            <p className="text-center text-xl">No archived Buildings</p>
+          )}
+          {buildings.length > 0 && (
+            <BuildingResourceTable
+              buildings={buildings}
+              onRestoreUpdate={onRestoreBuildingsUpdate}
+            />
+          )}
         </>
       )}
     </>
   );
 }
 
-//TODO: delete this when using backend data instead of mockup
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const session = await unstable_getServerSession(
     context.req,