From c1b1d3f0cdcd1141f66bf91238b8cac98e92a42f Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Wed, 6 Dec 2023 17:37:57 +0100
Subject: [PATCH] swapped pending/admin; better meta if statement
---
frontend/src/modules/users/Users.tsx | 46 +++++++++++++++-------------
1 file changed, 24 insertions(+), 22 deletions(-)
diff --git a/frontend/src/modules/users/Users.tsx b/frontend/src/modules/users/Users.tsx
index 137449e7..ee977394 100644
--- a/frontend/src/modules/users/Users.tsx
+++ b/frontend/src/modules/users/Users.tsx
@@ -6,7 +6,7 @@
*/
// React main
-import React, { Fragment, useState, useCallback, useEffect, useMemo, HTMLProps } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, HTMLProps } from 'react';
// Icons
import {
@@ -19,7 +19,7 @@ import {
ChevronDoubleRightIcon,
ChevronLeftIcon,
ChevronRightIcon,
- ExclamationCircleIcon,
+ ClockIcon,
} from '@heroicons/react/solid';
import { CogIcon } from '@heroicons/react/outline';
@@ -64,7 +64,7 @@ import { MultipleUsersModal } from './components';
function lastSeen(timeLastSeen: number) {
dayjs.extend(relativeTime);
const lastSeenDate = new Date(timeLastSeen * 1000);
- return <span>Last seen {dayjs(lastSeenDate).fromNow()}.</span>;
+ return <span>Last seen {dayjs(lastSeenDate).fromNow()}</span>;
}
// ///////////////////////////////////////////
@@ -138,7 +138,7 @@ export const Users: React.FC = () => {
const userCard = (person: any) => {
return (
- <div className="flex min-w-0 gap-x-4 items-center">
+ <div className="flex min-w-0 gap-x-4 items-center ">
{/* <img className="h-12 w-12 flex-none rounded-full bg-gray-50" src={person.imageUrl} alt="" /> */}
<span className="inline-flex items-center relative justify-center h-8 w-8 rounded-full bg-primary overflow-hidden">
<span className="absolute z-10">
@@ -146,19 +146,13 @@ export const Users: React.FC = () => {
</span>
<span className="absolute z-0 text-primary-800">{person.name[0]}</span>
</span>
- <div className="min-w-0 flex-auto">
- <div className=" flex gap-2 text-sm font-semibold leading-6 text-gray-900">
+ <div className="">
+ <div className=" flex gap-2 text-base font-semibold leading-6 text-gray-900">
{person.name ? (
<span>{person.name}</span>
) : (
<span className="text-sm italic text-gray-400">no name given</span>
)}
- {!person.meta.last_login && !person.meta.last_recovery && (
- <div className="inline-flex items-center gap-x-1 rounded-md px-1 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200">
- <ExclamationCircleIcon className="h-3 w-3 text-yellow-200" />
- Invitation pending
- </div>
- )}
</div>
<p className="mt-1 flex text-xs leading-5 text-gray-500">
<a href={`mailto:${person.email}`} className="truncate hover:underline">
@@ -166,6 +160,11 @@ export const Users: React.FC = () => {
</a>
</p>
</div>
+ {person.admin && (
+ <span className="inline-flex gap-x-1 items-center rounded-md bg-primary-50 px-2 py-1 text-xs font-medium text-primary-500 ring-1 ring-inset ring-primary-300/20">
+ Admin
+ </span>
+ )}
</div>
);
};
@@ -268,16 +267,19 @@ export const Users: React.FC = () => {
const { row } = props;
return (
<div className="flex justify-end gap-4">
- <div className="flex flex-col items-end">
- {row.original.admin && (
- <div className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-300">
- Admin
- </div>
- )}
- {row.original.meta && (
- <div className="mt-1 text-xs leading-5 text-gray-500">{lastSeen(row.original.meta.last_login)}</div>
- )}
- </div>
+ {!row.original.meta.last_login && !row.original.meta.last_recovery && (
+ <div className="inline-flex items-center gap-x-1 rounded-md px-1 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200">
+ <ClockIcon className="h-3 w-3 text-gray-400" />
+ Invitation pending
+ </div>
+ )}
+ {row.original.meta && (
+ <div className="flex flex-col items-end">
+ {row.original.meta.last_login && (
+ <div className="text-xs leading-5 text-gray-500">{lastSeen(row.original.meta.last_login)}</div>
+ )}
+ </div>
+ )}
{isAdmin && (
<button onClick={() => configureModalOpen(row.original.id)} type="button" className="">
--
GitLab