Skip to content

Commit

Permalink
Fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexrobaina
alexrobaina committed May 1, 2024
1 parent ae8a1f0 commit 8d20df7
Show file tree
Hide file tree
Showing 19 changed files with 140 additions and 128 deletions.
3 changes: 3 additions & 0 deletions public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@
"petAvailable": "Pet available",
"petDeleted": "Pet deleted successfully",
"petNotDeleted": "Pet not deleted",
"contactsForAdoption": "Contacts for adoption",
"emailInvalid": "Email invalid",
"wantAdoption": "I want to adopt to",
"aboutUs": "About Us",
"last": "Last"
}
2 changes: 1 addition & 1 deletion public/locales/en/login.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"magicLink": "Email login link",
"subject": "Login to your account ",
"hello": "Hello",
"welcome": "Welcome to our app",
"welcome": "",
"loginDescription": "Login to your account",
"warning": "If you didn't request this, please ignore this email.",
"thanks": "Thanks",
Expand Down
3 changes: 3 additions & 0 deletions public/locales/es/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,8 @@
"petDeleted": "Mascota eliminada",
"petNotDeleted": "Mascota no eliminada",
"emailInvalid": "Correo invalido",
"contactsForAdoption": "Contactos para adopctar",
"wantAdoption": "Quiero adoptar a",
"aboutUs": "Sobre nosotros",
"last": "Last"
}
2 changes: 1 addition & 1 deletion public/locales/es/login.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"magicLink": "Iniciar de sesión",
"subject": "Iniciar sesión en ",
"hello": "Hola",
"welcome": "Bienvenido a",
"welcome": "",
"loginDescription": "Hemos recibido una solicitud para iniciar sesión en su cuenta. Si no ha solicitado iniciar sesión, ignore este correo electrónico.",
"warning": "Este enlace solo es válido por 15 minutos.",
"thanks": "Gracias",
Expand Down
16 changes: 14 additions & 2 deletions src/components/Navigation/components/SideBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,18 @@ export const SideBar: FC<Props> = ({
window.location.reload()
}

useEffect(() => {
const handleClickOutside = () => {
if (isOpenLngToggle) {
setIsOpenLngToggle(false)
}
}
window.addEventListener('click', handleClickOutside)
return () => {
window.removeEventListener('click', handleClickOutside)
}
}, [isOpenLngToggle])

const handleOpenLngToggle = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation()
setIsOpenLngToggle(!isOpenLngToggle)
Expand Down Expand Up @@ -100,8 +112,8 @@ export const SideBar: FC<Props> = ({
<div className="flex relative overflow-hidden z-2">
{/* Fixed Sidebar */}
<div className="z-20 fixed h-auto bottom-0 top-0 mt-2 mb-2 ml-2 flex flex-col bg-primary-300 rounded-md">
<div className={`h-full ${menuIsCollapsed ? 'left-[58px]' : 'left-[210px]'} top-[45%] absolute z-4`}>
<div className='ring-2 flex justify-center items-center ring-primary-800 h-4 w-4 rounded-full bg-primary-200 opacity-[900%]'>
<div className={` ${menuIsCollapsed ? 'left-[58px]' : 'left-[210px]'} top-[45%] absolute z-4`}>
<div onClick={handleMenuIsCollapsed} className='ring-2 flex cursor-pointer justify-center items-center ring-primary-800 h-4 w-4 rounded-full bg-primary-200 opacity-[900%]'>
{menuIsCollapsed ? <IconChevronRight width={20} /> : <IconChevronLeft width={20} />}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/PetCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const PetCard: FC<IPetCardProps> = ({
return (
<div
onClick={() => goToProfile(id)}
className="rounded-xl h-full md:w-[236px] flex bg-primary-100 shadow-md cursor-pointer"
className="rounded-xl pb-3 md:w-[236px] flex bg-primary-100 shadow-md cursor-pointer"
>
<div>
<div className='h-[237px] w-full' >
Expand All @@ -26,7 +26,7 @@ export const PetCard: FC<IPetCardProps> = ({
onError={(e) => {
e.currentTarget.src = ImageNotFound
}}
className="w-screen sm:w-[300px] h-[237px] object-cover rounded-xl"
className="md:w-[300px] h-[237px] object-cover rounded-xl"
src={`${import.meta.env.VITE_BUCKET_NAME}pets/${images}`}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const Header: FC<Props> = ({ buttonBack, title }) => {
icon={<IconBack />}
/>
)}
<h1 className="text-xl md:text-xl lg:text-3xl font-semibold">{title}</h1>
<h1 className="text-3xl font-semibold">{title}</h1>
</div>
)
}
18 changes: 9 additions & 9 deletions src/pages/CommunityPage/components/CommunityTable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,37 +40,37 @@ export const CommunityTable: React.FC<Props> = ({
<div className="mt-8 flow-root">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full divide-y divide-gray-300">
<table className="min-w-full">
<thead>
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-4"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-primary-950 sm:pl-2 bg-primary-100 rounded-tl-xl"
>
{t('common:name')}
</th>

<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left text-sm font-semibold bg-primary-100 text-gray-900"
>
{t('common:location')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left text-sm font-semibold bg-primary-100 text-gray-900"
>
{t('common:role')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
{t('common:contact')}
scope="col"
className="px-8 py-3.5 text-right bg-primary-100 text-sm font-semibold text-primary-950 rounded-tr-xl"
>
{t('common:contact')}
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="bg-white rounded-3xl">
{data?.users.map((user: User) => (
<tr
key={user.id}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/CommunityPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@ export const CommunityPage: FC = () => {
<div className="shadow-lg rounded-md mt-16 px-4 sm:px-6 lg:px-8">
<div className="sm:flex sm:items-center">
<div className="sm:flex-auto">
<h1 className="text-base font-semibold leading-6 text-gray-900">
<h1 className="text-xl font-semibold leading-6 text-primary-950">
{t('community:findProfessionals')}
</h1>
<p className="mt-2 text-sm text-gray-700">
<p className="mt-2 text-sm text-primary-500">
{t('community:findProfessionalDescription')}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/DashboardPage/components/DashboardHeader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ export const DashboardHeader: React.FC<Props> = ({
const { t } = useTranslation(['dashboard', 'common'])

return (
<header className="flex lg:flex-row md:justify-between flex-col gap-5">
<header className="flex lg:flex-row xl:flex-row md:justify-between flex-col gap-5">
<Header title={t('common:dashboard')} />
<div className="flex gap-5 flex-col md:flex-row md:justify-between md:items-center">
<div className="flex gap-5 flex-col lg:flex-row md:justify-between xl:items-center">
<div className="z-10">
<BaseButton
size="small"
Expand Down
36 changes: 18 additions & 18 deletions src/pages/DashboardPage/components/DashboardTable/DashboardTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@ export const DashboardTable: React.FC<Props> = ({
<>
<div className="flex justify-between flex-col sm:flex-row sm:items-center">
<div className="sm:flex-auto">
<h1 className="text-base font-semibold leading-6 text-gray-900">
<h1 className="text-xl font-semibold leading-6 text-primary-950">
{t('common:pets')}
</h1>
<p className="mt-2 text-sm text-gray-700">
<p className="mt-2 text-sm text-primary-500">
{t('dashboard:listOfPets')}
</p>
</div>
Expand Down Expand Up @@ -116,62 +116,62 @@ export const DashboardTable: React.FC<Props> = ({
<div className="mt-8 flow-root">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full divide-y divide-gray-300">
<table className="min-w-full">
<thead>
<tr>
<tr >
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-2"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-primary-950 sm:pl-2 bg-primary-100 rounded-tl-xl"
>
{t('common:name')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
>
{t('common:gender')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
>
{t('common:category')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
>
{t('common:age')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
>
{t('common:size')}
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
>
{t('common:status')}
</th>
<th
scope="col"
className="relative py-3.5 pl-3 pr-4 sm:pr-0"
className="px-8 py-3.5 text-right bg-primary-100 text-sm font-semibold text-primary-950 rounded-tr-xl"
>
<span className="sr-only">{t('common:edit')}</span>
{t('common:actions')}
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white rounded-3xl">
<tbody className="bg-white rounded-3xl">
{data?.pets &&
data?.pets.map((pet: Pet) => (
data?.pets.map((pet: Pet, index: number) => (
<tr
key={pet.id}
onClick={() => goToPet(pet.id)}
className="hover:bg-primary-100 cursor-pointer"
className='hover:bg-primary-100 cursor-pointer'
>
<td className="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-6 rounded-s-xl">
<td className={`whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-6 ${index === 0 ? 'rounded-tx-none' : 'rounded-s-xl'}`}>
<div className="flex items-center">
<div className="h-11 w-11 flex-shrink-0">
<img
Expand All @@ -182,7 +182,7 @@ export const DashboardTable: React.FC<Props> = ({
/>
</div>
<div className="ml-4">
<div className="capitalize font-medium text-gray-900">
<div className="capitalize font-medium text-primary-950">
{pet.name}
</div>
<div className="truncate w-[250px] mt-1 text-gray-500">
Expand Down Expand Up @@ -214,7 +214,7 @@ export const DashboardTable: React.FC<Props> = ({
text={pet.adopted ? t('common:adopted') : t('common:available')}
/>
</td>
<td className="whitespace-nowrap px-6 py-4 rounded-e-xl">
<td className={`whitespace-nowrap px-6 py-4 ${index === 0 ? 'rounded-br-xl' : 'rounded-e-xl'}`}>
<div className="flex gap-2 justify-end">
<BaseButton
style="tertiary"
Expand Down
Loading

0 comments on commit 8d20df7

Please sign in to comment.