🏸🥘 ↝ Some styling, tests and auth experiments [ SGV2-6 ]

@/components/garden-dashboard.tsx

@@ -15,16 +15,13 @@ export function GardenDashboard() {
       <div className="flex-1 flex flex-col items-center justify-center text-center">
         <div className="grid gap-4 p-4">
         </div>
-        <div className="grid gap-4 p-4">
-          <Button className="w-full">Go home</Button>
-        </div>
         {/* <QuickLook /> */}
         {/* <DashboardLogs /> */}
         <InventoryBlock />
-        <button onClick={handleOpenGalaxy} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
+        <Button onClick={handleOpenGalaxy} className="mt-4 px-4 py-2 rounded">
             Visit a planet
-        </button>
-        <div className="mt-20">
+        </Button>
+        <div className="mt-20 mb-4">
           {showGalaxy &&
             <>
               <div className="mt-20">

components/Authentication/LoginModal.tsx

@@ -51,7 +51,7 @@ export default function LoginPage() {
         <br />
         <span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
           Don't have an account yet?{' '}
-          <Link href='/signup' className='underline'>
+          <Link href='/login/register' className='underline'>
             go to signup
           </Link>
           .

components/Content/Planets/GalleryList.tsx

@@ -154,8 +154,7 @@ const PlanetGalleryWithSectors: React.FC = () => {
       {planets.map((planet) => (
         <Link legacyBehavior key={planet.id} href={`/planets/${planet.id}`}>
           <a className="sector-link">
-            {/* <div className="sector-hexagon" style={{ backgroundImage: `url(${planet.avatar_url})` }} /> */}
-            <img className="h-12 w-12 mask mask-hexagon" src={planet?.avatar_url} />
+            <img className="h-13 w-13 mask mask-hexagon" src={planet?.avatar_url} />
           </a>
         </Link>
       ))}

components/Overlays/1-Feed.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { GardenDashboard } from '../../@/components/garden-dashboard';
+import { Button } from '../../@/components/ui/button';
 
 interface FeedOverlayProps {
   onClose: () => void;
@@ -21,16 +22,10 @@ const FeedOverlay: React.FC<FeedOverlayProps> = ({ onClose }) => {
 
   return (
     <div className={`fixed inset-x-0 bottom-0 flex justify-center transition-transform duration-300 ${isOpen ? 'translate-y-0' : 'translate-y-full'}`}>
-      <div className="bg-gradient-to-b from-gray-100 via-gray-200 to-blue-100 w-full sm:max-w-screen-lg sm:w-full max-h-60vh overflow-y-auto shadow-lg relative rounded-t-3xl">
+      <div className="bg-gradient-to-b from-gray-100 via-blue-200 to-green-100 w-full sm:max-w-screen-lg sm:w-full max-h-60vh overflow-y-auto shadow-lg relative rounded-t-3xl">
         <div className="p-4">
-          <h2 className="text-2xl font-bold">Feed Overlay</h2>
           <GardenDashboard />
-          <center><button
-            onClick={handleClose}
-            className="mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded"
-          >
-            Close
-          </button></center>
+          <center><Button className=' className="w-full mb-10"' onClick={handleClose}>Close</Button></center>
         </div>
       </div>
     </div>

pages/index.tsx

@@ -23,7 +23,6 @@ import { GardenDashboard } from "../@/components/garden-dashboard";
 import FeedOverlay from "../components/Overlays/1-Feed";
 import Link from "next/link";
 import { AppWindowIcon, MenuIcon } from "lucide-react";
-import { Garden, GardenBar } from "../components/Content/Planets/GalleryList";
 
 export const metadata: Metadata = {
   title: "Star Sailors",
@@ -135,39 +134,7 @@ export function PublicLanding() {
            </div>
          </div>
          {/* Menu Button */}
-         <div className="fixed bottom-0 left-0 w-screen bg-gray-900">
- <GardenBar />
-</div>
-
-<button
- onClick={handleOpenFeedOverlay}
- className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded mb-8 mt-10"
->
- <a
-    href="#_"
-    className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
- >
-    <span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
-      <svg
-        className="w-5 h-5"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-        ></path>
-      </svg>
-    </span>
-    <span className="pl-4 pr-5 py-2.5">Menu</span>
- </a>
-</button>
-
-         {/* {!showFeedOverlay && (
+         {!showFeedOverlay && (
            <button
              onClick={handleOpenFeedOverlay}
              className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
@@ -195,7 +162,7 @@ export function PublicLanding() {
                <span className="pl-4 pr-5 py-2.5">Menu</span>
              </a>
            </button>
-         )} */}
+         )}
       </LayoutNoNav>
      );
 

pages/login/register.tsx

@@ -0,0 +1,31 @@
+import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
+import React, { useEffect } from 'react';
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
+import { useRouter } from 'next/router'; // Import the useRouter hook
+import Layout from '../../components/Section/Layout';
+import LoginPage from '../../components/Authentication/LoginModal';
+
+const Register = () => {
+    const session = useSession();
+    const supabase = useSupabaseClient();
+    const router = useRouter(); // Initialize the useRouter hook
+
+    useEffect(() => {
+        // Check if the user is logged in and then redirect
+        if (session) {
+            router.push('/feed');
+        }
+    }, [session, router]);
+
+    return (
+        <div className='container' style={{ padding: '50px 0 100px 0' }}>
+            {!session ? (
+                <Layout><div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div></Layout>
+            ) : (
+                <Layout>Logged in</Layout>
+            )}
+        </div>
+    );
+};
+
+export default Register;

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
       spacing: {
         '2/3': '66.666667%',
         '3/4': '75%',
+        '13': '5.25rem',
       },
       height: {
         screen: ["100vh", "100dvh"],
@@ -82,5 +83,6 @@ module.exports = {
       '1': '1',
     },
   },
+
   plugins: [require("daisyui")],
 };