From 171400f9ca0d69abf667d6d38153618dc968573d Mon Sep 17 00:00:00 2001
From: Borgia Leiva <edbole@campusaula.com>
Date: Wed, 11 Feb 2026 11:23:24 +0100
Subject: [PATCH] refactored and changed px for relative units

---
 .../project-details.component.css             | 130 ++++++++----------
 1 file changed, 58 insertions(+), 72 deletions(-)

diff --git a/src/app/pages/project-details/project-details.component.css b/src/app/pages/project-details/project-details.component.css
index ecefc1f..1be42ac 100644
--- a/src/app/pages/project-details/project-details.component.css
+++ b/src/app/pages/project-details/project-details.component.css
@@ -1,5 +1,5 @@
 .content {
-  padding: 40px;
+  padding: 2.5rem;
   width: clamp(70vw, 85vw, 90vw);
   max-width: 80%;
   margin: 0 auto;
@@ -8,15 +8,9 @@
   gap: 0.6rem;
 }
 
-@media (max-width: 600px) {
-  .content{
-    max-width: 95%;
-  }
-}
-
 .title h2 {
-  margin: 0 0 6px 0;
-  font-size: 26px;
+  margin: 0 0 0.375rem 0;
+  font-size: 1.625rem;
   color: #1f2933;
 }
 
@@ -35,34 +29,22 @@
   height: fit-content;
   background: #ffffff;
   padding: 1rem;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-radius: 0.75rem;
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
 }
 
-.project-card h2{
+.project-card h2 {
   margin: 0;
   padding-top: 0.5rem;
 }
 
-.tasks-header,
-.collaborators-header {
-  padding-top: .5rem;
-  padding-bottom: 1.5rem;
-}
-
-.tasks-header h4,
-.collaborators-header h4 {
-  margin: 0;
-}
-
 .danger-zone {
-  margin-top: 20px;
-  border: 1px solid #fee2e2;
+  border: 0.0625rem solid #fee2e2;
   background: #fff5f5;
 }
 
 .danger-header h3 {
-  margin: 0 0 6px 0;
+  margin: 0 0 0.375rem 0;
   color: #b91c1c;
 }
 
@@ -74,37 +56,37 @@
 .danger-actions {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
+  gap: 0.75rem;
+  margin-top: 1rem;
 }
 
 .danger-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  padding: 16px;
-  border-radius: 10px;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 0.625rem;
   background: #ffffff;
-  border: 1px solid #fecaca;
+  border: 0.0625rem solid #fecaca;
 }
 
 .danger-item h4 {
-  margin: 0 0 4px 0;
+  margin: 0 0 0.25rem 0;
   color: #7f1d1d;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .danger-item p {
   margin: 0;
   color: #991b1b;
-  font-size: 13px;
+  font-size: 0.8125rem;
 }
 
 .btn-danger,
 .btn-danger-outline {
-  padding: 8px 14px;
-  border-radius: 8px;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
   transition:
@@ -125,7 +107,7 @@
 }
 
 .btn-danger-outline {
-  border: 1px solid #fca5a5;
+  border: 0.0625rem solid #fca5a5;
   background-color: #ffffff;
   color: #b91c1c;
 }
@@ -140,78 +122,76 @@
   color: #4b5563;
 }
 
-.tasks-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
+.tasks-header,
 .collaborators-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.tasks-header h4,
+.collaborators-header h4 {
+  margin: 0;
 }
 
 .collaborators-count {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #6b7280;
 }
 
 .collaborators-grid {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .collaborators-grid--single {
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .btn-add-task {
   width: 100%;
-  padding: 8px 14px;
-  border-radius: 8px;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.5rem;
   border: none;
   background-color: #10b981;
   color: #ffffff;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
-  margin-top: 16px;
+  margin-top: 1rem;
 }
 
 .btn-add-collaborator {
   width: 100%;
-  padding: 8px 14px;
-  border-radius: 8px;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.5rem;
   border: none;
   background-color: #10b981;
   color: #ffffff;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
-  margin-top: 16px;
-}
-
-.btn-add-task:hover {
-  background-color: #059669;
+  margin-top: 1rem;
 }
 
+.btn-add-task:hover,
 .btn-add-collaborator:hover {
   background-color: #059669;
 }
 
 .tasks-count {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #6b7280;
 }
 
 .tasks-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0.75rem;
   flex: 1;
 }
 
@@ -220,7 +200,7 @@
   height: max-content;
   display: flex;
   flex-direction: row;
-  gap: 16px;
+  gap: 1rem;
   align-items: stretch;
 }
 
@@ -239,16 +219,6 @@
   flex: 1;
 }
 
-@media (max-width: 960px) {
-  .content {
-    width: 90vw;
-  }
-
-  .cards-row {
-    flex-direction: column;
-  }
-}
-
 .loading p,
 .error-state p,
 .empty-state p {
@@ -259,3 +229,19 @@
 .error-state p {
   color: #b91c1c;
 }
+
+@media (max-width: 60rem) {
+  .content {
+    width: 90vw;
+  }
+
+  .cards-row {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 37.5rem) {
+  .content {
+    max-width: 95%;
+  }
+}