Prettified Code!

socialincome-san · Jan 23, 2025 · 2df3321 · 2df3321
1 parent 7e2ef70
commit 2df3321
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git a/ui/src/components/badge.tsx b/ui/src/components/badge.tsx
@@ -15,17 +15,23 @@ const badgeVariants = cva(
 				muted: 'border-muted-foreground text-muted-foreground',
 				accent: 'border-transparent bg-accent text-accent-foreground',
 				outline: 'text-primary border-primary',
-				interactive: 'border-transparent bg-primary bg-opacity-10 text-primary hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
-				'interactive-accent': 'border-transparent bg-accent bg-opacity-50 text-primary hover:bg-opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2',
-				'interactive-secondary': 'border-transparent bg-secondary bg-opacity-10 text-secondary hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
-				'interactive-destructive': 'border-transparent bg-destructive bg-opacity-10 text-destructive hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
-				'interactive-muted': 'border-muted-foreground text-muted-foreground hover:bg-muted-foreground hover:text-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
-				'interactive-outline': 'border-primary bg-transparent text-primary hover:bg-primary hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				interactive:
+					'border-transparent bg-primary bg-opacity-10 text-primary hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'interactive-accent':
+					'border-transparent bg-accent bg-opacity-50 text-primary hover:bg-opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'interactive-secondary':
+					'border-transparent bg-secondary bg-opacity-10 text-secondary hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'interactive-destructive':
+					'border-transparent bg-destructive bg-opacity-10 text-destructive hover:bg-opacity-100 hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'interactive-muted':
+					'border-muted-foreground text-muted-foreground hover:bg-muted-foreground hover:text-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
+				'interactive-outline':
+					'border-primary bg-transparent text-primary hover:bg-primary hover:text-white focus:ring-2 focus:ring-ring focus:ring-offset-2',
 			},
 			size: {
 				sm: 'px-2 py-0.5 text-xs',
 				md: 'px-2.5 py-1 text-sm',
-				lg: 'px-3 py-1.5 text-base'
+				lg: 'px-3 py-1.5 text-base',
 			},
 		},
 		defaultVariants: {

diff --git a/ui/src/stories/badge.stories.tsx b/ui/src/stories/badge.stories.tsx
@@ -1,6 +1,6 @@
+import { ArrowRightIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Badge, BadgeProps } from '../components/badge';
-import { CheckCircleIcon, ArrowRightIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 
 const meta = {
 	title: 'Components/Badge',
@@ -9,7 +9,20 @@ const meta = {
 	argTypes: {
 		variant: {
 			description: 'Style variant of the badge',
-			options: ['default', 'secondary', 'destructive', 'muted', 'accent', 'outline', 'interactive', 'interactive-accent', 'interactive-secondary', 'interactive-destructive', 'interactive-muted', 'interactive-outline'],
+			options: [
+				'default',
+				'secondary',
+				'destructive',
+				'muted',
+				'accent',
+				'outline',
+				'interactive',
+				'interactive-accent',
+				'interactive-secondary',
+				'interactive-destructive',
+				'interactive-muted',
+				'interactive-outline',
+			],
 			control: { type: 'select' },
 		},
 		size: {
@@ -26,7 +39,7 @@ type Story = StoryObj<typeof Badge>;
 /**
  * The Badge component is used to highlight and display short pieces of information.
  * It supports various variants and sizes to accommodate different use cases.
- * 
+ *
  * Variants:
  * - Basic variants:
  *   - default: Primary colored badge for general use
@@ -35,21 +48,21 @@ type Story = StoryObj<typeof Badge>;
  *   - muted: For less prominent information
  *   - accent: For highlighted information
  *   - outline: Border-only style for subtle emphasis
- * 
+ *
  * - Interactive variants (with hover effects):
  *   - interactive: Primary colored with opacity hover effect
  *   - interactive-accent: Accent colored for important interactive elements
  *   - interactive-secondary: Secondary colored for less prominent actions
  *   - interactive-destructive: For removable or dangerous actions
  *   - interactive-muted: For subtle interactive elements
  *   - interactive-outline: Outlined style that fills on hover
- * 
+ *
  * Features:
  * - Three size options (sm, md, lg)
  * - Customizable through className prop
  * - Support for icons and custom content
  * - Accessible by default
- * 
+ *
  * @see {@link https://www.figma.com/file/...} Figma Design
  */
 export const Default: Story = {
@@ -117,7 +130,6 @@ export const AllVariants: Story = {
 	),
 };
 
-
 /**
  * Examples of common use cases for badges in the application:
  * - Status indicators
@@ -130,10 +142,18 @@ export const CommonUseCases: Story = {
 		<div className="flex flex-col gap-4">
 			{/* Status indicators */}
 			<div className="flex gap-2">
-				<Badge variant="interactive" size="md">Active</Badge>
-				<Badge variant="interactive-muted" size="md">Pending</Badge>
-				<Badge variant="interactive-destructive" size="md">Blocked</Badge>
-				<Badge variant="muted" size="md">Archived</Badge>
+				<Badge variant="interactive" size="md">
+					Active
+				</Badge>
+				<Badge variant="interactive-muted" size="md">
+					Pending
+				</Badge>
+				<Badge variant="interactive-destructive" size="md">
+					Blocked
+				</Badge>
+				<Badge variant="muted" size="md">
+					Archived
+				</Badge>
 			</div>
 			{/* Content labels */}
 			<div className="flex gap-2">
@@ -174,7 +194,7 @@ export const WithIcons: StoryObj<WithIconsProps> = {
 		warningVariant: 'destructive',
 		onlineText: 'Online',
 		newText: 'New',
-		warningText: 'Warning'
+		warningText: 'Warning',
 	},
 	argTypes: {
 		onlineVariant: {
@@ -197,13 +217,13 @@ export const WithIcons: StoryObj<WithIconsProps> = {
 	render: (args) => (
 		<div className="flex gap-4">
 			<Badge variant={args.onlineVariant} size={args.size}>
-				<CheckCircleIcon className="h-4 w-4 mr-1" /> {args.onlineText}
+				<CheckCircleIcon className="mr-1 h-4 w-4" /> {args.onlineText}
 			</Badge>
 			<Badge variant={args.newVariant} size={args.size}>
-				{args.newText} <ArrowRightIcon className="h-4 w-4 ml-1" />
+				{args.newText} <ArrowRightIcon className="ml-1 h-4 w-4" />
 			</Badge>
 			<Badge variant={args.warningVariant} size={args.size}>
-				<ExclamationTriangleIcon className="h-4 w-4 mr-1" /> {args.warningText}
+				<ExclamationTriangleIcon className="mr-1 h-4 w-4" /> {args.warningText}
 			</Badge>
 		</div>
 	),

diff --git a/website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerBadges.tsx b/website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerBadges.tsx
@@ -42,17 +42,17 @@ function RecipientsBadge({
 				</div>
 				<Separator className="bg-primary mb-3 mt-2 bg-opacity-20" />
 				<div className="flex flex-col space-y-2">
-					<Badge variant='faded' className="text-popover-foreground">
+					<Badge variant="faded" className="text-popover-foreground">
 						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
 							{hoverCardTotalActiveRecipients || 0} {translatorBadgeActive}
 						</Typography>
 					</Badge>
-					<Badge variant="accent" className="bg-opacity-10 text-popover-foreground">
+					<Badge variant="accent" className="text-popover-foreground bg-opacity-10">
 						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
 							{hoverCardTotalFormerRecipients || 0} {translatorBadgeFormer}
 						</Typography>
 					</Badge>
-					<Badge variant='secondary' className="bg-opacity-10 text-popover-foreground">
+					<Badge variant="secondary" className="text-popover-foreground bg-opacity-10">
 						<Typography size="sm" weight="normal" className="whitespace-nowrap text-inherit">
 							{hoverCardTotalSuspendedRecipients || 0} {translatorBadgeSuspended}
 						</Typography>

diff --git a/website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerHome.tsx b/website/src/app/[lang]/[region]/(website)/partners/(components)/PartnerHome.tsx
@@ -101,7 +101,7 @@ export function PartnerHome({ currentNgo, currentNgoCountry, translations, lang,
 								translatorBadgeFormer={translations.badgeFormer}
 								translatorBadgeSuspended={translations.badgeSuspended}
 							/>
-       <Badge variant="interactive" size="md" className="space-x-2">
+							<Badge variant="interactive" size="md" className="space-x-2">
 								{countryBadge?.countryFlagComponent || <SL className="h-5 w-5 rounded-full" />}
 								<Typography size="md" weight="normal" className="text-inherit">
 									{currentNgoCountry}