Skip to content

Commit 00ad1ca

Browse files
AeledfyrAeledfyr
committed
chore: use <SettingsGroup> in server settings
1 parent 58c21d9 commit 00ad1ca

File tree

10 files changed

+180
-228
lines changed

10 files changed

+180
-228
lines changed

‎src/components/guild-join-notification-modal/GuildJoinNotificationModal.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
import style from "./GuildJoinNotificationModal.module.css";
2-
import { createEffect, Show } from "solid-js";
2+
import { createEffect, JSXElement, Show } from "solid-js";
33
import { Modal } from "../ui/modal";
44
import useStore from "@/chat-api/store/useStore";
5-
import SettingsBlock from "../ui/settings-block/SettingsBlock";
6-
import { css, styled } from "solid-styled-components";
5+
import SettingsBlock, { SettingsGroup } from "../ui/settings-block/SettingsBlock";
76
import ItemContainer from "@/components/ui/LegacyItem";
87
import { t } from "@nerimity/i18lite";
98
import Avatar from "../ui/Avatar";
109
import { RadioBox, RadioBoxItem } from "../ui/RadioBox";
1110
import { ServerNotificationPingMode } from "@/chat-api/RawData";
11+
import Block from "../ui/settings-block/Block";
1212

13-
const RadioBoxContainer = styled("div")`
14-
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
15-
background: rgba(255, 255, 255, 0.05);
16-
border-bottom-left-radius: 8px;
17-
border-bottom-right-radius: 8px;
18-
padding: 10px;
19-
padding-left: 50px;
20-
`;
13+
const RadioBoxContainer = (props: { children?: JSXElement }) => {
14+
return (
15+
<Block style={{ "padding-left": "50px", "margin-bottom": "0" }}>
16+
{props.children}
17+
</Block>
18+
);
19+
};
2120

