From 583c0b9d26aebc9beeeab89b21d158ba9b788273 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Wed, 15 May 2024 17:18:32 -0400
Subject: [PATCH] MemberCard for owner disabled (#66)

* AddMemberDialog remove footer styling from old component

* MemberCard for owner disabled (#64)
---
 .../projects/project/settings/MemberCard.tsx  | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
index 8a1f8e0c..d31d47f6 100644
--- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
@@ -8,6 +8,7 @@ import { Button } from 'components/shared/Button';
 import { Permission, User } from 'gql-client';
 import { formatAddress } from 'utils/format';
 import { Tag } from 'components/shared/Tag';
+import { Input } from 'components/shared/Input';
 
 const PERMISSION_OPTIONS: SelectOption[] = [
   {
@@ -79,9 +80,8 @@ const MemberCard = ({
 
   return (
     <div
-      className={`flex p-1 ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
+      className={`flex p-1 items-center ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
     >
-      <div>^</div>
       <div className="basis-1/2">
         {member.name && (
           <Tooltip content={member.name}>
@@ -96,14 +96,19 @@ const MemberCard = ({
       </div>
       <div className="basis-1/2">
         {!isPending ? (
-          <Select
-            options={DROPDOWN_OPTIONS}
-            size="md"
-            label={isOwner ? 'Owner' : ''}
-            disabled={isOwner}
-            value={selectedPermission}
-            onChange={(value) => handlePermissionChange(value as SelectOption)}
-          />
+          isOwner ? (
+            <Input size="md" value="Owner" disabled />
+          ) : (
+            <Select
+              options={DROPDOWN_OPTIONS}
+              size="md"
+              placeholder="Select permission"
+              value={selectedPermission}
+              onChange={(value) =>
+                handlePermissionChange(value as SelectOption)
+              }
+            />
+          )
         ) : (
           <div className="flex justify-end gap-2">
             <div>
@@ -113,7 +118,7 @@ const MemberCard = ({
             </div>
             <div>
               <Button
-                size="sm"
+                size="md"
                 iconOnly
                 onClick={() => {
                   setRemoveMemberDialogOpen((prevVal) => !prevVal);