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 (
-
Аватар
-
+
+
Аватар

Никнейм

Статус

+
+
+
+
+ {status}/{maxStatus} +
- +
+
diff --git a/src/pages/profile_tasks.tsx b/src/pages/profile_tasks.tsx index 3f7683a..7f2bbdd 100644 --- a/src/pages/profile_tasks.tsx +++ b/src/pages/profile_tasks.tsx @@ -18,7 +18,7 @@ const ProfileTasks: FunctionComponent = () => {
Сегодня: {getDate}
{example_tasks.map((task, index) => ( - + ))}