Added icons.

ether · May 24, 2024 · c4878b6 · c4878b6
1 parent df3686d
commit c4878b6
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 55 deletions.
diff --git a/admin/src/index.css b/admin/src/index.css
@@ -582,12 +582,45 @@ pre {
     grid-area: action;
 }
 
-.help-block {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 20px
+
+.help-block{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.help-block svg {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  right: 10px;
+  top: 25%;
+  color: var(--etherpad-color);
+}
+
+
+.help-block div {
+    background: white;
+    gap: 10px;
 }
 
+.help-block > div {
+  position: relative;
+  padding: 20px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  border-radius: 0.375rem; /* 6px */
+
+}
+
+
+/* Heading of a card */
+.help-block > div > div:first-child {
+  font-size: 1.25rem; /* 20px */
+  font-weight: 700;
+  color: #333;
+}
+
+
 .search-field {
     position: relative;
 }
@@ -801,3 +834,4 @@ input, button, select, optgroup, textarea {
     background-color: var(--etherpad-color);
     color: white
 }
+
diff --git a/admin/src/pages/HelpPage.tsx b/admin/src/pages/HelpPage.tsx
@@ -2,69 +2,92 @@ import {Trans} from "react-i18next";
 import {useStore} from "../store/store.ts";
 import {useEffect, useState} from "react";
 import {HelpObj} from "./Plugin.ts";
+import {HistoryIcon, ArrowUpFromDotIcon, HashIcon, UnplugIcon, PuzzleIcon, WebhookIcon, LucideWebhook} from 'lucide-react'
 
 export const HelpPage = () => {
-    const settingsSocket = useStore(state=>state.settingsSocket)
-    const [helpData, setHelpData] = useState<HelpObj>();
+  const settingsSocket = useStore(state => state.settingsSocket)
+  const [helpData, setHelpData] = useState<HelpObj>();
 
-    useEffect(() => {
-        if(!settingsSocket) return;
-        settingsSocket?.on('reply:help', (data) => {
-            setHelpData(data)
-        });
+  useEffect(() => {
+    if (!settingsSocket) return;
+    settingsSocket?.on('reply:help', (data) => {
+      setHelpData(data)
+    });
 
-        settingsSocket?.emit('help');
-    }, [settingsSocket]);
+    settingsSocket?.emit('help');
+  }, [settingsSocket]);
 
-    const renderHooks = (hooks:Record<string, Record<string, string>>) => {
-        return Object.keys(hooks).map((hookName, i) => {
-            return <div key={hookName+i}>
-                <h3>{hookName}</h3>
-                <ul>
-                    {Object.keys(hooks[hookName]).map((hook, i) => <li key={hook+i}>{hook}
-                        <ul key={hookName+hook+i}>
-                            {Object.keys(hooks[hookName][hook]).map((subHook, i) => <li key={i}>{subHook}</li>)}
-                        </ul>
-                    </li>)}
-                </ul>
-            </div>
-        })
-    }
+  const renderHooks = (hooks: Record<string, Record<string, string>>) => {
+    return Object.keys(hooks).map((hookName, i) => {
+      return <div key={hookName + i}>
+        <h3>{hookName}</h3>
+        <ul>
+          {Object.keys(hooks[hookName]).map((hook, i) => <li key={hook + i}>{hook}
+            <ul key={hookName + hook + i}>
+              {Object.keys(hooks[hookName][hook]).map((subHook, i) => <li key={i}>{subHook}</li>)}
+            </ul>
+          </li>)}
+        </ul>
+      </div>
+    })
+  }
 
 
-    if (!helpData) return <div></div>
+  if (!helpData) return <div></div>
 
-    return <div>
-        <h1><Trans i18nKey="admin_plugins_info.version"/></h1>
-        <div className="help-block">
-            <div><Trans i18nKey="admin_plugins_info.version_number"/></div>
-            <div>{helpData?.epVersion}</div>
-            <div><Trans i18nKey="admin_plugins_info.version_latest"/></div>
-            <div>{helpData.latestVersion}</div>
-            <div>Git sha</div>
-            <div>{helpData.gitCommit}</div>
+  return <div>
+    <h1><Trans i18nKey="admin_plugins_info.version"/></h1>
+    <div className="help-block">
+      <div>
+        <div>
+          <Trans i18nKey="admin_plugins_info.version_number"/>
         </div>
-        <h2><Trans i18nKey="admin_plugins.installed"/></h2>
-        <ul>
-            {helpData.installedPlugins.map((plugin, i) => <li key={plugin+i}>{plugin}</li>)}
-        </ul>
+        <div>
+          {helpData.epVersion}
+        </div>
+        <HistoryIcon/>
+      </div>
+      <div>
+        <div>
+          <Trans i18nKey="admin_plugins_info.version_latest"/>
+        </div>
+        <div>{helpData.latestVersion}</div>
+        <ArrowUpFromDotIcon/>
+      </div>
+      <div>
+        <div>
+          Git sha
+        </div>
+        <div>
+          {helpData.gitCommit}
+        </div>
+        <HashIcon/>
+      </div>
+    </div>
+    <h2><Trans i18nKey="admin_plugins.installed"/> <UnplugIcon/></h2>
+    <ul>
+      {helpData.installedPlugins.map((plugin, i) => <li key={plugin + i}>{plugin}</li>)}
+    </ul>
 
-        <h2><Trans i18nKey="admin_plugins_info.parts"/></h2>
-        <ul>
-            {helpData.installedParts.map((part, i) => <li key={part+i}>{part}</li>)}
-        </ul>
+    <h2><Trans i18nKey="admin_plugins_info.parts"/> <PuzzleIcon/></h2>
+    <ul>
+      {helpData.installedParts.map((part, i) => <li key={part + i}>{part}</li>)}
+    </ul>
 
-        <h2><Trans i18nKey="admin_plugins_info.hooks"/></h2>
-        {
-            renderHooks(helpData.installedServerHooks)
-        }
+    <h2><Trans i18nKey="admin_plugins_info.hooks"/> <WebhookIcon/></h2>
+    {
+      renderHooks(helpData.installedServerHooks)
+    }
 
-        <h2>
-            <Trans i18nKey="admin_plugins_info.hooks_client"/>
-            {
-                renderHooks(helpData.installedClientHooks)
-            }
-        </h2>
+    <h2>
+      <Trans i18nKey="admin_plugins_info.hooks_client"/> <LucideWebhook/>
 
+    </h2>
+    <div>
+      {
+        renderHooks(helpData.installedClientHooks)
+      }
     </div>
+
+  </div>
 }