From 3b0d249e41cd6e6c33914211469ca0feff39cfc4 Mon Sep 17 00:00:00 2001
From: Katie Thornhill <katie.thornhill@citrix.com>
Date: Mon, 18 Nov 2019 20:44:04 -0500
Subject: [PATCH] feat(UI/role-picker): make buttons green and sticky to the
 top of the picker

---
 UI/src/components/role-picker/RolePicker.sass | 11 ++++++++++-
 UI/src/components/role-picker/index.js        |  2 +-
 UI/src/generic.sass                           |  8 ++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/UI/src/components/role-picker/RolePicker.sass b/UI/src/components/role-picker/RolePicker.sass
index 7bf7191..b7d43ff 100644
--- a/UI/src/components/role-picker/RolePicker.sass
+++ b/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
diff --git a/UI/src/components/role-picker/index.js b/UI/src/components/role-picker/index.js
index ab009ff..3e105d4 100644
--- a/UI/src/components/role-picker/index.js
+++ b/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> 
diff --git a/UI/src/generic.sass b/UI/src/generic.sass
index b6f23a3..26557ae 100644
--- a/UI/src/generic.sass
+++ b/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)