refactor: refactored the add tab design

public/styles/pages/editor/add.scss

@@ -1,9 +1,8 @@
 @use "../../utils/utils";
 @import "../../theme.scss";
 
-#add-node-container > #create-input > button {
-  flex-grow: 1;
-
+// Stuff related to the footer for adding the inputs.
+.node-panel__create-input-button {
   background: $primary;
   color: white;
 
@@ -23,151 +22,143 @@
   }
 }
 
-#add-node-container #node-search-container {
+// The actual node data
+.nodes {
+  display: flex;
+  flex-direction: column;
+}
+
+.node {
   display: flex;
   align-items: center;
 
-  margin: 1rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+
+  transition: filter $transition-time;
+
+  &:hover {
+    filter: brightness(1.6);
+  }
 }
 
-#add-node-container #node-search-container #node-search-input {
-  @include utils.base-input;
+.node__preview {
+  background: red;
+}
+
+.node__data {
+  display: block;
+
   flex-grow: 1;
+  height: 100%;
 
-  margin: 0.6rem;
+  margin-left: 1rem;
   margin-right: 1rem;
-  margin-left: 0;
-  width: 100%;
+}
 
-  font-size: 1.3rem;
+.node__buttons {
+  display: flex;
+  flex-direction: column;
 
-  color: $on-primary;
+  height: 100%;
+  margin-left: 1rem;
+  justify-content: space-evenly;
 }
 
-#add-node-container {
+.node__text {
   display: flex;
+  justify-content: space-evenly;
+
+  flex-grow: 1;
   flex-direction: column;
 
-  height: 100vh;
+  text-overflow: ellipsis;
 
-  #title {
-    border: none;
+  & > * {
+    cursor: default;
+    user-select: none;
   }
 }
 
-#add-node-container > #nodes {
-  $border: 4px solid $primary-bright;
-
-  border-bottom: $border;
-  border-top: $border;
+.node__type {
+  font-size: 0.85rem;
+}
 
+.node__data-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+}
 
-  margin-bottom: 1rem;
+.node__data-header .material-icons {
+  margin-left: 0.5rem;
+  font-size: 1.3rem;
 
-  height: 100%;
-  overflow-y: auto;
-
-  .node {
-    display: flex;
-
-    background: $primary-dark;
-
-    padding: 0.5rem;
-    margin-bottom: 1rem;
-
-    transition: filter $transition-time;
-
-    &:hover {
-      filter: brightness(1.6);
-    }
-
-    #node-data {
-      flex-grow: 1;
-      height: 100%;
-      margin: 1rem;
-      margin-top: 0;
-      margin-bottom: 0;
-
-      #node-buttons {
-        display: flex;
-        flex-direction: column;
-
-        height: 100%;
-        margin-left: 1rem;
-        justify-content: space-evenly;
-      }
-
-      #node-text {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-        text-overflow: ellipsis;
-
-        & > * {
-          cursor: default;
-          user-select: none;
-        }
-
-        #node-type {
-          font-size: 0.85rem;
-        }
-      }
-    }
+  cursor: pointer;
+  filter: none;
+
+  color: rgb(175, 173, 173);
+  transition: filter $transition-time, scale $transition-time;
+
+  &:hover {
+    filter: brightness(1.7);
+    transform: scale(1.2);
   }
 }
 
-#nodes #node-text > #curry-node {
+.node__name {
+  font-size: 1.4rem;
+  flex-grow: 1;
+
+  text-transform: capitalize;
+}
+
+// The currying stuff
+.node__currying {
   display: flex;
   align-items: center;
 
   margin-top: 0.5rem;
   font-size: 0.85rem;
 
-  input {
-    flex-grow: 1;
-    width: 100%;
+  width: 100%;
+}
 
-    border: none;
-    outline: none;
+.node__currying-input {
+  flex-grow: 1;
+  width: 100%;
 
-    background: transparent;
-    color: $on-primary;
+  border: none;
+  outline: none;
 
-    margin-left: 1rem;
-    border-bottom: 3px solid $on-dark-pale;
-  }
+  background: transparent;
+  color: $on-primary;
 
-  width: 100%;
+  margin-left: 1rem;
+  border-bottom: 3px solid $on-dark-pale;
 }
 
-#add-node-container #node-header {
+// Stuff related to the search input
+.node-search {
   display: flex;
   align-items: center;
 
-  #node-name {
-    font-size: 1.4rem;
-    flex-grow: 1;
+  padding: 1rem;
+  padding-top: 0;
+  padding-bottom: 0;
 
-    text-transform: capitalize;
-  }
+  background: $very-dark;
+}
 
-  .material-icons {
-    margin-left: 0.5rem;
-    font-size: 1.3rem;
+.node-search__input {
+  @include utils.base-input;
+  flex-grow: 1;
 
-    cursor: pointer;
-    filter: none;
+  margin: 0.6rem;
+  margin-right: 1rem;
+  margin-left: 0;
+  width: 100%;
 
-    color: rgb(175, 173, 173);
-    transition: filter $transition-time, scale $transition-time;
+  font-size: 1.3rem;
 
-    &:hover {
-      filter: brightness(1.7);
-      transform: scale(1.2);
-    }
-  }
+  color: $on-primary;
 }

public/styles/pages/editor/panel.scss

@@ -4,7 +4,8 @@
   height: 100vh;
   max-height: 100vh;
 
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   color: $on-dark;
   background: $primary-dark;
@@ -13,6 +14,21 @@
   visibility: hidden;
 }
 
+.panel__content {
+  height: 100%;
+  flex-grow: 1;
+
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.panel__footer {
+  display: block;
+}
+
 .panel.panel--open {
   width: 30rem;
   visibility: visible;
@@ -21,12 +37,20 @@
 
 .panel__header {
   display: flex;
+
+  flex-direction: column;
+}
+
+.panel__title-container {
+  display: flex;
+
   justify-content: flex-start;
   align-items: center;
 }
 
 .panel__title {
   padding: 1rem;
+  margin: 1rem;
   font-size: 2rem;
   flex-grow: 1;
 }