update supplementary-role

src/app/pieces/role/role.component.html

@@ -118,28 +118,34 @@
             <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
         </div>
 
-        
-        <div class="piece-form-supplementary">
         <div class="piece-form-title">Rôle supplémentaire</div>
+        <div class="piece-form-supplementary">
+            <div class="piece-form-supplementary-form">
                 <div>
-                <div class="piece-form-supplementary-name">
+                    <div class="piece-form-supplementary-form-name">
                         <label for="name">Nom</label>
                         <input name="name" type="text"/>
                     </div>
-                <div class="piece-form-supplementary-textarea">
+                    <div class="piece-form-supplementary-form-textarea">
                         <label for="objectives">Objectifs</label>
                         <textarea name="objectives"></textarea>
                     </div>
-                <div class="piece-form-supplementary-textarea">
+                    <div class="piece-form-supplementary-form-textarea">
                         <label for="skills">Compétences</label>
                         <textarea name="skills"></textarea>
                     </div>
-                <div class="piece-form-supplementary-textarea">
+                    <div class="piece-form-supplementary-form-textarea">
                         <label for="rules">Règles</label>
-                    <textarea nam="rules"></textarea>
+                        <textarea name="rules"></textarea>
                     </div>
+                    <div class="piece-form-supplementary-form-color">
+                        <label for="color">Couleur</label>
+                        <input name="color" type="color"/>
                     </div>
-            <button mat-button><mat-icon fontIcon="add"></mat-icon></button>
                 </div>
             </div>
+        </div>
+        <button class="piece-form-supplementary-form-add" mat-button><mat-icon fontIcon="add"></mat-icon></button>
+
+    </div>
 </div>

src/app/pieces/role/role.component.scss

@@ -3,7 +3,7 @@
 
     width: 400px;
     position: relative;
-    background: linear-gradient(303deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 25%, #9ad5ec 25%, #9ad5ec 100%);
+    background-color: #9ad5ec;
 
     &-menu {
         position: absolute;
@@ -325,14 +325,22 @@
         }
 
         &-supplementary {
-            margin-bottom: 25px;
+            padding-bottom: 10px;
+            background: linear-gradient(304deg, rgb(2, 0, 36) 0%, rgb(2, 0, 36) 50%, #9ad5ec 50%, #9ad5ec 100%);
+            width: 398px;
+            position: relative;
+            left: -34px;
+
+            &-form {
+                width: 350px;
+                margin-left: 33px;
+                margin-right: 10px;
 
                 &-name {
                     margin-top: 10px;
                     display: flex;
                     flex-direction: row;
                     justify-content: space-between;
-
                 }
 
                 &-textarea {
@@ -344,15 +352,27 @@
                     }
                 }
 
-            button {
+                &-color {
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 10px;
+
+                    label {
+                        margin-right: 5px;
+                        color: white;
+                    }
+                }
+
+                &-add {
                     position: relative;
                     width: 50px;
                     height: 50px;
                     background-color: white;
                     left: 100%;
                     transform: translateX(-100%);
-                margin-top: 5px;
+                    margin-top: 10px;
                     border-radius: 10px;
+                    margin-bottom: 10px;
 
                     mat-icon {
                         transform: scale(1.3);
@@ -360,6 +380,7 @@
                 }
             }
         }
+    }
 }
 
 .piece::after {