minor style changes

This commit is contained in:
Vladyslav Matsiiako
2023-08-08 11:03:28 -04:00
parent 0cad823267
commit ff6e07bdcf
4 changed files with 14 additions and 18 deletions

View File

@@ -44,18 +44,18 @@ export const Pagination = ({
return (
<div
className={twMerge(
"flex items-center justify-end text-white w-full p-4 bg-mineshaft-700",
"flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
className
)}
>
<div className="mr-6 flex items-center space-x-2">
<div className="text-sm">
<div className="text-xs">
{(page - 1) * perPage} - {(page - 1) * perPage + perPage} of {count}
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton ariaLabel="per-page-list" variant="plain">
<FontAwesomeIcon icon={faCaretDown} />
<FontAwesomeIcon className="text-xs" icon={faCaretDown} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-fit">
@@ -79,7 +79,7 @@ export const Pagination = ({
onClick={() => onChangePage(prevPageNumber)}
isDisabled={!canGoPrev}
>
<FontAwesomeIcon icon={faChevronLeft} />
<FontAwesomeIcon className="text-xs" icon={faChevronLeft} />
</IconButton>
<IconButton
variant="plain"
@@ -87,7 +87,7 @@ export const Pagination = ({
onClick={() => onChangePage(nextPageNumber)}
isDisabled={!canGoNext}
>
<FontAwesomeIcon icon={faChevronRight} />
<FontAwesomeIcon className="text-xs" icon={faChevronRight} />
</IconButton>
</div>
</div>

View File

@@ -40,7 +40,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
ref={ref}
className={twMerge(
`inline-flex items-center justify-between rounded-md
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200`,
className
)}
>

View File

@@ -1,10 +1,7 @@
import { useState } from "react";
import { Control, Controller, UseFormReset } from "react-hook-form";
import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
Button,
DatePicker,
FormControl,
Select,
@@ -76,7 +73,7 @@ export const LogsFilter = ({
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
className="w-full bg-mineshaft-700 border border-mineshaft-500 text-mineshaft-100"
>
{eventTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
@@ -102,7 +99,7 @@ export const LogsFilter = ({
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
className="w-full bg-mineshaft-700 border border-mineshaft-500 text-mineshaft-100"
>
{data.map((actor) => renderActorSelectItem(actor))}
</Select>
@@ -124,7 +121,7 @@ export const LogsFilter = ({
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
className="w-full bg-mineshaft-700 border border-mineshaft-500 text-mineshaft-100"
>
{userAgentTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>

View File

@@ -2,10 +2,9 @@ import {
Td,
Tr
} from "@app/components/v2";
import { eventToNameMap, userAgentTTypeoNameMap } from "~/hooks/api/auditLogs/constants";
import { ActorType, EventType } from "~/hooks/api/auditLogs/enums";
import { Actor, AuditLog, Event } from "~/hooks/api/auditLogs/types";
import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
import { ActorType, EventType } from "@app/hooks/api/auditLogs/enums";
import { Actor, AuditLog, Event } from "@app/hooks/api/auditLogs/types";
type Props = {
auditLog: AuditLog
@@ -278,7 +277,7 @@ export const LogsTableRow = ({
);
default:
return (
<Td></Td>
<Td/>
);
}
}
@@ -302,7 +301,7 @@ export const LogsTableRow = ({
}
return (
<Tr className={`log-${auditLog._id} h-10`}>
<Tr className={`log-${auditLog._id} h-10 border-b border-x-0 border-t-0`}>
<Td>{formatDate(auditLog.createdAt)}</Td>
<Td>{`${eventToNameMap[auditLog.event.type]}`}</Td>
{renderActor(auditLog.actor)}