2221
export default function GuildJoinNotificationModal(props: {
2322
close: () => void;
@@ -90,9 +89,8 @@ export default function GuildJoinNotificationModal(props: {
9089
>
9190
<Modal.Header title="Notification Settings" icon="notifications" />
9291
<Modal.Body class={style.body}>
93-
<div>
92+
<SettingsGroup>
9493
<SettingsBlock
95-
header
9694
icon="priority_high"
9795
label={t("servers.settings.notifications.ping")}
9896
description={t("servers.settings.notifications.pingDescription")}
@@ -115,16 +113,15 @@ export default function GuildJoinNotificationModal(props: {
115113
initialId={currentNotificationPingMode()}
116114
/>
117115
</RadioBoxContainer>
118-
</div>
116+
</SettingsGroup>
119117

120118
<Show
121119
when={
122120
currentNotificationPingMode() !== ServerNotificationPingMode.MUTE
123121
}
124122
>
125-
<div>
123+
<SettingsGroup>
126124
<SettingsBlock
127-
header
128125
icon="notifications_active"
129126
label={t("servers.settings.notifications.sound")}
130127
description={t("servers.settings.notifications.soundDescription")}
@@ -136,7 +133,7 @@ export default function GuildJoinNotificationModal(props: {
136133
initialId={currentNotificationSoundMode()}
137134
/>
138135
</RadioBoxContainer>
139-
</div>
136+
</SettingsGroup>
140137
</Show>
141138
</Modal.Body>
142139
<Modal.Footer>

‎src/components/servers/settings/ServerNotificationSettings.tsx‎

Lines changed: 51 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useParams } from "solid-navigator";
2-
import { For, Show, createEffect } from "solid-js";
2+
import { For, JSXElement, Show, createEffect } from "solid-js";
33
import useStore from "@/chat-api/store/useStore";
4-
import SettingsBlock from "@/components/ui/settings-block/SettingsBlock";
4+
import SettingsBlock, { SettingsGroup } from "@/components/ui/settings-block/SettingsBlock";
55
import { css, styled } from "solid-styled-components";
66
import { t } from "@nerimity/i18lite";
77
import Breadcrumb, { BreadcrumbItem } from "@/components/ui/Breadcrumb";
@@ -17,21 +17,22 @@ import {
1717
ServerNotificationSoundMode
1818
} from "@/chat-api/RawData";
1919
import Button from "@/components/ui/Button";
20+
import Block from "@/components/ui/settings-block/Block";
2021

2122
const Container = styled("div")`
2223
display: flex;
2324
flex-direction: column;
2425
padding: 10px;
26+
gap: 10px;
2527
`;
2628

27-
const RadioBoxContainer = styled("div")`
28-
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
29-
background: rgba(255, 255, 255, 0.05);
30-
border-bottom-left-radius: 8px;
31-
border-bottom-right-radius: 8px;
32-
padding: 10px;
33-
padding-left: 50px;
34-
`;
29+
const RadioBoxContainer = (props: { children?: JSXElement }) => {
30+
return (
31+
<Block style={{ "padding-left": "50px", "margin-bottom": "0" }}>
32+
{props.children}
33+
</Block>
34+
);
35+
};
3536

3637
export default function ServerNotificationSettings() {
3738
const params = useParams<{ serverId: string; channelId?: string }>();
@@ -135,52 +136,49 @@ export default function ServerNotificationSettings() {
135136
type="info"
136137
description={t("servers.settings.notifications.notice")}
137138
/>
138-
<SettingsBlock
139-
class={css`
140-
margin-top: 10px;
141-
`}
142-
header
143-
icon="priority_high"
144-
label={t("servers.settings.notifications.ping")}
145-
description={t("servers.settings.notifications.pingDescription")}
146-
>
147-
<ItemContainer
148-
alert={
149-
currentNotificationPingMode() !== ServerNotificationPingMode.MUTE
150-
}
151-
style={{ "padding-left": "10px", "pointer-events": "none" }}
139+
140+
<SettingsGroup>
141+
<SettingsBlock
142+
icon="priority_high"
143+
label={t("servers.settings.notifications.ping")}
144+
description={t("servers.settings.notifications.pingDescription")}
152145
>
153-
<Avatar server={server()} size={30} />
154-
</ItemContainer>
155-
</SettingsBlock>
146+
<ItemContainer
147+
alert={
148+
currentNotificationPingMode() !== ServerNotificationPingMode.MUTE
149+
}
150+
style={{ "padding-left": "10px", "pointer-events": "none" }}
151+
>
152+
<Avatar server={server()} size={30} />
153+
</ItemContainer>
154+
</SettingsBlock>
156155

157-
<RadioBoxContainer>
158-
<RadioBox
159-
onChange={onNotificationPingChange}
160-
items={NotificationPingItems}
161-
initialId={currentNotificationPingMode()}
162-
/>
163-
</RadioBoxContainer>
156+
<RadioBoxContainer>
157+
<RadioBox
158+
onChange={onNotificationPingChange}
159+
items={NotificationPingItems}
160+
initialId={currentNotificationPingMode()}
161+
/>
162+
</RadioBoxContainer>
163+
</SettingsGroup>
164164

165165
<Show
166166
when={currentNotificationPingMode() !== ServerNotificationPingMode.MUTE}
167167
>
168-
<SettingsBlock
169-
class={css`
170-
margin-top: 10px;
171-
`}
172-
header
173-
icon="notifications_active"
174-
label={t("servers.settings.notifications.sound")}
175-
description={t("servers.settings.notifications.soundDescription")}
176-
/>
177-
<RadioBoxContainer>
178-
<RadioBox
179-
onChange={onNotificationSoundChange}
180-
items={NotificationSoundItems()}
181-
initialId={currentNotificationSoundMode()}
168+
<SettingsGroup>
169+
<SettingsBlock
170+
icon="notifications_active"
171+
label={t("servers.settings.notifications.sound")}
172+
description={t("servers.settings.notifications.soundDescription")}
182173
/>
183-
</RadioBoxContainer>
174+
<RadioBoxContainer>
175+
<RadioBox
176+
onChange={onNotificationSoundChange}
177+
items={NotificationSoundItems()}
178+
initialId={currentNotificationSoundMode()}
179+
/>
180+
</RadioBoxContainer>
181+
</SettingsGroup>
184182
</Show>
185183

186184
<Show when={!channel()?.serverId}>
@@ -233,12 +231,8 @@ const ChannelNotificationsBlock = () => {
233231
];
234232

235233
return (
236-
<>
234+
<SettingsGroup>
237235
<SettingsBlock
238-
class={css`
239-
margin-top: 10px;
240-
`}
241-
header
242236
icon="storage"
243237
label={t("servers.settings.drawer.channels")}
244238
description={t("servers.settings.notifications.channelsDescription")}
@@ -255,20 +249,17 @@ const ChannelNotificationsBlock = () => {
255249
</SettingsBlock>
256250

257251
<For each={sortedChannels()}>
258-
{(channel, i) => (
252+
{(channel) => (
259253
<SettingsBlock
260254
href={"./" + channel.id}
261255
class={css`
262-
padding-top: 0;
263-
padding-bottom: 0;
256+
padding-block: 0;
264257
`}
265258
label={`${hasOverride(channel.id) ? "*" : ""}${channel.name}`}
266259
icon="tag"
267-
borderTopRadius={false}
268-
borderBottomRadius={i() === sortedChannels().length - 1}
269260
/>
270261
)}
271262
</For>
272-
</>
263+
</SettingsGroup>
273264
);
274265
};

‎src/components/servers/settings/channel/ServerSettingsChannel.tsx‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from "solid-js";
1414
import useStore from "@/chat-api/store/useStore";
1515
import { createUpdatedSignal } from "@/common/createUpdatedSignal";
16-
import SettingsBlock from "@/components/ui/settings-block/SettingsBlock";
16+
import SettingsBlock, { SettingsGroup } from "@/components/ui/settings-block/SettingsBlock";
1717
import Input from "@/components/ui/input/Input";
1818
import Button from "@/components/ui/Button";
1919
import {
@@ -240,36 +240,37 @@ function PermissionsTab() {
240240

241241
return (
242242
<div class={styles.channelPane}>
243-
<SettingsBlock
244-
icon="security"
245-
label={t("servers.settings.drawer.permissions")}
246-
description={t("servers.settings.channel.permissionsDescription")}
247-
header={true}
248-
class={css`
249-
&& {
250-
flex-direction: column;
251-
align-items: start;
252-
gap: 6px;
253-
}
254-
`}
255-
>
256-
<DropDown
243+
<SettingsGroup>
244+
<SettingsBlock
245+
icon="security"
246+
label={t("servers.settings.drawer.permissions")}
247+
description={t("servers.settings.channel.permissionsDescription")}
257248
class={css`
258-
align-self: stretch;
259-
margin-left: 40px;
249+
&& {
250+
flex-direction: column;
251+
align-items: start;
252+
gap: 6px;
253+
}
260254
`}
261-
items={rolesDropdownItems()}
262-
selectedId={selectedRoleId()}
263-
onChange={(item) => setSelectedRoleId(item.id)}
264-
/>
265-
</SettingsBlock>
255+
>
256+
<DropDown
257+
class={css`
258+
align-self: stretch;
259+
margin-left: 40px;
260+
`}
261+
items={rolesDropdownItems()}
262+
selectedId={selectedRoleId()}
263+
onChange={(item) => setSelectedRoleId(item.id)}
264+
/>
265+
</SettingsBlock>
266266

267-
<Show when={selectedRoleId()} keyed>
268-
<ChannelPermissionsBlock
269-
permissions={permissions()}
270-
setPermissions={setPermissions}
271-
/>
272-
</Show>
267+
<Show when={selectedRoleId()} keyed>
268+
<ChannelPermissionsBlock
269+
permissions={permissions()}
270+
setPermissions={setPermissions}
271+
/>
272+
</Show>
273+
</SettingsGroup>
273274

274275
<FloatingSaveChanges
275276
error={error()}
@@ -672,25 +673,22 @@ const WebhooksBlock = (props: { channelId: string; serverId: string }) => {
672673
};
673674

674675
return (
675-
<div>
676+
<SettingsGroup>
676677
<SettingsBlock
677678
icon="webhook"
678679
label="Webhooks"
679-
header={!!webhooks().length}
680680
>
681681
<Button label="Create" iconName="add" onClick={handleCreate} />
682682
</SettingsBlock>
683683
<For each={webhooks()}>
684-
{(webhook, i) => (
684+
{(webhook) => (
685685
<SettingsBlock
686686
icon="webhook"
687687
label={webhook.name}
688-
borderTopRadius={false}
689688
href={`./webhooks/${webhook.id}`}
690-
borderBottomRadius={i() === webhooks().length - 1}
691689
/>
692690
)}
693691
</For>
694-
</div>
692+
</SettingsGroup>
695693
);
696694
};

‎src/components/servers/settings/channel/styles.module.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,6 @@
4141
align-self: flex-end;
4242
}
4343

44-
.permissionItem {
45-
border-top-left-radius: 0;
46-
border-top-right-radius: 0;
47-
&:not(:last-child) {
48-
margin-bottom: 1px;
49-
border-radius: 0;
50-
}
51-
}
52-
5344
.slowdownInput {
5445
width: 84px;
5546
}

0 commit comments

Comments
 (0)