ui(job-offer-create): #issue89 Job-offer-create

Add and style datafields.
Add a custom widget.
Add styles to sib-autocompletion.
Add back button.
fix bug in members and project-profile pages (displaying userinfos and members of a project).

src/styles/form.scss

@@ -1,4 +1,9 @@
 .frame-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  min-height: 100%;
   padding: 4em 5em 6em;
   @extend %frame;
   
@@ -8,6 +13,7 @@
   }
 }
 
+#job-offer-create,
 #project-create,
 #project-edit {
   font-size: 17px;
@@ -19,11 +25,16 @@
     text-align: center;
   }
 
-  p {
+  p.form-goal {
     margin-bottom: 4em;
     text-align: center;
   }
 
+  p[name$='-text'] {
+    font-size: 15px;
+    margin-bottom: 2em;
+  }
+
   div[name^='block-'] {
     display: flex;
     
@@ -32,6 +43,7 @@
     }
   }
   
+  sib-form-auto-completion,
   sib-form-checkbox,
   sib-form-label-text,
   sib-form-multiple-dropdown,
@@ -57,7 +69,6 @@
 
     input,
     textarea {
-      margin-bottom: 2em;
       padding: 1em;
     }
 
@@ -67,6 +78,40 @@
     }
   }
 
+  sib-form-auto-completion {
+
+    label {
+      color: $color-dark-lava;
+    }
+
+    div.choices__inner {
+      background-color: inherit;
+      border: none;
+      display: flex;
+      flex-direction: column-reverse;
+      padding-left: 0;
+
+      div.choices__list {
+        margin-top: 1em;
+
+        div.choices__item {
+          @extend %skill;
+
+          button.choices__button {
+            border-left: 1px solid $color-selective-yellow;
+            opacity: 1;
+            padding-left: 0;
+          }
+        }
+      }
+
+      input[type='text'].choices__input {
+        max-width: 16em;
+        min-width: 16em;
+      }
+    }
+  }
+
   sib-form-checkbox {
     flex-direction: row;
 
@@ -132,6 +177,15 @@
 
   input[type='submit'] {
     margin-top: 3.5em;
-    @extend %button-form;
+    @extend %submit-form;
+  }
+}
+
+#project-create,
+#project-edit {
+
+  input,
+  textarea {
+    margin-bottom: 2em;
   }
 }

src/styles/main.scss

@@ -201,9 +201,12 @@ sib-link {
 }
 
 sib-link.back {
+  color: $color-purple-dark;
   display: block;
-  @include icon('arrow-left');
-  @extend h1;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: right;
+  @include icon('arrow-left-circle');
 }
 
 .containerH {
@@ -276,13 +279,7 @@ sib-display-lookuplist {
   }
 
   li[name*='skills'] {
-    padding: 0.3em 1.2em;
-    border: 1px solid;
-    border-radius: 2em;
-    margin: 0.25em;
-    background-color: $color-selective-yellow;
-    color: $color-white;
-    font-weight: bold;
+    @extend %skill;
   }
 }
 

src/styles/variables.scss

@@ -29,19 +29,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   border: none;
   border-radius: 100em;
   font-weight: normal;
-}
-
-%button-form {
-  background-color: $color-purple-dark;
-  color: $color-white;
-  float: right;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
-}
+}  
 
 %content-padding {
   padding: 2.6em;
@@ -50,6 +38,21 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %frame {
   @extend %shadow;
   background-color: $color-white;
+}  
+
+%shadow {
+  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
+
+%skill {
+  background-color: $color-selective-yellow;
+  border: 1px solid $color-selective-yellow;
+  border-radius: 2em;
+  color: $color-white;
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0.25em;
+  padding: 0.3em 1.2em;
 }
 
 %status-open {
@@ -62,6 +65,14 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   padding: 0.5em 1em;
 }
 
+%submit-form {
+  background-color: $color-purple-dark;
+  color: $color-white;
+  float: right;
+  font-weight: bold;
+  text-transform: uppercase;
+} 
+
 $breakpoints: (
   phone: 480px,
   tablet: 768px,