fix: update scopes members page styles (#113)

<img width="1221" alt="Screenshot 2024-03-01 at 12 32 30 PM"
src="https://github.com/jsr-io/jsr/assets/776987/75c098a6-239e-4d09-8994-6cfa9a147957">

- updates the scopes members page to use the jsr color palette 
- places warning text before the action you are being warned about

frontend/components/Table.tsx

@@ -26,13 +26,13 @@ export function Table(
   return (
     <>
       <div
-        class={`-mx-4 md:mx-0 border-1.5 border-cyan-900/10 ring-1 ring-black ring-opacity-5 sm:rounded overflow-hidden ${
+        class={`-mx-4 md:mx-0 ring-1 ring-jsr-cyan-950 sm:rounded overflow-hidden ${
           class_ ?? ""
         }`}
       >
         <div class="overflow-x-auto">
-          <table class="w-full divide-y divide-cyan-900/10">
-            <thead class="bg-cyan-50">
+          <table class="w-full divide-y divide-jsr-cyan-900/10">
+            <thead class="bg-jsr-cyan-50">
               <TableRow class="children:font-semibold">
                 {columns.map((column, i) => (
                   <TableHead

frontend/routes/@[scope]/(_islands)/ScopeInviteForm.tsx

@@ -48,7 +48,7 @@ export function ScopeInviteForm(props: ScopeInviteFormProps) {
     >
       <div class="mt-4 flex gap-4">
         <input
-          class="block w-full max-w-sm p-1.5 input-container input"
+          class="block w-full max-w-sm px-3 input-container text-sm input"
           type="text"
           name="githubLogin"
           placeholder="GitHub username"

frontend/routes/@[scope]/(_islands)/ScopeMemberRole.tsx

@@ -39,7 +39,7 @@ export function ScopeMemberRole(props: ScopeMemberRoleProps) {
   return (
     <div class="flex flex-col items-start">
       <select
-        class={"block w-24 p-1.5 input-container select" +
+        class={"block w-32 px-3 py-1 input-container select" +
           (props.isLastAdmin ? " cursor-not-allowed" : " disabled:cursor-wait")}
         value={selected}
         onInput={(e) => selected.value = e.currentTarget.value}

frontend/routes/@[scope]/~/members.tsx

@@ -101,7 +101,7 @@ export function MemberItem(props: MemberItemProps) {
     <TableRow key={member.user.id}>
       <TableData>
         <a
-          class="text-cyan-700 hover:text-blue-400 hover:underline"
+          class="text-jsr-cyan-700 hover:text-jsr-cyan-400 hover:underline"
           href={`/user/${member.user.id}`}
         >
           {member.user.name}
@@ -157,7 +157,7 @@ export function InviteItem(props: InviteItemProps) {
     <TableRow key={invite.targetUser.id} class="striped">
       <TableData>
         <a
-          class="text-cyan-700 hover:text-blue-400 hover:underline"
+          class="text-jsr-cyan-700 hover:text-jsr-cyan-400 hover:underline"
           href={`/user/${invite.targetUser.id}`}
         >
           {invite.targetUser.name}
@@ -190,7 +190,7 @@ export function InviteItem(props: InviteItemProps) {
 
 function MemberInvite({ scope }: { scope: string }) {
   return (
-    <div class="max-w-3xl border-t pt-8 mt-8">
+    <div class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-8">
       <h2 class="text-lg font-semibold">Invite member</h2>
       <p class="mt-2 text-gray-600">
         Inviting users to this scope grants them access to publish all packages
@@ -206,29 +206,35 @@ function MemberLeave(
   props: { userId: string; isAdmin: boolean; isLastAdmin: boolean },
 ) {
   return (
-    <form method="POST" class="max-w-3xl border-t pt-8 mt-12">
+    <form
+      method="POST"
+      class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-12"
+    >
       <h2 class="text-lg font-semibold">Leave scope</h2>
       <p class="mt-2 text-gray-600">
         Leaving this scope will revoke your access to all packages in this
         scope. You will no longer be able to publish packages to this
         scope{props.isAdmin && " or manage members"}.
       </p>
       <input type="hidden" name="userId" value={props.userId} />
+      {props.isLastAdmin && (
+        <div class="mt-6 border-1 rounded-md border-red-300 bg-red-50 p-6 text-red-600">
+          <span class="font-bold text-xl">Warning</span>
+          <p>
+            You are the last admin in this scope. You must promote another
+            member to admin before leaving.
+          </p>
+        </div>
+      )}
       <button
-        class="button-danger mt-4"
+        class="button-danger mt-6"
         type="submit"
         name="action"
         value="deleteMember"
         disabled={props.isLastAdmin}
       >
         Leave
       </button>
-      {props.isLastAdmin && (
-        <p class="mt-2 text-red-600">
-          You are the last admin in this scope. You must promote another member
-          to admin before leaving.
-        </p>
-      )}
     </form>
   );
 }