From 04b5bee9c02419c77128dc88ffa5b086e75bc6fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cosmin=20P=C3=A2rvulescu?= <cosmin.parvulescu@gmail.com>
Date: Thu, 26 Oct 2023 17:15:24 +0300
Subject: [PATCH] Updated info panel

---
 packages/design-system/src/atoms/info/Info.tsx | 18 ++++++++++++++++--
 .../templates/authorization/Authorization.tsx  |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/atoms/info/Info.tsx b/packages/design-system/src/atoms/info/Info.tsx
index e7ab937ec3..1c6ebf0f49 100644
--- 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
index d7e46086a2..d96d21e8f2 100644
--- 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