added full keycloak support. Partial Quantum backend support, Moved to
.env for config - removed the globalVars variable for a lack of need - changed the documentation page for test of multilevel navigation - added machines page to route - cleaned up dependencies for build - changed config to split imports
This commit is contained in:
0
src/Pages/DevicesPage/DevicesPage.css
Normal file
0
src/Pages/DevicesPage/DevicesPage.css
Normal file
31
src/Pages/DevicesPage/DevicesPage.tsx
Normal file
31
src/Pages/DevicesPage/DevicesPage.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Helmet } from "react-helmet";
|
||||
import "./DevicesPage.css";
|
||||
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
|
||||
import { Alert } from "@mantine/core";
|
||||
import { Link } from "react-router";
|
||||
|
||||
function DevicesPage() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Device Page | QMolSim</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Get all the devices connected to your or your team account"
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="DevicesPage">
|
||||
<PaginationContainer numberOfPages={1}>
|
||||
<Alert title="Подключенные устройства не найдены" color="blue">
|
||||
Для того, чтобы добавить устройство, простмотрите{" "}
|
||||
<Link to={"documentaion"} className="invisible_link">
|
||||
документацию
|
||||
</Link>
|
||||
</Alert>
|
||||
</PaginationContainer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DevicesPage;
|
||||
@@ -1,26 +1,26 @@
|
||||
.DocumentationPage {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tableOfContents {
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
width: 150px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.docTitle {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.hoverCard {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
}
|
||||
.DocumentationPage {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tableOfContents {
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
width: 190px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.docTitle {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.hoverCard {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Divider,
|
||||
Menu,
|
||||
TableOfContents,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { Box, Divider, TableOfContents, Title } from "@mantine/core";
|
||||
import "./DocumentationPage.css";
|
||||
import { IconMenu2 } from "@tabler/icons-react";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
function DocumentationPage() {
|
||||
@@ -31,9 +23,12 @@ function DocumentationPage() {
|
||||
color="accent"
|
||||
size="sm"
|
||||
radius="sm"
|
||||
minDepthToOffset={0}
|
||||
depthOffset={20}
|
||||
scrollSpyOptions={{
|
||||
selector: "section h2",
|
||||
selector: "section h1, h2",
|
||||
}}
|
||||
className=""
|
||||
getControlProps={({ data }) => ({
|
||||
onClick: () =>
|
||||
data
|
||||
@@ -43,56 +38,12 @@ function DocumentationPage() {
|
||||
})}
|
||||
/>
|
||||
</Box>
|
||||
<Box className="hoverCard" hiddenFrom="md">
|
||||
<Menu
|
||||
width={280}
|
||||
shadow="md"
|
||||
openDelay={100}
|
||||
closeDelay={100}
|
||||
closeOnClickOutside
|
||||
closeOnItemClick
|
||||
floatingStrategy="fixed"
|
||||
>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
aria-label="navigation"
|
||||
variant="gradient"
|
||||
gradient={{ from: "blue", to: "cyan", deg: 90 }}
|
||||
radius={"50%"}
|
||||
size={40}
|
||||
>
|
||||
<IconMenu2 size={25} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<TableOfContents
|
||||
variant="light"
|
||||
color="accent"
|
||||
size="sm"
|
||||
radius="sm"
|
||||
scrollSpyOptions={{
|
||||
selector: "section h2",
|
||||
}}
|
||||
getControlProps={({ data }) => ({
|
||||
onClick: () =>
|
||||
data
|
||||
.getNode()
|
||||
.scrollIntoView({ behavior: "smooth", block: "center" }),
|
||||
children: data.value,
|
||||
})}
|
||||
/>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Box>
|
||||
<div className="contents">
|
||||
<section id="introduction" style={{ height: 1000 }}>
|
||||
<Title order={2}>Introduction</Title>
|
||||
<Title order={1}>1. Введение</Title>
|
||||
</section>
|
||||
<section id="features" style={{ height: 1000 }}>
|
||||
<Title order={2}>features</Title>
|
||||
</section>
|
||||
<section id="conclusion" style={{ height: 1000 }}>
|
||||
<Title order={2}>Conslusion</Title>
|
||||
<section id="quick-start" style={{ height: 1000 }}>
|
||||
<Title order={2}>1.1 Быстрое начало</Title>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,9 +74,9 @@ function ExperimentPage() {
|
||||
</div>
|
||||
</div>
|
||||
{experiment.tasks_ids.length > 0 && (
|
||||
<PaginationContainer>
|
||||
{experiment.tasks_ids.map((task: ExperimentTask) => {
|
||||
return <div>{task.data.name}</div>;
|
||||
<PaginationContainer numberOfPages={1}>
|
||||
{experiment.tasks_ids.map((task: number) => {
|
||||
return <div>{task}</div>;
|
||||
})}
|
||||
</PaginationContainer>
|
||||
)}
|
||||
@@ -95,7 +95,7 @@ function ExperimentPage() {
|
||||
<Alert color="red">
|
||||
<Center>
|
||||
{" "}
|
||||
<Text c="contrast" size={"xl"} size="md">
|
||||
<Text c="contrast" size={"xl"}>
|
||||
Ошибка. Эксперимент не найден
|
||||
</Text>{" "}
|
||||
</Center>
|
||||
|
||||
@@ -8,10 +8,11 @@ import ExperimentsListCard from "Components/ListCard/ExperimentsListCard";
|
||||
import { useExperimentStore } from "Stores/ExperimentStore";
|
||||
import type { Experiment } from "Types/Experiment/Experiment";
|
||||
import CustomButton from "Components/CustomButton/CustomButton";
|
||||
import { Alert } from "@mantine/core";
|
||||
|
||||
function ExperimentsPage() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { experiments, teams, tasks } = useExperimentStore();
|
||||
const { experiments, teams } = useExperimentStore();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -32,18 +33,20 @@ function ExperimentsPage() {
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<div className="experimentsButtons">
|
||||
<CustomButton
|
||||
color="contrast"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
icon={<IconMicroscope />}
|
||||
text="Создать эксперимент"
|
||||
/>
|
||||
</div>
|
||||
{teams.length > 0 && (
|
||||
<div className="experimentsButtons">
|
||||
<CustomButton
|
||||
color="contrast"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
icon={<IconMicroscope />}
|
||||
text="Создать эксперимент"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<PaginationContainer>
|
||||
<PaginationContainer numberOfPages={1}>
|
||||
{experiments.map((exp: Experiment) => {
|
||||
return (
|
||||
<ExperimentsListCard
|
||||
@@ -58,6 +61,12 @@ function ExperimentsPage() {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{teams.length == 0 && (
|
||||
<Alert title="Команды не найдены" color="red">
|
||||
Создайте или войдите в команду чтобы начать работу с
|
||||
экспериментами
|
||||
</Alert>
|
||||
)}
|
||||
</PaginationContainer>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.TeamsPage {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
import { Helmet } from "react-helmet";
|
||||
import "./TeamsPage.css";
|
||||
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
|
||||
import CustomButton from "Components/CustomButton/CustomButton";
|
||||
import { IconUsersGroup } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { Alert } from "@mantine/core";
|
||||
|
||||
function TeamsPage() {
|
||||
const [, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@@ -13,7 +19,21 @@ function TeamsPage() {
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="TeamsPage">
|
||||
<PaginationContainer />
|
||||
<div className="experimentsButtons">
|
||||
<CustomButton
|
||||
color="contrast"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
icon={<IconUsersGroup />}
|
||||
text="Создать эксперимент"
|
||||
/>
|
||||
</div>
|
||||
<PaginationContainer numberOfPages={1}>
|
||||
<Alert title="Команды не найдены" color="blue">
|
||||
Создайте или войдите в команду чтобы начать работу с экспериментами
|
||||
</Alert>
|
||||
</PaginationContainer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import {
|
||||
Button,
|
||||
Title,
|
||||
Tabs,
|
||||
TextInput,
|
||||
SimpleGrid,
|
||||
Chip,
|
||||
Text,
|
||||
Divider,
|
||||
Switch,
|
||||
LoadingOverlay,
|
||||
Space,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconChartCandle,
|
||||
@@ -17,20 +16,98 @@ import {
|
||||
IconSun,
|
||||
IconMoonStars,
|
||||
} from "@tabler/icons-react";
|
||||
import keycloak from "Api/Keycloak/Keycloak";
|
||||
import { useEffect } from "react";
|
||||
import keycloak, {
|
||||
SendEmailVerification,
|
||||
updatePasswordWithRedirect,
|
||||
updateUserData,
|
||||
} from "Api/Keycloak/Keycloak";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { AuthenticationStore } from "Stores/AuthenticationStore";
|
||||
import "./UserPage.css";
|
||||
import { useUserPreferencesStore } from "Stores/PreferencesStore";
|
||||
import CustomButton from "Components/CustomButton/CustomButton";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useSearchParams } from "react-router";
|
||||
import {
|
||||
GetCurrentUserInfo,
|
||||
UpdateCurrentUserInfo,
|
||||
} from "Api/QuantumBackend/UserManagement";
|
||||
import type { UserData } from "Types/User/User";
|
||||
function UserPage() {
|
||||
const { profile, token } = AuthenticationStore();
|
||||
const { profile, is_loading, profile_picture_path } = AuthenticationStore();
|
||||
const { theme, set_theme } = useUserPreferencesStore();
|
||||
const [username, set_username] = useState<string>("");
|
||||
const [email, set_email] = useState<string>("");
|
||||
const [pfp_path, set_pfp_path] = useState<string>("");
|
||||
const [is_editing_path, set_is_editing_path] = useState<boolean>(false);
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const updateData = () => {
|
||||
if (
|
||||
profile &&
|
||||
((profile.username && profile.username != username) ||
|
||||
(profile.email && profile.email != email))
|
||||
) {
|
||||
console.log("A");
|
||||
const prof_1 = profile;
|
||||
prof_1.email = email;
|
||||
prof_1.username = username;
|
||||
AuthenticationStore.setState({
|
||||
is_loading: true,
|
||||
});
|
||||
updateUserData(prof_1).then((data) => {
|
||||
console.log(data);
|
||||
if (data) {
|
||||
notifications.show({
|
||||
radius: "md",
|
||||
title: "Данные успешно изменены",
|
||||
message: "",
|
||||
icon: <IconCheck />,
|
||||
style: { paddingLeft: "5px" },
|
||||
});
|
||||
keycloak.loadUserProfile().then((profile) => {
|
||||
AuthenticationStore.setState({
|
||||
is_loading: false,
|
||||
profile: profile,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const update_pfp = async () => {
|
||||
UpdateCurrentUserInfo(pfp_path).then(() => {
|
||||
GetCurrentUserInfo().then((info: UserData | undefined) => {
|
||||
if (info && info.profile_picture_path)
|
||||
AuthenticationStore.setState({
|
||||
profile_picture_path: info.profile_picture_path,
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(token);
|
||||
}, []);
|
||||
if (profile) {
|
||||
if (profile.username) set_username(profile.username);
|
||||
if (profile.email) set_email(profile.email);
|
||||
if (searchParams.get("password_updated")) {
|
||||
notifications.show({
|
||||
radius: "md",
|
||||
title: "Пароль изменен успешно",
|
||||
message: "",
|
||||
icon: <IconCheck />,
|
||||
style: { paddingLeft: "5px" },
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [profile, searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (profile_picture_path) set_pfp_path(profile_picture_path);
|
||||
}, [profile_picture_path]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@@ -68,92 +145,223 @@ function UserPage() {
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="profile">
|
||||
<SimpleGrid verticalSpacing="lg" cols={2}>
|
||||
<Title size="lg">Имя пользователя:</Title>
|
||||
<TextInput size="md" value={profile?.username} />
|
||||
<Title size="lg">Почта:</Title>
|
||||
<TextInput size="md" value={profile?.email} />
|
||||
<CustomButton color="accent" text="Сохранить" />
|
||||
<CustomButton color="error" text="Отменить" />
|
||||
</SimpleGrid>
|
||||
<Divider my="lg" />
|
||||
<SimpleGrid verticalSpacing={"lg"} cols={2}>
|
||||
<Title
|
||||
size="lg"
|
||||
style={{ display: "flex", alignItems: "center" }}
|
||||
>
|
||||
Почта верифицирована:{" "}
|
||||
<Chip mx="lg" size="auto" checked={profile?.emailVerified}>
|
||||
{profile?.emailVerified ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconCheck
|
||||
size={25}
|
||||
color={"green"}
|
||||
style={{ verticalAlign: "center", margin: "5px" }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconCancel
|
||||
size={25}
|
||||
color="red"
|
||||
<div
|
||||
style={{ position: "relative", padding: "5px", height: "100%" }}
|
||||
>
|
||||
<LoadingOverlay
|
||||
visible={is_loading}
|
||||
zIndex={1000}
|
||||
overlayProps={{ radius: "sm", blur: 2 }}
|
||||
loaderProps={{ size: 50, type: "dots" }}
|
||||
/>
|
||||
<SimpleGrid verticalSpacing="lg" cols={2}>
|
||||
<Title size="lg">Имя пользователя:</Title>
|
||||
<TextInput
|
||||
size="md"
|
||||
value={username}
|
||||
onChange={(e) => set_username(e.currentTarget.value)}
|
||||
/>
|
||||
<Title size="lg">Почта:</Title>
|
||||
<TextInput
|
||||
size="md"
|
||||
value={email}
|
||||
onChange={(e) => set_email(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<CustomButton
|
||||
color="accent"
|
||||
text="Сохранить"
|
||||
onClick={updateData}
|
||||
disabled={
|
||||
!(
|
||||
profile != null &&
|
||||
((profile.username != undefined &&
|
||||
profile.username != username) ||
|
||||
(profile.email != undefined && profile.email != email))
|
||||
)
|
||||
}
|
||||
/>
|
||||
<CustomButton
|
||||
color="error"
|
||||
text="Отменить"
|
||||
disabled={
|
||||
!(
|
||||
profile != null &&
|
||||
((profile.username != undefined &&
|
||||
profile.username != username) ||
|
||||
(profile.email != undefined && profile.email != email))
|
||||
)
|
||||
}
|
||||
/>
|
||||
</SimpleGrid>
|
||||
<Divider my="lg" />
|
||||
<SimpleGrid verticalSpacing={"lg"} cols={2}>
|
||||
<Title
|
||||
size="lg"
|
||||
style={{ display: "flex", alignItems: "center" }}
|
||||
>
|
||||
Почта верифицирована:{" "}
|
||||
<div>
|
||||
{profile?.emailVerified ? (
|
||||
<div
|
||||
style={{
|
||||
verticalAlign: "center",
|
||||
margin: "5px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconCheck
|
||||
size={25}
|
||||
color={"white"}
|
||||
style={{ verticalAlign: "center", margin: "5px" }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconCancel
|
||||
size={25}
|
||||
color="red"
|
||||
style={{
|
||||
verticalAlign: "center",
|
||||
margin: "5px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Title>
|
||||
{!profile?.emailVerified && (
|
||||
<div>
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Подтвердить почту"
|
||||
onClick={() => SendEmailVerification()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{profile?.emailVerified && (
|
||||
<div style={{ height: "40px", display: "flex" }}></div>
|
||||
)}
|
||||
<Title size="lg">Пароль:</Title>
|
||||
<div>
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Изменить пароль"
|
||||
onClick={() => {
|
||||
updatePasswordWithRedirect();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</SimpleGrid>
|
||||
<Divider my="lg" />
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<Title size="lg">Фотография профиля</Title>
|
||||
|
||||
<Space my="sm" />
|
||||
{!is_editing_path ? (
|
||||
<img height={350} width={350} src={profile_picture_path} />
|
||||
) : (
|
||||
<TextInput
|
||||
size="md"
|
||||
value={pfp_path}
|
||||
onChange={(e) => set_pfp_path(e.currentTarget.value)}
|
||||
/>
|
||||
)}
|
||||
<Space my="sm" />
|
||||
<div style={{ width: "15em" }}>
|
||||
{!is_editing_path ? (
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Изменить"
|
||||
onClick={() => {
|
||||
set_is_editing_path(true);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Сохранить"
|
||||
onClick={() => {
|
||||
update_pfp();
|
||||
set_is_editing_path(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Space my="sm" />
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="red"
|
||||
text="Отменить"
|
||||
onClick={() => {
|
||||
set_is_editing_path(false);
|
||||
set_pfp_path(profile_picture_path);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Chip>
|
||||
</Title>
|
||||
{!profile?.emailVerified && (
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Подтвердить почту"
|
||||
/>
|
||||
)}
|
||||
{profile?.emailVerified && <div></div>}
|
||||
<Title size="lg">Пароль:</Title>
|
||||
<CustomButton
|
||||
style="outline"
|
||||
color="contrast"
|
||||
text="Изменить пароль"
|
||||
/>
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="preference">
|
||||
<Switch
|
||||
size="xl"
|
||||
defaultChecked={theme == "light"}
|
||||
onChange={(event) =>
|
||||
set_theme(!event.currentTarget.checked ? "dark" : "light")
|
||||
}
|
||||
onLabel={
|
||||
<IconSun
|
||||
size={16}
|
||||
stroke={2.5}
|
||||
color="var(--mantine-color-yellow-4)"
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
flexWrap: "nowrap",
|
||||
gap: "10px",
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "5px",
|
||||
}}
|
||||
>
|
||||
<IconSun
|
||||
size={30}
|
||||
stroke={2.5}
|
||||
color="var(--mantine-color-yellow-4)"
|
||||
/>
|
||||
<Title size={"md"}>Светлая</Title>
|
||||
</div>
|
||||
}
|
||||
offLabel={
|
||||
<IconMoonStars
|
||||
size={16}
|
||||
stroke={2.5}
|
||||
color="var(--mantine-color-blue-6)"
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
flexWrap: "nowrap",
|
||||
gap: "10px",
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "5px",
|
||||
}}
|
||||
>
|
||||
<Title size={"md"}>Темная</Title>
|
||||
<IconMoonStars
|
||||
size={30}
|
||||
stroke={2.5}
|
||||
color="var(--mantine-color-blue-6)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Tabs.Panel>
|
||||
|
||||
Reference in New Issue
Block a user