fixed

frontend/src/app/agents/styles.module.css

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -65,7 +65,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -113,7 +113,7 @@
   outline: none;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   outline: none;
   font-style: normal;
   font-weight: 400;

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

@@ -75,7 +75,7 @@
 .headers > p {
   color: #fff;
   font-family: Inter;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
@@ -91,7 +91,7 @@
 .body > p {
   color: #fff;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;

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

@@ -8,7 +8,7 @@
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
   color: white;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

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

@@ -9,7 +9,7 @@
   border: 0.5px solid #4e537e;
   cursor: pointer;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
 
   font-style: normal;
   font-weight: 500;

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

@@ -12,19 +12,18 @@
 }
 .checkbox {
   display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
+  padding: 10px 12px;
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
   align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  gap: 16px;
   flex: 1 0 0;
-  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  border-radius: 8px;
   background: #1d1e2a;
 }
 .check {
   display: flex;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  padding-top: 4px;
   align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+  gap: 10px;
 }
 .hiddenCheckbox {
   appearance: none;
@@ -37,29 +36,15 @@
   align-items: center;
   cursor: pointer;
   position: relative;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
+  border-radius: 4px;
-  border: 1px solid
+  border: 1px solid #e5e7eb;
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Color, #e5e7eb);
 
-  background: var(--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Color, #fff);
+  background: #fff;
 }
 .hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
+  border-radius: 4px;
-  border: 1px solid
+  border: 1px solid #0067fd;
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
+  background: #0067fd;
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
 }
 .hiddenCheckbox::after {
   content: "";
@@ -85,19 +70,19 @@
   align-self: stretch;
   color: #d2d3e1;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 24px;
   letter-spacing: 0.08px;
 }
 .secondaryTxt {
   align-self: stretch;
   color: #697281;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
   letter-spacing: 0.07px;
 }

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

@@ -12,7 +12,7 @@
   background-color: transparent;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   outline: none;
   font-style: normal;
   font-weight: 400;
@@ -27,7 +27,7 @@
 .input:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -38,7 +38,7 @@
 .input::placeholder {
   color: #85869b;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -16,7 +16,7 @@
   background-color: transparent;
   color: white;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   outline: none;
   font-style: normal;
   font-weight: 400;

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

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 40px; /*collapse width*/
+  width: 40px;
   border-radius: 6px;
   padding: 6px;
   height: auto;
@@ -15,7 +15,6 @@
   background: #292a36;
   background: color(display-p3 0.1608 0.1647 0.2078);
 }
-/* When the searchbar is opened */
 .open {
   width: 260px;
   padding: 6px 6px 6px 12px;
@@ -34,7 +33,7 @@
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -52,7 +51,7 @@
   color: color(display-p3 0.5216 0.5255 0.6);
   text-align: start;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -64,18 +64,14 @@
 .logoDescription > p:nth-child(1) {
   color: #fff;
   color: color(display-p3 1 1 1);
-  font-size: 15px;
+  font-size: 0.94rem;
-  font-style: normal;
   font-weight: 500;
   line-height: 18px;
 }
 .logoDescription > p:nth-child(2) {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
-  font-size: 10px;
+  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-size: 16px;
-  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-size: 16px;
-  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-size: 16px;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
 }
 .collapsed {
   width: 80px;

frontend/src/app/credentials/styles.module.css

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -47,7 +47,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/globals.css

@@ -16,7 +16,6 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
-  font-size: 16px;
 }
 
 body {

frontend/src/app/organization/add/styles.module.css

@@ -3,7 +3,8 @@
   flex-direction: column;
   align-items: center;
   gap: 48px;
-  flex: 1 0 0;
+
+  height: calc(100vh - 170px);
   align-self: stretch;
 }
 .upperToolTips {
@@ -24,7 +25,7 @@
   color: #191a24;
   text-align: center;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -107,7 +108,7 @@
 .labels > p {
   color: #d2d3e1;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -115,7 +116,7 @@
 .labels > p span {
   color: #85869b;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
@@ -136,7 +137,7 @@
 .inputLabel > p {
   color: #d2d3e1;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -164,7 +165,7 @@
 .prompts > p {
   color: #d49e3d;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/organization/card/styles.module.css

@@ -23,7 +23,7 @@
 .list p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -32,7 +32,7 @@
 .list p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {

frontend/src/app/organization/styles.module.css

@@ -30,7 +30,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -46,7 +46,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

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

@@ -34,7 +34,7 @@
   color: #d2d3e1;
   color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -42,7 +42,7 @@
 .label > p span {
   color: #cfb000;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -64,7 +64,7 @@
 .prompts > p {
   color: #d49e3d;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -24,7 +24,7 @@
 .list p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -33,7 +33,7 @@
 .list p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {

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

@@ -36,7 +36,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -52,7 +52,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -68,7 +68,7 @@
   color: #50d85f;
   font-family: Inter;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -77,7 +77,7 @@
   color: #85869b;
   font-family: Inter;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

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

@@ -52,7 +52,7 @@
 }
 .header > div > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -64,7 +64,7 @@
   gap: 4px;
   align-self: stretch;
   color: #85869b;
-  font-size: 14px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -122,7 +122,7 @@
 }
 .listDetails > p {
   color: #85869b;
-  font-size: 13px;
+  font-size: 0.83rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -135,7 +135,7 @@
 }
 .listDetails > div > p {
   color: #d2d3e1;
-  font-size: 18px;
+  font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -153,7 +153,7 @@
 }
 .listDetails > div > div > p {
   color: #d2d3e1;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -62,7 +62,7 @@
   align-items: center;
   gap: 10px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -84,7 +84,7 @@
     "liga" off,
     "clig" off;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.7rem;
   font-style: normal;
   font-weight: 500;
   line-height: 22px; /* 183.333% */

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

@@ -41,7 +41,7 @@
   gap: 5px;
   color: #85869b;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
 
   font-weight: 400;
 }
@@ -90,7 +90,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -98,6 +98,9 @@
   letter-spacing: 0.16px;
   outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;
@@ -106,7 +109,7 @@
 .textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -128,7 +131,7 @@
 }
 .projectDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -176,7 +179,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -199,7 +202,7 @@
   border: 1px dashed #5980f1;
   color: #5980f1;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -250,7 +253,7 @@
 
 .additionalDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -287,7 +290,7 @@
 }
 .additionalDetailsFields p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -35,7 +35,7 @@
 .searchInputGroup input {
   color: white;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -105,7 +105,7 @@
   border-radius: 4px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -120,7 +120,7 @@
   gap: 12px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -165,7 +165,7 @@
   flex: 1 0 0;
   align-self: stretch;
   color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -195,7 +195,7 @@
   flex: 1 0 0;
   color: #fff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -219,7 +219,7 @@
   flex: 1 0 0;
   color: #85869b;
   font-family: Inter;
-  font-size: 15px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -252,7 +252,7 @@
   flex: 1 0 0;
   color: #85869b;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

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

@@ -41,7 +41,7 @@
   gap: 5px;
   color: #85869b;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
 
   font-weight: 400;
 }
@@ -80,7 +80,7 @@
 }
 .projectDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -121,7 +121,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -129,6 +129,9 @@
   letter-spacing: 0.16px;
   outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;
@@ -137,7 +140,7 @@
 .textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -184,7 +187,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -207,7 +210,7 @@
   border: 1px dashed #5980f1;
   color: #5980f1;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -258,7 +261,7 @@
 
 .additionalDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -295,7 +298,7 @@
 }
 .additionalDetailsFields p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -35,7 +35,7 @@
 .searchInputGroup input {
   color: white;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -105,7 +105,7 @@
   border-radius: 4px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -120,7 +120,7 @@
   gap: 12px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -165,7 +165,7 @@
   flex: 1 0 0;
   align-self: stretch;
   color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -195,7 +195,7 @@
   flex: 1 0 0;
   color: #fff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -219,7 +219,7 @@
   flex: 1 0 0;
   color: #85869b;
   font-family: Inter;
-  font-size: 15px;
+  font-size: 0.93rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -252,7 +252,7 @@
   flex: 1 0 0;
   color: #85869b;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

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/service-card/styles.module.css

@@ -24,7 +24,7 @@
 .list > p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -34,7 +34,7 @@
 .list > p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {
@@ -63,7 +63,7 @@
   background: rgba(22, 159, 49, 0.05);
   color: #179f31;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.63rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -91,7 +91,7 @@
   gap: 4px;
   color: #179f31;
   font-family: Inter;
-  font-size: 10px;
+  font-size: 0.6rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -19,7 +19,7 @@
   color: #85869b;
   font-family: Inter;
   z-index: 3;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -41,7 +41,7 @@
   font-family: Inter;
   overflow-wrap: anywhere;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -78,7 +78,7 @@
   background: rgba(22, 159, 49, 0.05);
   color: #179f31;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.65rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -106,7 +106,7 @@
   gap: 4px;
   color: #179f31;
   font-family: Inter;
-  font-size: 10px;
+  font-size: 0.65rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -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;
+  }
+}

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

@@ -47,7 +47,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -83,7 +83,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -147,7 +147,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -168,7 +168,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -184,7 +184,7 @@
 .verticalInput textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -207,7 +207,7 @@
   display: flex;
   align-items: flex-start;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx

@@ -112,6 +112,14 @@ const AddVariableModal = (props) => {
                         </div>
                       </div>
                     </div>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Custom Port (Optional)</p>
+                        </div>
+                        <TextField placeHolder="Leave empty to use service’s default port" />
+                      </div>
+                    </div>
                   </>
                 )}
               </div>

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

@@ -46,7 +46,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -82,7 +82,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -106,6 +106,9 @@
   align-items: flex-start;
   gap: 16px;
   align-self: stretch;
+  max-height: 400px;
+  overflow-y: scroll;
+  padding: 0px 5px;
 }
 .horizontalInput {
   display: flex;
@@ -146,7 +149,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -167,7 +170,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -183,7 +186,7 @@
 .verticalInput textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -197,8 +200,7 @@
   align-self: stretch;
 }
 .authenticationContainer > p {
-  color: #85869b;
+  font-size: 1rem;
-  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

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

@@ -45,7 +45,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -81,7 +81,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -145,7 +145,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -166,7 +166,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -187,7 +187,7 @@
 }
 .authenticationContainer > p {
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;