From 829025a1acef98ecfeb989d79462148d595c5752 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 23 Apr 2024 15:37:41 +0200 Subject: [PATCH] refactoring and updating logos --- src/assets/css/App.scss | 6 ++- src/assets/css/components/ui/AppLogo.scss | 11 ------ .../css/components/ui/AppLogoMarkup.scss | 16 ++++++++ .../Logo.scss => ui/AppLogoVector.scss} | 2 +- .../css/components/ui/BrandingLogo.scss | 15 +++++++ src/assets/img/logos/app_logo_beta.svg | 35 +++++++++++++++++ .../logos/stay-safe-beta-logo-horizontal.svg | 39 +++++++++++++++++++ .../ui/{AppLogo.jsx => AppLogoMarkup.jsx} | 1 + src/components/ui/AppLogoVector.jsx | 12 ++++++ src/components/ui/Footer.jsx | 3 +- src/components/ui/LhoistBrandingLogo.jsx | 10 +++++ src/components/ui/Logo.jsx | 11 ------ src/components/ui/Nav.jsx | 4 +- src/pages/Game.jsx | 4 +- src/pages/Home.jsx | 7 +++- src/pages/Welcome.jsx | 5 ++- 16 files changed, 147 insertions(+), 34 deletions(-) delete mode 100644 src/assets/css/components/ui/AppLogo.scss create mode 100644 src/assets/css/components/ui/AppLogoMarkup.scss rename src/assets/css/components/{layout/Logo.scss => ui/AppLogoVector.scss} (91%) create mode 100644 src/assets/css/components/ui/BrandingLogo.scss create mode 100644 src/assets/img/logos/app_logo_beta.svg create mode 100644 src/assets/img/logos/stay-safe-beta-logo-horizontal.svg rename src/components/ui/{AppLogo.jsx => AppLogoMarkup.jsx} (79%) create mode 100644 src/components/ui/AppLogoVector.jsx create mode 100644 src/components/ui/LhoistBrandingLogo.jsx delete mode 100644 src/components/ui/Logo.jsx diff --git a/src/assets/css/App.scss b/src/assets/css/App.scss index f6aeb44..bd37dd8 100644 --- a/src/assets/css/App.scss +++ b/src/assets/css/App.scss @@ -13,18 +13,20 @@ @import "./components/game/Tutorials.scss"; @import "./components/layout/Nav.scss"; -@import "./components/layout/Logo.scss"; @import "./components/layout/Page-container.scss"; @import "./components/layout/EditorInnerContent.scss"; @import "./components/layout/InnerContent.scss"; @import "./components/layout/Footer.scss"; +@import "./components/ui/AppLogoMarkup.scss"; +@import "./components/ui/AppLogoVector.scss"; +// @import "./components/ui/AppLogo.scss"; +@import "./components/ui/BrandingLogo.scss"; @import "./components/ui/CountrySelect.scss"; @import "./components/ui/LanguageSelect.scss"; @import "./components/ui/DropdownSelect.scss"; @import "./components/ui/Modal.scss"; @import "./components/ui/Cta.scss"; -@import "./components/ui/AppLogo.scss"; @import "./components/ui/Loading.scss"; @import "./components/ui/Marquee.scss"; diff --git a/src/assets/css/components/ui/AppLogo.scss b/src/assets/css/components/ui/AppLogo.scss deleted file mode 100644 index 900ef00..0000000 --- a/src/assets/css/components/ui/AppLogo.scss +++ /dev/null @@ -1,11 +0,0 @@ -.application-logo { - @apply text-zuume text-center; - animation-play-state: bg-red-500; - &__title { - @apply text-9xl; - } - &__subtitle { - @apply text-6xl bg-construction w-fit mx-auto px-3 block mb-10; - transform: rotate(-3deg); - } -} diff --git a/src/assets/css/components/ui/AppLogoMarkup.scss b/src/assets/css/components/ui/AppLogoMarkup.scss new file mode 100644 index 0000000..2950aa3 --- /dev/null +++ b/src/assets/css/components/ui/AppLogoMarkup.scss @@ -0,0 +1,16 @@ +.application-logo { + @apply text-zuume text-center; + animation-play-state: bg-red-500; + &__title { + @apply text-9xl mb-2; + } + &__subtitle { + @apply text-6xl bg-construction w-fit mx-auto px-4 py-3 mb-10 inline-block; + transform: rotate(-3deg); + } + &__draft { + @apply bg-lhoistdark text-5xl text-white px-2 py-4 inline-block relative; + @apply ml-6; + transform: rotate(3deg) translateY(-10px); + } +} diff --git a/src/assets/css/components/layout/Logo.scss b/src/assets/css/components/ui/AppLogoVector.scss similarity index 91% rename from src/assets/css/components/layout/Logo.scss rename to src/assets/css/components/ui/AppLogoVector.scss index 902306f..54e5228 100644 --- a/src/assets/css/components/layout/Logo.scss +++ b/src/assets/css/components/ui/AppLogoVector.scss @@ -1,4 +1,4 @@ -.logo { +.app-Logo-vector { @apply absolute top-0 left-0 z-10 bg-no-repeat w-auto h-auto; background-size: 100% 100%; background-position: left; diff --git a/src/assets/css/components/ui/BrandingLogo.scss b/src/assets/css/components/ui/BrandingLogo.scss new file mode 100644 index 0000000..05ddb1e --- /dev/null +++ b/src/assets/css/components/ui/BrandingLogo.scss @@ -0,0 +1,15 @@ +.lhoist-branding-logo { + @apply absolute bottom-4 left-4 z-10 bg-no-repeat w-auto h-auto; + + translate: -2px -3px; + + img { + @apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-6 md:py-6 md:pb-4 xl:px-10 z-10; + } + &:after { + @apply absolute block top-0 left-0 w-full h-full bg-white; + content: ""; + transform: skew(-2deg) rotate(-2deg); + z-index: -1; + } +} diff --git a/src/assets/img/logos/app_logo_beta.svg b/src/assets/img/logos/app_logo_beta.svg new file mode 100644 index 0000000..113af70 --- /dev/null +++ b/src/assets/img/logos/app_logo_beta.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/logos/stay-safe-beta-logo-horizontal.svg b/src/assets/img/logos/stay-safe-beta-logo-horizontal.svg new file mode 100644 index 0000000..be75b7f --- /dev/null +++ b/src/assets/img/logos/stay-safe-beta-logo-horizontal.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ui/AppLogo.jsx b/src/components/ui/AppLogoMarkup.jsx similarity index 79% rename from src/components/ui/AppLogo.jsx rename to src/components/ui/AppLogoMarkup.jsx index a7f1f5a..7d2fd1e 100644 --- a/src/components/ui/AppLogo.jsx +++ b/src/components/ui/AppLogoMarkup.jsx @@ -5,6 +5,7 @@ export default function AppLogo() {

