aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-15 20:03:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: tweak setting styles

Browse Source
This commit is contained in:
johnnyjoy 2024-08-18 00:23:52 +08:00
parent 20e3212c2e
commit dba5067d51
3 changed files with 27 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/web/src/components/setting/WorkspaceSection.tsx → frontend/web/src/components/setting/WorkspaceGeneralSettingSection.tsx
View File

@ -28,7 +28,7 @@ const convertFileToBase64 = (file: File) =>
reader.onerror = (error) => reject(error);
});
const WorkspaceSection = () => {
const WorkspaceGeneralSettingSection = () => {
const { t } = useTranslation();
const workspaceStore = useWorkspaceStore();
const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(workspaceStore.setting);
@ -94,7 +94,7 @@ const WorkspaceSection = () => {
return (
<div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16">
<p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("settings.workspace.self")}</p>
<p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">General</p>
<div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
<div className="w-full flex flex-row justify-between items-center">
<div className="w-full flex flex-col justify-start items-start">
@ -166,4 +166,4 @@ const WorkspaceSection = () => {
);
};
export default WorkspaceSection;
export default WorkspaceGeneralSettingSection;

41
frontend/web/src/components/setting/MemberSection.tsx → frontend/web/src/components/setting/WorkspaceMembersSection.tsx
View File

@ -9,7 +9,7 @@ import { useUserStore } from "@/stores";
import { User } from "@/types/proto/api/v1/user_service";
import { convertRoleFromPb } from "@/utils/user";
const MemberSection = () => {
const WorkspaceMembersSection = () => {
const { t } = useTranslation();
const userStore = useUserStore();
const [showCreateUserDialog, setShowCreateUserDialog] = useState<boolean>(false);
@ -43,29 +43,22 @@ const MemberSection = () => {
return (
<>
<div className="w-full flex flex-col justify-start items-start space-y-4">
<div className="w-full">
<div className="sm:flex sm:items-center">
<div className="sm:flex-auto">
<p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("user.self")}</p>
<p className="mt-2 text-sm text-gray-700 dark:text-gray-600">
A list of all the users in your workspace including their nickname, email and role.
</p>
</div>
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
<Button
variant="outlined"
color="neutral"
onClick={() => {
setShowCreateUserDialog(true);
setCurrentEditingUser(undefined);
}}
>
{t("user.action.add-user")}
</Button>
</div>
<div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16">
<p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Members</p>
<div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
<div className="w-full flex justify-end">
<Button
variant="outlined"
color="neutral"
onClick={() => {
setShowCreateUserDialog(true);
setCurrentEditingUser(undefined);
}}
>
{t("user.action.add-user")}
</Button>
</div>
<div className="mt-2 flow-root">
<div className="w-full flow-root">
<div className="overflow-x-auto">
<div className="inline-block border rounded-lg border-gray-300 dark:border-zinc-700 min-w-full align-middle">
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-700">
@ -121,4 +114,4 @@ const MemberSection = () => {
);
};
export default MemberSection;
export default WorkspaceMembersSection;

12
frontend/web/src/pages/WorkspaceSetting.tsx
View File

@ -1,9 +1,9 @@
import { Alert, Button } from "@mui/joy";
import { Alert, Button, Divider } from "@mui/joy";
import { useEffect } from "react";
import { Link } from "react-router-dom";
import Icon from "@/components/Icon";
import MemberSection from "@/components/setting/MemberSection";
import WorkspaceSection from "@/components/setting/WorkspaceSection";
import WorkspaceGeneralSettingSection from "@/components/setting/WorkspaceGeneralSettingSection";
import WorkspaceMembersSection from "@/components/setting/WorkspaceMembersSection";
import { useUserStore, useWorkspaceStore } from "@/stores";
import { stringifyPlanType } from "@/stores/subscription";
import { Role } from "@/types/proto/api/v1/user_service";
@ -40,8 +40,10 @@ const WorkspaceSetting = () => {
</Link>
</div>
</div>
<MemberSection />
<WorkspaceSection />
<Divider />
<WorkspaceMembersSection />
<Divider />
<WorkspaceGeneralSettingSection />
</div>
);
};