From 7bb32db651e8adf6f03dbc34cbf69f299ed3b175 Mon Sep 17 00:00:00 2001 From: Manuel Brandstetter Date: Thu, 18 Jan 2024 13:38:51 +0100 Subject: [PATCH 1/9] Changes --- astro.config.mjs | 5 +- .../icons/icon_how-can-it-be-used_dark.svg | 48 ++--- .../icons/icon_how-can-it-be-used_light.svg | 42 ++-- .../icons/icon_what-is-it-about_dark.svg | 46 ++-- .../icons/icon_what-is-it-about_light.svg | 45 ++-- public/assets/images/Stan.png | Bin 0 -> 2323 bytes .../assets/uniqueness/uniqueness_dark_3.svg | 132 ++++++------ src/components/Link/Link.scss | 10 +- src/components/Navbar/Navbar.astro | 3 + src/components/Navbar/Navbar.scss | 7 + src/components/UserMenu.astro | 196 ++++++++++++++++++ src/components/UserMenu/UserMenu.scss | 115 ++++++++++ src/components/UserMenu/UserMenu.tsx | 87 ++++++++ src/icons/Plus.tsx | 4 +- src/icons/icon/icon-32-Logout.svg | 6 + src/layouts/Layout.astro | 2 - src/layouts/LegalLayout.astro | 22 +- src/views/Choices/Choices.scss | 1 + 18 files changed, 563 insertions(+), 208 deletions(-) create mode 100644 public/assets/images/Stan.png create mode 100644 src/components/UserMenu.astro create mode 100644 src/components/UserMenu/UserMenu.scss create mode 100644 src/components/UserMenu/UserMenu.tsx create mode 100644 src/icons/icon/icon-32-Logout.svg diff --git a/astro.config.mjs b/astro.config.mjs index ed5642d..6708e95 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -4,5 +4,8 @@ import react from "@astrojs/react"; // https://astro.build/config export default defineConfig({ site: 'https://scrumlr.io', - integrations: [react()] + integrations: [react()], + devToolbar: { + enabled: false, + }, }); diff --git a/public/assets/icons/icon_how-can-it-be-used_dark.svg b/public/assets/icons/icon_how-can-it-be-used_dark.svg index 49858ca..19c9d1e 100644 --- a/public/assets/icons/icon_how-can-it-be-used_dark.svg +++ b/public/assets/icons/icon_how-can-it-be-used_dark.svg @@ -1,26 +1,24 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/icon_how-can-it-be-used_light.svg b/public/assets/icons/icon_how-can-it-be-used_light.svg index 6bc69bd..711c2ad 100644 --- a/public/assets/icons/icon_how-can-it-be-used_light.svg +++ b/public/assets/icons/icon_how-can-it-be-used_light.svg @@ -1,29 +1,15 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/public/assets/icons/icon_what-is-it-about_dark.svg b/public/assets/icons/icon_what-is-it-about_dark.svg index fb0c842..3c98604 100644 --- a/public/assets/icons/icon_what-is-it-about_dark.svg +++ b/public/assets/icons/icon_what-is-it-about_dark.svg @@ -1,29 +1,19 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/icon_what-is-it-about_light.svg b/public/assets/icons/icon_what-is-it-about_light.svg index 4e173ba..5d86320 100644 --- a/public/assets/icons/icon_what-is-it-about_light.svg +++ b/public/assets/icons/icon_what-is-it-about_light.svg @@ -1,32 +1,15 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/public/assets/images/Stan.png b/public/assets/images/Stan.png new file mode 100644 index 0000000000000000000000000000000000000000..df6e70833aed825a9ce254c180401bbef7fb4af7 GIT binary patch literal 2323 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 literal 0 HcmV?d00001 diff --git a/public/assets/uniqueness/uniqueness_dark_3.svg b/public/assets/uniqueness/uniqueness_dark_3.svg index 1e1af9b..6541547 100644 --- a/public/assets/uniqueness/uniqueness_dark_3.svg +++ b/public/assets/uniqueness/uniqueness_dark_3.svg @@ -1,95 +1,81 @@ - - - - - - - - - - + + + + + + + + + - - + + - - + + + + + + - - - - - - + + + - - - - - + + + + + + - - - - - + - - - - - - + + + + + - + - - - - - - + + + + + - + - - - - - - + + + + + - + - - - - - - + + + + + - - - - - - - - - - - - - + + + - - - + + + + + + diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss index 91bb411..f22759c 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -9,8 +9,8 @@ color: var(--white); font-size: 1rem; font-family: Raleway, sans-serif; - font-weight: 500; - box-shadow: 0 3px 12px 0 rgba(255, 0, 105, 0.3); + font-weight: 600; + box-shadow: 0 3px 6px 0 rgba(255, 0, 105, 0.3); background: var(--lightmode-pink); cursor: pointer; text-decoration: none; @@ -59,12 +59,6 @@ } } -@media (min-width: 768px) { - .link { - font-size: 1.125rem; - } -} - @media (prefers-color-scheme: dark) { .link { background: var(--darkmode-pink); diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro index f4f8288..b373516 100644 --- a/src/components/Navbar/Navbar.astro +++ b/src/components/Navbar/Navbar.astro @@ -3,6 +3,8 @@ import { Logo } from "../Logo"; import { Plus } from "../../icons/Plus"; import { Link } from "../Link/Link"; import getTranslatedContent from "@utils/directus"; +//import UserMenu from "@components/UserMenu.astro"; +import UserMenu from "@components/UserMenu/UserMenu"; import "./Navbar.scss"; const {lang} = Astro.params; @@ -26,6 +28,7 @@ const content = await getTranslatedContent("Header", lang!); {content.aboutUs}
  • + ul > li:last-of-type { + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +} + @media (min-width: 768px) { .navbar > ul { diff --git a/src/components/UserMenu.astro b/src/components/UserMenu.astro new file mode 100644 index 0000000..afb4900 --- /dev/null +++ b/src/components/UserMenu.astro @@ -0,0 +1,196 @@ +--- +--- + +
    + +
    + +
    +
    + + + + diff --git a/src/components/UserMenu/UserMenu.scss b/src/components/UserMenu/UserMenu.scss new file mode 100644 index 0000000..3fdc074 --- /dev/null +++ b/src/components/UserMenu/UserMenu.scss @@ -0,0 +1,115 @@ + .user-menu { + position: relative; + } + + .user-menu__avatar { + height: 46px; + width: 46px; + border-radius: 999px; + padding: 0; + border: none; + cursor: pointer; + } + + .user-menu__dropdown::before { + background-color: #fff; + position: absolute; + content: ""; + width: 56px; + height: 64px; + top: 0; + transform: translateY(-100%); + left: 0; + border-top-right-radius: 28px; + border-top-left-radius: 28px; + } + + .user-menu__dropdown { + background-color: #fff; + display: none; + position: absolute; + left: -5px; + top: 59px; + border-radius: 16px; + border-top-left-radius: 0; + box-shadow: 0px 3px 12px rgba(36, 44, 61, 0.1); + z-index: -1; + + &--active { + display: block; + } + } + + .user-menu__dropdown ul { + list-style: none; + padding: 0; + margin: 0; + } + + .user-menu__dropdown li { + box-sizing: border-box; + width: 210px; + height: auto; + } + + .user-menu__dropdown li:not(:last-child) { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + + .user-menu__dropdown li:first-of-type a, + .user-menu__dropdown li:first-of-type button { + border-top-right-radius: 16px; + } + + .user-menu__dropdown li:last-of-type a, + .user-menu__dropdown li:last-of-type button { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + } + + .user-menu__dropdown a, + .user-menu__dropdown button { + box-sizing: border-box; + display: flex; + align-items: center; + gap: 16px; + height: 100%; + width: 100%; + text-decoration: none; + padding: 12px 24px 12px 20px; + border: none; + cursor: pointer; + background-color: transparent; + color: #242C3D; + + &:hover { + background-color: #F6F5FB; + } + } + + .user-menu__dropdown a svg, + .user-menu__dropdown button svg { + height: 32px; + width: 32px; + } + + .user-menu__dropdown a span, + .user-menu__dropdown button span { + font-weight: bold; + font-size: 16px; + } + + @media (prefers-color-scheme: dark) { + .user-menu__dropdown::before, + .user-menu__dropdown { + background-color: #5A647D; + } + .user-menu__dropdown a, + .user-menu__dropdown button { + color: var(--white); + &:hover { + background-color: #626D88; + } + } + } + diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx new file mode 100644 index 0000000..aa7594d --- /dev/null +++ b/src/components/UserMenu/UserMenu.tsx @@ -0,0 +1,87 @@ +import {useState, useEffect} from "react"; +import classNames from "classnames"; +import "./UserMenu.scss"; + +const UserMenu = () => { + + const serverUrl = "http://localhost:8080"; + + const [isActive, setIsActive] = useState(false); + const [isAuthenticated, setIsAuthenticated] = useState(false); + + useEffect(() => { + fetch(`${serverUrl}/user`, { + method: "GET", + credentials: "include", + }).then((response) => { + if (response.status === 200) { + setIsAuthenticated(true); + } + }); + }, []); + + const handleLogout = () => { + fetch(`${serverUrl}/login`, { + method: "DELETE", + credentials: "include", + }).then(() => { + document.location.reload(); + }); + } + + return ( +
    + +
    + +
    +
    + ); +} + +export default UserMenu; diff --git a/src/icons/Plus.tsx b/src/icons/Plus.tsx index 0a07849..528a919 100644 --- a/src/icons/Plus.tsx +++ b/src/icons/Plus.tsx @@ -1,6 +1,6 @@ export const Plus = () => ( - - + + ); diff --git a/src/icons/icon/icon-32-Logout.svg b/src/icons/icon/icon-32-Logout.svg new file mode 100644 index 0000000..558c981 --- /dev/null +++ b/src/icons/icon/icon-32-Logout.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f679a6b..831b04c 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,7 +1,6 @@ --- import Navbar from "../components/Navbar/Navbar.astro"; import Footer from "../components/Footer/Footer.astro"; -import { ViewTransitions } from "astro:transitions"; export interface Props { title: string; @@ -33,7 +32,6 @@ const { title } = Astro.props; - diff --git a/src/layouts/LegalLayout.scss b/src/layouts/LegalLayout.scss new file mode 100644 index 0000000..b1f7b6b --- /dev/null +++ b/src/layouts/LegalLayout.scss @@ -0,0 +1,164 @@ + .legal { + display: flex; + flex-direction: row; + padding: 128px 8vw; + position: relative; + background: linear-gradient(90deg, #fff 0%, rgba(107, 156, 255, 0.03) 100%); + gap: 8vw; + justify-content: center; + } + + aside { + display: flex; + flex-direction: column; + gap: 64px; + color: #333948; + flex-shrink: 0; + position: sticky; + top: 192px; + align-self: start; + + nav { + display: flex; + flex-direction: column; + gap: 32px; + + a { + text-decoration: none; + font-size: 24px; + line-height: 28px; + font-weight: 500; + transition: all 0.1s ease-in-out; + color: #333948; + + &:link, + &:visited { + color: #333948; + text-decoration: none; + } + + &:hover, + &.active { + color: var(--lightmode-pink); + text-decoration: none; + } + } + } + + address { + font-style: normal; + } + + p { + font-size: 20px; + line-height: 28px; + font-weight: 400; + + a { + text-decoration: none; + color: var(--lightmode-pink); + + &:hover { + text-decoration: underline; + filter: brightness(1.2); + } + } + } + } + + section { + max-width: 1440px; + text-wrap: balance; + } + + .legal_bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 307deg, + rgba(0, 87, 255, 0.37) 1.31%, + #d1e0ff 40.42%, + #fff2f7 71.15%, + #ffe0ed 106.18% + ); + z-index: -1; + opacity: 0.2; + } + + @media screen and (max-width: 948px) { + .legal { + flex-direction: column-reverse; + + aside { + position: unset; + top: 32px; + flex-direction: row; + flex-wrap: wrap; + gap: 32px; + + > nav { + gap: 16px; + position: absolute; + top: 128px; + } + + > address { + margin-top: 32px; + } + + > address > p:first-child, + > p { + margin-top: 0; + } + + > address > p:first-child { + font-weight: 700; + font-size: 20px; + } + + * { + font-size: 16px; + line-height: 24px; + } + } + + section { + margin-top: 128px; + } + } + } + + @media screen and (prefers-color-scheme: dark) { + .legal { + background: #242c3d; + } + + aside { + color: #d4d9dd; + + nav a { + color: #d4d9dd; + + &:link, + &:visited { + color: #d4d9dd; + } + + &:hover, + &.active { + color: var(--darkmode-pink); + } + } + + p a { + color: var(--darkmode-pink); + } + } + + .legal_bg { + display: none; + } + } diff --git a/src/views/Hero/Hero.astro b/src/views/Hero/Hero.astro index 109775e..449c98b 100644 --- a/src/views/Hero/Hero.astro +++ b/src/views/Hero/Hero.astro @@ -25,12 +25,12 @@ const content = await getTranslatedContent("Hero_Section", lang!); {content.imageAlt1} {content.imageAlt1} From d5805b642e517b17563f79d78bf094f74a8a6477 Mon Sep 17 00:00:00 2001 From: Manuel Brandstetter Date: Tue, 23 Jan 2024 17:18:47 +0100 Subject: [PATCH 9/9] Remove url and have only paths --- src/components/Navbar/Navbar.astro | 3 +-- src/components/UserMenu/UserMenu.tsx | 2 +- src/views/AboutUs/AboutUs.astro | 2 +- src/views/Features/Features.astro | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro index 3eefb6c..83c0c90 100644 --- a/src/components/Navbar/Navbar.astro +++ b/src/components/Navbar/Navbar.astro @@ -3,7 +3,6 @@ import { Logo } from "../Logo"; import { Plus } from "../../icons/Plus"; import { Link } from "../Link/Link"; import getTranslatedContent from "@utils/directus"; -//import UserMenu from "@components/UserMenu.astro"; import UserMenu from "@components/UserMenu/UserMenu"; import "./Navbar.scss"; @@ -36,7 +35,7 @@ const userMenuLabels = {
  • {content.createBoard} diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx index dfbb3ea..8705108 100644 --- a/src/components/UserMenu/UserMenu.tsx +++ b/src/components/UserMenu/UserMenu.tsx @@ -90,7 +90,7 @@ const UserMenu = ({germanLabel, englishLabel, logoutLabel}: UserMenuProps) => { {logoutLabel}
    • ) : ( - + diff --git a/src/views/AboutUs/AboutUs.astro b/src/views/AboutUs/AboutUs.astro index 46a6988..21b1305 100644 --- a/src/views/AboutUs/AboutUs.astro +++ b/src/views/AboutUs/AboutUs.astro @@ -39,7 +39,7 @@ const content = await getTranslatedContent("AboutUs_Section", lang!);

    {content.getStartedHeader}

    {content.getStartedText}

    diff --git a/src/views/Features/Features.astro b/src/views/Features/Features.astro index 30cc1e2..05cc7cc 100644 --- a/src/views/Features/Features.astro +++ b/src/views/Features/Features.astro @@ -44,7 +44,7 @@ const content = await getTranslatedContent("Features_Section", lang!);

    {content.details3}

    - {content.cta} + {content.cta}