improving UI for Plugin details/info section

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -8,6 +8,7 @@ export interface RemixPanelProps {
   }
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
   const [plugin, setPlugin] = useState<PluginRecord>()
+  const [toggleExpander, setToggleExpander] = useState<boolean>(false)
 
   useEffect(() => {
     if (props.plugins) {
@@ -18,11 +19,43 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
     }
   }, [props])
 
+  const toggleClass = () => {
+    setToggleExpander(!toggleExpander)
+  }
+
   return (
-    <header className='swapitHeader'><h6 data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
-      <div className="flex flex-row">
-        {plugin?.profile.verified ? (<i aria-hidden="true" className="text-success fas fa-check" title="Verified by Remix"></i>) : '' }
-        {plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+    <header className='d-flex flex-column'>
+      <div className="swapitHeader px-3 pt-3 pb-0 d-flex flex-row">
+        <h6 data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6>
+        <div className="d-flex flex-row">
+          <div className="d-flex flex-row">
+            {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (<i aria-hidden="true" className="text-success fas fa-check" title="Maintained by Remix"></i>)}
+            {plugin?.profile.documentation && (<a href={plugin.profile.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) }
+          </div>
+          <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass} title="Plugin info">
+            <i className={`px-2 ml-2 mt-1 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
+          </div>
+        </div>
+      </div>
+      <div className={`bg-light p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
+        {plugin?.profile.author && <span className="d-flex flex-row align-items-center">
+          <label className="mb-0 pr-2">Author:</label>
+          <span> plugin.profile.author </span>
+        </span>}
+        {plugin?.profile.maintainedBy && <span className="d-flex flex-row align-items-center">
+          <label className="mb-0 pr-2">Maintained by:</label>
+          <span> plugin.profile.maintainedBy</span>
+        </span>}
+        {plugin?.profile.documentation && <span className="d-flex flex-row align-items-center">
+          <label className="mb-0 pr-2">Documentation:</label>
+          <span>
+            <a href={plugin.profile.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
+          </span>
+        </span>}
+        {plugin?.profile.description && <span className="d-flex flex-row align-items-center">
+          <label className="mb-0 pr-2">Description:</label>
+          <span> plugin?.profile.description</span>
+        </span>}
       </div>
     </header>)
 }

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -22,7 +22,6 @@
 .swapitHeader {
     display: flex;
     align-items: center;
-    padding: 16px 24px 15px;
     justify-content: space-between;
     text-transform: uppercase;
 }

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx

@@ -19,8 +19,8 @@ function ActivePluginCard ({
           <h6 className="remixui_displayName plugin-name">
             <div>
               { profile.displayName || profile.name }
-              { profile.verified &&
-                <i aria-hidden="true" className="px-1 text-success fas fa-check" title="Verified by Remix"></i>
+              { profile.maintainedBy.toLowerCase() == "remix" &&
+                <i aria-hidden="true" className="px-1 text-success fas fa-check" title="Maintained by Remix"></i>
               }
               { profile.documentation &&
                 <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -22,7 +22,7 @@ function InactivePluginCard ({
           <h6 className="remixui_displayName plugin-name">
             <div>
               { profile.displayName || profile.name }
-              { profile.verified &&
+              { profile.maintainedBy.toLowerCase() == "remix" &&
                 <i aria-hidden="true" className="px-1 text-success fas fa-check" title="Verified by Remix"></i>
               }
               { profile.documentation &&

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -155,7 +155,7 @@ export function Workspace () {
         <div>
           <header>
             <div className="mb-2">
-              <label className="form-check-label" htmlFor="workspacesSelect">
+              <label className="pl-1 form-check-label" htmlFor="workspacesSelect">
                 Workspaces
               </label>
               <span className="remixui_menu">