ui(admin): fix server table links

This commit is contained in:
Matthew Penner 2021-08-02 10:01:55 -06:00
parent 11fc88c849
commit 030bc2d8ef
3 changed files with 9 additions and 17 deletions

View File

@ -1,5 +1,5 @@
import React, { useContext, useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import { NavLink, useRouteMatch } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import tw from 'twin.macro'; import tw from 'twin.macro';
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers'; import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
import AdminCheckbox from '@/components/admin/AdminCheckbox'; import AdminCheckbox from '@/components/admin/AdminCheckbox';
@ -33,8 +33,6 @@ interface Props {
} }
function ServersTable ({ filters }: Props) { function ServersTable ({ filters }: Props) {
const match = useRouteMatch();
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlash();
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext); const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(ServersContext);
@ -106,7 +104,7 @@ function ServersTable ({ filters }: Props) {
</td> </td>
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`/admin/servers/${server.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{server.name} {server.name}
</NavLink> </NavLink>
</td> </td>
@ -115,11 +113,11 @@ function ServersTable ({ filters }: Props) {
<td css={tw`px-6 text-sm text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
<NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`/admin/users/${server.relations.user?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
<div css={tw`text-sm text-neutral-200`}> <div css={tw`text-sm text-neutral-200`}>
Silly User {server.relations.user?.email}
</div> </div>
<div css={tw`text-sm text-neutral-400`}> <div css={tw`text-sm text-neutral-400`}>
{server.relations.user?.email} {server.relations.user?.uuid.split('-')[0]}
</div> </div>
</NavLink> </NavLink>
</td> </td>

View File

@ -130,11 +130,11 @@ const UsersContainer = () => {
<div css={tw`ml-4`}> <div css={tw`ml-4`}>
<div css={tw`text-sm text-neutral-200`}> <div css={tw`text-sm text-neutral-200`}>
Silly User {user.email}
</div> </div>
<div css={tw`text-sm text-neutral-400`}> <div css={tw`text-sm text-neutral-400`}>
{user.email} {user.uuid.split('-')[0]}
</div> </div>
</div> </div>
</div> </div>

View File

@ -78,7 +78,7 @@ const Sidebar = styled.div<{ collapsed?: boolean }>`
} }
& > div.user { & > div.user {
${tw`h-16 w-full flex items-center justify-center bg-neutral-700`}; ${tw`h-16 w-full flex items-center bg-neutral-700`};
${props => !props.collapsed && tw`mt-auto px-5`}; ${props => !props.collapsed && tw`mt-auto px-5`};
& > div, a { & > div, a {
@ -172,16 +172,10 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
<div className={'user'}> <div className={'user'}>
<img src={user !== undefined ? user.avatarURL + '?s=64' : ''} alt="Profile Picture" css={tw`h-10 w-10 rounded-full select-none`} /> <img src={user !== undefined ? user.avatarURL + '?s=64' : ''} alt="Profile Picture" css={tw`h-10 w-10 rounded-full select-none`} />
<div css={tw`flex flex-col ml-4`}> <div css={tw`flex flex-col ml-3`}>
<span css={tw`font-header font-medium text-sm text-neutral-50 whitespace-nowrap leading-tight select-none`}>Silly User</span> <span css={tw`font-sans font-normal text-sm text-neutral-50 whitespace-nowrap leading-tight select-none`}>{user?.email}</span>
<span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-nowrap leading-tight select-none`}>{user?.roleName}</span> <span css={tw`font-header font-normal text-xs text-neutral-300 whitespace-nowrap leading-tight select-none`}>{user?.roleName}</span>
</div> </div>
<NavLink to={'/'} css={tw`h-8 w-8 flex items-center justify-center text-neutral-300 hover:text-primary-400 hover:bg-neutral-800 rounded ml-auto transition-all duration-100`}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" css={tw`h-6 w-6`}>
<path strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
</NavLink>
</div> </div>
</Sidebar> </Sidebar>