Fixed format issues

DTS-STN · Jan 6, 2025 · a940bc9 · a940bc9
1 parent e8aca5d
commit a940bc9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/frontend/app/components/menu.tsx b/frontend/app/components/menu.tsx
@@ -41,7 +41,13 @@ export function Menu({ className, children }: MenuProps) {
 
   return (
     <div className="relative inline-block text-left">
-      <button type="button" onClick={onClick} className={cn(baseClassName, className)} aria-haspopup={true} aria-expanded={open}>
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(baseClassName, className)}
+        aria-haspopup={true}
+        aria-expanded={open}
+      >
         <span id="menu-label">{t('gcweb:app.menu')}</span>
         {open ? <UpChevron /> : <DownChevron />}
       </button>

diff --git a/frontend/app/components/user-button.tsx b/frontend/app/components/user-button.tsx
@@ -1,8 +1,11 @@
 import { useState } from 'react';
-import { cn } from '~/utils/tailwind-utils';
+
 import { useTranslation } from 'react-i18next';
+
 import { MenuItem } from './menu';
 
+import { cn } from '~/utils/tailwind-utils';
+
 interface UserButtonProps {
   className?: string;
   children?: React.ReactNode;
@@ -23,12 +26,20 @@ export function UserButton({ className, children, name }: UserButtonProps) {
 
   return (
     <div className="relative inline-block text-right">
-      <button title={t('gcweb:app.profile')} aria-label={t('gcweb:app.profile')} type="button" onClick={onClick} className={cn(baseClassName, className)} aria-haspopup={true} aria-expanded={open}>
-        <UserCircle/>
+      <button
+        title={t('gcweb:app.profile')}
+        aria-label={t('gcweb:app.profile')}
+        type="button"
+        onClick={onClick}
+        className={cn(baseClassName, className)}
+        aria-haspopup={true}
+        aria-expanded={open}
+      >
+        <UserCircle />
       </button>
       {open && (
         <div
-          className="absolute right-0 mt-2 w-64 text-left rounded-md shadow-lg ring-1 ring-black ring-opacity-5 bg-gradient-to-b bg-slate-700"
+          className="absolute right-0 mt-2 w-64 rounded-md bg-slate-700 bg-gradient-to-b text-left shadow-lg ring-1 ring-black ring-opacity-5"
           role="menu"
           aria-orientation="vertical"
           tabIndex={-1}
@@ -47,28 +58,36 @@ export function UserButton({ className, children, name }: UserButtonProps) {
 function UserCircle() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-12">
-      <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clipRule="evenodd" />
+      <path
+        fillRule="evenodd"
+        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 }
 
-function UserName({ name }: {name?: string}) {
+function UserName({ name }: { name?: string }) {
   return (
     <>
       {name !== undefined && (
-        <div className="flex text-md px-4 py-2 text-gray-300 border-b-2 border-slate-600">
+        <div className="text-md flex border-b-2 border-slate-600 px-4 py-2 text-gray-300">
           <UserIcon />
           {name}
         </div>
       )}
     </>
-  )
+  );
 }
 
 function UserIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6 mr-2">
-      <path fillRule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clipRule="evenodd" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="mr-2 size-6">
+      <path
+        fillRule="evenodd"
+        d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 }
diff --git a/frontend/app/routes/protected/layout.tsx b/frontend/app/routes/protected/layout.tsx
@@ -9,9 +9,9 @@ import { requireAuth } from '~/.server/utils/auth-utils';
 import { AppLink } from '~/components/app-link';
 import { LanguageSwitcher } from '~/components/language-switcher';
 import { PageDetails } from '~/components/page-details';
+import { UserButton } from '~/components/user-button';
 import { useLanguage } from '~/hooks/use-language';
 import { useRoute } from '~/hooks/use-route';
-import { UserButton } from '~/components/user-button';
 
 export const handle = {
   i18nNamespace: ['gcweb', 'protected'],
@@ -44,7 +44,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
                 decoding="async"
               />
             </AppLink>
-            <div className="text-right flex items-center space-x-4">
+            <div className="flex items-center space-x-4 text-right">
               <LanguageSwitcher>{t('gcweb:language-switcher.alt-lang')}</LanguageSwitcher>
               <UserButton name={loaderData.name?.toString()} />
             </div>

diff --git a/frontend/tests/components/user-button.test.tsx b/frontend/tests/components/user-button.test.tsx
@@ -8,7 +8,7 @@ import { UserButton } from '~/components/user-button';
 
 describe('UserButton', () => {
   it('should correctly render a UserButton with no MenuItems provided', () => {
-    const { container } = render(<UserButton name='Test Name' />);
+    const { container } = render(<UserButton name="Test Name" />);
     expect(container.innerHTML).toMatchSnapshot('expected html');
   });
 
@@ -17,7 +17,7 @@ describe('UserButton', () => {
       {
         path: '/fr/public',
         Component: () => (
-          <UserButton name='Test Name'>
+          <UserButton name="Test Name">
             <MenuItem file="routes/public/index.tsx">This is a test</MenuItem>
           </UserButton>
         ),
@@ -34,7 +34,7 @@ describe('UserButton', () => {
       {
         path: '/fr/public',
         Component: () => (
-          <UserButton name='Test Name'>
+          <UserButton name="Test Name">
             <MenuItem to="https://example.com/">This is a test</MenuItem>
           </UserButton>
         ),