Small style adjustments to capability modal.

src/admin/components/other/capability-edition-modal.vue

@@ -39,10 +39,12 @@
             <template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
                 <b-field :addons="false">
                     <label class="label is-inline-block">
+                        <i class="tainacan-icon tainacan-icon-20px tainacan-icon-alertcircle"/>
                         {{ $i18n.get('label_inherited_roles') }}
                         <help-button
                                 :title="$i18n.get('label_inherited_roles')"
-                                :message="$i18n.get('info_inherited_roles')"/>
+                                :message="$i18n.get('info_inherited_roles')"
+                                forced-color="yellow2"/>
                     </label>
                     <br>
                     <div class="roles-list">
@@ -51,6 +53,7 @@
                                 v-for="(role, roleIndex) of existingRoles"
                                 :key="roleIndex"
                                 size="is-small"
+                                class="has-text-yellow2"
                                 :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
                                 name="roles_inherited"
                                 disabled>
@@ -129,23 +132,31 @@ export default {
         min-height: 120px;
         vertical-align: top;
         display: flex;
-        align-items: flex-end;
+        padding-top: 24px;
 
         &>div {
-            padding: 12px 24px;
-
+            padding: 24px;
+            &:first-of-type {
+                flex-grow: 3;
+                flex-shrink: 1;
+            }    
             &:last-of-type {
+                flex-grow: 1;
                 background-color: $yellow1;
                 color: $yellow2;
 
-                .label ,
+                .label,
                 .control-label,
                 .check {
-                    color: $yellow2;
+                    color: $yellow2 !important;
+                }
+                .roles-list {
+                    column-count: 1;
                 }
             }
         }
         .roles-list {
+            height: 100%;
             column-count: 2;
             break-inside: avoid;
 

src/admin/components/other/help-button.vue

@@ -1,6 +1,8 @@
 <template>
     <span class="help-wrapper">
-        <a class="help-button has-text-secondary">
+        <a 
+                :class="forcedColor ? 'has-text-' + forcedColor : 'has-text-secondary'"
+                class="help-button">
             <span class="icon is-small">
                 <i class="tainacan-icon tainacan-icon-help" />
             </span>
@@ -21,7 +23,8 @@ export default {
     name: 'HelpButton',
     props: {
         title: '',
-        message: ''
+        message: '',
+        forcedColor: ''
     }
 }
 </script>
@@ -53,7 +56,7 @@ export default {
         border: none;
         display: block;
         border-radius: 5px;
-        min-width: 250px;
+        min-width: 280px;
         max-width: 100%;
         transition: margin-bottom 0.2s ease, opacity 0.3s ease;
         position: absolute;