Skip to content

Commit

Permalink
Fix the layout issues (sef-global#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anjula-sack
anjula-sack authored May 26, 2024
1 parent f6907ad commit f6ab30c
Show file tree
Hide file tree
Showing 14 changed files with 257 additions and 256 deletions.
7 changes: 6 additions & 1 deletion src/components/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const Home: React.FC = () => {

<section className="section py-12">
<div className="text-center">
<div className="text-3xl font-bold text-center mb-4 text-[#32325D]">
<div className="text-xl md:text-3xl font-bold text-center mb-4 text-[#32325D]">
Our mentors are from{' '}
<span className="text-xl align-text-top">*</span>
</div>
Expand Down Expand Up @@ -144,6 +144,11 @@ const Home: React.FC = () => {
<FAQSection faqs={menteeFAQs} />
</div>
</section>

<p className="text-xs mt-12 mx-3 text-center">
*Our mentors engage in mentoring voluntarily in their leisure time and
we don&apos;t have a direct affiliation with the mentioned organisations
</p>
</>
);
};
Expand Down
26 changes: 10 additions & 16 deletions src/components/Layout/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,17 @@ import React from 'react';

const Footer: React.FC = () => (
<footer className="text-center">
<div className="text-center">
<p className="text-xs my-12 mx-3">
*Our mentors engage in mentoring voluntarily in their leisure time and
we don&apos;t have a direct affiliation with the mentioned organisations
<div className="text-base text-darkmod-blue font-normal my-12">
<p>
© {new Date().getFullYear()}
<a
href="https://sefglobal.org/"
className="active:text-darkmod-blue font-normal"
>
{' '}
Sustainable Education Foundation - SEF
</a>
</p>
<div className="text-base text-darkmod-blue font-normal my-12">
<p>
© {new Date().getFullYear()}
<a
href="https://sefglobal.org/"
className="active:text-darkmod-blue font-normal"
>
{' '}
Sustainable Education Foundation - SEF
</a>
</p>
</div>
</div>
</footer>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ interface LayoutProps {
const MainLayout: React.FC<LayoutProps> = ({ children }) => (
<>
<Navbar />
<section className="min-h-[80vh] p-4 m-4 md:mx-8 md:my-[30px]">
<section className="min-h-[80vh] p-4 md:mx-8 md:my-[30px]">
{children}
</section>
<Footer />
Expand Down
282 changes: 141 additions & 141 deletions src/components/Layout/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const Navbar: React.FC = () => {

const handleLogoutModalOpen = (): void => {
setIsLogoutModalVisible(true);
toggleDropdown();
};

const handleMentorRegistration = (): void => {
Expand Down Expand Up @@ -96,99 +97,156 @@ const Navbar: React.FC = () => {
<Link to="/">
<img
src="/scholarx-logo.png"
className="h-12"
className="md:h-12 h-10"
alt="ScholarX Logo"
/>
</Link>
<div className="flex items-center">
<ul className="items-baseline hidden md:flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
<li>
<Link
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 cursor-pointer"
to="/mentors"
>
Find a mentor
</Link>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
About
</a>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
Initiatives
</a>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
Join Us
</a>
</li>
{!isUserMentor && (
<li>
<button
type="button"
onClick={handleMentorRegistration}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2"
>
Become a Mentor
</button>
</li>
)}

{user != null && (
<div
className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse relative"
ref={dropdownRef}
>
<button
type="button"
className="flex w-8 h-8 justify-center items-center text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300"
onClick={toggleDropdown}
>
{user?.image_url !== '' ? (
<img
className="w-8 h-8 rounded-full"
src={user?.image_url}
alt="user photo"
/>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-user"
<li>
{user === null && (
<button
type="button"
onClick={handleLoginModalOpen}
className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
Login
</button>
)}
</button>
{/* Dropdown menu */}
</li>
</ul>
{user != null && (
<div
className={`z-50 ${
isDropdownOpen ? 'block' : 'hidden'
} my-4 text-base list-none top-5 right-5 bg-white divide-y absolute divide-gray-100 rounded-lg shadow`}
className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse relative"
ref={dropdownRef}
>
<div className="px-4 py-3">
<span className="block text-sm text-gray-900">
{user?.first_name} {user?.last_name}
</span>
<span className="block text-sm text-gray-500 truncate">
{user?.primary_email}
</span>
</div>
<ul className="py-2" aria-labelledby="user-menu-button">
<li>
<p
onClick={() => {
if (isUserMentor) {
navigate('/mentor/dashboard');
} else if (isUserAdmin) {
navigate('/admin/dashboard');
} else {
navigate('/mentee/dashboard');
}
setIsDropdownOpen(false);
}}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
>
Dashboard
</p>
</li>
<li>
<Link
to="/settings"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
<button
type="button"
className="flex mr-3 w-8 md:w-10 h-8 md:h-10 justify-center items-center text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300"
onClick={toggleDropdown}
>
{user?.image_url !== '' ? (
<img
className="w-8 md:w-10 h-8 md:h-10 rounded-full"
src={user?.image_url}
alt="user photo"
/>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-user"
>
Settings
</Link>
</li>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
)}
</button>
{/* Dropdown menu */}
<div
className={`z-50 ${
isDropdownOpen ? 'block' : 'hidden'
} my-4 text-base list-none top-5 md:right-5 right-0 bg-white divide-y absolute divide-gray-100 rounded-lg shadow`}
>
<div className="px-4 py-3">
<span className="block text-sm text-gray-900">
{user?.first_name} {user?.last_name}
</span>
<span className="block text-sm text-gray-500 truncate">
{user?.primary_email}
</span>
</div>
<ul className="py-2" aria-labelledby="user-menu-button">
<li>
<p
onClick={() => {
if (isUserMentor) {
navigate('/mentor/dashboard');
} else if (isUserAdmin) {
navigate('/admin/dashboard');
} else {
navigate('/mentee/dashboard');
}
setIsDropdownOpen(false);
}}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
>
Dashboard
</p>
</li>
<li>
<Link
to="/settings"
onClick={toggleDropdown}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
Settings
</Link>
</li>

<li>
<p
onClick={handleLogoutModalOpen}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
>
Log out
</p>
</li>
</ul>
<li>
<p
onClick={handleLogoutModalOpen}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
>
Log out
</p>
</li>
</ul>
</div>
</div>
</div>
)}
<div className="flex">
)}
{user === null && (
<button
type="button"
Expand All @@ -209,7 +267,7 @@ const Navbar: React.FC = () => {
aria-expanded="false"
>
<svg
className="w-5 h-5"
className="w-6 h-6"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand All @@ -225,64 +283,6 @@ const Navbar: React.FC = () => {
</svg>
</button>
</div>

<ul className="items-baseline hidden md:flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
<li>
<Link
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 cursor-pointer"
to="/mentors"
>
Find a mentor
</Link>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
About
</a>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
Initiatives
</a>
</li>
<li>
<a
href="#"
className="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 "
>
Join Us
</a>
</li>
{!isUserMentor && (
<li>
<button
type="button"
onClick={handleMentorRegistration}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2"
>
Become a Mentor
</button>
</li>
)}

<li>
{user === null && (
<button
type="button"
onClick={handleLoginModalOpen}
className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
>
Login
</button>
)}
</li>
</ul>
</div>
</nav>

Expand Down
Loading

0 comments on commit f6ab30c

Please sign in to comment.