aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-16 04:13: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); reader.onerror = (error) => reject(error);
}); });
const WorkspaceSection = () => { const WorkspaceGeneralSettingSection = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const workspaceStore = useWorkspaceStore(); const workspaceStore = useWorkspaceStore();
const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(workspaceStore.setting); const [workspaceSetting, setWorkspaceSetting] = useState<WorkspaceSetting>(workspaceStore.setting);
@ -94,7 +94,7 @@ const WorkspaceSection = () => {
return ( return (
<div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16"> <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 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-row justify-between items-center">
<div className="w-full flex flex-col justify-start items-start"> <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 { User } from "@/types/proto/api/v1/user_service";
import { convertRoleFromPb } from "@/utils/user"; import { convertRoleFromPb } from "@/utils/user";
const MemberSection = () => { const WorkspaceMembersSection = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const userStore = useUserStore(); const userStore = useUserStore();
const [showCreateUserDialog, setShowCreateUserDialog] = useState<boolean>(false); const [showCreateUserDialog, setShowCreateUserDialog] = useState<boolean>(false);
@ -43,29 +43,22 @@ const MemberSection = () => {
return ( return (
<> <>
<div className="w-full flex flex-col justify-start items-start space-y-4"> <div className="w-full flex flex-col sm:flex-row justify-start items-start gap-4 sm:gap-x-16">
<div className="w-full"> <p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Members</p>
<div className="sm:flex sm:items-center"> <div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
<div className="sm:flex-auto"> <div className="w-full flex justify-end">
<p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("user.self")}</p> <Button
<p className="mt-2 text-sm text-gray-700 dark:text-gray-600"> variant="outlined"
A list of all the users in your workspace including their nickname, email and role. color="neutral"
</p> onClick={() => {
</div> setShowCreateUserDialog(true);
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none"> setCurrentEditingUser(undefined);
<Button }}
variant="outlined" >
color="neutral" {t("user.action.add-user")}
onClick={() => { </Button>
setShowCreateUserDialog(true);
setCurrentEditingUser(undefined);
}}
>
{t("user.action.add-user")}
</Button>
</div>
</div> </div>
<div className="mt-2 flow-root"> <div className="w-full flow-root">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<div className="inline-block border rounded-lg border-gray-300 dark:border-zinc-700 min-w-full align-middle"> <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"> <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 { useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import MemberSection from "@/components/setting/MemberSection"; import WorkspaceGeneralSettingSection from "@/components/setting/WorkspaceGeneralSettingSection";
import WorkspaceSection from "@/components/setting/WorkspaceSection"; import WorkspaceMembersSection from "@/components/setting/WorkspaceMembersSection";
import { useUserStore, useWorkspaceStore } from "@/stores"; import { useUserStore, useWorkspaceStore } from "@/stores";
import { stringifyPlanType } from "@/stores/subscription"; import { stringifyPlanType } from "@/stores/subscription";
import { Role } from "@/types/proto/api/v1/user_service"; import { Role } from "@/types/proto/api/v1/user_service";
@ -40,8 +40,10 @@ const WorkspaceSetting = () => {
</Link> </Link>
</div> </div>
</div> </div>
<MemberSection /> <Divider />
<WorkspaceSection /> <WorkspaceMembersSection />
<Divider />
<WorkspaceGeneralSettingSection />
</div> </div>
); );
}; };