BLUR-24 Button, prost. do uploadu zdjęć,stylistyka

2023-11-17 20:25:22 +01:00 · 2023-11-17 20:25:22 +01:00 · 4eef3fd593
commit 4eef3fd593
parent 01fde35844
11 changed files with 133 additions and 71 deletions
--- a/.web/package-lock.json
+++ b/.web/package-lock.json
@ -20,6 +20,7 @@
        "next-themes": "0.2.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
        "socket.io-client": "4.6.1",
        "tailwindcss": "^3.3.2",
        "universal-cookie": "4.0.4"
@ -1764,6 +1765,14 @@
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.14",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@ -2215,6 +2224,17 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -3096,6 +3116,22 @@
        "react": "^18.2.0"
      }
    },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
    "node_modules/react-fast-compare": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
--- a/.web/package.json
+++ b/.web/package.json
@ -21,6 +21,7 @@
    "next-themes": "0.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
    "socket.io-client": "4.6.1",
    "tailwindcss": "^3.3.2",
    "universal-cookie": "4.0.4"
--- a/.web/pages/404.js
+++ b/.web/pages/404.js
@ -5,8 +5,8 @@ import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from
 import "focus-visible/dist/focus-visible"
 import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
-import Error from "next/error"
 import { useClientSideRouting } from "/utils/client_side_routing"
+import Error from "next/error"
 import NextHead from "next/head"


--- a/.web/pages/dashboard.js
+++ b/.web/pages/dashboard.js
@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Code, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
 import { HamburgerIcon } from "@chakra-ui/icons"
@ -66,28 +66,28 @@ export default function Component() {
 </Fragment>
  <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
  <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
  <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
  <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
  <Spacer/>
 </HStack>
  <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Strona główna`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Dashboard`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Settings`}
 </Text>
@ -101,10 +101,16 @@ export default function Component() {
  <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
  <VStack>
  <Heading sx={{"fontSize": "3em"}}>
-  {`BlurMe`}
+  {`Dashboard`}
 </Heading>
  <Text>
-  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
+  {`Welcome to Reflex!`}
+</Text>
+  <Text>
+  {`You can edit this page in `}
+  <Code>
+  {`{your_app}/pages/dashboard.py`}
+</Code>
 </Text>
 </VStack>
 </Box>
@ -115,28 +121,28 @@ export default function Component() {
  <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
  <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
  {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
  {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
  {`Settings`}
 </Link>
 </MenuItem>
  <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
  {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
  {`Contact`}
 </Link>
--- a/.web/pages/index.js
+++ b/.web/pages/index.js
@ -66,28 +66,28 @@ export default function Component() {
 </Fragment>
  <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
  <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
  <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
  <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
  <Spacer/>
 </HStack>
  <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Strona główna`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Dashboard`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Settings`}
 </Text>
