Update list item and application list UI

proofzero · Oct 19, 2023 · 2b30485 · 2b30485
1 parent 36dd1ae
commit 2b30485
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 97 deletions.
diff --git a/apps/console/app/components/Applications/ApplicationList.tsx b/apps/console/app/components/Applications/ApplicationList.tsx
@@ -11,19 +11,22 @@ import type { ApplicationListItemProps } from './ApplicationListItem'
 import _ from 'lodash'
 import { DangerPill } from '@proofzero/design-system/src/atoms/pills/DangerPill'
 import { Link } from '@remix-run/react'
+import classNames from 'classnames'
 
 type ApplicationListProps = {
   applications: ApplicationListItemProps[]
   onCreate: () => void
   navigate: (clientId: string) => void
   transfer: (clientId: string) => void
+  lite?: boolean
 }
 
 export const ApplicationList = ({
   applications,
   onCreate,
   navigate,
   transfer,
+  lite = false,
 }: ApplicationListProps) => {
   const [actionApp, setActionApp] = useState<
     | {
@@ -49,31 +52,35 @@ export const ApplicationList = ({
 
   return (
     <div>
-      <section className="flex justify-between items-start">
-        <Text size="base" weight="semibold" className="text-gray-900">
-          Your Applications
-        </Text>
+      {!lite && (
+        <section className="flex justify-between items-start">
+          <Text size="base" weight="semibold" className="text-gray-900">
+            Your Applications
+          </Text>
 
-        <Button btnType="primary-alt" onClick={onCreate}>
-          Create Application
-        </Button>
-      </section>
+          <Button btnType="primary-alt" onClick={onCreate}>
+            Create Application
+          </Button>
+        </section>
+      )}
 
-      <section className="flex space-x-4 my-4">
-        <div className="flex space-x-2 items-center">
-          <ApplicationListItemPublishedState published={true} />
-          <Text size="xs" weight="normal" className="text-gray-500">
-            Published
-          </Text>
-        </div>
+      {!lite && (
+        <section className="flex space-x-4 my-4">
+          <div className="flex space-x-2 items-center">
+            <ApplicationListItemPublishedState published={true} />
+            <Text size="xs" weight="normal" className="text-gray-500">
+              Published
+            </Text>
+          </div>
 
-        <div className="flex space-x-2 items-center">
-          <ApplicationListItemPublishedState published={false} />
-          <Text size="xs" weight="normal" className="text-gray-500">
-            Unpublished
-          </Text>
-        </div>
-      </section>
+          <div className="flex space-x-2 items-center">
+            <ApplicationListItemPublishedState published={false} />
+            <Text size="xs" weight="normal" className="text-gray-500">
+              Unpublished
+            </Text>
+          </div>
+        </section>
+      )}
 
       <section className="flex flex-col">
         {actionApp && (
@@ -108,18 +115,25 @@ export const ApplicationList = ({
         </div>
 
         {Object.entries(groupedApplications).map(([groupID, entry]) => (
-          <section key={groupID} className="flex flex-col space-y-2 mt-5">
-            <div className="flex mb-2 flex-row space-x-2 items-center">
-              <Text size="sm" weight="medium" className="text-gray-500">
-                {entry.groupName}
-              </Text>
+          <section
+            key={groupID}
+            className={classNames('flex flex-col space-y-2', {
+              'mt-5': !lite,
+            })}
+          >
+            {!lite && (
+              <div className="flex mb-2 flex-row space-x-2 items-center">
+                <Text size="sm" weight="medium" className="text-gray-500">
+                  {entry.groupName}
+                </Text>
 
-              {entry.groupPaymentFailed && (
-                <Link to={`/billing/groups/${groupID}`}>
-                  <DangerPill text="Update Payment Information" />
-                </Link>
-              )}
-            </div>
+                {entry.groupPaymentFailed && (
+                  <Link to={`/billing/groups/${groupID}`}>
+                    <DangerPill text="Update Payment Information" />
+                  </Link>
+                )}
+              </div>
+            )}
 
             {entry.apps.map((ali) => (
               <ApplicationListItem

diff --git a/apps/console/app/components/Applications/ApplicationListItem.tsx b/apps/console/app/components/Applications/ApplicationListItem.tsx
@@ -28,7 +28,7 @@ export const ApplicationListItemIcon = ({
   title,
   iconUrl,
 }: ApplicationListItemIconProps) => (
-  <div className="rounded-l w-16 h-14 flex justify-center items-center bg-gray-200 overflow-hidden">
+  <div className="rounded-l w-16 h-16 flex justify-center items-center bg-gray-200 overflow-hidden">
     {!iconUrl && (
       <Text className="text-gray-500">{title?.substring(0, 1)}</Text>
     )}

diff --git a/apps/console/app/routes/__layout/groups/$groupID/index.tsx b/apps/console/app/routes/__layout/groups/$groupID/index.tsx
@@ -47,8 +47,6 @@ import {
 } from '@proofzero/design-system/src/atoms/toast'
 import { IdentityURN } from '@proofzero/urns/identity'
 import dangerVector from '~/images/danger.svg'
-import { ApplicationListItemPublishedState } from '~/components/Applications/ApplicationListItem'
-import { ServicePlanType } from '@proofzero/types/billing'
 import { GroupDetailsContextData } from '../$groupID'
 import { PurchaseGroupSeatingModal } from '~/components/Billing/seating'
 import {
@@ -63,6 +61,7 @@ import { IDENTITY_GROUP_OPTIONS } from '@proofzero/platform/identity/src/constan
 import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWithLink'
 import { IdentityGroupURNSpace } from '@proofzero/urns/identity-group'
 import { HiOutlineExclamationTriangle } from 'react-icons/hi2'
+import { ApplicationList } from '~/components/Applications/ApplicationList'
 
 const accountTypes = [
   ...Object.values(EmailAccountType),
@@ -729,65 +728,20 @@ export default () => {
             )}
 
             <section className="flex flex-col gap-3">
-              {groupApps.map((app) => (
-                <article className="flex justify-center items-center border border-gray-200 shadow-sm rounded bg-white">
-                  <section>
-                    <div className="rounded-l w-16 h-[3.75rem] flex justify-center items-center bg-gray-200 overflow-hidden">
-                      {!app.icon && (
-                        <Text className="text-gray-500">
-                          {app.name?.substring(0, 1)}
-                        </Text>
-                      )}
-                      {app.icon && (
-                        <img
-                          src={app.icon}
-                          alt="Not Found"
-                          className="object-cover"
-                        />
-                      )}
-                    </div>
-                  </section>
-
-                  <section className="px-4 flex-1">
-                    <div className="flex flex-row space-x-2 items-center">
-                      <Text size="sm" weight="medium" className="text-gray-900">
-                        <div
-                          onClick={() => {
-                            navigate(`/apps/${app.clientId}`)
-                          }}
-                          className="hover:underline cursor-pointer"
-                        >
-                          {app.name}
-                        </div>
-                      </Text>
-                      <ApplicationListItemPublishedState
-                        published={app.published}
-                      />
-                      <Pill className="border rounded-3xl py-none">
-                        <Text size="xs">{group.name}</Text>
-                      </Pill>
-                      {app.appPlan !== ServicePlanType.FREE ? (
-                        <Pill className="border rounded-3xl py-none">
-                          <Text size="xs">{app.appPlan}</Text>
-                        </Pill>
-                      ) : null}
-                    </div>
-
-                    {hydrated && app.createdTimestamp && (
-                      <Text size="xs" weight="normal" className="shrink-0">
-                        {new Date(app.createdTimestamp).toLocaleString(
-                          'default',
-                          {
-                            day: '2-digit',
-                            month: 'short',
-                            year: 'numeric',
-                          }
-                        )}
-                      </Text>
-                    )}
-                  </section>
-                </article>
-              ))}
+              <ApplicationList
+                applications={groupApps.map((ga) => ({
+                  ...ga,
+                  id: ga.clientId,
+                }))}
+                onCreate={() => {
+                  navigate(`/groups/${groupID}/apps/new`)
+                }}
+                navigate={(clientId: string) => navigate(`/apps/${clientId}`)}
+                transfer={(clientId: string) =>
+                  navigate(`/apps/${clientId}/transfer`)
+                }
+                lite={true}
+              />
             </section>
           </div>
 

diff --git a/packages/design-system/src/atoms/lists/ListItem.tsx b/packages/design-system/src/atoms/lists/ListItem.tsx
@@ -19,11 +19,11 @@ export const ListItem = ({
   return (
     <div
       key={id}
-      className="border border-gray-300 rounded-md mb-3 shadow-sm truncate"
+      className="border border-gray-300 rounded-md mb-2 shadow-sm truncate"
     >
       <div
         className={classNames(
-          `py-2 bg-white
+          `py-[0.625rem] bg-white
                 flex flex-row items-center justify-between
                 px-4 truncate`,
           {