Feature: Implement the new upload ontology form

app/assets/stylesheets/application.css.scss.erb

@@ -44,11 +44,25 @@
 @import "register";
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";
+.ts-wrapper.single .ts-control:after {
+    border-color: #343a40 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    content: " ";
+    display: block;
+    height: 0;
+    margin-top: -3px;
+    position: absolute;
+    right: calc(0.75rem + 5px);
+    top: 50%;
+    width: 0;
+}
+@import "tom-select/dist/scss/tom-select";
 @import "feedback";
 @import "login";
 @import "components/index";
 @import "account";
-
+@import "upload_ontology";
 @import "nav_bar";
 
 /* Bootstrap and Font Awesome */

app/assets/stylesheets/components/input_field.scss

@@ -27,4 +27,25 @@
     font-size: 12px;
     color: #666666;
     margin-top: 5px;
+}
+
+.ts-control{
+    padding: 12px;
+    border-radius: 5px;
+    border-color: #BDBDBD;
+}
+.ts-dropdown-content .option{
+    padding: 12px;
+}
+.ts-dropdown .active{
+    background-color: #f8f8f8;
+
+}
+.ts-dropdown{
+    margin: 0;
+    color: #666666;
+}
+.chosen-container{
+    padding: 0;
+    border-radius: 5px;
 }

app/assets/stylesheets/components/nested_form.scss

@@ -8,7 +8,7 @@
 
 
 .nested-form-input-container  input:focus{
-  border: 1px solid #31B404 !important;
+  border: 1px solid var(--primary-color) !important;
 }
 
 .nested-form-input-container .delete{

app/assets/stylesheets/components/primary_button.scss

@@ -0,0 +1,101 @@
+.button-container{
+    width: 100%;
+}
+.primary-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: white;
+    height: 60px;
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: 9px;
+    transition: background-color ease 0.3s;
+}
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+
+.animation-container{
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: var(--hover-color);
+    border: none;
+    border-radius: 9px;
+    justify-content: center;
+    align-items: center;
+    display: none;
+
+}
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    margin-top: 50px;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.7);
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(24px, 0);
+    }
+}