From 902be04382d2ca67ffc249d4df4916b8e136ada7 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 29 Jun 2022 12:20:52 +0200
Subject: [PATCH] improving UI for Plugin details/info section

---
 .../panel/src/lib/plugins/panel-header.tsx    | 41 +++++++++++++++++--
 libs/remix-ui/panel/src/lib/plugins/panel.css |  1 -
 .../src/lib/components/ActivePluginCard.tsx   |  4 +-
 .../src/lib/components/InactivePluginCard.tsx |  2 +-
 .../workspace/src/lib/remix-ui-workspace.tsx  |  2 +-
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index a2e56f803c..9e249aa295 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/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>)
 }
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index 8356d6ef15..b9988e19af 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/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;
 }
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
index 86b8f87dfb..6a9b604907 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
+++ b/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">
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
index 73b4316276..018b8ed432 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
+++ b/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 &&
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index 98a80306bd..06a24ca19b 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/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">