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

chore: tweak styles

Browse Source
This commit is contained in:
Steven 2024-03-25 21:48:23 +08:00
parent 3f3d7a4c58
commit 1025d8a2ed
8 changed files with 60 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/web/src/components/setting/AccessTokenSection.tsx
View File

@ -64,7 +64,7 @@ const AccessTokenSection = () => {
<div className="w-full"> <div className="w-full">
<div className="sm:flex sm:items-center"> <div className="sm:flex sm:items-center">
<div className="sm:flex-auto"> <div className="sm:flex-auto">
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Access Tokens</p> <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Access Tokens</p>
<p className="mt-2 text-sm text-gray-700 dark:text-gray-600">A list of all access tokens for your account.</p> <p className="mt-2 text-sm text-gray-700 dark:text-gray-600">A list of all access tokens for your account.</p>
</div> </div>
<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none"> <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">

2
frontend/web/src/components/setting/AccountSection.tsx
View File

@ -16,7 +16,7 @@ const AccountSection: React.FC = () => {
return ( return (
<> <>
<div className="w-full flex flex-col justify-start items-start gap-y-2"> <div className="w-full flex flex-col justify-start items-start gap-y-2">
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">{t("common.account")}</p> <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("common.account")}</p>
<p className="flex flex-row justify-start items-center mt-2 dark:text-gray-400"> <p className="flex flex-row justify-start items-center mt-2 dark:text-gray-400">
<span className="text-xl">{currentUser.nickname}</span> <span className="text-xl">{currentUser.nickname}</span>
{isAdmin && <span className="ml-2 bg-blue-600 text-white px-2 leading-6 text-sm rounded-full">Admin</span>} {isAdmin && <span className="ml-2 bg-blue-600 text-white px-2 leading-6 text-sm rounded-full">Admin</span>}

2
frontend/web/src/components/setting/MemberSection.tsx
View File

@ -47,7 +47,7 @@ const MemberSection = () => {
<div className="w-full"> <div className="w-full">
<div className="sm:flex sm:items-center"> <div className="sm:flex sm:items-center">
<div className="sm:flex-auto"> <div className="sm:flex-auto">
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">{t("user.self")}</p> <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"> <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. A list of all the users in your workspace including their nickname, email and role.
</p> </p>

8
frontend/web/src/components/setting/PreferenceSection.tsx
View File

@ -58,9 +58,9 @@ const PreferenceSection: React.FC = () => {
}; };
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 justify-start items-start gap-y-2"> <p className="sm:w-1/4 text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">{t("settings.preference.self")}</p>
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">{t("settings.preference.self")}</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-row justify-between items-center">
<div className="flex flex-row justify-start items-center gap-x-1"> <div className="flex flex-row justify-start items-center gap-x-1">
<span className="dark:text-gray-400">{t("settings.preference.color-theme")}</span> <span className="dark:text-gray-400">{t("settings.preference.color-theme")}</span>
@ -91,7 +91,7 @@ const PreferenceSection: React.FC = () => {
</Select> </Select>
</div> </div>
</div> </div>
</> </div>
); );
}; };

94
frontend/web/src/components/setting/WorkspaceSection.tsx
View File

@ -79,53 +79,55 @@ const WorkspaceSection: React.FC = () => {
}; };
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">
<p className="text-base font-semibold leading-6 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">{t("settings.workspace.self")}</p>
<div className="w-full flex flex-col justify-start items-start"> <div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
<p className="mt-2 dark:text-gray-400">Instance URL</p> <div className="w-full flex flex-col justify-start items-start">
<Input <p className="dark:text-gray-400">Instance URL</p>
className="w-full mt-2" <Input
placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website." className="w-full mt-2"
value={workspaceSetting.instanceUrl} placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website."
onChange={(event) => handleInstanceUrlChange(event.target.value)} value={workspaceSetting.instanceUrl}
/> onChange={(event) => handleInstanceUrlChange(event.target.value)}
</div> />
<div className="w-full flex flex-col justify-start items-start"> </div>
<p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p> <div className="w-full flex flex-col justify-start items-start">
<Textarea <p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p>
className="w-full mt-2" <Textarea
placeholder="* {font-family: ui-monospace Monaco Consolas;}" className="w-full mt-2"
minRows={2} placeholder="* {font-family: ui-monospace Monaco Consolas;}"
maxRows={5} minRows={2}
value={workspaceSetting.customStyle} maxRows={5}
onChange={(event) => handleCustomStyleChange(event.target.value)} value={workspaceSetting.customStyle}
/> onChange={(event) => handleCustomStyleChange(event.target.value)}
</div> />
<div className="w-full flex flex-col justify-start items-start"> </div>
<Checkbox <div className="w-full flex flex-col justify-start items-start">
label={t("settings.workspace.enable-user-signup.self")} <Checkbox
checked={workspaceSetting.enableSignup} label={t("settings.workspace.enable-user-signup.self")}
onChange={(event) => handleEnableSignUpChange(event.target.checked)} checked={workspaceSetting.enableSignup}
/> onChange={(event) => handleEnableSignUpChange(event.target.checked)}
<p className="mt-2 text-gray-500">{t("settings.workspace.enable-user-signup.description")}</p> />
</div> <p className="mt-2 text-gray-500">{t("settings.workspace.enable-user-signup.description")}</p>
<div className="w-full flex flex-row justify-between items-center"> </div>
<div className="flex flex-row justify-start items-center gap-x-1"> <div className="w-full flex flex-row justify-between items-center">
<span className="dark:text-gray-400">{t("settings.workspace.default-visibility")}</span> <div className="flex flex-row justify-start items-center gap-x-1">
<span className="dark:text-gray-400">{t("settings.workspace.default-visibility")}</span>
</div>
<Select
defaultValue={workspaceSetting.defaultVisibility || Visibility.PRIVATE}
onChange={(_, value) => handleDefaultVisibilityChange(value as Visibility)}
>
<Option value={Visibility.PRIVATE}>{t(`shortcut.visibility.private.self`)}</Option>
<Option value={Visibility.WORKSPACE}>{t(`shortcut.visibility.workspace.self`)}</Option>
<Option value={Visibility.PUBLIC}>{t(`shortcut.visibility.public.self`)}</Option>
</Select>
</div>
<div>
<Button variant="outlined" color="neutral" disabled={!allowSave} onClick={handleSaveWorkspaceSetting}>
{t("common.save")}
</Button>
</div> </div>
<Select
defaultValue={workspaceSetting.defaultVisibility || Visibility.PRIVATE}
onChange={(_, value) => handleDefaultVisibilityChange(value as Visibility)}
>
<Option value={Visibility.PRIVATE}>{t(`shortcut.visibility.private.self`)}</Option>
<Option value={Visibility.WORKSPACE}>{t(`shortcut.visibility.workspace.self`)}</Option>
<Option value={Visibility.PUBLIC}>{t(`shortcut.visibility.public.self`)}</Option>
</Select>
</div>
<div>
<Button variant="outlined" color="neutral" disabled={!allowSave} onClick={handleSaveWorkspaceSetting}>
{t("common.save")}
</Button>
</div> </div>
</div> </div>
); );

