📝 docs: Modification of bar navigation, publications page and other p…

…ages - v.0.2.20

src/components/navigationDiscovery.tsx

@@ -18,7 +18,7 @@ import { Link } from "react-router-dom";
 export default function Navigation() {
   return (
     <>
-      <header className="fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-black text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700">
+      <header className="fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-black border-b border-gray-700 text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700">
         <nav className="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
           <div className="me-5 lg:me-0 lg:hidden">
             <a
@@ -171,7 +171,8 @@ export default function Navigation() {
   fixed inset-y-0 start-0 z-[60]
   bg-black
   lg:block lg:translate-x-0 lg:end-auto lg:bottom-0
-  dark:bg-black dark:black"
+  dark:bg-black dark:black
+  border-r border-gray-700"
         role="dialog"
         aria-label="Sidebar"
       >
@@ -281,7 +282,7 @@ export default function Navigation() {
       <Link to="/404" className="text-gray-500 hover:text-gray-700 transition-all">Documentation •</Link>
       <Link to="/404" className="text-gray-500 hover:text-gray-700 transition-all">GitHub repository</Link>
       </div>
-      <p className="relative ml-3 mr-3 mb-2 font-bold text-xs text-gray-700">Saguenay is an open-source social network, with no ads and no weird trackers. <i>(v.0.2.19)</i></p>
+      <p className="relative ml-3 mr-3 mb-2 font-bold text-xs text-gray-700">Saguenay is an open-source social network, with no ads and no weird trackers. <i>(v.0.2.20)</i></p>
         <a href="https://github.com/mpcgt/saguenay" target="_blank" className="relative ml-3 mr-3 mb-5 font-bold text-xs underline text-gray-700 hover:text-gray-800">GitHub Repository</a>
         </div>
       </div>

src/components/pages/discovery.tsx

@@ -10,13 +10,13 @@ export default function Discovery() {
   }, []);
     return (
       <>
-      <div>
+      <div className="bg-black">
         <Navigation />
-      </div>
       <ViewPosts />
         <div className="min-h-screen flex items-center justify-center">
         <ScreenTime />
         </div>
+      </div>
     </>
     );
   }

src/components/pages/groups.tsx

@@ -15,7 +15,8 @@ export default function Groups() {
   return (
     <>
     <Navigation />
-    <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-72 mt-20">
+    <div className="bg-black">
+    <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-72 mt-16">
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
         <div className="group flex flex-col h-full bg-black border shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
           <div className="h-52 flex flex-col justify-center items-center bg-orange-400 rounded-t-xl">
@@ -217,6 +218,7 @@ export default function Groups() {
         </div>
       </div>
     </div>
+    </div>
 </>
   )
 }

src/components/pages/notifications.tsx

@@ -52,9 +52,10 @@ export default function Notification() {
   return (
     <>
     <Navigation />
-    <div className="min-h-screen bg-neutral-800 py-12 px-4 sm:px-6 lg:px-8 mt-20">
+    <div className="bg-black">
+    <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8 mt-16">
       <div className="max-w-3xl mx-auto">
-        <div className="bg-black shadow rounded-lg overflow-hidden">
+        <div className="shadow rounded-lg overflow-hidden">
           <div className="p-4 sm:p-6 border-b border-gray-200">
             <div className="flex items-center justify-between">
               <h1 className="text-lg font-medium text-white">Notifications</h1>
@@ -102,6 +103,7 @@ export default function Notification() {
         </div>
       </div>
     </div>
+    </div>
     </>
   )
 }

src/components/pages/settings.tsx

@@ -15,8 +15,9 @@ export default function Settings() {
   return (
     <>
     <Navigation />
-    <div className="min-h-screen bg-neutral-800 py-12 px-4 sm:px-6 lg:px-8 mt-20">
-      <div className="max-w-md mx-auto bg-black rounded-lg shadow-md overflow-hidden">
+    <div className="bg-black">
+    <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8 mt-16">
+      <div className="max-w-md mx-auto bg-gray-900 rounded-lg shadow-md overflow-hidden">
         <div className="px-4 py-5 sm:p-6">
           <h1 className="text-lg font-medium leading-6 text-white mb-4">Settings</h1>
 
@@ -50,6 +51,7 @@ export default function Settings() {
         </div>
       </div>
     </div>
+    </div>
     </>
   )
 }

src/components/posts/CreatePost.tsx

@@ -44,7 +44,8 @@ const CreatePost = () => {
   return (
     <>
       <Navigation />
-      <div className="w-full pt-10 mx-auto flex flex-col items-center mt-20">
+      <div className="bg-black">
+      <div className="w-full pt-10 mx-auto flex flex-col items-center mt-16">
         <h1 className="text-3xl mb-5 font-bold">Create Post</h1>
         <form
           onSubmit={handleSubmit}
@@ -129,6 +130,7 @@ const CreatePost = () => {
           </div>
         </form>
       </div>
+      </div>
     </>
   );
 };

src/components/posts/ViewPosts.tsx

@@ -63,8 +63,8 @@ const ViewPosts = () => {
 
   return (
     <>
-      <div className="flex flex-col items-center justify-center h-full text-white mt-20">
-        <h1 className="text-3xl font-bold mb-4">
+      <div className="flex flex-col items-center justify-center h-full text-white bg-black mt-16">
+        <h1 className="text-3xl font-bold mt-5 mb-4">
           Publications in real time&nbsp;&nbsp;
           <FontAwesomeIcon
             icon={faCircle}
@@ -97,7 +97,7 @@ const ViewPosts = () => {
             {posts.map((post) => (
               <li
                 key={post.id}
-                className="border-t border-b border-gray-700 bg-black p-4 mb-3 rounded"
+                className="border border-gray-700 p-4 "
               >
                 <h2 className="text-sm text-gray-400">
                   {findUserName(post.user_name)}
@@ -108,22 +108,22 @@ const ViewPosts = () => {
                 <p className="text-sm text-gray-400 mt-2">
                   {new Date(post.created_at).toLocaleString()}
                 </p>
-                <div className="bg-gray-900 mt-3 w-44 rounded-xl">
+                <div className="flex justify-between border-t border-gray-600 mt-3">
                   <FontAwesomeIcon
                     icon={faHeart}
-                    className="m-3 text-lg hover:text-red-500 cursor-pointer transition-all"
+                    className="m-3 text-lg text-gray-500 hover:text-red-500 cursor-pointer transition-all"
                   />
                   <FontAwesomeIcon
                     icon={faComment}
-                    className="m-3 text-lg hover:text-blue-400 cursor-pointer transition-all"
+                    className="m-3 text-lg text-gray-500 hover:text-blue-400 cursor-pointer transition-all"
                   />
                   <FontAwesomeIcon
                     icon={faShareFromSquare}
-                    className="m-3 text-lg hover:text-green-300 cursor-pointer transition-all"
+                    className="m-3 text-lg text-gray-500 hover:text-green-300 cursor-pointer transition-all"
                   />
                   <FontAwesomeIcon
                     icon={faBookmark}
-                    className="m-3 text-lg hover:text-indigo-400 cursor-pointer transition-all"
+                    className="m-3 text-lg text-gray-500 hover:text-indigo-400 cursor-pointer transition-all"
                   />
                 </div>
               </li>
@@ -132,8 +132,9 @@ const ViewPosts = () => {
         )}
       </div>
       <div className="fixed top-20 right-10 justify-end text-white hidden lg:block ">
-        <div className="bg-black text-white p-4 rounded-lg max-w-xs">
-          <h2 className="text-lg font-semibold mb-4">You might like</h2>
+        <div className="bg-gray-900 text-white p-4 rounded-2xl max-w-xs">
+          <h2 className="text-lg font-semibold mb-2">You might like</h2>
+          <hr className="border-gray-600 w-32 mb-4" />
           <ul className="space-y-4">
             {suggestions.map((suggestion, index) => (
               <li key={index} className="flex items-center justify-between">
@@ -160,7 +161,7 @@ const ViewPosts = () => {
               </li>
             ))}
           </ul>
-          <button className="text-blue-400 mt-4 text-sm">Show more</button>
+          <button className="bg-gray-800 text-indigo-400 mt-4 text-sm">Show more</button>
         </div>
       </div>
     </>