From da89550cee4b6b46b005a3f9652b3d6e6a43c5c7 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Tue, 21 Dec 2021 16:54:17 +0100
Subject: [PATCH 1/3] fix: action buttons

---
 .../pages/UserManagement/UserManagement.js    | 45 ++++++++++---------
 .../UserManagement/UserManagement.styles.js   |  8 ++--
 .../src/styling/icons/button/key/white.svg    | 11 +++++
 .../src/styling/icons/button/key/zodiac.svg   | 11 +++++
 .../src/styling/icons/button/lock/white.svg   | 11 +++++
 .../src/styling/icons/button/lock/zodiac.svg  | 11 +++++
 .../styling/icons/button/user-role/white.svg  | 10 +++++
 .../styling/icons/button/user-role/zodiac.svg | 10 +++++
 8 files changed, 92 insertions(+), 25 deletions(-)
 create mode 100644 new-lamassu-admin/src/styling/icons/button/key/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/key/zodiac.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/lock/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/lock/zodiac.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/user-role/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/user-role/zodiac.svg

diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
index a79f3270..126dd285 100644
--- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
+++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
@@ -6,10 +6,13 @@ import * as R from 'ramda'
 import React, { useReducer, useState, useContext } from 'react'
 
 import AppContext from 'src/AppContext'
-import { Link } from 'src/components/buttons'
+import { ActionButton, Link } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
+import { ReactComponent as KeyIcon } from 'src/styling/icons/button/key/zodiac.svg'
+import { ReactComponent as LockIcon } from 'src/styling/icons/button/lock/zodiac.svg'
+import { ReactComponent as UserRoleIcon } from 'src/styling/icons/button/user-role/zodiac.svg'
 
 import styles from './UserManagement.styles'
 import ChangeRoleModal from './modals/ChangeRoleModal'
@@ -153,35 +156,34 @@ const Users = () => {
       size: 'sm',
       view: u => {
         return (
-          <>
-            <Chip
-              size="small"
-              label="Reset password"
-              className={classes.actionChip}
+          <div className={classes.actionButtonWrapper}>
+            <ActionButton
+              Icon={KeyIcon}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 dispatch({
                   type: 'open',
                   payload: 'showResetPasswordModal'
                 })
-              }}
-            />
-            <Chip
-              size="small"
-              label="Reset 2FA"
-              className={classes.actionChip}
+              }}>
+              Reset password
+            </ActionButton>
+            <ActionButton
+              Icon={LockIcon}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 dispatch({
                   type: 'open',
                   payload: 'showReset2FAModal'
                 })
-              }}
-            />
-            <Chip
-              size="small"
-              label="Add FIDO"
-              className={classes.actionChip}
+              }}>
+              Reset 2FA
+            </ActionButton>
+            <ActionButton
+              Icon={UserRoleIcon}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 generateAttestationOptions({
@@ -189,9 +191,10 @@ const Users = () => {
                     userID: u.id
                   }
                 })
-              }}
-            />
-          </>
+              }}>
+              Add FIDO
+            </ActionButton>
+          </div>
         )
       }
     },
diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js
index 9366e555..6859dd97 100644
--- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js
+++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js
@@ -52,10 +52,6 @@ const styles = {
     fontFamily: fontPrimary,
     marginLeft: 10
   },
-  actionChip: {
-    backgroundColor: subheaderColor,
-    marginRight: 15
-  },
   info: {
     fontFamily: fontSecondary,
     textAlign: 'justify'
@@ -118,6 +114,10 @@ const styles = {
   },
   roleSwitch: {
     marginLeft: 15
+  },
+  actionButtonWrapper: {
+    display: 'flex',
+    gap: 12
   }
 }
 
