fix(web): adjust editor tips being obscured and some other style prob…

…lems (#1179) Fix the problem of the settings interface border being too bright in dark mode. By using NavLink you can open a new tab by right-clicking the mouse. Signed-off-by: William Chan <root@williamchan.me> Co-authored-by: allence <lizhenq2009@gmail.com>
labring · Jun 3, 2023 · f49f44e · f49f44e
1 parent fe5fdad
commit f49f44e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -90,7 +90,7 @@ function EditorPanel() {
       {currentFunction?.name && (
         <FunctionEditor
           colorMode={colorMode}
-          className="flex-grow overflow-hidden"
+          className="flex-grow"
           style={{
             marginLeft: -14,
             marginRight: -14,

diff --git a/web/src/pages/app/mods/SideBar/index.module.scss b/web/src/pages/app/mods/SideBar/index.module.scss
@@ -5,6 +5,7 @@
   height: 52px;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 
   svg {
     fill: #9ca2a8;

diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -2,7 +2,7 @@
  * cloud functions SideBar menu
  ***************************/
 
-import { useNavigate, useParams } from "react-router-dom";
+import { NavLink, useNavigate, useParams } from "react-router-dom";
 import { Center } from "@chakra-ui/react";
 import clsx from "clsx";
 import { t } from "i18next";
@@ -19,7 +19,8 @@ import UserSetting from "@/layouts/Header/UserSetting";
 import useGlobalStore from "@/pages/globalStore";
 type TIcon = {
   pageId: string;
-  component: any;
+  component?: React.ReactNode;
+  icon?: React.ReactNode;
   name?: string;
 };
 export default function SideBar() {
@@ -32,7 +33,7 @@ export default function SideBar() {
   const ICONS: TIcon[] = [
     {
       pageId: "nav",
-      component: (
+      icon: (
         <div className="relative flex flex-col items-center">
           <img className="mt-2" src="/logo.png" alt="logo" width={34} />
           <span className="scale-[.65] text-second">{currentRegion.displayName}</span>
@@ -42,22 +43,22 @@ export default function SideBar() {
     {
       pageId: Pages.function,
       name: String(t("FunctionPanel.Function")),
-      component: <Icons type="function" />,
+      icon: <Icons type="function" />,
     },
     {
       pageId: Pages.database,
       name: String(t("CollectionPanel.Collection")),
-      component: <Icons type="database" />,
+      icon: <Icons type="database" />,
     },
     {
       pageId: Pages.storage,
       name: String(t("StoragePanel.Storage")),
-      component: <Icons type="storage" />,
+      icon: <Icons type="storage" />,
     },
     {
       pageId: Pages.logs,
       name: String(t("LogPanel.Log")),
-      component: <Icons type="logs" />,
+      icon: <Icons type="logs" />,
     },
   ];
 
@@ -106,23 +107,37 @@ export default function SideBar() {
                       navigate(Routes.dashboard);
                     }}
                   >
-                    {item.component}
+                    {item.icon}
                   </Center>
                 );
               }
+              if (item.icon) {
+                return (
+                  <NavLink
+                    to={`/app/${currentApp?.appid}/${item.pageId}`}
+                    key={item.pageId}
+                    className={clsx(styles.icon, " mx-2 items-center ", {
+                      [styles.current]: pageId === item.pageId,
+                      "my-4": item.name !== undefined,
+                    })}
+                    onClick={() => {
+                      if (item.name !== undefined) {
+                        setCurrentPage(item.pageId);
+                      }
+                    }}
+                  >
+                    {item.icon}
+                    <p className="scale-90">{item.name ? item.name : null}</p>
+                  </NavLink>
+                );
+              }
               return (
                 <Center
                   key={item.pageId}
-                  className={clsx(styles.icon, " mx-2 ", {
+                  className={clsx(styles.icon, " mx-2 items-center ", {
                     [styles.current]: pageId === item.pageId,
                     "my-4": item.name !== undefined,
                   })}
-                  onClick={() => {
-                    if (item.name !== undefined) {
-                      setCurrentPage(item.pageId);
-                      navigate(`/app/${currentApp?.appid}/${item.pageId}`);
-                    }
-                  }}
                 >
                   {item.component}
                   <p className="scale-90">{item.name ? item.name : null}</p>

diff --git a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
@@ -11,15 +11,15 @@ const InfoDetail = function (props: {
 }) {
   const { title, leftData, rightData, className } = props;
   return (
-    <div className={clsx("mb-6 rounded border-b border-grayModern-100 pb-6", className)}>
+    <div className={clsx("rounded border px-4 py-4", className)}>
       <Content>
         <Row className="mb-2">
           <span className={clsx("relative inline-block text-2xl font-semibold text-primary-700")}>
             {title}
           </span>
         </Row>
         <Row className="flex">
-          <Col>
+          <Col className="border-r-2">
             {leftData.map((item) => (
               <div key={item.key} className="flex justify-between">
                 <span className="mr-2 text-grayModern-500">{item.key} :</span>