add tailwind prettier and some clean up

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:03:08 +01:00
parent d0079c8dc3
commit 44c66dbed4
118 changed files with 355 additions and 2045 deletions

View File

@@ -76,7 +76,7 @@ export function OverviewFiltersDrawerContent({
/>
</div>
<div className="flex flex-col gap-4 mt-8">
<div className="mt-8 flex flex-col gap-4">
{filters
.filter((filter) => filter.value[0] !== null)
.map((filter) => {
@@ -120,7 +120,7 @@ export function FilterOptionEvent({
);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"
@@ -160,7 +160,7 @@ export function FilterOptionProfile({
const values = useProfileValues(projectId, filter.name);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"

View File

@@ -17,7 +17,7 @@ export function OverviewFiltersDrawer(
Filters
</Button>
</SheetTrigger>
<SheetContent className="!max-w-lg w-full" side="right">
<SheetContent className="w-full !max-w-lg" side="right">
<OverviewFiltersDrawerContent {...props} />
</SheetContent>
</Sheet>

View File

@@ -58,18 +58,18 @@ export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
<TooltipTrigger asChild>
<button
onClick={() => setLiveHistogram((p) => !p)}
className="border border-border rounded h-8 px-3 leading-none flex items-center font-medium gap-2"
className="flex h-8 items-center gap-2 rounded border border-border px-3 font-medium leading-none"
>
<div className="relative">
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full animate-ping opacity-100 transition-all',
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
counter === 0 && 'bg-destructive opacity-0'
)}
></div>
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full absolute top-0 left-0 transition-all',
'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
counter === 0 && 'bg-destructive'
)}
></div>

View File

@@ -85,7 +85,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
<div
key={i}
className="flex-1 rounded-md bg-slate-200 animate-pulse"
className="flex-1 animate-pulse rounded-md bg-slate-200"
style={{ height: `${percent}%` }}
/>
))}
@@ -105,7 +105,7 @@ export function OverviewLiveHistogram({
<TooltipTrigger asChild>
<div
className={cn(
'flex-1 rounded-md hover:scale-110 transition-all ease-in-out',
'flex-1 rounded-md transition-all ease-in-out hover:scale-110',
minute.count === 0 ? 'bg-slate-200' : 'bg-blue-600'
)}
style={{
@@ -136,14 +136,14 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight duration={500} height={open ? 'auto' : 0}>
<div className="flex items-end flex-col md:flex-row">
<div className="md:mr-2 flex md:flex-col max-md:justify-between items-end max-md:w-full max-md:mb-2 md:card md:p-4">
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{count}
</div>
</div>
<div className="max-h-[150px] aspect-[5/1] flex flex-1 gap-0.5 md:gap-2 items-end w-full relative">
<div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>

View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<>
<div className="grid grid-cols-6 col-span-6 gap-1">
<div className="col-span-6 grid grid-cols-6 gap-1">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'relative col-span-3 md:col-span-2 lg:col-span-1 group transition-all scale-95',
index === metric && 'shadow-md rounded-xl scale-105 z-10'
'group relative col-span-3 scale-95 transition-all md:col-span-2 lg:col-span-1',
index === metric && 'z-10 scale-105 rounded-xl shadow-md'
)}
onClick={() => {
setMetric(index);

View File

@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn(
'flex flex-col p-0 [&_.title]:p-4 [&_.title]:flex [&_.title]:justify-between [&_.title]:items-center',
'flex flex-col p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
className
)}
{...props}
@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'px-4 self-stretch justify-start transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100 [&_button.active]:border-b [&_button.active]:border-black [&_button]:py-1',
'flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
className
)}
style={{ gap }}
@@ -102,7 +102,7 @@ export function WidgetButtons({
<DropdownMenuTrigger asChild>
<button
className={cn(
'flex items-center gap-1 select-none',
'flex select-none items-center gap-1',
sizes.current.length - 1 === slice ? hidden : 'opacity-50'
)}
>