feat(UI/role-picker): make buttons green and sticky to the top of the picker

UI/src/components/role-picker/RolePicker.sass

@@ -10,6 +10,8 @@
     align-items: flex-start
     flex-wrap: wrap
     flex-direction: row
+    margin-top: -5px;
+    padding-top: 5px;
 
   &__category
     // flex: 1 3 33%
@@ -23,9 +25,15 @@
     display: flex
     align-items: center
     justify-content: left
-
     color: var(--c-7)
 
+    &.sticky
+      position: sticky
+      top: 0px
+      background-color: var(--c-3)
+      z-index: 10
+
+
     svg
       transition: transform 0.05s ease-in-out
       transform: translateZ(0)
@@ -43,6 +51,7 @@
   &__actions
     opacity: 1
     transition: opacity 0.3s ease-in-out
+    padding: 10px
 
     button
       margin-left: 5px

UI/src/components/role-picker/index.js

@@ -116,7 +116,7 @@ class RolePicker extends Component {
       <Prompt when={this.rolesHaveChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." />
       { this.renderServerMessage(server) }
       <section>
-        <div className="role-picker__header">
+        <div className="role-picker__header sticky">
           <h3>Roles</h3>
           { server.getIn(['perms', 'canManageRoles']) === true
             ? <Link to={`/s/${server.get('id')}/edit`} uk-tooltip='' title='Edit Categories' uk-icon="icon: file-edit"></Link> 

UI/src/generic.sass

@@ -32,13 +32,17 @@
       opacity: 1
   
   &.primary
-    background-color: var(--c-5)
-    color: var(--c-9)
+    background-color: var(--c-green)
+    color: var(--c-dark)
   
   &.secondary
     background-color: var(--c-3)
     color: var(--c-7)
 
+  &.c5
+    background-color: var(--c-5)
+    color: var(--c-9)
+
   &.discord
     background-color: var(--c-discord)
     color: var(--c-white)