Merge pull request #151 from wyeworks/feat/fe-change-req-buttons

[FE] changing style from group view
wyeworks · Oct 14, 2023 · 25935b3 · 25935b3
2 parents 6a44f3b + d29bb09
commit 25935b3
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/client/public/default_group_banner.png b/client/public/default_group_banner.png
diff --git a/client/src/app/(protected)/groups/[id]/Content/MemberCard.tsx b/client/src/app/(protected)/groups/[id]/Content/MemberCard.tsx
@@ -97,16 +97,18 @@ export default function MemberCard({
           <Button
             text='Aceptar'
             type='button'
-            Icon={<UserPlusIcon className='mr-1 h-5 w-5' />}
+            Icon={
+              <UserPlusIcon className='mr-2 h-5 w-5 shrink-0 text-green-600' />
+            }
             classNameWrapper='h-4'
-            className='h-8 items-center !bg-[#BCEDFF] !font-light !text-black hover:!bg-blue-300 sm:m-3'
+            className='h-8 items-center border-[1.5px]  border-green-600 !bg-transparent !font-medium !text-green-600 hover:!bg-gray-200 sm:m-3'
             onClick={() => handleJoin('accepted')}
           />
           <Button
             text='Rechazar'
             type='button'
-            Icon={<TrashIcon className='h-6 w-6' />}
-            className=' h-8 items-center !bg-gray-300 !font-light !text-black hover:!bg-gray-400 sm:m-3'
+            Icon={<TrashIcon className='mr-1 h-5 w-5 shrink-0 text-red-600' />}
+            className=' h-8 items-center border-[1.5px]  border-red-600 !bg-transparent !font-medium !text-red-600 hover:!bg-gray-200 sm:m-3'
             onClick={() => handleJoin('rejected')}
           />
         </div>

diff --git a/client/src/app/(protected)/groups/[id]/GroupInfo.tsx b/client/src/app/(protected)/groups/[id]/GroupInfo.tsx
@@ -108,9 +108,9 @@ export default function GroupInfo({ group, subject, user }: GroupInfoProps) {
       <div className='col-span-1'></div>
       <div className='text-center sm:col-span-3 sm:text-left '>
         <div className='flex'>
-          <div className='flex w-full items-center justify-center sm:justify-start md:w-[85%]'>
+          <div className='block w-full items-center justify-center sm:justify-start md:flex md:w-[85%]'>
             <h1 className='mb-3 text-4xl'>{name}</h1>
-            <span className='text-md mb-2 ml-2 rounded-full bg-primaryBlue px-2.5 py-0.5 font-medium text-white'>
+            <span className='mb-2 ml-2 rounded-full bg-primaryBlue px-2.5 py-0.5 text-xl font-medium text-white'>
               <strong>#{id}</strong>
             </span>
           </div>

diff --git a/client/src/assets/Icons/GroupSizeIcon.tsx b/client/src/assets/Icons/GroupSizeIcon.tsx
@@ -4,13 +4,19 @@ interface Props {
 
 export default function GroupSizeIcon({ className }: Props) {
   return (
-    <svg viewBox='0 0 24 24' fill='currentColor' className={className}>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth='1.5'
+      stroke='currentColor'
+      className={className}
+    >
       <path
-        fillRule='evenodd'
-        d='M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z'
-        clipRule='evenodd'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z'
       />
-      <path d='M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z' />
     </svg>
   );
 }
diff --git a/client/src/components/common/Header.tsx b/client/src/components/common/Header.tsx
@@ -74,13 +74,13 @@ export default function Header({ user }: HeaderProps) {
       <Disclosure as='nav' className='bg-primaryBlue'>
         {({ open }) => (
           <>
-            <div className='w-full'>
+            <div className='w-full py-1'>
               <div className='flex h-16 items-center justify-between'>
                 <div className='flex items-center'>
                   <div className='flex-shrink-0'>
                     <Link
                       href='/home'
-                      className='mx-2 flex cursor-pointer items-center'
+                      className='ml-4 flex cursor-pointer items-center'
                       data-testid='finder-logo'
                     >
                       <FinderLogoIcon fill='white' height={50} width={41.666} />