aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-23 22:53:08 +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="sm:flex sm:items-center">
<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>
</div>
<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 (
<>
<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">
<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>}

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

@ -47,7 +47,7 @@ const MemberSection = () => {
<div className="w-full">
<div className="sm:flex sm:items-center">
<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">
A list of all the users in your workspace including their nickname, email and role.
</p>

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

@ -58,9 +58,9 @@ const PreferenceSection: React.FC = () => {
};
return (
<>
<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("settings.preference.self")}</p>
<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.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="flex flex-row justify-start items-center gap-x-1">
<span className="dark:text-gray-400">{t("settings.preference.color-theme")}</span>
@ -91,7 +91,7 @@ const PreferenceSection: React.FC = () => {
</Select>
</div>
</div>
</>
</div>
);
};

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

@ -79,53 +79,55 @@ 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">{t("settings.workspace.self")}</p>
<div className="w-full flex flex-col justify-start items-start">
<p className="mt-2 dark:text-gray-400">Instance URL</p>
<Input
className="w-full mt-2"
placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website."
value={workspaceSetting.instanceUrl}
onChange={(event) => handleInstanceUrlChange(event.target.value)}
/>
</div>
<div className="w-full flex flex-col justify-start items-start">
<p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p>
<Textarea
className="w-full mt-2"
placeholder="* {font-family: ui-monospace Monaco Consolas;}"
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={t("settings.workspace.enable-user-signup.self")}
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>
<div className="w-full flex flex-row justify-between items-center">
<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 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>
<div className="w-full sm:w-auto grow flex flex-col justify-start items-start gap-4">
<div className="w-full flex flex-col justify-start items-start">
<p className="dark:text-gray-400">Instance URL</p>
<Input
className="w-full mt-2"
placeholder="Your instance URL. Using for website SEO. Leave it empty if you don't want cawler to index your website."
value={workspaceSetting.instanceUrl}
onChange={(event) => handleInstanceUrlChange(event.target.value)}
/>
</div>
<div className="w-full flex flex-col justify-start items-start">
<p className="mt-2 dark:text-gray-400">{t("settings.workspace.custom-style")}</p>
<Textarea
className="w-full mt-2"
placeholder="* {font-family: ui-monospace Monaco Consolas;}"
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={t("settings.workspace.enable-user-signup.self")}
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>
<div className="w-full flex flex-row justify-between items-center">
<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>
<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>
);

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

@ -38,9 +38,9 @@ const SubscriptionSetting: React.FC = () => {
};
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">
<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">
<span className="text-gray-500 mr-2">Current 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 = () => {
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 />
<AccessTokenSection />
<PreferenceSection />

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

@ -26,12 +26,12 @@ const WorkspaceSetting: React.FC = () => {
}
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 />}>
You can see the settings items below because you are an Admin.
</Alert>
<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">
<span className="text-gray-500 mr-2">Current plan:</span>
<span className="text-2xl mr-4 dark:text-gray-400">{stringifyPlanType(profile.plan)}</span>