Select workspace page styled

apps/webapp/app/routes/__app/index.tsx

@@ -1,4 +1,6 @@
+import { BookmarkIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
+import classNames from "classnames";
 import { useOrganizations } from "~/hooks/useOrganizations";
 import type { Organization } from "~/models/organization.server";
 
@@ -7,16 +9,23 @@ export default function AppLayout() {
 
   return (
     <>
-      <div className="flex items-center justify-center p-12 ">
-        <ul className="grid grid-cols-3 max-w-5xl gap-2">
+      <div className="flex items-center justify-center m-20">
+        <ul className="grid grid-cols-3 max-w-8xl gap-2">
           {organizations ? (
             <OrganizationGrid organizations={organizations} />
           ) : (
             <li>No organizations</li>
           )}
           <li>
-            <Link to="orgs/new" className={boxClasses}>
-              Create a new organization
+            <Link
+              to="orgs/new"
+              className={classNames(
+                "border-2 border-slate-800 hover:bg-slate-950",
+                boxClasses
+              )}
+            >
+              <PlusIcon className="h-10 w-10 text-green-500" />
+              New Organization
             </Link>
           </li>
         </ul>
@@ -42,7 +51,8 @@ function OrganizationGrid({
   );
 }
 
-const boxClasses = "rounded bg-slate-800 px-6 py-5 shadow-sm";
+const boxClasses =
+  "flex flex-col gap-4 items-center min-h-40 rounded px-20 py-20 transition";
 
 function OrganizationGridItem({
   organization,
@@ -50,8 +60,15 @@ function OrganizationGridItem({
   organization: Organization;
 }) {
   return (
-    <li key={organization.id}>
-      <Link to={`orgs/${organization.slug}`} className={boxClasses}>
+    <li key={organization.id} className="w-full h-full">
+      <Link
+        to={`orgs/${organization.slug}`}
+        className={classNames(
+          "bg-slate-900 border-2 border-slate-850 hover:bg-slate-850",
+          boxClasses
+        )}
+      >
+        <BookmarkIcon className="h-10 w-10" />
         {organization.title}{" "}
       </Link>
     </li>