feat: tailwind-size indicator + better responsiveness in the sign in …

…home
iforge-uos · Apr 18, 2024 · 750dafe · 750dafe
1 parent 0a6d80c
commit 750dafe
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/apps/forge/src/components/dev/Tailwind-Indicator.tsx b/apps/forge/src/components/dev/Tailwind-Indicator.tsx
@@ -0,0 +1,14 @@
+export const TailwindIndicator = () => {
+  if (process.env.NODE_ENV === "production") return null;
+
+  return (
+    <div className="fixed top-1 left-1 z-50 flex h-6 w-6 items-center justify-center bg-gray-800 p-3 rounded-lg font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+};
diff --git a/apps/forge/src/routes/__root.tsx b/apps/forge/src/routes/__root.tsx
@@ -7,6 +7,7 @@ import { AuthContext } from "@/components/auth-provider";
 import { NotFound } from "@/components/routing/NotFound.tsx";
 import { GenericError } from "@/components/routing/GenericError.tsx";
 import { Loading } from "@/components/routing/Loading.tsx";
+import { TailwindIndicator } from "@/components/dev/Tailwind-Indicator.tsx";
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === "production"
@@ -22,6 +23,7 @@ function RootComponent() {
   return (
     <>
       <NavBar />
+      <TailwindIndicator />
       <ScrollRestoration />
       <CommandMenu />
       <Outlet /> {/* This is where child routes will render */}

diff --git a/apps/forge/src/routes/_authenticated/signin/home/index.tsx b/apps/forge/src/routes/_authenticated/signin/home/index.tsx
@@ -409,7 +409,7 @@ const SignInAppComponent = () => {
     items.push(
       {
         title: "Purchase Form",
-        description: "Discover the beauty of thoughtful and functional design.",
+        description: "Add Items that need to be purchased to the list via the purchase form!",
         icon: <Coins className="h-8 w-8 text-neutral-500" />,
         linkText: "Buy",
         externalLink:
@@ -430,28 +430,32 @@ const SignInAppComponent = () => {
       <Title prompt="Signin App Home" />
       <div className="p-4 mt-1">
         <ActiveLocationSelector />
-        <div className="border-2 p-4">
+        <div className="border-2 rounded-md p-4">
           <h1 className="text-xl font-bold mb-4 text-center">Sign in Home</h1>
-          <div className="flex flex-wrap-reverse">
-            <div className="w-1/2">
-              <div className="aspect-[1/1]">
+          <div className="flex flex-col-reverse md:flex-row">
+            <div className="md:w-1/2 flex justify-center items-center p-4">
+              <div className="aspect-square relative w-full h-full">
                 <World data={sampleArcs} globeConfig={globeConfig} />
               </div>
             </div>
-            <div className="w-1/2 justify-items-center">
-              <div className="space-x-1 space-y-1 grid grid-cols-1 gap-4">
+            <div className="md:w-1/2 flex justify-center items-center">
+              <div className="grid grid-cols-1 gap-4 mx-auto">
+                {" "}
+                {/* Use mx-auto for horizontal centering */}
                 {items.map((item) => (
-                  <Card className="max-w-xl">
+                  <Card key={item.title} className="shadow-md rounded-md p-4 max-w-md">
                     <CardHeader>
-                      <CardTitle className="flex flex-wrap">
+                      <CardTitle className="flex items-center">
+                        {" "}
+                        {/* Use items-center for vertical alignment */}
                         {item.icon}
-                        <span className={"ml-2"}>{item.title}</span>
+                        <span className="ml-2">{item.title}</span>
                       </CardTitle>
                     </CardHeader>
-                    <CardContent>{item.description}</CardContent>
+                    <CardContent className="text-balance">{item.description}</CardContent>
                     <CardFooter>
                       <a href={item.externalLink} target="_blank" rel="noopener noreferrer">
-                        <Button>{item.linkText}</Button>
+                        <Button>{item.title}</Button>
                       </a>
                     </CardFooter>
                   </Card>