@ -104,22 +104,23 @@ export default function Component() {
  {`Witaj w BlurMe!`}
 </Heading>
  <Wrap>
-  <WrapItem sx={{"flex-direction": "column", "w": "45%"}}>
-  <Text sx={{"fontSize": "1.2em"}}>
+  <WrapItem sx={{"flex-direction": "row", "margin-left": "20px"}}>
+  <Text sx={{"margin-left": "15px", "fontSize": "1.2em", "w": "45%"}}>
  {`Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!`}
 </Text>
-</WrapItem>
-  <WrapItem>
  <Text>
  {`Tu będzie obrazek`}
 </Text>
 </WrapItem>
 </Wrap>
-  <Link as={NextLink} href={`settings`} sx={{"color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
+  <Link as={NextLink} href={`settings`} sx={{"margin-top": "20px", "align": "center", "color": "rgb(107,99,246)", "button": true, "padding": "50xp", "fontSize": "1.2em"}}>
  <Button>
  {`Zacznij anonimizować`}
 </Button>
 </Link>
+  <Text sx={{"height": "100px"}}>
+  {` `}
+</Text>
  <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "10px", "marginBottom": "10px"}}>
  {`Dlaczego Blurme?`}
 </Text>
@ -132,7 +133,7 @@ export default function Component() {
 </ListItem>
  <ListItem>
  <Text as={`b`}>
-  {`Prosta obsługa: `}
+  {`Prost obsługa: `}
 </Text>
  {`Intuicyjny interfejs użytkownika sprawia, że korzystanie z Blurme jest łatwe dla każdego.`}
 </ListItem>
@ -173,7 +174,7 @@ export default function Component() {
 </ListItem>
 </OrderedList>
  <Text sx={{"fontSize": "1.5em", "fontWeight": "bold", "marginTop": "20px", "marginBottom": "10px"}}>
-  {`Do Czego Może Ci Się Przydać?`}
+  {`Do Czego?`}
 </Text>
  <List>
  <ListItem sx={{"textAlign": "left"}}>
@ -207,28 +208,28 @@ export default function Component() {
  <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
  <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
  {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
  {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
  {`Settings`}
 </Link>
 </MenuItem>
  <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
  {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
  {`Contact`}
 </Link>
--- a/.web/pages/settings.js
+++ b/.web/pages/settings.js
@ -1,11 +1,12 @@
 import { Fragment, useContext, useEffect, useRef, useState } from "react"
 import { useRouter } from "next/router"
-import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
+import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, set_val, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state"
 import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js"
 import "focus-visible/dist/focus-visible"
-import { Box, Heading, HStack, Image, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
+import { Box, Heading, HStack, Image, Input, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Spacer, Text, VStack } from "@chakra-ui/react"
 import { getEventURL } from "/utils/state.js"
 import NextLink from "next/link"
+import ReactDropzone from "react-dropzone"
 import { HamburgerIcon } from "@chakra-ui/icons"
 import NextHead from "next/head"

@ -36,6 +37,7 @@ export default function Component() {
    }
  }, [router])

+  const [files, setFiles] = useState([]);

  return (
    <Fragment>
@ -66,28 +68,28 @@ export default function Component() {
 </Fragment>
  <HStack alignItems={`flex-start`} sx={{"transition": "left 0.5s, width 0.5s", "position": "relative"}}>
  <Box sx={{"display": ["none", "none", "block"], "minWidth": "20em", "height": "100%", "position": "sticky", "top": "0px", "borderRight": "1px solid #F4F3F6"}}>
-  <VStack sx={{"height": "100%"}}>
+  <VStack sx={{"height": "100dvh"}}>
  <HStack sx={{"width": "100%", "borderBottom": "1px solid #F4F3F6", "padding": "1em"}}>
  <Image src={`/icon.png`} sx={{"height": "4.5em"}}/>
  <Spacer/>
 </HStack>
  <VStack alignItems={`flex-start`} sx={{"width": "100%", "overflowY": "auto", "padding": "1em"}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/strona g\\u0142\\u00f3wna") || (((state.router.page.path === "/") && "Strona g\\u0142\\u00f3wna") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Strona główna`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/dashboard") || (((state.router.page.path === "/") && "Dashboard") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Dashboard`}
 </Text>
 </HStack>
 </Link>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
-  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#d9a2ca` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Strona g\\u0142\\u00f3wna")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
+  <HStack sx={{"bg": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#fcd2e7` : `transparent`, "color": isTrue((state.router.page.path === "/settings") || (((state.router.page.path === "/") && "Settings") === "Home")) ? `#1A1060` : `black`, "borderRadius": "0.375rem", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "width": "100%", "paddingX": "1em", "height": "2em"}}>
  <Text>
  {`Settings`}
 </Text>
@ -100,12 +102,22 @@ export default function Component() {
  <Box sx={{"paddingTop": "5em", "paddingX": ["auto", "2em"], "flex": "1"}}>
  <Box sx={{"alignItems": "flex-start", "boxShadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)", "borderRadius": "0.375rem", "padding": "1em", "marginBottom": "2em"}}>
  <VStack>
-  <Heading sx={{"fontSize": "3em"}}>
+  <Heading sx={{"fontSize": "3em", "marginBottom": "25px", "backgroundImage": "linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", "backgroundClip": "text", "padding": "10px"}}>
  {`BlurMe`}
 </Heading>
-  <Text>
-  {`Dodaj zdjęcia, które chcesz zanonimizować!`}
+  <Text sx={{"fontSize": "1.2em"}}>
+  {`Dodaj zdjęcie, które chcesz zanonimizować`}
 </Text>
+  <ReactDropzone multiple={true} onDrop={e => setFiles((files) => e)}>
+  {({ getRootProps, getInputProps }) => (
+    <Box sx={{"border": "1px dotted rgb(107,99,246)", "padding": "5em"}} {...getRootProps()}>
+    <Input type={`file`} {...getInputProps()}/>
+    <Text>
+    {`Drag and drop files here or click to select files`}
+  </Text>
+  </Box>
+  )}
+</ReactDropzone>
 </VStack>
 </Box>
 </Box>
@ -115,28 +127,28 @@ export default function Component() {
  <HamburgerIcon sx={{"size": "4em", "color": "black"}}/>
 </MenuButton>
  <MenuList>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/`} sx={{"width": "100%"}}>
  {`Strona główna`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/dashboard`} sx={{"width": "100%"}}>
  {`Dashboard`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`/settings`} sx={{"width": "100%"}}>
  {`Settings`}
 </Link>
 </MenuItem>
  <MenuDivider/>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`https://github.com/reflex-dev`} sx={{"width": "100%"}}>
  {`About`}
 </Link>
 </MenuItem>
-  <MenuItem sx={{"_hover": {"bg": "#d9a2ca"}}}>
+  <MenuItem sx={{"_hover": {"bg": "#fcd2e7"}}}>
  <Link as={NextLink} href={`mailto:founders@=reflex.dev`} sx={{"width": "100%"}}>
  {`Contact`}
 </Link>
--- a/blurme/components/sidebar.py
+++ b/blurme/components/sidebar.py
@ -7,6 +7,11 @@ import reflex as rx


 def sidebar_header() -> rx.Component:
+    """Sidebar header.
+
+    Returns:
+        The sidebar header component.
+    """
    return rx.hstack(
        # The logo.
        rx.image(
@ -14,6 +19,7 @@ def sidebar_header() -> rx.Component:
            height="4.5em",
        ),
        rx.spacer(),
+        # Link to Reflex GitHub repo.
        width="100%",
        border_bottom=styles.border,
        padding="1em",
@ -55,7 +61,7 @@ def sidebar_item(text: str, url: str) -> rx.Component:
    """
    # Whether the item is active.
    active = (State.router.page.path == f"/{text.lower()}") | (
-        (State.router.page.path == "/") & text == "Strona główna"
+        (State.router.page.path == "/") & text == "Home"
    )

    return rx.link(
@ -117,7 +123,7 @@ def sidebar() -> rx.Component:
            ),
            rx.spacer(),
            #sidebar_footer(),
-            height="100%",
+            height="100dvh",
        ),
        display=["none", "none", "block"],
        min_width=styles.sidebar_width,
--- a/blurme/pages/dashboard.py
+++ b/blurme/pages/dashboard.py
@ -11,7 +11,11 @@ def dashboard() -> rx.Component:
    Returns:
        The UI for the dashboard page.
    """
-    #return rx.vstack(
-    #    rx.heading("BlurMe", font_size="3em"),
-    #    rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
-    #)
+    return rx.vstack(
+        rx.heading("Dashboard", font_size="3em"),
+        rx.text("Welcome to Reflex!"),
+        rx.text(
+            "You can edit this page in ",
+            rx.code("{your_app}/pages/dashboard.py"),
+        ),
+    )
--- a/blurme/pages/index.py
+++ b/blurme/pages/index.py
@ -10,11 +10,15 @@ def index() -> rx.Component:
    return rx.vstack(
        rx.heading("Witaj w BlurMe!", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
       rx.wrap(
-            rx.wrap_item(rx.text("Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!", font_size="1.2em"),
-                         w="45%",style={"flex-direction": "column"}),
-            rx.wrap_item(rx.text("Tu będzie obrazek"),)
-            ),
-    rx.link(rx.button("Zacznij anonimizować"),href= "settings",color="rgb(107,99,246)",button=True, padding = "50xp", font_size="1.2em"),
+            rx.wrap_item(rx.text("Aplikacja do anonimizacji zdjęć: usunięcie wybranych informacji identyfikujących ze zdjęć z wydarzeń i miejsc publicznych nigdy nie było tak proste!", font_size="1.2em", w = "45%", style={"margin-left": "15px"}),
+                         rx.text("Tu będzie obrazek"), style={"flex-direction": "row", "margin-left": "20px"}),),
+       
+        rx.link(
+            rx.button("Zacznij anonimizować"),
+            href="settings",align="center",color="rgb(107,99,246)",button=True,padding="50xp",font_size="1.2em",style={"margin-top": "20px" }),
+       
+
+        rx.text(" ", height = "100px"),
        rx.text("Dlaczego Blurme?", font_size="1.5em", font_weight="bold", margin_top="10px", margin_bottom="10px"),
        rx.list(
            rx.list_item(rx.text("Prywatność: ",as_="b"), "Nasza aplikacja zapewnia pełną ochronę prywatności, eliminując ryzyko identyfikacji osób niezwiązanych z anonimizacją."),
@ -28,7 +32,7 @@ def index() -> rx.Component:
            rx.list_item(rx.text("Anonimizuj Resztę: ",as_="b"), "Naciśnij przycisk, a Blurme automatycznie zastosuje efekt rozmycia do wszystkich obszarów poza zaznaczoną twarzą."),
            rx.list_item(rx.text("Pobierz i Podziel Się: ",as_="b"), "Gotowe! Pobierz anonimizowane zdjęcie i dziel się nim bez obaw o prywatność.")
        ),
-        rx.text("Do Czego Może Ci Się Przydać?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
+        rx.text("Do Czego?", font_size="1.5em", font_weight="bold", margin_top="20px", margin_bottom="10px"),
        rx.list(
            rx.list_item(rx.text("Ochrona Tożsamości: ",as_="b"),"Idealne do usuwania twarzy nieznajomych lub przypadkowych przechodniów z tła.", text_align="left"),
            rx.list_item(rx.text("Zachowanie Prywatności: ",as_="b"),"Przydatne w sytuacjach, gdzie chcesz udostępnić zdjęcia publicznie, ale z zachowaniem prywatności pewnych osób.", text_align="left"),
--- a/blurme/pages/settings.py
+++ b/blurme/pages/settings.py
@ -4,19 +4,11 @@ from blurme.templates import template

 import reflex as rx

-
@template(route="/settings", title="Settings")
 def settings() -> rx.Component:
-    """The settings page.
-
-    Returns:
-        The UI for the settings page.
-    """
    return rx.vstack(
-        rx.heading("BlurMe", font_size="3em"),
-        rx.text("Dodaj zdjęcia, które chcesz zanonimizować!"),
-    )
-    #    rx.text(
-    #        "You can edit this page in ",
-    #        rx.code("{your_app}/pages/settings.py"),
-    #    ),
+        rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
+        rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
+        rx.upload(rx.text("Drag and drop files here or click to select files"),border="1px dotted rgb(107,99,246)", padding="5em"))
+    
+
--- a/blurme/styles.py
+++ b/blurme/styles.py
@ -7,7 +7,7 @@ box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
 border = "1px solid #F4F3F6"
 text_color = "black"
 accent_text_color = "#1A1060"
-accent_color = "#d9a2ca"
+accent_color = "#fcd2e7"
 hover_accent_color = {"_hover": {"color": accent_color}}
 hover_accent_bg = {"_hover": {"bg": accent_color}}
 content_width_vw = "90vw"