fixed

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

@@ -65,7 +65,6 @@
   color: #fff;
   color: color(display-p3 1 1 1);
   font-size: 0.94rem;
-  font-style: normal;
   font-weight: 500;
   line-height: 18px;
 }
@@ -73,9 +72,6 @@
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-size: 0.63rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   letter-spacing: 0.05px;
   align-self: stretch;
 }
@@ -91,11 +87,7 @@
   align-items: center;
   cursor: pointer;
   gap: 16px;
-  font-family: Inter;
   font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   border-left: 2px solid #959aff00;
   align-self: stretch;
 }
@@ -112,11 +104,7 @@
   border-left: 2px solid #959aff;
   background: rgba(149, 154, 255, 0.05);
   color: #959aff;
-  font-family: Inter;
   font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 .active:hover path {
   stroke: #969af9;
@@ -153,11 +141,8 @@
 }
 .navFooterContainer > div > div > p {
   color: #d2d3e1;
-  font-family: Inter;
   font-size: 1rem;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
 }
 .collapsed {
   width: 80px;

frontend/src/app/projects/view/[servicesId]/styles.module.css

@@ -98,6 +98,9 @@
   letter-spacing: 0.16px;
   outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;

frontend/src/app/projects/view/add-from-scratch/styles.module.css

@@ -129,6 +129,9 @@
   letter-spacing: 0.16px;
   outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;

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

@@ -111,34 +111,36 @@ const AddProject = () => {
                 "services-drop-down",
               ]}
             />
-            {isMobile ? (
+
-              <div className={styles.cardContainer}>
+            <div className={styles.cardContainer}>
-                <MobileSearchBar />
+              <MobileSearchBar />
-                {sampleData.map((data, key) => (
+              {isMobile &&
+                sampleData.map((data, key) => (
                   <Card
                     data={data}
                     key={key}
                     onClick={() => router.push(`${pathName}/${data.id}`)}
                   />
                 ))}
-              </div>
+            </div>
-            ) : (
+
-              <div className={styles.tableContainer}>
+            <div className={styles.tableContainer}>
-                <table className={styles.table}>
+              <table className={styles.table}>
-                  <thead>
+                <thead>
-                    <tr>
+                  <tr>
-                      <th>Name</th>
+                    <th>Name</th>
-                      <th>Version</th>
+                    <th>Version</th>
-                      <th>Health</th>
+                    <th>Health</th>
-                      <th>Status</th>
+                    <th>Status</th>
-                      <th width="10%">Image</th>
+                    <th width="10%">Image</th>
-                      <th>Ingress</th>
+                    <th>Ingress</th>
-                      <th>Port</th>
+                    <th>Port</th>
-                      <th>Actions</th>
+                    <th>Actions</th>
-                    </tr>
+                  </tr>
-                  </thead>
+                </thead>
-                  <tbody>
+                <tbody>
-                    {sampleData.map((services, index) => {
+                  {!isMobile &&
+                    sampleData.map((services, index) => {
                       return (
                         <tr
                           key={index}
@@ -380,10 +382,9 @@ const AddProject = () => {
                         </tr>
                       );
                     })}
-                  </tbody>
+                </tbody>
-                </table>
+              </table>
-              </div>
+            </div>
-            )}
           </div>
         </div>
       </div>

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

@@ -188,7 +188,7 @@
   opacity: 1;
 }
 .cardContainer {
-  display: flex;
+  display: none;
   padding: 0 16px;
   padding-bottom: 50px;
   height: calc(100vh - 170px);
@@ -198,3 +198,11 @@
   align-self: stretch;
   overflow: auto;
 }
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
+}