Use environment variables from DB in published record data (#70)

* Publish environment variables of deployment

* Handle review changes

* Use dummy gray image for projects

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/ProjectCard.tsx

@@ -21,7 +21,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow">
       <div className="flex gap-2 p-2 items-center">
-        <Avatar variant="square" src={project.icon} />
+        <Avatar variant="rounded" src={project.icon || '/gray.png'} />
         <div className="grow">
           <Link to={`projects/${project.id}`}>
             <Typography>{project.name}</Typography>

packages/frontend/src/components/projects/ProjectSearchBar.tsx

@@ -87,7 +87,7 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => {
                   {...getItemProps({ item, index })}
                 >
                   <ListItemPrefix>
-                    <Avatar src={item.icon} variant="square" />
+                    <Avatar src={item.icon || '/gray.png'} variant="rounded" />
                   </ListItemPrefix>
                   <div>
                     <Typography variant="h6" color="blue-gray">

packages/frontend/src/pages/org-slug/projects/create/Template.tsx

@@ -46,7 +46,7 @@ const CreateWithTemplate = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="flex justify-between w-5/6 my-4 bg-gray-200 rounded-xl p-6 items-center">
-        <Avatar variant="square" />
+        <Avatar variant="rounded" src="/gray.png" />
         <div className="grow px-2">{template?.name}</div>
         <div>
           <a href={GIT_TEMPLATE_LINK} target="_blank" rel="noreferrer">

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -107,7 +107,7 @@ const OverviewTabPanel = () => {
     <div className="grid grid-cols-5">
       <div className="col-span-3 p-2">
         <div className="flex items-center gap-2 p-2 ">
-          <Avatar src={project.icon} variant="square" />
+          <Avatar src={project.icon || '/gray.png'} variant="rounded" />
           <div className="grow">
             <Typography>{project.name}</Typography>
             <Typography variant="small" color="gray">