fixes after tailwind upgrade

db_perms/permission-unique-names.ts

 export enum PERMS {
   role_manage = "MANAGE_ROLE_PERMISSION",
   file_res_manage = "MANAGE_FILE_RESOURCE",
-  example_res_manage = "MANAGE_EXAMPLE_RESOURCE"
+  example_res_manage = "MANAGE_EXAMPLE_RESOURCE",
+  order_manage = "MANAGE_ORDER",
+  product_manage = "MANAGE_PRODUCT"
 }

db_seed.ts

@@ -5,7 +5,15 @@ import { ROLES } from "./db_perms/roles-unique-names";
 
 const ROLE_PERMS: { role: ROLES; perms: PERMS[] }[] = [
   { role: ROLES.superadmin, perms: [PERMS.role_manage] },
-  { role: ROLES.admin, perms: [PERMS.file_res_manage, PERMS.example_res_manage] }
+  {
+    role: ROLES.admin,
+    perms: [
+      PERMS.file_res_manage,
+      PERMS.example_res_manage,
+      PERMS.order_manage,
+      PERMS.product_manage
+    ]
+  }
 ];
 
 // note: handy during dev, annoying on prod.

src/components/product-tile.tsx

@@ -24,7 +24,7 @@ export default function ProductTile(props: { product: Product }) {
           <h3 class="mb-2 text-xl font-bold">{product.name}</h3>
         </div>
         <div class="mb-3 flex items-center">
-          <div class="group relative mr-3 inline-flex h-3/4 w-full flex-shrink-0 items-center justify-center">
+          <div class="group relative mr-3 inline-flex h-3/4 w-full shrink-0 items-center justify-center">
             <div class="absolute bottom-0 hidden w-full p-1 text-center text-xs leading-4 text-red-800 group-hover:block">
               {product.description}
             </div>
@@ -33,7 +33,7 @@ export default function ProductTile(props: { product: Product }) {
             </Show>
           </div>
         </div>
-        <div class="mt-3 flex flex-grow justify-between">
+        <div class="mt-3 flex grow justify-between">
           <p class="inline-flex font-bold">{product.pricePerI}</p>
           <A
             href={"/product-detail/" + product.id}

src/routes/admin/orders.tsx

@@ -12,6 +12,7 @@ import {
 import { parseOrderItemsJson } from "~/server/lib/order/order-utils";
 import ActionErrorMessageComponent from "~/components/action-result-sub/action-error-message";
 import AdminLayout from "~/components/layouts/admin-layout";
+import { PERMS } from "../../../db_perms/permission-unique-names";
 
 const getOrders = cache(async () => {
   "use server";
@@ -62,13 +63,13 @@ function OrderDetailComponent(props: { order: OrderEx }) {
         </div>
         <div class="flex w-1/6 flex-col items-end">
           <button class="group relative" onClick={toggleShowExpanded}>
-            <div class="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 ring-opacity-30 transition-all duration-200 hover:ring-8 group-focus:ring-4">
+            <div class="ring-opacity-30 relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden rounded-full bg-slate-700 shadow-md ring-0 ring-gray-300 transition-all duration-200 group-focus:ring-4 hover:ring-8">
               <div class="flex h-[20px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300">
                 <div
                   class={`h-[2px] w-7 origin-left transform bg-white transition-all duration-300 ${showExpanded() ? "rotate-[42deg]" : ""}`}
                 ></div>
                 <div
-                  class={`h-[2px] w-1/2 transform rounded bg-white transition-all duration-300 ${showExpanded() ? "-translate-x-10" : ""}`}
+                  class={`h-[2px] w-1/2 transform rounded-sm bg-white transition-all duration-300 ${showExpanded() ? "-translate-x-10" : ""}`}
                 ></div>
                 <div
                   class={`h-[2px] w-7 origin-left transform bg-white transition-all duration-300 ${showExpanded() ? "-rotate-[42deg]" : ""}`}
@@ -89,7 +90,7 @@ function OrderDetailComponent(props: { order: OrderEx }) {
               ))
             : "There are no items submitted in this order."}
         </ul>
-        <div class="m-1 flex h-fit w-full flex-row gap-5 pl-4 pr-4">
+        <div class="m-1 flex h-fit w-full flex-row gap-5 pr-4 pl-4">
           <span class="m-auto h-full"></span>
           <Show when={!props.order.completedAt && props.order.submittedAt}>
             <button onClick={() => useCompleteOrderAction(props.order.id)}> Complete!</button>
@@ -103,7 +104,7 @@ function OrderDetailComponent(props: { order: OrderEx }) {
         </div>
       </Show>
 
-      <div class="m-1 flex h-fit w-full flex-row gap-5 pl-4 pr-4">
+      <div class="m-1 flex h-fit w-full flex-row gap-5 pr-4 pl-4">
         <span class="m-auto h-full"></span>
         <ActionErrorMessageComponent actionResult={completeOrderActionSub.result} />
         <ActionErrorMessageComponent actionResult={cancelOrderActionSub.result} />
@@ -117,7 +118,7 @@ function OrderDetailComponent(props: { order: OrderEx }) {
 export default function OrdersAdminPage() {
   const orders = createAsync(async () => await getOrders());
   return (
-    <AdminLayout hasPerms={["MANAGE_ORDER"]}>
+    <AdminLayout hasPerms={PERMS.order_manage}>
       <main>
         <Title>Orders admin</Title>
         <h1>Orders: </h1>

src/routes/admin/products-admin.tsx

@@ -114,14 +114,14 @@ function ListElementComponent(props: {
                 <Show when={i > 0}>
                   <button
                     onClick={() => useSwapFileResourceOrderAction(imgFile, imgs[i - 1])}
-                    class="absolute left-0 top-0 m-1 opacity-0 transition duration-300 group-hover:opacity-100"
+                    class="absolute top-0 left-0 m-1 opacity-0 transition duration-300 group-hover:opacity-100"
                   >
                     <Icon path={arrowLeft} class="h-4 w-4 fill-green-600 stroke-green-700" />
                   </button>
                 </Show>
                 <button
                   onClick={() => useDeleteFileResourceAction(imgFile.id)}
-                  class="absolute right-0 top-0 m-1 opacity-0 transition duration-300 group-hover:opacity-100"
+                  class="absolute top-0 right-0 m-1 opacity-0 transition duration-300 group-hover:opacity-100"
                 >
                   <Icon path={trash} class="h-4 w-4 fill-red-600 stroke-red-700" />
                 </button>
@@ -225,7 +225,7 @@ export default function ProductsAdminPage() {
             <div class="m-auto w-fit">
               <button
                 type="submit"
-                class="m-2 bg-gradient-to-br from-indigo-600 from-10% via-sky-500 via-30% to-amber-600 to-90% object-center p-4 hover:from-red-700 hover:from-10% hover:via-amber-500 hover:via-30% hover:to-amber-800"
+                class="m-2 bg-linear-to-br from-indigo-600 from-10% via-sky-500 via-30% to-amber-600 to-90% object-center p-4 hover:from-red-700 hover:from-10% hover:via-amber-500 hover:via-30% hover:to-amber-800"
               >
                 Submit
               </button>
@@ -237,7 +237,7 @@ export default function ProductsAdminPage() {
           </FormWithSchema>
         </div>
         <Show when={openAddFilesPopupForId()}>
-          <div class="z-100 bg-clr-overlay fixed left-0 top-0 flex h-full w-full items-center justify-center">
+          <div class="bg-clr-overlay fixed top-0 left-0 z-100 flex h-full w-full items-center justify-center">
             <div class="">
               <form
                 action={addFilesToResource}
@@ -255,7 +255,7 @@ export default function ProductsAdminPage() {
                 <div class="m-auto w-fit">
                   <button
                     type="submit"
-                    class="m-2 bg-gradient-to-br from-indigo-600 from-10% via-sky-500 via-30% to-amber-600 to-90% object-center p-4 hover:from-red-700 hover:from-10% hover:via-amber-500 hover:via-30% hover:to-amber-800"
+                    class="m-2 bg-linear-to-br from-indigo-600 from-10% via-sky-500 via-30% to-amber-600 to-90% object-center p-4 hover:from-red-700 hover:from-10% hover:via-amber-500 hover:via-30% hover:to-amber-800"
                   >
                     Submit
                   </button>

src/routes/admin/resource-example.tsx

@@ -253,7 +253,7 @@ export default function ResourceExamplePage() {
                 .filter((r) => !!r)
                 .join(", ");
               const errors = result
-                .map((r) => (r && r instanceof Error ? (r.message ?? r.name) : undefined))
+                .map((r) => (r && r instanceof Error ? r.message ?? r.name : undefined))
                 .filter((r) => !!r);
               return (
                 "Successfully added file(s): " +

src/routes/admin/users.tsx

@@ -9,6 +9,7 @@ import { Icon } from "solid-heroicons";
 import { plus, lockClosed } from "solid-heroicons/solid-mini";
 import ActionErrorMessageComponent from "~/components/action-result-sub/action-error-message";
 import AdminLayout from "~/components/layouts/admin-layout";
+import { PERMS } from "../../../db_perms/permission-unique-names";
 
 const includeRolesArg = { include: { roles: true } };
 const getUsersRoles = cache(async () => {
@@ -362,7 +363,7 @@ export default function UsersAdminPage() {
   };
 
   return (
-    <AdminLayout hasPerms={["MANAGE_ROLE_PERMISSION"]}>
+    <AdminLayout hasPerms={PERMS.role_manage}>
       <main>
         <Title>Users</Title>
         <h1>Role permissions</h1>