done: basic main table UI

PP-binding/frontend/web/style/index.css

@@ -3,8 +3,14 @@
     padding: 0;
 }
 
+:root {
+    --color-green: #80c671;
+    --color-red: #d56161;
+}
+
 body {
-    padding: 10px 40px;
+    padding: 10px 40px 10px 40px;
+    background-color: rgba(236, 236, 236, 0.39);
 }
 
 .title-container {
@@ -30,10 +36,10 @@ body {
 .tools-container .add-item-button {
     width: 60px;
     height: 40px;
-    background-color: #80c671;
+    background-color: var(--color-green);
     border: none;
     font-size: 18px;
-    font-weight: bold;
+    font-weight: 800;
     color: white;
     border-radius: 5px;
 }
@@ -53,7 +59,7 @@ body {
 }
 
 .tools-container input:focus {
-    outline: 2px solid #80c671;
+    outline: 2px solid var(--color-green);
     border: 1px solid transparent;
     border-radius: 5px;
 }
@@ -69,12 +75,88 @@ body {
 }
 
 .table-header {
+    height: 50px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    background-color: var(--color-green);
 }
 
 .table-header div {
     width: 100%;
     text-align: center;
     font-size: 18px;
-}
+    font-weight: bold;
+    color: white;
+}
+
+.table-outer-scrollable-container {
+    height: 700px;
+    overflow-y: scroll;
+    scrollbar-color: var(--color-green) rgba(236, 236, 236, 0.89);
+}
+
+.table-container div {
+    border-radius: 5px;
+}
+
+.table-items-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 3px;
+    margin-bottom: 3px;
+}
+
+.table-items-container .more-platform-container {
+    display: flex;
+    justify-content: start;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    white-space: nowrap;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-green) rgba(236, 236, 236, 0.89);
+}
+
+.table-items-container .more-platform-container div {
+    white-space: nowrap;
+}
+
+.table-items-container div {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.table-items-container .change-item-button {
+    width: 50px;
+    height: 30px;
+    border: none;
+    background-color: var(--color-green);
+    color: white;
+    border-radius: 5px;
+}
+
+.table-items-container .change-item-button:hover {
+    cursor: pointer;
+}
+
+.table-items-container .white-space {
+    width: 10px;
+}
+
+.table-items-container .delete-item-button {
+    width: 50px;
+    height: 30px;
+    border: none;
+    background-color: var(--color-red);
+    color: white;
+    border-radius: 5px;
+}
+
+.table-items-container .delete-item-button {
+    cursor: pointer;
+}