progress

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -1,6 +1,6 @@
 .button {
   display: flex;
-  padding: 8px 12px;
+  padding: 8px 10px;
   justify-content: center;
   align-items: center;
   gap: 10px;

frontend/src/app/components/mobileSearchBar/styles.module.css

@@ -9,14 +9,14 @@
 .searchBarContainer > input {
   width: 100%;
   padding: 11px 12px;
-  padding-left: 30px;
+  padding-left: 40px;
   background-color: transparent;
   border: none;
   outline: none;
   background-color: transparent;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 18px;
   outline: none;
   font-style: normal;
   font-weight: 400;
@@ -25,4 +25,5 @@
 }
 .searchIcon {
   position: absolute;
+  left: 10;
 }

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -71,7 +71,7 @@ const TopHeader = (props) => {
           {props?.requiredButtons.includes("add-services") && (
             <PrimaryButton
               icon={<AddIcon />}
-              text={props.buttonText}
+              text={isMobile ? "" : props.buttonText}
               onClick={() => props?.trigger(!props?.triggerState)}
             />
           )}

frontend/src/app/globals.css

@@ -55,7 +55,7 @@ a {
 }
 @media (max-width: 900px) {
   :root {
-    --table-font-size: 12px;
+    --table-font-size: 9px;
   }
 }
 @media (max-width: 500px) {

frontend/src/app/projects/page.jsx

@@ -185,7 +185,11 @@ const ProjectsPage = () => {
             <div className={styles.cardContainer}>
               <MobileSearchBar />
               {sampleData.map((data, key) => (
-                <Card data={data} key={key} />
+                <Card
+                  data={data}
+                  key={key}
+                  onClick={() => router.push("/projects/view")}
+                />
               ))}
             </div>
           ) : (

frontend/src/app/projects/project-card/Card.jsx

@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
 
 const Card = (props) => {
   return (
-    <div className={styles.cardContainer}>
+    <div className={styles.cardContainer} {...props}>
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>

frontend/src/app/projects/project-card/styles.module.css

@@ -5,6 +5,7 @@
   gap: 16px;
   align-self: stretch;
   border-bottom: 1px solid #2c2d3d;
+  cursor: pointer;
 }
 .cardDetails {
   display: flex;

frontend/src/app/projects/view/page.jsx

@@ -6,10 +6,13 @@ import styles from "./styles.module.css";
 import AddServicesModal from "./AddServicesModal/AddServicesModal";
 import { useRouter, usePathname } from "next/navigation";
 import CopyIcon from "@/app/components/icons/copy";
+import useIsMobile from "@/app/hooks/useIsMobile";
+import Card from "./service-card/Card";
+import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
 const AddProject = () => {
   const [triggerAddServicesModal, setTriggerAddServicesModal] = useState(false);
   const router = useRouter();
-
+  const isMobile = useIsMobile();
   const pathName = usePathname();
   const sampleData = [
     {
@@ -108,6 +111,18 @@ const AddProject = () => {
                 "services-drop-down",
               ]}
             />
+            {isMobile ? (
+              <div className={styles.cardContainer}>
+                <MobileSearchBar />
+                {sampleData.map((data, key) => (
+                  <Card
+                    data={data}
+                    key={key}
+                    onClick={() => router.push(`${pathName}/${data.id}`)}
+                  />
+                ))}
+              </div>
+            ) : (
               <div className={styles.tableContainer}>
                 <table className={styles.table}>
                   <thead>
@@ -149,7 +164,10 @@ const AddProject = () => {
                                     <path
                                       d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
                                       fill="#4A9D41"
-                                    style={{ fill: "#4A9D41", fillOpacity: 1 }}
+                                      style={{
+                                        fill: "#4A9D41",
+                                        fillOpacity: 1,
+                                      }}
                                     />
                                   </svg>
                                   <p>Overall</p>
@@ -168,7 +186,10 @@ const AddProject = () => {
                                     <path
                                       d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
                                       fill="#CAB111"
-                                    style={{ fill: "#CAB111", fillOpacity: 1 }}
+                                      style={{
+                                        fill: "#CAB111",
+                                        fillOpacity: 1,
+                                      }}
                                     />
                                   </svg>
                                   <p>Liveness</p>
@@ -188,7 +209,10 @@ const AddProject = () => {
                                     <path
                                       d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
                                       fill="#757696"
-                                    style={{ fill: "#757696", fillOpacity: 1 }}
+                                      style={{
+                                        fill: "#757696",
+                                        fillOpacity: 1,
+                                      }}
                                     />
                                   </svg>
                                   <p>Readiness</p>
@@ -211,7 +235,10 @@ const AddProject = () => {
                                     <path
                                       d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
                                       fill="#82EEFF"
-                                    style={{ fill: "#82EEFF", fillOpacity: 1 }}
+                                      style={{
+                                        fill: "#82EEFF",
+                                        fillOpacity: 1,
+                                      }}
                                     />
                                   </svg>
                                   <p>Deployment</p>
@@ -356,6 +383,7 @@ const AddProject = () => {
                   </tbody>
                 </table>
               </div>
+            )}
           </div>
         </div>
       </div>

frontend/src/app/projects/view/service-card/Card.jsx

@@ -0,0 +1,170 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer} {...props}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>{props?.data?.name}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Version</p>
+          <p>{props?.data?.version}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Health</p>
+          <div className={styles.servicesHealth}>
+            <div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  fill="none"
+                >
+                  <path
+                    d="M2.32605 1.02451C2.62107 0.974241 2.92361 0.990823 3.21137 1.07303C3.49913 1.15524 3.76477 1.30098 3.98872 1.49951L4.00105 1.51051L4.01238 1.50051C4.22612 1.31294 4.47739 1.17311 4.74944 1.09034C5.02149 1.00756 5.30807 0.983759 5.59005 1.02051L5.67205 1.03251C6.02748 1.09388 6.35971 1.25023 6.63354 1.485C6.90737 1.71977 7.11261 2.02422 7.22753 2.36612C7.34245 2.70802 7.36278 3.07463 7.28635 3.42713C7.20992 3.77963 7.03959 4.10491 6.79338 4.36851L6.73338 4.43017L6.71738 4.44384L4.23405 6.90351C4.17674 6.96023 4.10082 6.99425 4.02034 6.99928C3.93987 7.0043 3.8603 6.97999 3.79638 6.93084L3.76505 6.90351L1.26738 4.42951C1.00279 4.17206 0.814617 3.8464 0.723703 3.4886C0.63279 3.13079 0.642684 2.75481 0.75229 2.40228C0.861896 2.04975 1.06694 1.73444 1.3447 1.49127C1.62247 1.24809 1.96213 1.08654 2.32605 1.02451Z"
+                    fill="#4A9D41"
+                    style={{ fill: "#4A9D41", fillOpacity: 1 }}
+                  />
+                </svg>
+                <p>Overall</p>
+              </div>
+              <p>{props?.data?.health?.overall}</p>
+            </div>
+            <div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  fill="none"
+                >
+                  <path
+                    d="M4.42857 0V3.11111H7L3.57143 8V4.88889H1L4.42857 0Z"
+                    fill="#CAB111"
+                    style={{ fill: "#CAB111", fillOpacity: 1 }}
+                  />
+                </svg>
+                <p>Liveness</p>
+              </div>
+              <p>{props?.data?.health?.liveness}</p>
+            </div>
+
+            <div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  fill="none"
+                >
+                  <path
+                    d="M2 1.33343V6.66676C1.99998 6.72607 2.01579 6.78431 2.04579 6.83547C2.0758 6.88663 2.11891 6.92887 2.17067 6.95781C2.22244 6.98675 2.281 7.00135 2.34029 7.00011C2.39959 6.99888 2.45748 6.98184 2.508 6.95076L6.84133 4.28409C6.88987 4.25427 6.92995 4.21251 6.95775 4.16279C6.98555 4.11307 7.00015 4.05706 7.00015 4.00009C7.00015 3.94313 6.98555 3.88712 6.95775 3.8374C6.92995 3.78768 6.88987 3.74592 6.84133 3.71609L2.508 1.04943C2.45748 1.01835 2.39959 1.00131 2.34029 1.00007C2.281 0.998834 2.22244 1.01344 2.17067 1.04238C2.11891 1.07132 2.0758 1.11355 2.04579 1.16472C2.01579 1.21588 1.99998 1.27412 2 1.33343Z"
+                    fill="#757696"
+                    style={{ fill: "#757696", fillOpacity: 1 }}
+                  />
+                </svg>
+                <p>Readiness</p>
+              </div>
+              <p>{props?.data?.health?.readiness}</p>
+            </div>
+          </div>
+        </div>
+        <div className={styles.list}>
+          <p>Status</p>
+          <div className={styles.servicesStatus}>
+            <div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="8"
+                  height="8"
+                  viewBox="0 0 8 8"
+                  fill="none"
+                >
+                  <path
+                    d="M2.19128 4.12547C2.33573 3.74214 2.51489 3.37964 2.72878 3.03797C2.94266 2.6963 3.18573 2.37269 3.45794 2.06714L2.81628 1.94214C2.70516 1.9199 2.59544 1.92547 2.48711 1.9588C2.37878 1.99214 2.28573 2.04769 2.20794 2.12547L1.07461 3.26714C1.0135 3.32824 0.991276 3.40185 1.00794 3.48797C1.02461 3.57407 1.07183 3.63381 1.14961 3.66714L2.19128 4.12547ZM7.02461 0.808797C6.41906 0.764353 5.84544 0.86852 5.30378 1.1213C4.76211 1.37407 4.27461 1.71714 3.84128 2.15047C3.56349 2.42824 3.31766 2.72407 3.10378 3.03797C2.88989 3.35185 2.71349 3.69214 2.57461 4.0588C2.55239 4.11436 2.54128 4.1699 2.54128 4.22547C2.54128 4.28102 2.56349 4.33102 2.60794 4.37547L3.73294 5.50047C3.77739 5.5449 3.82739 5.56714 3.88294 5.56714C3.93849 5.56714 3.99406 5.55602 4.04961 5.5338C4.41628 5.40047 4.75656 5.22547 5.07044 5.0088C5.38433 4.79214 5.68016 4.54491 5.95794 4.26714C6.39128 3.83381 6.73573 3.34631 6.99128 2.80464C7.24683 2.26297 7.35239 1.68935 7.30794 1.0838C7.30239 1.05046 7.29266 1.01852 7.27878 0.987963C7.26489 0.957408 7.24406 0.928242 7.21628 0.900463C7.18849 0.872687 7.15933 0.851853 7.12878 0.837963C7.09823 0.824075 7.06349 0.814353 7.02461 0.808797ZM4.88294 3.22547C4.77183 3.11435 4.71628 2.97685 4.71628 2.81297C4.71628 2.64907 4.77183 2.51157 4.88294 2.40047C4.99406 2.28935 5.13156 2.2338 5.29544 2.2338C5.45933 2.2338 5.59683 2.28935 5.70794 2.40047C5.81906 2.51157 5.87461 2.64907 5.87461 2.81297C5.87461 2.97685 5.81906 3.11435 5.70794 3.22547C5.59683 3.33657 5.45933 3.39214 5.29544 3.39214C5.13156 3.39214 4.99406 3.33657 4.88294 3.22547ZM3.99128 5.91714L4.44128 6.95881C4.47461 7.04214 4.53573 7.09074 4.62461 7.10464C4.71349 7.11852 4.78849 7.0949 4.84961 7.0338L5.98294 5.90047C6.06073 5.82269 6.11628 5.72964 6.14961 5.6213C6.18294 5.51297 6.18849 5.40324 6.16628 5.29214L6.04961 4.65047C5.74406 4.92269 5.42044 5.16574 5.07878 5.37964C4.73711 5.59352 4.37461 5.77269 3.99128 5.91714ZM1.34961 5.35047C1.54405 5.15602 1.78016 5.0574 2.05794 5.05464C2.33573 5.05186 2.57183 5.14769 2.76628 5.34214C2.96073 5.53657 3.05794 5.77269 3.05794 6.05047C3.05794 6.32824 2.96073 6.56435 2.76628 6.7588C2.49961 7.02547 2.18433 7.1838 1.82044 7.23381C1.45655 7.28381 1.09128 7.3338 0.724609 7.3838C0.774609 7.01714 0.825998 6.65185 0.878776 6.28797C0.931553 5.92407 1.0885 5.61157 1.34961 5.35047Z"
+                    fill="#82EEFF"
+                    style={{
+                      fill: "#82EEFF",
+                      fillOpacity: 1,
+                    }}
+                  />
+                </svg>
+                <p>Deployment</p>
+              </div>
+              <p>{props?.data?.status?.deployment}</p>
+            </div>
+
+            <div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="10"
+                  height="10"
+                  viewBox="0 0 10 10"
+                  fill="none"
+                >
+                  <path
+                    d="M1.40625 3.00358C1.40625 2.68587 1.53246 2.38118 1.75711 2.15653C1.98176 1.93187 2.28646 1.80566 2.60417 1.80566H7.39583C7.71354 1.80566 8.01824 1.93187 8.24289 2.15653C8.46754 2.38118 8.59375 2.68587 8.59375 3.00358V3.80219C8.59375 4.1199 8.46754 4.42459 8.24289 4.64925C8.01824 4.8739 7.71354 5.00011 7.39583 5.00011H2.60417C2.28646 5.00011 1.98176 4.8739 1.75711 4.64925C1.53246 4.42459 1.40625 4.1199 1.40625 3.80219V3.00358Z"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M1.40625 6.19792C1.40625 5.88021 1.53246 5.57551 1.75711 5.35086C1.98176 5.12621 2.28646 5 2.60417 5H7.39583C7.71354 5 8.01824 5.12621 8.24289 5.35086C8.46754 5.57551 8.59375 5.88021 8.59375 6.19792V6.99653C8.59375 7.31423 8.46754 7.61893 8.24289 7.84358C8.01824 8.06824 7.71354 8.19444 7.39583 8.19444H2.60417C2.28646 8.19444 1.98176 8.06824 1.75711 7.84358C1.53246 7.61893 1.40625 7.31423 1.40625 6.99653V6.19792Z"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M3.00391 3.40234V3.40599"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M3.00391 6.59766V6.60131"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M4.60156 3.40234H6.9974"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M4.60156 6.59766H6.9974"
+                    stroke="#617EE9"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <p>Replicas</p>
+              </div>
+              <p>{props?.data?.status?.replicas}</p>
+            </div>
+          </div>
+        </div>
+        <div className={styles.list}>
+          <p>Image</p>
+          <p>{props?.data?.image}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/projects/view/service-card/styles.module.css

@@ -0,0 +1,116 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  cursor: pointer;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list > p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  overflow-wrap: anywhere;
+}
+
+.list > p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}
+.servicesHealth,
+.servicesStatus {
+  display: flex;
+  align-items: start;
+  gap: 4px;
+  width: 100%;
+  align-self: stretch;
+}
+.servicesHealth > div,
+.servicesStatus > div {
+  display: flex;
+  padding: 4px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  border-radius: 6px;
+  border: 1px solid rgba(22, 159, 49, 0.25);
+  background: rgba(22, 159, 49, 0.05);
+  color: #179f31;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.servicesHealth > div:nth-child(2) {
+  border: 1px solid rgba(207, 176, 0, 0.25);
+  background: rgba(207, 176, 0, 0.05);
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(2) > div {
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(3) {
+  border: 1px solid rgba(117, 118, 153, 0.25);
+  background: rgba(117, 118, 153, 0.05);
+  color: #757696;
+}
+.servicesHealth > div:nth-child(3) > div {
+  color: #757696;
+}
+.servicesHealth > div > div,
+.servicesStatus > div > div {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #179f31;
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.servicesStatus > div:nth-child(1) {
+  border-radius: 6px;
+  border: 1px solid rgba(80, 241, 255, 0.25);
+  background: rgba(80, 241, 255, 0.05);
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(1) > div {
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(2) {
+  border-radius: 6px;
+  border: 1px solid rgba(89, 127, 241, 0.25);
+  background: rgba(89, 127, 241, 0.05);
+  color: #617ee9;
+}
+.servicesStatus > div:nth-child(2) > div {
+  color: #617ee9;
+}

frontend/src/app/projects/view/styles.module.css

@@ -59,8 +59,10 @@
 .servicesStatus {
   display: flex;
   align-items: start;
+  text-wrap: nowrap;
   gap: 4px;
   width: 100%;
+  flex-wrap: wrap;
   align-self: stretch;
 }
 .servicesHealth > div,
@@ -185,3 +187,14 @@
 .imageText:hover > div {
   opacity: 1;
 }
+.cardContainer {
+  display: flex;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  overflow: auto;
+}