stay safe

interactive

+

draft

); } diff --git a/src/components/ui/AppLogoVector.jsx b/src/components/ui/AppLogoVector.jsx new file mode 100644 index 0000000..7237fdc --- /dev/null +++ b/src/components/ui/AppLogoVector.jsx @@ -0,0 +1,12 @@ +import React from "react"; +// import appLogo from "../../assets/img/logos/app_logo.svg"; +import appLogo from "../../assets/img/logos/app_logo_beta.svg"; +import { Link } from "react-router-dom"; + +export default function Logo() { + return ( + + + + ); +} diff --git a/src/components/ui/Footer.jsx b/src/components/ui/Footer.jsx index b3505c7..b032bf9 100644 --- a/src/components/ui/Footer.jsx +++ b/src/components/ui/Footer.jsx @@ -1,6 +1,7 @@ import React from "react"; import coverWorker from "../../assets/img/illustrations/cover_worker.svg"; -import staySafeLogoHorizontal from "../../assets/img/logos/stay-safe-logo-horizontal.svg"; +// import staySafeLogoHorizontal from "../../assets/img/logos/stay-safe-logo-horizontal.svg"; +import staySafeLogoHorizontal from "../../assets/img/logos/stay-safe-beta-logo-horizontal.svg"; import logoLhoist from "../../assets/img/logos/logo-lhoist.svg"; import { Link } from "react-router-dom"; diff --git a/src/components/ui/LhoistBrandingLogo.jsx b/src/components/ui/LhoistBrandingLogo.jsx new file mode 100644 index 0000000..b2b31cf --- /dev/null +++ b/src/components/ui/LhoistBrandingLogo.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import LogoLhoist from "../../assets/img/logos/logo-lhoist.svg"; + +export default function AppLogo() { + return ( +
+ +
+ ); +} diff --git a/src/components/ui/Logo.jsx b/src/components/ui/Logo.jsx deleted file mode 100644 index 27a2ffc..0000000 --- a/src/components/ui/Logo.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import appLogo from "../../assets/img/logos/app_logo.svg"; -import { Link } from "react-router-dom"; - -export default function Logo() { - return ( - - - - ); -} diff --git a/src/components/ui/Nav.jsx b/src/components/ui/Nav.jsx index 52bff61..1ec399c 100644 --- a/src/components/ui/Nav.jsx +++ b/src/components/ui/Nav.jsx @@ -5,7 +5,7 @@ import LanguageSelect from "./LanguageSelect"; import menuToggleIcon from "../../assets/img/icons/icon-bars-menu-toggle.svg"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; -import Logo from "./Logo.jsx"; +import Logo from "./AppLogoVector.jsx"; export default function Nav() { let location = useLocation(); @@ -43,7 +43,7 @@ export default function Nav() { return (