From 8aae514caf7a9307107e50292a327ead4db6a20d Mon Sep 17 00:00:00 2001 From: Spoilsport Date: Thu, 30 May 2024 23:17:18 +0300 Subject: [PATCH 1/2] change font size and font family --- .../modals/Lightbox/Lightbox.component.tsx | 103 ++++++++++-------- .../Lightbox/LightboxComponent.styles.scss | 46 ++++---- 2 files changed, 82 insertions(+), 67 deletions(-) diff --git a/src/app/common/components/modals/Lightbox/Lightbox.component.tsx b/src/app/common/components/modals/Lightbox/Lightbox.component.tsx index 20935a5f3..68d7a88d8 100644 --- a/src/app/common/components/modals/Lightbox/Lightbox.component.tsx +++ b/src/app/common/components/modals/Lightbox/Lightbox.component.tsx @@ -1,63 +1,70 @@ import './LightboxComponent.styles.scss'; - import { observer } from 'mobx-react-lite'; import { useMemo, useState } from 'react'; import { useIdleTimer } from 'react-idle-timer'; import useMobx, { useModalContext } from '@stores/root-store'; import Lightbox from 'yet-another-react-lightbox'; import Captions from 'yet-another-react-lightbox/plugins/captions'; - import base64ToUrl from '@/app/common/utils/base64ToUrl.utility'; - import 'yet-another-react-lightbox/plugins/thumbnails.css'; import 'yet-another-react-lightbox/plugins/captions.css'; import 'yet-another-react-lightbox/styles.css'; +const TitleDescriptionComponent = ({ title, description }: { title: string| undefined, description: string| undefined }) => { + return ( +
+
{title}
+
{description}
+
+ ); +}; + + const LightboxComponent = () => { - const { artStore: { arts, mutationObserved } } = useMobx(); - const { modalStore } = useModalContext(); - const { setModal, modalsState: { artGallery: { isOpen, fromCardId } } } = modalStore; - - const [isCaptionEnabled, setIsCaptionEnabled] = useState(true); - - const slides = useMemo(() => arts.map( - ({ image: { base64, mimeType }, description, title }, index) => { - let src = base64ToUrl(base64, mimeType); - if (!src) { - src = ''; //replace with default src - } - return { - src, - title: `${index + 1}/${arts.length}`, - description: `${title ?? ''}. \n\n${description ?? ''}`, - }; - } - ), [mutationObserved]); - - - const currentArtIndex = useMemo(() => arts.findIndex( - (art) => art.id === fromCardId, - ), [mutationObserved, fromCardId]); - - const onIdleTimerHandlers = useMemo(() => ({ - onIdle: () => setIsCaptionEnabled(false), - onActive: () => setIsCaptionEnabled(true), - }), []); - - useIdleTimer({ - ...onIdleTimerHandlers, - timeout: 3_000, - }); - - return ( - setModal('artGallery')} - index={currentArtIndex} - className={`lightbox ${!isCaptionEnabled ? 'lightboxDisabled' : ''}`} - slides={slides} - plugins={[Captions]} - /> - ); + const { artStore: { arts, mutationObserved } } = useMobx(); + const { modalStore } = useModalContext(); + const { setModal, modalsState: { artGallery: { isOpen, fromCardId } } } = modalStore; + + const [isCaptionEnabled, setIsCaptionEnabled] = useState(true); + + const slides = useMemo(() => + arts.map(({ image: { base64, mimeType }, description, title }, index) => { + let src = base64ToUrl(base64, mimeType); + if (!src) { + src = ''; //replace with default src + } + + return { + src, + title: `${index + 1}/${arts.length}`, + description: + }; + }), [mutationObserved]); + + const currentArtIndex = useMemo(() => arts.findIndex( + (art) => art.id === fromCardId, + ), [mutationObserved, fromCardId]); + + const onIdleTimerHandlers = useMemo(() => ({ + onIdle: () => setIsCaptionEnabled(false), + onActive: () => setIsCaptionEnabled(true), + }), []); + + useIdleTimer({ + ...onIdleTimerHandlers, + timeout: 3_000, + }); + + return ( + setModal('artGallery')} + index={currentArtIndex} + className={`lightbox ${!isCaptionEnabled ? 'lightboxDisabled' : ''}`} + slides={slides} + plugins={[Captions]} + /> + ); }; + export default observer(LightboxComponent); diff --git a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss index 6e9d350ca..926595a3e 100644 --- a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss +++ b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss @@ -3,7 +3,7 @@ @use "@sass/mixins/_utils.mixins.scss" as mut; @use "@sass/mixins/_wrapper.mixins.scss" as wr; @use "@sass/mixins/_vendor.mixins.scss" as vnd; - +@use '@sass/variables/variables.fonts' as ft; @mixin slick-arrow-lightbox($direction) { @include mut.sized(40px, 58px); @include mut.bg-image("@assets/images/utils/#{$direction}DefaultSliderArrow.svg"); @@ -12,7 +12,6 @@ .yarl__icon { @include mut.colored(c.$transparent-color, c.$transparent-color); } - &:hover { filter: c.$hovered-lightbox-arrow-filter-color; } @@ -20,72 +19,81 @@ .lightbox { &Disabled { - .yarl__slide_captions_container, .yarl__toolbar, .yarl__button { + .yarl__slide_captions_container, + .yarl__toolbar, + .yarl__button { @include vnd.vendored(transition, 'all .5s ease'); visibility: hidden; opacity: 0; } } - .yarl__slide_image { max-width: min(100%) !important; max-height: min(100%) !important; height: 100% !important; } - .yarl__slide_title { @include mut.rem-margined($top: 8px, $left: 20px); @include mut.with-font($font-weight: 500); color: #4E4E4E !important; } - .yarl__slide { padding: 0 !important; } - @media screen and (min-width:1025px) { - - .yarl__slide_description { - @include mut.rem-margined($top: 5px, $left: 50px); + .description { + @include mut.rem-margined($top: 15px, $left: 50px); @include mut.with-font($font-weight: 300); @include mut.with-font(); -webkit-line-clamp: inherit !important; } - + .title { + @include mut.rem-margined($top: 5px, $left: 50px); + $font-weight: 300; + font-size: 36px; + font-family: ft.$closer-text-font; + font-style: ft.$closer-text-font; + -webkit-line-clamp: inherit !important; + } .yarl__icon { @include mut.sized(30px, 30px); @include mut.rem-margined($top: 8px, $right: 25px); @include mut.colored(#4E4E4E !important, c.$transparent-color); - &:hover { color: #918f8f !important; } } - .yarl__navigation_prev { @include slick-arrow-lightbox(Left); left: pxToRem(30px) !important; } - .yarl__navigation_next { @include slick-arrow-lightbox(Right); right: pxToRem(30px) !important; } } - @media screen and (max-width:1025px) { .yarl__slide_description_container { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(26.5px); } - - .yarl__slide_description { - @include mut.rem-margined($top: 2px, $left: 10px); + .description { + @include mut.rem-margined($top: 15px, $left: 10px); @include mut.with-font(); font-size: 14px; font-weight: 300; line-height: 16px; -webkit-line-clamp: inherit !important; } + .title { + @include mut.rem-margined($top: 2px, $left: 10px); + font-family: ft.$closer-text-font; + font-style: ft.$closer-text-font; + font-size: 20px; + font-weight: 300; + line-height: 16px; + -webkit-line-clamp: inherit !important; + margin-top: 500px; + } } -} +} \ No newline at end of file From c6ca2bc2b0ca9cf396256c3b6c9efb332a70a6c4 Mon Sep 17 00:00:00 2001 From: Anastasiia <89141775+Spoilsport0@users.noreply.github.com> Date: Thu, 30 May 2024 23:22:12 +0300 Subject: [PATCH 2/2] Update LightboxComponent.styles.scss --- .../components/modals/Lightbox/LightboxComponent.styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss index 926595a3e..7b939f634 100644 --- a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss +++ b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss @@ -96,4 +96,5 @@ margin-top: 500px; } } -} \ No newline at end of file +} +