Add Page Titles

theADAMJR · Aug 10, 2021 · ccdafc4 · ccdafc4
1 parent 05253c8
commit ccdafc4
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 14 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>DClone - Essential</title>
+    <title>DClone | Discord Clone With the Essentials</title>
 
     <!-- External -->
     <link href="http://fonts.cdnfonts.com/css/whitney-2" rel="stylesheet">

diff --git a/frontend/src/components/pages/guild-page.tsx b/frontend/src/components/pages/guild-page.tsx
@@ -16,8 +16,6 @@ const GuildPage: React.FunctionComponent = () => {
   const guild = useSelector(getGuild(guildId));
   const channel = useSelector(getChannel(guildId, channelId));
 
-  document.title = channel?.name ?? guild?.name ?? 'DClone';
-
   useEffect(() => {
     dispatch(pageSwitched({ channel, guild }));
   }, [guild, channel]);
@@ -30,7 +28,7 @@ const GuildPage: React.FunctionComponent = () => {
   }
 
   return (ui.activeGuild) ? (
-    <PageWrapper>
+    <PageWrapper pageTitle={channel?.name ?? guild.name}>
       <Sidebar />
       {(channel)
         ? <div className="bg-bg-primary">

diff --git a/frontend/src/components/pages/home-page.tsx b/frontend/src/components/pages/home-page.tsx
@@ -6,10 +6,10 @@ import PageWrapper from './page-wrapper';
 import './home-page.scoped.css';
 
 const HomePage: React.FunctionComponent = () => {
-  document.title = 'DClone | Discord clone with the essential features';
-
   return (
-    <PageWrapper className="bg-bg-tertiary h-full">
+    <PageWrapper
+      className="bg-bg-tertiary h-full"
+      pageTitle="DClone | Discord Clone With the Essentials">
       <Navbar />
       <section className="text-center my-4">
         <h1>It's time to ditch Skype and TeamSpeak.</h1>

diff --git a/frontend/src/components/pages/loading-page.tsx b/frontend/src/components/pages/loading-page.tsx
@@ -9,7 +9,9 @@ const LoadingPage: React.FunctionComponent = () => {
   const randomIndex = Math.floor(Math.random() * tips.length);
 
   return (
-    <PageWrapper className="flex items-center justify-center h-screen">
+    <PageWrapper
+      pageTitle="Loading..."
+      className="flex items-center justify-center h-screen">
       <div className="text-center">
         <h1 className="text-3xl">Loading...</h1>
         <p className="lead block">{tips[randomIndex]}</p>

diff --git a/frontend/src/components/pages/login-page.tsx b/frontend/src/components/pages/login-page.tsx
@@ -20,7 +20,7 @@ const LoginPage: React.FunctionComponent = () => {
   return (user)
     ? <Redirect to="/channels/@me" />
     : (
-    <PageWrapper>
+    <PageWrapper pageTitle="DClone | Login">
       <div className="flex items-center absolute justify-center h-screen">
         <form
           className="rounded-md shadow bg-bg-primary p-8"

diff --git a/frontend/src/components/pages/not-found-page.tsx b/frontend/src/components/pages/not-found-page.tsx
@@ -1,18 +1,21 @@
 import Particles from 'react-particles-js';
 import { Link } from 'react-router-dom';
 import CircleButton from '../utils/buttons/circle-button';
+import PageWrapper from './page-wrapper';
 
 const NotFoundPage: React.FunctionComponent = () => {
   return (
-    <div className="relative w-screen h-screen">
+    <PageWrapper
+      className="relative w-screen h-screen"
+      pageTitle="DClone | Not Found">
       <header className="absolute text-center bottom-1/2 right-1/2">
         <h1 className="text-4xl pb-3">Not Found</h1>
         <Link to="/">
           <CircleButton>Return Home</CircleButton>
         </Link>
       </header>
       <Particles width="100%" height="100%" />
-    </div>
+    </PageWrapper>
   );
 }
 

diff --git a/frontend/src/components/pages/overview-page.tsx b/frontend/src/components/pages/overview-page.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { pageSwitched } from '../../store/ui';
 import AppNavbar from '../navigation/app-navbar';
 import Sidebar from '../navigation/sidebar/sidebar';
@@ -13,7 +13,9 @@ const OverviewPage: React.FunctionComponent = () => {
   }, []);
 
   return (
-    <PageWrapper className="bg-bg-primary h-full w-full">
+    <PageWrapper
+      className="bg-bg-primary h-full w-full"
+      pageTitle="DClone">
       <Sidebar />
       <AppNavbar />
       <div className="bg-bg-primary h-full w-full flex flex-col flex-grow"></div>

diff --git a/frontend/src/components/pages/page-wrapper.tsx b/frontend/src/components/pages/page-wrapper.tsx
@@ -21,6 +21,7 @@ const PageWrapper: React.FunctionComponent<PageWrapperProps> = (props) => {
 
   useEffect(() => {
     dispatch(ready());
+    document.title = props.pageTitle ?? 'DClone';
   }, []);
 
   return (

diff --git a/frontend/src/theme/discord-theme.css b/frontend/src/theme/discord-theme.css
@@ -51,7 +51,7 @@ textarea {
   background-color: var(--bg-textarea);
 }
 
-:not(nav a)a[href] {
+:not(nav a)[href] {
   color: var(--link);
 }
 nav a {