Add components

frontend/src/app/components/select/styles.module.css

@@ -0,0 +1,83 @@
+.select {
+  display: flex;
+  padding: 12px;
+  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  background-color: transparent;
+  position: relative;
+}
+.label {
+  color: #858699;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.selected {
+  color: white;
+}
+.optionsContainer {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  border-radius: 6px;
+  border: 1px solid #353a4c;
+  background: #282b39;
+  animation-name: showDD;
+  animation-duration: 200ms;
+  z-index: 20;
+}
+
+@keyframes showDD {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+.optionsContainer > div {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+}
+.optionsContainer p {
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.optionsContainer > div:hover,
+.optionsContainer > div:hover p {
+  background: #3c4159;
+  color: white;
+}
+.optionsContainer {
+  top: 0%;
+  margin-top: 6px;
+}
+
+/* When flipping upward */
+.dropUp {
+  bottom: 0%;
+  top: auto;
+  margin-bottom: 6px;
+}