Server container

assets/dashboard.css

@@ -8,15 +8,20 @@ body {
   margin-top: 20px;
   display: flex;
   gap: 20px;
+  height: calc(100vh - 20px);
 }
 
 .dashboard-container {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 20px;
   flex: 1;
   width: 100%;
   padding-right: 25px;
+  overflow-y: auto;
+  height: 100%;
+  padding-bottom: 20px;
 }
 
 .summary-container {
@@ -50,22 +55,30 @@ body {
   margin-left: auto;
 }
 
-#online {
+.online {
   color: #16a34a;
 }
 
-#issues {
+.issues {
   color: rgb(234, 71, 12);
 }
 
-#cpu {
+.cpu {
   color: rgb(37, 99, 235);
 }
 
-#ram {
+.ram {
   color: rgb(147, 51, 234);
 }
 
+.storage {
+  color: rgb(234, 88, 12);
+}
+
+.network {
+  color: rgb(22 163 74);
+}
+
 .summary-card p {
   color: black;
 }
@@ -178,12 +191,12 @@ body {
   gap: 25px;
 }
 
-.server-container div {
+.server-container .server {
   box-sizing: border-box;
   background-color: #fff;
   border-radius: 10px;
   width: 100%;
-  height: 406;
+  height: 100%;
   padding: 30px;
 }
 .dashboard-container h3 {
@@ -223,7 +236,7 @@ body {
   display: block;
   width: 100%;
   height: 10px;
-  background-color: #e0e0e0;
+  background-color: rgb(226, 232, 240);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -235,3 +248,122 @@ body {
   transition: width 0.3s ease;
   border-radius: 10px;
 }
+
+.server-heading-inner {
+  display: flex;
+  gap: 10px;
+}
+
+.server-icon {
+  padding: 0.5rem;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  background-color: rgb(219 234 254);
+  color: rgb(37 99 235);
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.server-heading-info {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.server-heading-info div div {
+  display: flex;
+  gap: 3px;
+  background-color: rgb(220, 252, 231);
+  color: rgb(22 101 52);
+  width: max-content;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-radius: 10px;
+}
+
+.server-heading-info div div svg {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.server-heading-info div div p {
+  margin-top: auto;
+  margin-bottom: auto;
+  font-size: 14px;
+}
+
+.server-heading-info div {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.server-heading-info div p {
+  margin: 0;
+  font-size: 14.5px;
+  margin-top: auto;
+  margin-bottom: auto;
+  color: rgb(100 116 139);
+}
+
+.server-heading {
+  display: flex;
+  justify-content: space-between;
+}
+
+.server-heading button {
+  margin: 0;
+  border: 0;
+  height: max-content;
+  width: max-content;
+  padding: 8px;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 7px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.server-heading button:hover {
+  background-color: #f1f5f9;
+}
+
+.server-monitor h2 {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 20px;
+  display: flex;
+  gap: 7px;
+}
+
+.server-monitor h2 svg {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.server-monitor div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.server-monitor div p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  display: flex;
+  gap: 6px;
+}
+
+.low {
+  color: rgb(34, 197, 94);
+}
+
+.medium {
+  color: rgb(234, 179, 8);
+}
+
+.high {
+  color: rgb(239, 68, 68);
+}