TODOs insertion

src/main/resources/static/css/common.css

@@ -1,94 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
-
-body {
-    font-family: 'Nunito', sans-serif;
-    color: #2e3133;
-    font-weight: normal;
-    margin: 0px;
-}
-
-textarea:focus {
-    box-shadow: 0 0 5px rgba(81, 203, 238);
-    outline: none;
-}
-
-.tooltip{
-    border: 2px solid rgba(155, 165, 160, 0.507);
-    border-radius: 15px;
-    padding: 20px;
-}
-
-a, a:visited,  a:active {
-    color: rgb(47, 125, 146);
-}
-
-a:hover{
-    filter: brightness(120%);
-}
-
-.field {
-    border: 2px solid rgba(56, 59, 58, 0.507);
-    border-radius: 5px;
-}
-
-button {
-    font-size: 20px;
-    text-align: center;
-    cursor: pointer;
-    border: none;
-    text-decoration: none;
-}
-
-input {
-    border-radius: 5px;
-    border: 1px solid rgba(155, 165, 160, 0.507);
-}
-
-button:hover{
-    filter: brightness(110%);
-    /* TODO Insert animation here! */
-}
-
-.tooltip h1{
-    margin: 0px;
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.tooltip button{
-    background-color: rgba(155, 165, 160, 0.507);
-    color: rgb(44, 44, 44);
-    border-bottom: 2px solid rgba(99, 99, 99, 0.507);
-    padding: 14px;
-}
-
-.btn-action {
-    background-color: #3bc4f1;
-    color: white;
-    padding: 15px 32px;
-    display: inline-block;
-}
-
-.resizeVertical {
-    resize: vertical;
-}
-
-.resizeNone {
-    resize: none;
-}
-
-table{
-    border: none;
-}
-
-.collapsibleData {
-    padding: 0 18px;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
-    background-color: #f1f1f1;
-}
-
-textField-key{
-    background-color: #f0f0f0;
-}

src/main/resources/static/css/main.css

@@ -84,6 +84,8 @@
     margin-top: 50px;
 }
 
+/*TODO add inactive state of the button*/
+
 .functionBarButton {
     width: 200px;
     float: left;
@@ -191,6 +193,7 @@
     padding: 5px;
 }
 
+/*TODO gray out key value in table*/
 .tableField {
     height: 20px;
     padding: 5px;