fix(style): Add placeholder image and tavern baddges

tavern/internal/www/src/components/BeaconTile.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "@chakra-ui/react";
 import { checkIfBeaconOffline } from "../utils/utils";
+import Badge from "./tavern-base-ui/badge/Badge";
 
 type Props = {
     beaconData: {
@@ -24,7 +24,7 @@ const BeaconTile = (props: Props) => {
             <div className="flex flex-row gap-4">{beaconData.name}</div>
             <div className="flex flex-row flex-wrap gap-1">
                 {(beaconData.principal && beaconData.principal !== "") &&
-                    <Badge textTransform="none">{beaconData.principal}</Badge>
+                    <Badge>{beaconData.principal}</Badge>
                 }
                 <Badge>{beaconData?.host?.name}</Badge>
                 <Badge>{beaconData?.host?.primaryIP}</Badge>

tavern/internal/www/src/components/HostTile.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "@chakra-ui/react";
 import { HostType } from "../utils/consts";
+import Badge from "./tavern-base-ui/badge/Badge";
 
 type Props = {
     data: HostType

tavern/internal/www/src/components/TaskStatusBadge.tsx

@@ -1,61 +1,16 @@
-import { RepeatClockIcon, TimeIcon } from "@chakra-ui/icons";
-import { Badge } from "@chakra-ui/react";
-import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import React from "react";
+
+import Badge from "./tavern-base-ui/badge/Badge";
 
 type Props = {
     task: any;
 }
 const TaskStatusBadge = (props: Props) => {
     const { task } = props;
 
-    if (task.error.length > 0) {
-        return (
-            <div>
-                <Badge fontSize='0.8em' size="large" colorScheme="red" variant="solid">
-                    <div className="flex flex-row gap-1 justify-center items-center p-1" >
-                        <ExclamationCircleIcon className="w-5" color="white" />
-                        <div>Error</div>
-                    </div>
-                </Badge>
-            </div>
-        )
-    }
-
-    if (task.execFinishedAt) {
-        return (
-            <div>
-                <Badge fontSize='0.8em' size="large" colorScheme="green" variant="solid">
-                    <div className="flex flex-row gap-1 justify-center items-center p-1" >
-                        <CheckCircleIcon className="w-5" color="white" />
-                        <div>Finished</div>
-                    </div>
-                </Badge>
-            </div>
-        );
-    }
-
-    if (task.execStartedAt) {
-        return (
-            <div>
-                <Badge fontSize='0.8em' size="large" colorScheme="gray" variant="outline">
-                    <div className="flex flex-row gap-1 justify-center items-center p-1" >
-                        <RepeatClockIcon w={4} h={4} color="gray" />
-                        <div>In-Progress</div>
-                    </div>
-                </Badge>
-            </div>
-        );
-    }
-
-    return (
-        <div>
-            <Badge fontSize='0.8em' size="large" colorScheme="gray" variant="outline">
-                <div className="flex flex-row gap-1 justify-center items-center p-1" >
-                    <TimeIcon w={4} h={4} color="gray" />
-                    <div>Queued</div>
-                </div>
-            </Badge>
-        </div>
-    );
+    if (task.error.length > 0) return <Badge badgeStyle={{ color: 'red' }} >Error</Badge>;
+    else if (task.execFinishedAt) return <Badge badgeStyle={{ color: 'green' }} >Finished</Badge>;
+    else if (task.execStartedAt) return <Badge badgeStyle={{ color: 'gray' }} >In progress</Badge>;
+    else return <Badge badgeStyle={{ color: 'gray' }} >Queued</Badge>;
 }
 export default TaskStatusBadge;

tavern/internal/www/src/components/TaskTable.tsx

@@ -1,12 +1,13 @@
-import { Badge, Tooltip } from "@chakra-ui/react";
+import { Tooltip } from "@chakra-ui/react";
 
 import { ColumnDef } from "@tanstack/react-table";
 import React from "react";
 
 import Table from "./tavern-base-ui/Table";
 import { formatDistance } from "date-fns";
-import TaskStatusBadge from "./TaskStatusBadge";
 import BeaconTile from "./BeaconTile";
+import Badge from "./tavern-base-ui/badge/Badge";
+import TaskStatusBadge from "./TaskStatusBadge";
 
 type Props = {
     tasks: Array<any>,
@@ -70,7 +71,7 @@ const TaskTable = (props: Props) => {
                             <div className="flex flex-row gap-2 flex-wrap">
                                 <TaskStatusBadge task={taskData} />
                                 {hasOutput && <div>
-                                    <Badge fontSize='0.8em' size="large" colorScheme="purple">
+                                    <Badge badgeStyle={{ color: "purple" }}>
                                         <div className="p-1">
                                             Has Output
                                         </div>

tavern/internal/www/src/components/UserImageAndName.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { UserType } from "../utils/consts";
+import { Image } from "@chakra-ui/react";
+
+import PlaceholderUser from "../assets/PlaceholderUser.png";
+
+const UserImageAndName: FC<{ userData: UserType | null | undefined }> = ({ userData }) => {
+    const creatorImage = (userData?.photoURL && userData?.photoURL !== "") ? userData.photoURL : PlaceholderUser;
+
+    if (!userData) {
+        return <div className="text-sm text-gray-500">Not available</div>;
+    }
+
+    return (
+        <div className="flex flex-row gap-4 items-center" key={userData?.id}>
+            <Image
+                borderRadius='full'
+                boxSize='20px'
+                src={creatorImage}
+                alt={`Profile of ${userData?.name}`}
+            />
+            <div className="text-sm text-gray-500">
+                {userData?.name}
+            </div>
+        </div>
+    );
+};
+export default UserImageAndName;

tavern/internal/www/src/components/beacon-option/BeaconOption.tsx

@@ -17,7 +17,7 @@ type Props = {
 };
 
 export const BeaconOption = (props: Props) => {
-    const {index, style, beaconsToDisplay, toggleCheck, beaconsSelected } = props;
+    const { index, style, beaconsToDisplay, toggleCheck, beaconsSelected } = props;
     // Your card component goes here
     const beacon = beaconsToDisplay[index];
     const isChecked = beaconsSelected[beacon.id];
@@ -26,13 +26,13 @@ export const BeaconOption = (props: Props) => {
         <div style={style} key={`beacon_option_${beacon.id}`}>
             <Card>
                 <CardBody>
-                    <Checkbox colorScheme={"purple"} size="lg" isChecked={isChecked} onChange={()=> toggleCheck(beacon.id)}>
-                        <BeaconTile beaconData={beacon} />
+                    <Checkbox colorScheme={"purple"} size="lg" isChecked={isChecked} onChange={() => toggleCheck(beacon.id)}>
+                        <div className="ml-2"><BeaconTile beaconData={beacon} /></div>
                     </Checkbox>
                 </CardBody>
             </Card>
         </div>
     );
 };
 
-export default React.memo(BeaconOption, areEqual);
+export default React.memo(BeaconOption, areEqual);

tavern/internal/www/src/components/tavern-base-ui/badge/Badge.tsx

@@ -31,21 +31,23 @@ const Badge: FC<BadgeProps> = (
     }
 
     return (
-        <div
-            className={renderBadgeVariant()}
-            {...rest}
-        >
-            {/** render icon before */}
-            {icon && iconPlacement === "left" ? (
-                <span className={`inline-flex shrink-0 self-center ${children}`}>{icon}</span>
-            ) : null}
-
-            {children}
-
-            {/** render icon after */}
-            {icon && iconPlacement === "right" ? (
-                <span className={`inline-flex shrink-0 self-center  ${children}`}>{icon}</span>
-            ) : null}
+        <div className="flex flex-row">
+            <div
+                className={renderBadgeVariant()}
+                {...rest}
+            >
+                {/** render icon before */}
+                {icon && iconPlacement === "left" ? (
+                    <span className={`inline-flex shrink-0 self-center ${children}`}>{icon}</span>
+                ) : null}
+
+                {children}
+
+                {/** render icon after */}
+                {icon && iconPlacement === "right" ? (
+                    <span className={`inline-flex shrink-0 self-center  ${children}`}>{icon}</span>
+                ) : null}
+            </div>
         </div>
     );
 };
@@ -54,6 +56,9 @@ const Badge: FC<BadgeProps> = (
 Badge.defaultProps = {
     leftIcon: undefined,
     rightIcon: undefined,
+    badgeStyle: {
+        color: "gray"
+    }
 };
 
 export default Badge;

tavern/internal/www/src/components/tavern-base-ui/badge/BadgeStyles.ts

@@ -9,6 +9,7 @@ export const solidBadge = tv({
   extend: baseBadge,
   variants: {
     color: {
+        none: "text-gray-800",
         purple:
         'btn-primary',
         red: 'bg-red-600 text-white',
@@ -24,23 +25,11 @@ export const outlineBadge = tv({
   base: 'ring-1',
   variants: {
     color: {
+      none: "text-gray-800 ring-gray-600",
       purple: 'text-purple-800 ring-purple-800',
       red: 'text-red-600 ring-red-800',
       gray: 'text-gray-900 ring-gray-500',
       green: ' bg-green-600 text-white'
     },
   },
 });
-
-//create ghost Badge styles
-export const ghostBadge = tv({
-  extend: baseBadge,
-  variants: {
-    color: {
-      purple: 'text-purple-800',
-      red: 'text-red-800',
-      gray: 'text-gray-900',
-      green: ' bg-green-600 text-white'
-    },
-  },
-});

tavern/internal/www/src/features/task-card/TaskCard.tsx

@@ -1,11 +1,11 @@
 import { Task } from "../../utils/consts";
 import { FC } from "react";
 import TaskTimeStamp from "./components/TaskTimeStamp";
-import TaskCreator from "./components/TaskCreator";
-import TaskStatusBadge from "./components/TaskStatusBadge";
 import TaskHostBeacon from "./components/TaskHostBeacon";
 import TaskParameters from "./components/TaskParameters";
 import TaskResults from "./components/TaskResults";
+import UserImageAndName from "../../components/UserImageAndName";
+import TaskStatusBadge from "../../components/TaskStatusBadge";
 
 interface TaskCardType {
     task: Task
@@ -28,7 +28,7 @@ const TaskCard: FC<TaskCardType> = (
                 <TaskHostBeacon beaconData={task.beacon} />
                 <TaskTimeStamp {...task} />
                 <TaskParameters quest={task?.quest} />
-                <TaskCreator creatorData={task?.quest?.creator} />
+                <UserImageAndName userData={task?.quest?.creator} />
             </div>
             <div className="flex flex-col gap-2 col-span-1">
                 <TaskResults output={task?.output} error={task?.error} quest={task?.quest} />

tavern/internal/www/src/features/task-card/components/TaskHostBeacon.tsx

@@ -25,18 +25,18 @@ const TaskHostBeacon: FC<TaskHostBeaconType> = ({ beaconData }) => {
                 </div>
                 <div className="flex flex-row gap-2 flex-wrap">
                     {(principal && principal !== "") &&
-                        <Badge badgeStyle={{ color: "gray" }}>{principal}</Badge>
+                        <Badge>{principal}</Badge>
                     }
                     {(host?.primaryIP && host?.primaryIP !== "") &&
-                        <Badge badgeStyle={{ color: "gray" }}>{host?.primaryIP}</Badge>
+                        <Badge>{host?.primaryIP}</Badge>
                     }
                     {host?.platform &&
-                        <Badge badgeStyle={{ color: "gray" }}>{host?.platform}</Badge>
+                        <Badge>{host?.platform}</Badge>
                     }
                     {host?.tags && host?.tags.map((tag: any) => {
-                        return <Badge key={tag.id} badgeStyle={{ color: "gray" }}>{tag.name}</Badge>
+                        return <Badge key={tag.id}>{tag.name}</Badge>
                     })}
-                    {beaconOffline && <Badge badgeStyle={{ color: "gray" }}>Offline</Badge>}
+                    {beaconOffline && <Badge>Offline</Badge>}
                 </div>
             </div>
         </div>