Updated layout

proofzero · Sep 15, 2023 · cef7583 · cef7583
1 parent 551dfdb
commit cef7583
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/apps/console/app/routes/__layout/spuorg/$groupID/index.tsx b/apps/console/app/routes/__layout/spuorg/$groupID/index.tsx
@@ -57,9 +57,8 @@ import {
   action as billingAction,
   loader as billingLoader,
 } from '../../billing/ops'
-import { StripePaymentData } from '@proofzero/platform.billing/src/types'
 import { process3DSecureCard } from '~/utils/billing'
-import { ToastNotification } from '~/types'
+import { StatusPill } from '@proofzero/design-system/src/atoms/pills/StatusPill'
 
 const accountTypes = [
   ...Object.values(EmailAccountType),
@@ -698,15 +697,31 @@ export default () => {
               </Pill>
             </div>
 
-            <section className="flex flex-row justify-between items-center">
-              <div className="flex flex-row items-center">
-                <Text>Unassigned User Seats:</Text>
-                <Text>Total {groupSeats.total}</Text>
-                <Text>Free {3 - Math.min(3, group.members.length)}</Text>
-                <Text>Purchased {groupSeats.total - groupSeats.used}</Text>
+            <section className="flex flex-row justify-between items-center mb-4">
+              <div className="flex flex-row items-center space-x-1">
+                <Text size="sm" className="text-gray-500">
+                  Unassigned User Seats:
+                </Text>
+                <Pill className="bg-white flex flex-row items-center rounded-xl">
+                  <div className="w-2 h-2 rounded-full mr-2 bg-blue-300"></div>
+                  <Text size="xs" weight="medium" className="text-gray-700">
+                    {`Free ${3 - Math.min(3, group.members.length)}`}
+                  </Text>
+                </Pill>
+
+                <Pill className="bg-white flex flex-row items-center rounded-xl">
+                  <div className="w-2 h-2 rounded-full mr-2 bg-gray-600"></div>
+                  <Text size="xs" weight="medium" className="text-gray-700">
+                    {`Purchased ${groupSeats.total - groupSeats.used}`}
+                  </Text>
+                </Pill>
               </div>
               <div>
-                <Button onClick={() => setPurchaseGroupSeatingModalOpen(true)}>
+                <Button
+                  onClick={() => setPurchaseGroupSeatingModalOpen(true)}
+                  btnType="secondary-alt"
+                  btnSize="sm"
+                >
                   Add seats
                 </Button>
               </div>