diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss
index 0bc27ae..c4c5a14 100644
--- a/src/components/menu.module.scss
+++ b/src/components/menu.module.scss
@@ -5,7 +5,7 @@
}
.menu_container {
- @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[44px] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
+ @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[3rem] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
}
.menu_item {
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 14e0473..dd1c92e 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -46,13 +46,13 @@ const Avatar: FunctionComponent = () => {
>
-
Никнейм
-
Статус
+
никнейм
+
статус
diff --git a/src/components/task.module.scss b/src/components/task.module.scss
index 1c2be57..c1242a6 100644
--- a/src/components/task.module.scss
+++ b/src/components/task.module.scss
@@ -1,5 +1,5 @@
@reference "../index.scss";
.task {
- @apply flex h-24 w-[300px] cursor-pointer flex-row items-center justify-start gap-4 rounded-[39px] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
+ @apply flex h-24 w-[300px] cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
}
diff --git a/src/components/task.tsx b/src/components/task.tsx
index 924f578..ca436d7 100644
--- a/src/components/task.tsx
+++ b/src/components/task.tsx
@@ -1,16 +1,40 @@
import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
import classes from "./task.module.scss";
interface TaskProps {
name: string;
+ checked?: boolean;
}
-const Task: FunctionComponent = ({ name }: TaskProps) => {
+const taskStyle = tv({
+ base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+ variants: {
+ checked: {
+ true: "bg-black",
+ false: "bg-white",
+ },
+ },
+});
+
+const markStyle = tv({
+ base: "text-4xl font-light text-white",
+ variants: {
+ checked: {
+ true: "block",
+ false: "hidden",
+ },
+ },
+});
+
+const Task: FunctionComponent = ({ name, checked = false }: TaskProps) => {
return (
// Временное действие для тестирования
diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss
index 8ca1832..cce2982 100644
--- a/src/components/ui/Button.module.scss
+++ b/src/components/ui/Button.module.scss
@@ -1,5 +1,5 @@
@reference '../../index.scss';
.button {
- @apply rounded-[23px] px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
+ @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
}
diff --git a/src/components/ui/Input.module.scss b/src/components/ui/Input.module.scss
index 0e67dc7..0caf858 100644
--- a/src/components/ui/Input.module.scss
+++ b/src/components/ui/Input.module.scss
@@ -1,5 +1,5 @@
@reference "../../index.scss";
.input_field {
- @apply rounded-[23px] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+ @apply rounded-[4xl] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
}
diff --git a/src/pages/login.module.scss b/src/pages/login.module.scss
index dd7263c..1951be2 100644
--- a/src/pages/login.module.scss
+++ b/src/pages/login.module.scss
@@ -5,7 +5,7 @@
}
.login_card {
- @apply flex min-h-[50vh] w-[95%] min-w-[300px] flex-col justify-around gap-2 rounded-[103px] bg-[linear-gradient(180.00deg,_rgba(239,251,194,0.53),rgb(206,232,251)_100%)] p-7 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:w-[350px];
+ @apply flex min-h-[50vh] w-[95%] min-w-[300px] flex-col justify-around gap-2 rounded-[7rem] bg-[linear-gradient(180.00deg,_rgba(239,251,194,0.53),rgb(206,232,251)_100%)] p-7 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:w-[350px];
}
.login_card_name {
diff --git a/src/pages/profile_settings.module.scss b/src/pages/profile_settings.module.scss
index a081e0d..ddabb3a 100644
--- a/src/pages/profile_settings.module.scss
+++ b/src/pages/profile_settings.module.scss
@@ -1,11 +1,11 @@
@reference "../index.scss";
.container {
- @apply flex h-full w-full flex-col items-center px-6 pt-3 md:flex-row md:items-start;
+ @apply flex h-full w-full flex-col items-center px-6 pt-8 md:items-start;
}
#avatar {
- @apply flex aspect-square h-40 flex-col items-center justify-center rounded-md border;
+ @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
}
.profile_container {
@@ -17,7 +17,7 @@
}
.header_block__name {
- @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
+ @apply flex h-fit w-full flex-1 flex-col items-center justify-start gap-3 px-10;
}
.settings_block {
@apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;
diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx
index 32294fb..d8534ef 100644
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
import { withTitle } from "@/constructors/Component";
import { UrlsTitle } from "@/enums/urls";
import { useAppContext } from "@/providers/AuthProvider";
+import { cn } from "@/utils/class-merge";
import { FunctionComponent } from "preact";
import { useLocation } from "preact-iso";
import classes from "./profile_settings.module.scss";
@@ -9,15 +10,27 @@ import classes from "./profile_settings.module.scss";
const ProfileSettings: FunctionComponent = () => {
const { isLoggedIn } = useAppContext();
const { route } = useLocation();
+ const status = 12;
+ const maxStatus = 100;
return (