diff --git a/new-lamassu-admin/src/styling/icons/button/key/white.svg b/new-lamassu-admin/src/styling/icons/button/key/white.svg
new file mode 100644
index 00000000..ec28f490
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/key/white.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/key/white</title>
+    <g id="icon/button/key/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
+            <circle id="Oval" cx="2.75" cy="8.25" r="2.75"></circle>
+            <line x1="5.04166667" y1="5.95833333" x2="11" y2="0" id="Path-13" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="8.25" y1="3.66666667" x2="10.5416667" y2="1.375" id="Path-13-Copy" stroke-width="2" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/key/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/key/zodiac.svg
new file mode 100644
index 00000000..cd9d1645
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/key/zodiac.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/key/zodiac</title>
+    <g id="icon/button/key/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.500000, 0.500000)" stroke="#1B2559">
+            <circle id="Oval" cx="2.75" cy="8.25" r="2.75"></circle>
+            <line x1="5.04166667" y1="5.95833333" x2="11" y2="0" id="Path-13" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="8.25" y1="3.66666667" x2="10.5416667" y2="1.375" id="Path-13-Copy" stroke-width="2" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/lock/white.svg b/new-lamassu-admin/src/styling/icons/button/lock/white.svg
new file mode 100644
index 00000000..53b5e362
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/lock/white.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/lock/white</title>
+    <g id="icon/button/lock/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lock-Icon-White" transform="translate(0.500000, 0.500000)">
+            <path d="M7.98058644,2.48058644 C7.98058644,1.11059638 6.86999006,0 5.5,0 C4.13000994,0 3.01941356,1.11059638 3.01941356,2.48058644 C3.01941356,3.39391315 3.01941356,4.09482878 3.01941356,4.58333333 L7.98058644,4.58333333 C7.98058644,4.09482878 7.98058644,3.39391315 7.98058644,2.48058644 Z" id="Lock" stroke="#FFFFFF" stroke-linejoin="round"></path>
+            <rect id="Body" stroke="#FFFFFF" stroke-linejoin="round" x="0" y="4.58333333" width="11" height="6.41666667"></rect>
+            <circle id="Key-Hole" fill="#FFFFFF" cx="5.5" cy="7.33333333" r="1"></circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/lock/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/lock/zodiac.svg
new file mode 100644
index 00000000..fd064efc
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/lock/zodiac.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/lock/zodiac</title>
+    <g id="icon/button/lock/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lock-Icon-Zodiac" transform="translate(0.500000, 0.500000)">
+            <path d="M7.98058644,2.48058644 C7.98058644,1.11059638 6.86999006,0 5.5,0 C4.13000994,0 3.01941356,1.11059638 3.01941356,2.48058644 C3.01941356,3.39391315 3.01941356,4.09482878 3.01941356,4.58333333 L7.98058644,4.58333333 C7.98058644,4.09482878 7.98058644,3.39391315 7.98058644,2.48058644 Z" id="Lock" stroke="#1B2559" stroke-linejoin="round"></path>
+            <rect id="Body" stroke="#1B2559" stroke-linejoin="round" x="0" y="4.58333333" width="11" height="6.41666667"></rect>
+            <circle id="Key-Hole" fill="#1B2559" cx="5.5" cy="7.33333333" r="1"></circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/user-role/white.svg b/new-lamassu-admin/src/styling/icons/button/user-role/white.svg
new file mode 100644
index 00000000..13e5a9a5
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/user-role/white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/user-role/white</title>
+    <g id="icon/button/user-role/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="User-Role-Icon-White" transform="translate(2.500000, 0.500000)" stroke="#FFFFFF">
+            <path d="M5.50008791,6.84274776 L5.5,11 L3.66666667,9.35927189 L1.83333333,11 L1.83223109,6.84216075 C2.37179795,7.15453375 2.99835187,7.33333333 3.66666667,7.33333333 C4.33456272,7.33333333 4.96075021,7.15475774 5.50008791,6.84274776 Z" id="Bottom"></path>
+            <circle id="Top" cx="3.66666667" cy="3.66666667" r="3.66666667"></circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/user-role/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/user-role/zodiac.svg
new file mode 100644
index 00000000..5a05f3a5
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/user-role/zodiac.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/user-role/zodiac</title>
+    <g id="icon/button/user-role/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="User-Role-Icon-Zodiac" transform="translate(2.500000, 0.500000)" stroke="#1B2559">
+            <path d="M5.50008791,6.84274776 L5.5,11 L3.66666667,9.35927189 L1.83333333,11 L1.83223109,6.84216075 C2.37179795,7.15453375 2.99835187,7.33333333 3.66666667,7.33333333 C4.33456272,7.33333333 4.96075021,7.15475774 5.50008791,6.84274776 Z" id="Bottom"></path>
+            <circle id="Top" cx="3.66666667" cy="3.66666667" r="3.66666667"></circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From b441a0a33edf0d76caa649734bcf5244998f92f2 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Tue, 21 Dec 2021 17:09:50 +0100
Subject: [PATCH 2/3] fix: align column

---
 .../src/pages/SessionManagement/SessionManagement.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
index d40c5e0a..13d1fe0c 100644
--- a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
+++ b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
@@ -61,7 +61,7 @@ const SessionManagement = () => {
     {
       header: 'Last known use',
       width: 305,
-      textAlign: 'center',
+      textAlign: 'left',
       size: 'sm',
       view: s => {
         if (R.isNil(s.sess.ua)) return 'No Record'
@@ -72,7 +72,7 @@ const SessionManagement = () => {
     {
       header: 'Last known location',
       width: 250,
-      textAlign: 'center',
+      textAlign: 'left',
       size: 'sm',
       view: s => {
         return isLocalhost(s.sess.ipAddress) ? 'This device' : s.sess.ipAddress

From c44e07525a3ca517387704614d827db93e23c7ad Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Tue, 21 Dec 2021 17:25:16 +0100
Subject: [PATCH 3/3] fix: add inverse icons

---
 .../src/pages/UserManagement/UserManagement.js              | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
index 126dd285..8b069d3a 100644
--- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
+++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.js
@@ -10,8 +10,11 @@ import { ActionButton, Link } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
+import { ReactComponent as WhiteKeyIcon } from 'src/styling/icons/button/key/white.svg'
 import { ReactComponent as KeyIcon } from 'src/styling/icons/button/key/zodiac.svg'
+import { ReactComponent as WhiteLockIcon } from 'src/styling/icons/button/lock/white.svg'
 import { ReactComponent as LockIcon } from 'src/styling/icons/button/lock/zodiac.svg'
+import { ReactComponent as WhiteUserRoleIcon } from 'src/styling/icons/button/user-role/white.svg'
 import { ReactComponent as UserRoleIcon } from 'src/styling/icons/button/user-role/zodiac.svg'
 
 import styles from './UserManagement.styles'
@@ -159,6 +162,7 @@ const Users = () => {
           <div className={classes.actionButtonWrapper}>
             <ActionButton
               Icon={KeyIcon}
+              InverseIcon={WhiteKeyIcon}
               color="primary"
               onClick={() => {
                 setUserInfo(u)
@@ -171,6 +175,7 @@ const Users = () => {
             </ActionButton>
             <ActionButton
               Icon={LockIcon}
+              InverseIcon={WhiteLockIcon}
               color="primary"
               onClick={() => {
                 setUserInfo(u)
@@ -183,6 +188,7 @@ const Users = () => {
             </ActionButton>
             <ActionButton
               Icon={UserRoleIcon}
+              InverseIcon={WhiteUserRoleIcon}
               color="primary"
               onClick={() => {
                 setUserInfo(u)