feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -81,7 +81,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
"w-[3.82rem] rounded-none px-3 py-2 font-normal first:rounded-l-md",
filter.type === AuditLogDateFilterType.Relative &&
filter.relativeModeValue === el &&
"border-primary/40 bg-primary/[0.1]"
"border-primary/40 bg-primary/10"
)}
key={`${el}-relative`}
onClick={() =>
@@ -122,9 +122,9 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
<Button
variant="outline_bg"
className={twMerge(
"w-[8rem] rounded-none rounded-r-md px-3 py-2 font-normal",
"w-32 rounded-none rounded-r-md px-3 py-2 font-normal",
(filter.type === AuditLogDateFilterType.Absolute || isCustomRelative) &&
"border-primary/40 bg-primary/[0.1]"
"border-primary/40 bg-primary/10"
)}
>
<span>Custom</span> <FontAwesomeIcon className="ml-1" icon={faCalendar} />
@@ -135,7 +135,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
</DropdownMenuTrigger>
</div>
<DropdownMenuContent
className="!min-w-[434px] bg-mineshaft-800 p-4"
className="min-w-[434px]! bg-mineshaft-800 p-4"
align="end"
sideOffset={8}
>
@@ -151,7 +151,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
className={twMerge(
"h-8 rounded-r-none font-normal",
field.value === AuditLogDateFilterType.Absolute &&
"border-primary/40 bg-primary/[0.1]"
"border-primary/40 bg-primary/10"
)}
>
Absolute
@@ -162,7 +162,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
className={twMerge(
"h-8 rounded-l-none font-normal",
field.value === AuditLogDateFilterType.Relative &&
"border-primary/40 bg-primary/[0.1]"
"border-primary/40 bg-primary/10"
)}
>
Relative
@@ -191,7 +191,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
onClick={() => field.onChange(value)}
className={twMerge(
"h-8 w-12",
field.value === value && "border-primary/40 bg-primary/[0.1]"
field.value === value && "border-primary/40 bg-primary/10"
)}
>
{v}
@@ -234,7 +234,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
</FormControl>
</div>
{error && (
<span className="text-xs text-red-600 text-opacity-90">
<span className="text-opacity-90 text-xs text-red-600">
{error.message}
</span>
)}
@@ -324,7 +324,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
<Select
value={timezone}
onValueChange={(val) => setTimezone(val as Timezone)}
className="w-[10.6rem] border !border-mineshaft-500 !bg-mineshaft-600 capitalize"
className="w-[10.6rem] border border-mineshaft-500! bg-mineshaft-600! capitalize"
dropdownContainerClassName="max-w-none"
position="popper"
dropdownContainerStyle={{
@@ -124,7 +124,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<Button variant="outline_bg" colorSchema="primary" className="relative">
<FontAwesomeIcon icon={faFilterCircleXmark} />
{activeFilterCount > 0 && (
<Badge className="absolute bottom-0 right-0" variant="primary">
<Badge className="absolute right-0 bottom-0" variant="primary">
{activeFilterCount}
</Badge>
)}
@@ -175,7 +175,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<FormControl>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="thin-scrollbar inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
<div className="inline-flex thin-scrollbar w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal whitespace-nowrap text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
{selectedEventTypes?.length === 1
? filteredEventTypes.find(
(eventType) => eventType.value === selectedEventTypes[0]
@@ -189,7 +189,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<DropdownMenuContent
align="end"
sideOffset={2}
className="thin-scrollbar z-[100] max-h-80 overflow-hidden"
className="z-100 max-h-80 thin-scrollbar overflow-hidden"
>
<div className="max-h-80 overflow-y-auto">
{filteredEventTypes.length > 0 ? (
@@ -337,9 +337,9 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
>
<div className="mb-3 mt-2">
<div className="mt-2 mb-3">
<p className="text-xs opacity-60">Secrets</p>
<div className="h-[1px] w-full rounded-full bg-mineshaft-500" />
<div className="h-px w-full rounded-full bg-mineshaft-500" />
</div>
<LogFilterItem
label="Environment"
@@ -77,13 +77,13 @@ const LogsSectionComponent = ({
<div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
<div>
<div className="flex items-center gap-1 whitespace-nowrap">
<p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
<p className="text-xl font-medium text-mineshaft-100">Audit History</p>
<a
href="https://infisical.com/docs/documentation/platform/audit-logs"
target="_blank"
rel="noopener noreferrer"
>
<div className="ml-1 mt-[0.1rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="mt-[0.1rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
<span>Docs</span>
<FontAwesomeIcon
@@ -22,7 +22,7 @@ const Tag = ({ label, value }: TagProps) => {
return (
<div className="flex items-center space-x-1.5">
<div className="rounded bg-mineshaft-600 p-0.5 pl-1 font-mono">{label}:</div>
<div className="rounded-sm bg-mineshaft-600 p-0.5 pl-1 font-mono">{label}:</div>
<div>{value}</div>
</div>
);
@@ -34,7 +34,7 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
return (
<>
<Tr
className="h-10 cursor-pointer border-x-0 border-b border-t-0 hover:bg-mineshaft-700"
className="h-10 cursor-pointer border-x-0 border-t-0 border-b hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onClick={() => setIsOpen.toggle()}
@@ -62,9 +62,9 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
</Td>
</Tr>
{isOpen && (
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-t-0 border-b`}>
<Td colSpan={3} className="px-3 py-2">
<div className="thin-scrollbar my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded border border-mineshaft-600 bg-bunker-800 p-2 font-mono leading-6">
<div className="my-1 max-h-96 thin-scrollbar overflow-auto rounded-sm border border-mineshaft-600 bg-bunker-800 p-2 font-mono leading-6 whitespace-pre-wrap">
{JSON.stringify(auditLog, null, 4)}
</div>
</Td>