Skip to content

refactor changing HTML tags for semantic tags #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 27, 2023
Merged

refactor changing HTML tags for semantic tags #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e73ad0
Fix: navigate to home by clicking on the logo
EdwinDev6 Sep 19, 2023
835786e
Refactor semantic html in login and navbar
EdwinDev6 Sep 20, 2023
a9dd00f
feat(semantics): Change HTML tags for semantic tags
EdwinDev6 Sep 20, 2023
13cf881
Fix warning in cosole
EdwinDev6 Sep 20, 2023
9fcd1aa
Fix The admin cannot have the user view and vice versa.
EdwinDev6 Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 15 additions & 26 deletions src/components/Login/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,41 +17,35 @@ const Signin = () => {
return (
<div className="bg-black dark:bg-gray-900">
<div className="flex justify-center h-screen">
<div
className="hidden bg-cover lg:block lg:w-2/3"
style={{ backgroundImage: `url('${backgroundImage}')` }}
>
<section className="hidden bg-cover lg:block lg:w-2/3" style={{ backgroundImage: `url('${backgroundImage}')` }}>
<div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
<div>
<h2 className="text-4xl font-bold text-white">TechTalk News</h2>
<article>
<h1 className="text-4xl font-bold text-white">TechTalk News</h1>
<p className="max-w-xl mt-3 text-gray-300">
Welcome to TechTalk, the go-to social network for technology and
news enthusiasts! Here, you can connect with a passionate
community that shares your interests and discover the latest
trends in the digital world.
</p>
</div>
</article>
</div>
</div>
</section>

<div className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
<aside className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
<div className="flex-1">
<div className="text-center">
<h2 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
<header className="text-center">
<h1 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
TechTalk
</h2>
</h1>
<p className="mt-3 text-gray-500 dark:text-gray-300">
Sign in to access your account
</p>
</div>
</header>

<div className="mt-8">
<form onSubmit={handleSubmit}>
<div>
<label
htmlFor="email"
className="block mb-2 text-sm text-gray-600 dark:text-gray-200"
>
<label htmlFor="email" className="block mb-2 text-sm text-gray-600 dark:text-gray-200">
Email Address
</label>
<input
Expand All @@ -68,16 +62,10 @@ const Signin = () => {

<div className="mt-6">
<div className="flex justify-between mb-2">
<label
htmlFor="password"
className="text-sm text-gray-600 dark:text-gray-200"
>
<label htmlFor="password" className="text-sm text-gray-600 dark:text-gray-200">
Password
</label>
<a
href="*"
className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline"
>
<a href="*" className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">
Forgot password?
</a>
</div>
Expand Down Expand Up @@ -122,9 +110,10 @@ const Signin = () => {
</p>
</div>
</div>
</div>
</aside>
</div>
</div>
);
};

export default Signin;
48 changes: 27 additions & 21 deletions src/components/Navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
import { Link, useLocation } from "react-router-dom";
import useAuth from "../../hooks/useAuth";
import Cookies from 'js-cookie';
import Cookies from "js-cookie";

const Navbar = () => {
const location = useLocation();
const isLoginPage = location.pathname === "/login";
const isHomePage = location.pathname === "/";
const isFormPage = location.pathname === "/new";
const isAdminPage = location.pathname === "/admin";
const userListPage = location.pathname === "/users"
const isContactPage = location.pathname === "/contact"
const userListPage = location.pathname === "/users";
const isContactPage = location.pathname === "/contact";

const { setAuth } = useAuth();

const handleLogout = () => {
setAuth({ roles: null, token: null });
Cookies.remove('token');
Cookies.remove('roles');
Cookies.remove("token");
Cookies.remove("roles");
window.location = "/login";
};

Expand All @@ -27,14 +28,17 @@ const Navbar = () => {
const toggleMenu = () => {
setOpen(!open);
};
if (isLoginPage) {
return null;
}

return (
<div className="antialiased bg-white dark-mode:bg-gray-900">
<div className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<header className="antialiased bg-white dark-mode:bg-gray-900">
<nav className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8 ">
<div className="flex flex-row items-center justify-between p-4">
<Link
to="/"
to="#"
className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline "
>
TechTalk News
Expand Down Expand Up @@ -65,7 +69,7 @@ const Navbar = () => {
open ? "flex" : "hidden"
} pb-4 md:pb-0 md:flex md:justify-end md:flex-row navbar-transition animate-flip-down duration-700`}
>
{!isAdminPage && !isFormPage && !userListPage && (
{!isAdminPage && !isFormPage && !userListPage && (
<Link
to="/"
className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
Expand All @@ -83,16 +87,18 @@ const Navbar = () => {
</Link>
)}

{!isHomePage && isFormPage && !isContactPage && (
<Link
to="/admin"
className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
>
Admin Page
</Link>
)}
{(!isHomePage || (userListPage && !isContactPage)) &&
!isAdminPage &&
location.pathname !== "/contact" && (
<Link
to="/admin"
className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
>
Admin Page
</Link>
)}

{!isHomePage && isAdminPage &&(
{!isHomePage && isAdminPage && (
<Link
to="/users"
className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline hover:underline"
Expand All @@ -115,15 +121,15 @@ const Navbar = () => {
className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline "
onClick={handleLogout}
>
{Cookies.get('token') ? "Logout" : "Login"}{" "}
{Cookies.get("token") ? "Logout" : "Login"}{" "}
<FontAwesomeIcon icon={faSignOutAlt} />
</button>
</div>
)}
</nav>
</div>
</div>
</div>
</nav>
</header>
);
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/PostCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ export function PostCard({ post }) {
};

return (
<div className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10 animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
<div className="flex items-center justify-between px-4">
<article className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10 animate-fade-down animate-once animate-duration-[500ms] animate-ease-out">
<header className="flex items-center justify-between px-4">
<div className="flex justify-between items-center py-4">
<img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
<div className="ml-3">
Expand Down Expand Up @@ -116,7 +116,7 @@ export function PostCard({ post }) {
</span>
</button>
</div>
</div>
</header>

{post.image && insertMedia(post.image.url)}

Expand All @@ -126,6 +126,6 @@ export function PostCard({ post }) {
{post.description}
</p>
</div>
</div>
</article>
);
}
20 changes: 10 additions & 10 deletions src/components/PostCardUser.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@ import logoImg from "../Images/postimg.jpg";

export function PostCardUser({ post }) {
const normalDate = moment(post.createdAt).format("DD/MM/YYYY");

return (

<div className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10 ">

<div className="flex items-center justify-between px-4">
<article className="container mx-auto max-w-2xl bg-white rounded shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
<header className="flex items-center justify-between px-4">
<div className="flex justify-between items-center py-4">
<img className="w-12 rounded-full" src={logoImg} alt="logo" />
<div className="ml-3">
<h1 className="text-xl font-bold text-gray-800 cursor-pointer">
TechTalk
</h1>
<p className="text-sm text-gray-800 hover:underline cursor-pointer">

{normalDate}
</p>
</div>
Expand All @@ -33,18 +31,20 @@ export function PostCardUser({ post }) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z "
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</div>
</div>
</header>

{post.image && insertMedia(post.image.url)}

<div className="p-6">
<h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
<p className="text-lg font font-thin text-black text-justify">{post.description}</p>
<p className="text-lg font font-thin text-black text-justify">
{post.description}
</p>
</div>
</div>

</article>
);
}
32 changes: 14 additions & 18 deletions src/components/signup/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ const Signup = () => {
const { data, error, handleChange, handleSubmit } = useSignupLogic();

return (
<div className="min-h-screen flex flex-col items-center justify-center bg-black dark:bg-gray-900 ">
<div className="flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-3xl w-50 max-w-md animate-flip-down animate-once animate-duration-[4000ms] animate-ease-out">
<div className="font-medium self-center text-xl sm:text-3xl text-gray-800">
<section className="min-h-screen flex flex-col items-center justify-center bg-black dark:bg-gray-900 ">
<article className="flex flex-col bg-white shadow-md px-4 sm:px-6 md:px-8 lg:px-10 py-8 rounded-3xl w-50 max-w-md animate-flip-down animate-once animate-duration-[4000ms] animate-ease-out">
<header className="font-medium self-center text-xl sm:text-3xl text-gray-800">
Join us Now
</div>
<div className="mt-4 self-center text-xl sm:text-sm text-gray-800">
</header>
<p className="mt-4 self-center text-xl sm:text-sm text-gray-800">
Enter your credentials to get access account
</div>
</p>

<div className="mt-10">
<section className="mt-10">
<form onSubmit={handleSubmit}>
<div className="flex flex-col mb-5">
<label
Expand Down Expand Up @@ -110,14 +110,10 @@ const Signup = () => {
</button>
</div>
</form>
</div>
</div>
<div className="flex justify-center items-center mt-6">
<a
href="/login"
target="_blank"
className="inline-flex items-center text-white font-medium text-xs text-center"
>
</section>
</article>
<footer className="flex justify-center items-center mt-6">
<p className="inline-flex items-center text-white font-medium text-xs text-center">
<span className="ml-2">
You have an account?{" "}
<a
Expand All @@ -127,9 +123,9 @@ const Signup = () => {
Login here
</a>
</span>
</a>
</div>
</div>
</p>
</footer>
</section>
);
};

Expand Down
Loading