4
frontend/web/src/pages/SubscriptionSetting.tsx
View File

@ -38,9 +38,9 @@ const SubscriptionSetting: React.FC = () => {
}; };
return ( return (
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12"> <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-8 pb-24 flex flex-col justify-start items-start gap-y-12">
<div className="w-full"> <div className="w-full">
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Subscription</p> <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Subscription</p>
<div className="mt-2"> <div className="mt-2">
<span className="text-gray-500 mr-2">Current plan:</span> <span className="text-gray-500 mr-2">Current plan:</span>
<span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span> <span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span>

2
frontend/web/src/pages/UserSetting.tsx
View File

@ -4,7 +4,7 @@ import AccountSection from "../components/setting/AccountSection";
const Setting: React.FC = () => { const Setting: React.FC = () => {
return ( return (
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12"> <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
<AccountSection /> <AccountSection />
<AccessTokenSection /> <AccessTokenSection />
<PreferenceSection /> <PreferenceSection />

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

@ -26,12 +26,12 @@ const WorkspaceSetting: React.FC = () => {
} }
return ( return (
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12"> <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
<Alert variant="soft" color="warning" startDecorator={<Icon.Info />}> <Alert variant="soft" color="warning" startDecorator={<Icon.Info />}>
You can see the settings items below because you are an Admin. You can see the settings items below because you are an Admin.
</Alert> </Alert>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Subscription</p> <p className="text-2xl shrink-0 font-semibold text-gray-900 dark:text-gray-500">Subscription</p>
<div className="mt-2"> <div className="mt-2">
<span className="text-gray-500 mr-2">Current plan:</span> <span className="text-gray-500 mr-2">Current plan:</span>
<span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span> <span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span>