Updated info panel

proofzero · Oct 26, 2023 · 04b5bee · 04b5bee
1 parent 4a620b7
commit 04b5bee
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/design-system/src/atoms/info/Info.tsx b/packages/design-system/src/atoms/info/Info.tsx
@@ -1,22 +1,36 @@
 import React from 'react'
 import iIcon from './i.svg'
 import { Tooltip } from 'flowbite-react'
+import { Text } from '../../atoms/text/Text'
 
 export default function Info({
   name,
   description,
   placement = 'bottom',
+  editable = false,
 }: {
   name: string
   description: string
   placement?: 'top' | 'bottom' | 'left' | 'right'
+  editable?: boolean
 }) {
   return (
     <div className="w-fit flex-shrink-0">
       <Tooltip
         arrow={false}
-        content={description}
-        className="!bg-white !text-gray-500 !dark:text-white shadow absolute z-5 w-max"
+        content={
+          <div className="max-w-[322px]">
+            {!editable && (
+              <Text size="xs" className="text-left text-gray-400">
+                NON-EDITABLE FIELD
+              </Text>
+            )}
+            <Text size="xs" className="text-left text-gray-700">
+              {description}
+            </Text>
+          </div>
+        }
+        className="!bg-white shadow absolute z-5 w-max"
         placement={placement}
       >
         <img src={iIcon} alt={`${name} info`} />

diff --git a/packages/design-system/src/templates/authorization/Authorization.tsx b/packages/design-system/src/templates/authorization/Authorization.tsx
@@ -164,6 +164,7 @@ export default ({
                     <Info
                       name={scopeMeta.scopes[scope].name}
                       description={scopeMeta.scopes[scope].description}
+                      editable={true}
                     />
 
                     <div