fix: padding to loading

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/utils/ui-components.tsx

@@ -19,21 +19,17 @@ export const BORDER_RADIUS = {
 };
 
 interface MetricToggleProps {
-	id: string;
 	label: string;
 	checked: boolean;
 	onChange: () => void;
 	color: string;
-	description?: string;
 }
 
 export const MetricToggle: React.FC<MetricToggleProps> = ({
-	id,
 	label,
 	checked,
 	onChange,
 	color,
-	description,
 }) => {
 	// Get proper hex values for the colors
 	const getColorMap = (colorName: string) => {
@@ -105,40 +101,22 @@ interface MetricTogglesProps {
 	onToggle: (metric: string) => void;
 	colors: Record<string, string>;
 	labels?: Record<string, string>;
-	descriptions?: Record<string, string>;
 }
 
 export const MetricToggles: React.FC<MetricTogglesProps> = ({
 	metrics,
 	onToggle,
 	colors,
 	labels = {},
-	descriptions = {},
 }) => {
-	const metricDescriptions = {
-		pageviews: 'Total number of pages viewed by visitors',
-		visitors: 'Number of unique users visiting your website',
-		sessions: 'A group of interactions within a time frame',
-		bounce_rate: 'Percentage of single-page sessions',
-		avg_session_duration: 'Average time spent during a session',
-		...descriptions,
-	};
-
 	return (
 		<div className="flex flex-wrap items-center gap-2">
 			{Object.keys(metrics).map((metric) => (
 				<MetricToggle
 					checked={metrics[metric]}
 					color={colors[metric] || 'blue-500'}
-					description={
-						metricDescriptions[metric as keyof typeof metricDescriptions]
-					}
-					id={`metric-${metric}`}
 					key={metric}
-					label={
-						labels[metric] ||
-						metric.charAt(0).toUpperCase() + metric.slice(1).replace(/_/g, ' ')
-					}
+					label={labels[metric] || metric}
 					onChange={() => onToggle(metric)}
 				/>
 			))}

apps/dashboard/components/analytics/data-table.tsx

@@ -751,7 +751,7 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 					className
 				)}
 			>
-				<div className="px-2 pb-2 sm:px-3">
+				<div className="p-4 px-2 pb-2 sm:px-3">
 					<div className="flex flex-col items-start justify-between gap-3 sm:flex-row">
 						<div className="min-w-0 flex-1">
 							<Skeleton className="h-5 w-32 rounded-md" />