feat: added image sorting

1 files changed, 44 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss
new file mode 100644
index 000000000..e7413bf8e
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.scss
@@ -0,0 +1,44 @@
+#label-handler {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > div:first-child {
+        display: flex; // Puts the input and button on the same row
+        align-items: center; // Vertically centers items in the flex container
+
+        input {
+            color: black;
+        }
+
+        .IconButton {
+            margin-left: 8px; // Adds space between the input and the icon button
+            width: 19px;
+        }
+    }
+
+    > div:not(:first-of-type) {
+        display: flex;
+        flex-direction: column;
+        align-items: center; // Centers the content vertically in the flex container
+        width: 100%;
+
+        > div {
+            display: flex;
+            justify-content: space-between; // Puts the content and delete button on opposite ends
+            align-items: center;
+            width: 100%;
+            margin-top: 8px; // Adds space between label rows
+
+            p {
+                text-align: center; // Centers the text of the paragraph
+                flex-grow: 1; // Allows the paragraph to grow and occupy the available space
+            }
+
+            .IconButton {
+                // Styling for the delete button
+                margin-left: auto; // Pushes the button to the far right
+            }
+        }
+    }
+}