From b97fb1392944a681850a08a439ea7ff58a46e76b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 23 Sep 2023 01:25:08 +0800
Subject: [PATCH] chore: update styles

---
 frontend/web/src/components/Navigator.tsx     |  4 ++--
 .../components/setting/WorkspaceSection.tsx   | 23 +++++++++++--------
 frontend/web/src/helpers/utils.ts             |  8 +++++--
 frontend/web/src/pages/Setting.tsx            |  5 +++-
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/web/src/components/Navigator.tsx b/frontend/web/src/components/Navigator.tsx
index 40c58fe..0c805b6 100644
--- a/frontend/web/src/components/Navigator.tsx
+++ b/frontend/web/src/components/Navigator.tsx
@@ -26,7 +26,7 @@ const Navigator = () => {
       </button>
       <button
         className={classNames(
-          "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md hover:bg-gray-200",
+          "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
           currentTab === "tab:mine"
             ? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
             : "hover:bg-gray-200 dark:hover:bg-zinc-700"
@@ -40,7 +40,7 @@ const Navigator = () => {
         <button
           key={tag}
           className={classNames(
-            "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md hover:bg-gray-200",
+            "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
             currentTab === `tag:${tag}`
               ? "bg-gray-600 dark:bg-zinc-700 text-white dark:text-gray-400 shadow"
               : "hover:bg-gray-200 dark:hover:bg-zinc-700"
diff --git a/frontend/web/src/components/setting/WorkspaceSection.tsx b/frontend/web/src/components/setting/WorkspaceSection.tsx
index 2d4f1ee..57b9672 100644
--- a/frontend/web/src/components/setting/WorkspaceSection.tsx
+++ b/frontend/web/src/components/setting/WorkspaceSection.tsx
@@ -3,6 +3,7 @@ import { isEqual } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { workspaceServiceClient } from "@/grpcweb";
+import { releaseGuard } from "@/helpers/utils";
 import { WorkspaceSetting } from "@/types/proto/api/v2/workspace_service";
 
 const WorkspaceSection: React.FC = () => {
@@ -63,16 +64,18 @@ const WorkspaceSection: React.FC = () => {
   return (
     <div className="w-full flex flex-col justify-start items-start space-y-4">
       <p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Workspace settings</p>
-      <div className="w-full flex flex-col justify-start items-start">
-        <p className="mt-2 dark:text-gray-400">Custom style</p>
-        <Textarea
-          className="w-full mt-2"
-          minRows={2}
-          maxRows={5}
-          value={workspaceSetting.customStyle}
-          onChange={(event) => handleCustomStyleChange(event.target.value)}
-        />
-      </div>
+      {releaseGuard() && (
+        <div className="w-full flex flex-col justify-start items-start">
+          <p className="mt-2 dark:text-gray-400">Custom style</p>
+          <Textarea
+            className="w-full mt-2"
+            minRows={2}
+            maxRows={5}
+            value={workspaceSetting.customStyle}
+            onChange={(event) => handleCustomStyleChange(event.target.value)}
+          />
+        </div>
+      )}
       <div className="w-full flex flex-col justify-start items-start">
         <Checkbox
           label="Enable user signup"
diff --git a/frontend/web/src/helpers/utils.ts b/frontend/web/src/helpers/utils.ts
index 4af273e..1be780e 100644
--- a/frontend/web/src/helpers/utils.ts
+++ b/frontend/web/src/helpers/utils.ts
@@ -4,8 +4,12 @@ export const isNullorUndefined = (value: any) => {
   return isNull(value) || isUndefined(value);
 };
 
-export function absolutifyLink(rel: string): string {
+export const absolutifyLink = (rel: string): string => {
   const anchor = document.createElement("a");
   anchor.setAttribute("href", rel);
   return anchor.href;
-}
+};
+
+export const releaseGuard = () => {
+  return import.meta.env.MODE === "development";
+};
diff --git a/frontend/web/src/pages/Setting.tsx b/frontend/web/src/pages/Setting.tsx
index 3504f26..280e580 100644
--- a/frontend/web/src/pages/Setting.tsx
+++ b/frontend/web/src/pages/Setting.tsx
@@ -1,4 +1,4 @@
-import { Divider } from "@mui/joy";
+import { Alert, Divider } from "@mui/joy";
 import PreferenceSection from "@/components/setting/PreferenceSection";
 import AccessTokenSection from "../components/setting/AccessTokenSection";
 import AccountSection from "../components/setting/AccountSection";
@@ -18,6 +18,9 @@ const Setting: React.FC = () => {
       {isAdmin && (
         <>
           <Divider />
+          <Alert variant="soft" color="warning">
+            You can see the settings items below because you are an Admin.
+          </Alert>
           <MemberSection />
           <WorkspaceSection />
         </>