)}
diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx
index 8da95a67..da02d777 100644
--- a/src/pages/settings/panes/Native.tsx
+++ b/src/pages/settings/panes/Native.tsx
@@ -2,11 +2,8 @@ import { Refresh } from "@styled-icons/boxicons-regular";
import { useEffect, useState } from "preact/hooks";
-import { Button } from "@revoltchat/ui";
+import { Button, CategoryButton, Checkbox, Tip } from "@revoltchat/ui";
-import Checkbox from "../../../components/ui/Checkbox";
-import Tip from "../../../components/ui/Tip";
-import CategoryButton from "../../../components/ui/fluent/CategoryButton";
import RLogo from "../assets/revolt_r.svg";
export function Native() {
@@ -27,10 +24,10 @@ export function Native() {
return (
- Some options might require a restart.
+ Some options might require a restart.
App Behavior
{
if (v) {
@@ -41,12 +38,12 @@ export function Native() {
setAutoStart(v);
}}
- description="Launch Revolt when you log into your computer.">
- Start with computer
-
+ title="Start with computer"
+ description="Launch Revolt when you log into your computer."
+ />
{
window.native.set("minimiseToTray", minimiseToTray);
setConfig({
@@ -54,11 +51,11 @@ export function Native() {
minimiseToTray,
});
}}
- description="Instead of closing, Revolt will hide in your tray.">
- Minimise to Tray
-
+ title="Minimise to Tray"
+ description="Instead of closing, Revolt will hide in your tray."
+ />
{
window.native.set("discordRPC", discordRPC);
setConfig({
@@ -66,11 +63,11 @@ export function Native() {
discordRPC,
});
}}
- description="Rep Revolt on your Discord status.">
- Enable Discord status
-
+ title="Enable Discord status"
+ description="Rep Revolt on your Discord status."
+ />
{
const build = nightly ? "nightly" : "stable";
window.native.set("build", build);
@@ -80,12 +77,13 @@ export function Native() {
build,
});
}}
- description="Use the beta branch of Revolt.">
- Revolt Nightly
-
+ title="Revolt Nightly"
+ description="Use the beta branch of Revolt."
+ />
+
Titlebar
{
window.native.set("frame", !frame);
setHintRelaunch(true);
@@ -94,12 +92,12 @@ export function Native() {
frame: !frame,
});
}}
- description={<>Let Revolt use its own window frame.}>
- Custom window frame
-
+ title="Custom window frame"
+ description="Let Revolt use its own window frame."
+ />
{
window.native.set("frame", !frame);
setHintRelaunch(true);
@@ -108,12 +106,12 @@ export function Native() {
frame: !frame,
});
}}
- description="Show mute/deafen buttons on the titlebar.">
- Enable quick action buttons
-
+ title="Enable quick action buttons"
+ description="Show mute/deafen buttons on the titlebar."
+ />
Advanced
{
window.native.set(
"hardwareAcceleration",
@@ -125,9 +123,10 @@ export function Native() {
hardwareAcceleration,
});
}}
- description="Uses your GPU to render the app, disable if you run into visual issues.">
- Hardware Acceleration
-
+ title="Hardware Acceleration"
+ description="Uses your GPU to render the app, disable if you run into visual issues."
+ />
+
);
});
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index ff5c3321..e5faf987 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -128,8 +128,9 @@
border-radius: var(--border-radius);
width: 100%;
display: flex;
- display: grid;
- place-items: center;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
grid-template-columns: minmax(auto, 100%);
> div {
@@ -480,12 +481,14 @@
border-radius: var(--border-radius);
margin-top: 0;
+ transition: 0.1s ease background-color;
+
&:hover {
background: var(--secondary-background);
}
}
- .entry > span > span {
+ .entry > div div {
gap: 8px;
display: flex;
align-items: center;
diff --git a/src/pages/settings/panes/Plugins.tsx b/src/pages/settings/panes/Plugins.tsx
index 8bf45a86..51b13f50 100644
--- a/src/pages/settings/panes/Plugins.tsx
+++ b/src/pages/settings/panes/Plugins.tsx
@@ -1,17 +1,12 @@
-import { Check } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
-import styled from "styled-components";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
-import { Button } from "@revoltchat/ui";
+import { Button, Checkbox, Tip } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
-import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
-import Tip from "../../../components/ui/Tip";
-
// Just keeping this here for general purpose. Should probably be exported
// elsewhere, though.
interface Plugin {
@@ -21,45 +16,10 @@ interface Plugin {
enabled: boolean | undefined;
}
-const CustomCheckboxBase = styled(CheckboxBase)`
- margin-top: 0 !important;
-`;
-export interface CheckboxProps {
- checked: boolean;
- disabled?: boolean;
- onChange: (state: boolean) => void;
-}
-function PluginCheckbox(props: CheckboxProps) {
- // HACK HACK HACK(lexisother): THIS ENTIRE THING IS A HACK!!!!
- /*
- Until some reviewer points me in the right direction, I've resorted to
- fabricating my own checkbox component.
- "WHY?!", you might ask. Well, the normal `Checkbox` component can take
- textual contents, and *also* adds a `margin-top` of 20 pixels.
- We... don't need that. At all. *Especially* the margin. It makes our card
- look disproportionate.
-
- Apologies, @insert!
- */
- return (
-
-
- !props.disabled && props.onChange(!props.checked)
- }
- />
-
-
-
-
- );
-}
-
interface CardProps {
plugin: Plugin;
}
+
function PluginCard({ plugin }: CardProps) {
const plugins = useApplicationState().plugins;
@@ -70,12 +30,14 @@ function PluginCard({ plugin }: CardProps) {