Added projects features

2026-02-26 11:59:16 +08:00
parent b1a79b90a1
commit 7b99f73a7e
11 changed files with 904 additions and 151 deletions
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -0,0 +1,153 @@
+.tableContainer {
+  height: calc(100vh - 170px);
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+.tableContainer table,
+.tableContainer table thead {
+  border-collapse: collapse;
+  border: none;
+  width: calc(100% -250px);
+}
+
+.tableContainer th {
+  background: #1c1d2b;
+  top: 0;
+  position: sticky;
+  text-wrap: nowrap;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.tableContainer th,
+.tableContainer td {
+  padding: 12px 0px;
+  padding-left: 24px;
+  text-align: start;
+  align-self: stretch;
+}
+.tableContainer thead tr {
+  border-bottom: 1px solid #212235;
+  background: #1c1d2b;
+}
+.tableContainer tbody td {
+  color: #eeeffd;
+  font-family: Inter;
+  overflow-wrap: anywhere;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.tableContainer tbody tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+  cursor: pointer;
+}
+.tableContainer tbody tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  background: rgba(129, 135, 255, 0.05);
+}
+
+.servicesHealth,
+.servicesStatus {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  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;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+.iconButton {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  background-color: rgba(255, 255, 255, 0);
+  outline: none;
+  border: 1px solid #959aff00;
+  cursor: pointer;
+  border-radius: 50%;
+}
+.iconButton:hover {
+  border: 1px solid #959aff;
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+}
+.iconButton:hover path {
+  stroke: white;
+}