feat(profile): update for profile navigation system (#1923)

* feat(profile): update for profile navigation system
proofzero · Mar 17, 2023 · 4606de2 · 4606de2
1 parent 3e17566
commit 4606de2
Show file tree

Hide file tree

Showing 20 changed files with 763 additions and 539 deletions.
diff --git a/.yarn/cache/react-fast-compare-npm-3.2.0-fbfa6627d9-8ef272c825.zip b/.yarn/cache/react-fast-compare-npm-3.2.0-fbfa6627d9-8ef272c825.zip
diff --git a/.yarn/cache/react-popper-npm-2.3.0-1045578379-837111c987.zip b/.yarn/cache/react-popper-npm-2.3.0-1045578379-837111c987.zip
diff --git a/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip b/.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip
diff --git a/apps/console/app/components/Applications/LoginsPanel/LoginsPanel.tsx b/apps/console/app/components/Applications/LoginsPanel/LoginsPanel.tsx
@@ -68,28 +68,38 @@ export const LoginsPanel = ({
   appId,
 }: LoginsPanelProps) => {
   return (
-    <div className="h-full">
+    <div
+      className="border flex-1 flex flex-col rounded-lg h-full pb-7
+     relative shadow bg-white"
+    >
       {authorizedProfiles.length ? (
-        <div className="border flex-1 flex flex-col rounded-lg h-full pt-2 relative shadow">
-          <div className="bg-[#F9FAFB] flex items-center py-5 px-8 rounded-lg">
-            <Text size="sm" weight="medium" className="text-gray-500 flex-1">
-              USER ID
-            </Text>
-            <Text size="sm" weight="medium" className="text-gray-500 flex-1">
-              APPROVED
-            </Text>
+        <>
+          {' '}
+          <div className="bg-[#F9FAFB] w-full">
+            <div className=" flex items-center py-5 px-6 rounded-lg">
+              <Text size="sm" weight="medium" className="text-gray-500 flex-1">
+                USER ID
+              </Text>
+              <Text size="sm" weight="medium" className="text-gray-500 flex-1">
+                APPROVED
+              </Text>
+            </div>
           </div>
-
           <div
             className="flex flex-1 flex-col bg-white rounded-br-lg
           rounded-bl-lg h-full"
           >
             {authorizedProfiles.map((user, i) => (
-              <article key={i} className={`flex items-center py-5 px-8`}>
+              <article key={i} className={`px-6 flex items-center py-5`}>
                 <div className="flex-1 flex flex-row items-center space-x-4">
                   <img
-                    src={user.imageURL || missingImage}
-                    alt="account pfp"
+                    src={user.imageURL}
+                    onError={({ currentTarget }) => {
+                      currentTarget.onerror = null
+                      currentTarget.src = missingImage
+                      currentTarget.style.filter = 'brightness(88%)'
+                    }}
+                    alt="pfp"
                     className="max-h-[24px] max-w-[24px] rounded-full"
                   />
                   <Text
@@ -120,8 +130,8 @@ export const LoginsPanel = ({
 
             <div className="h-[4rem]" />
 
-            <div className="absolute bottom-0 w-full">
-              <div className="w-full px-8">
+            <div className="px-6 absolute bottom-0 w-full">
+              <div className="w-full">
                 <div className="border-t border-gray-200"></div>
               </div>
 
@@ -130,19 +140,19 @@ export const LoginsPanel = ({
                   <Text
                     size="sm"
                     weight="medium"
-                    className="cursor-pointer text-indigo-500 my-4"
+                    className="cursor-pointer text-gray-300 hover:text-indigo-500 my-4"
                   >
                     View All
                   </Text>
                 </a>
               </div>
             </div>
           </div>
-        </div>
+        </>
       ) : (
         <div
-          className="flex flex-col bg-white
-        shadow rounded-lg border justify-center items-center h-full"
+          className="h-full flex flex-col 
+        px-6 justify-center items-center py-3"
         >
           {noLoginsSvg}
 

diff --git a/apps/console/app/components/Applications/Users/User.tsx b/apps/console/app/components/Applications/Users/User.tsx
@@ -26,8 +26,13 @@ md:flex-row md:items-center
 text-ellipsis md:space-x-4"
       >
         <img
-          src={imageURL || missingImage}
-          alt="account pfp"
+          src={imageURL}
+          alt="pfp"
+          onError={({ currentTarget }) => {
+            currentTarget.onerror = null
+            currentTarget.src = missingImage
+            currentTarget.style.filter = 'brightness(88%)'
+          }}
           className="max-h-[24px] max-w-[24px] rounded-full"
         />
         <Text size="sm" weight="medium" className="text-gray-500 flex-1">

diff --git a/apps/console/app/routes/apps/$clientId/index.tsx b/apps/console/app/routes/apps/$clientId/index.tsx
@@ -288,9 +288,9 @@ export default function AppDetailIndexPage() {
         </div>
         <div className="flex-1">
           <div className="flex h-full flex-col">
-            <Text className="text-gray-600 py-3" weight="medium" size="lg">
+            <Text className="text-gray-900 py-3 px-6" weight="medium" size="lg">
               Users
-            </Text>
+            </Text>{' '}
             <Suspense
               fallback={
                 <div
@@ -316,7 +316,6 @@ export default function AppDetailIndexPage() {
                   )
                 }}
               </Await>
-              )
             </Suspense>
           </div>
         </div>