From a14dba2887d07dedaff3ddd0342c0b6cd86d5444 Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Fri, 6 Dec 2024 14:32:39 -0300 Subject: [PATCH 01/11] Tweak title --- .../ProjectAndFolderCards/components/Topbar/index.tsx | 3 +-- .../ContentBuilder/components/Widgets/Projects/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/front/app/components/ProjectAndFolderCards/components/Topbar/index.tsx b/front/app/components/ProjectAndFolderCards/components/Topbar/index.tsx index a42a8fabcc3f..3bf79e67c7d6 100644 --- a/front/app/components/ProjectAndFolderCards/components/Topbar/index.tsx +++ b/front/app/components/ProjectAndFolderCards/components/Topbar/index.tsx @@ -201,9 +201,8 @@ const Header = ({ data-testid="currently-working-on-text" color="tenantText" m="0" - mb={isSmallerThanPhone ? (hasPublications ? '36px' : '20px') : '28px'} + mb={isSmallerThanPhone ? (hasPublications ? '36px' : '20px') : '20px'} ml={isSmallerThanPhone ? '4px' : '0'} - textAlign={isSmallerThanPhone ? 'left' : 'center'} > {currentlyWorkingOn} diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx index 4ed2119db0d5..7bd5f96ade96 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Box, colors, media, Text } from '@citizenlab/cl2-component-library'; +import { Box, media, Text } from '@citizenlab/cl2-component-library'; import { useNode } from '@craftjs/core'; import styled from 'styled-components'; import { Multiloc } from 'typings'; @@ -32,7 +32,7 @@ const Projects = ({ currentlyWorkingOnText?: Multiloc; }) => { return ( - + Date: Mon, 9 Dec 2024 09:18:04 -0300 Subject: [PATCH 02/11] Add grey border --- front/app/components/ProjectCard/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/front/app/components/ProjectCard/index.tsx b/front/app/components/ProjectCard/index.tsx index 7a41a9175433..259a224f48c5 100644 --- a/front/app/components/ProjectCard/index.tsx +++ b/front/app/components/ProjectCard/index.tsx @@ -113,6 +113,10 @@ const Container = styled(Link)<{ hideDescriptionPreview?: boolean }>` width: 100%; min-height: 460px; `} + + &.dynamic { + border: 1px ${colors.grey300} solid; + } `; const ProjectImageContainer = styled.div` From fe841ca66c8f6805cb49f56dda76b521707a0128 Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 10:17:38 -0300 Subject: [PATCH 03/11] Make spacing consistent --- .../ContentBuilder/components/Widgets/Projects/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx index 7bd5f96ade96..cbd259cb2c20 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Projects/index.tsx @@ -12,15 +12,16 @@ import InputMultilocWithLocaleSwitcher from 'components/UI/InputMultilocWithLoca import { FormattedMessage, useIntl } from 'utils/cl-intl'; import Link from 'utils/cl-router/Link'; +import { DEFAULT_Y_PADDING } from '../constants'; + import messages from './messages'; const ProjectSection = styled.div` width: 100%; - padding-top: 40px; - padding-bottom: 40px; + padding-top: ${DEFAULT_Y_PADDING}; + padding-bottom: ${DEFAULT_Y_PADDING}; ${media.tablet` - padding-bottom: 40px; padding-left: ${DEFAULT_PADDING}; padding-right: ${DEFAULT_PADDING}; `} From 9f239f6e94a67594173e4d7fffa7ddaf8b292ddf Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 10:23:40 -0300 Subject: [PATCH 04/11] Remove grey bg events widget --- .../ContentBuilder/components/Widgets/Events/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx index 0cb496875821..24618c4d20ae 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx @@ -1,11 +1,6 @@ import React from 'react'; -import { - Box, - colors, - useBreakpoint, - Text, -} from '@citizenlab/cl2-component-library'; +import { Box, useBreakpoint, Text } from '@citizenlab/cl2-component-library'; import { DEFAULT_PADDING } from 'components/admin/ContentBuilder/constants'; import EventsWidget from 'components/LandingPages/citizen/EventsWidget'; @@ -17,7 +12,7 @@ import messages from './messages'; const Events = () => { const isSmallerThanTablet = useBreakpoint('tablet'); return ( - + Date: Mon, 9 Dec 2024 10:24:32 -0300 Subject: [PATCH 05/11] Standardize spacing events widget --- .../ContentBuilder/components/Widgets/Events/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx index 24618c4d20ae..798b36aabdd1 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx @@ -7,6 +7,8 @@ import EventsWidget from 'components/LandingPages/citizen/EventsWidget'; import { useIntl } from 'utils/cl-intl'; +import { DEFAULT_Y_PADDING } from '../constants'; + import messages from './messages'; const Events = () => { @@ -16,8 +18,8 @@ const Events = () => { From 39771a7dcee9fea923f158d08e39cc11452f197e Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 10:37:19 -0300 Subject: [PATCH 06/11] Remove background CTA --- .../components/Widgets/CallToAction/index.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx index 44ad2108125a..fbf5fc778758 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx @@ -23,6 +23,8 @@ import InputMultilocWithLocaleSwitcher from 'components/UI/InputMultilocWithLoca import { useIntl } from 'utils/cl-intl'; import { removeUrlLocale } from 'utils/removeUrlLocale'; +import { DEFAULT_Y_PADDING } from '../constants'; + import messages from './messages'; const Container = styled.div` @@ -136,12 +138,14 @@ const CallToAction = ({ const isSmallerThanSmallTablet = useBreakpoint('tablet'); return ( - + From 55fce5f85a6ef413fbe7ab2e42d470fc2e30d80a Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 13:29:39 -0300 Subject: [PATCH 07/11] Add bottom margin homepage banner --- .../components/Widgets/HomepageBanner/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx index c10a7ff9d6f6..cfb6e2da0249 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx @@ -129,7 +129,7 @@ const HomepageBanner = ({ homepageSettings, image }: Props) => { search.get('variant') === 'signedIn'; return ( -
+ {showSignedInHeader ? ( { /> )} -
+ ); }; From b12e0e5865483d35bc0e212feeeb3350d1fa10dc Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 13:33:31 -0300 Subject: [PATCH 08/11] Align CTA --- .../components/Widgets/CallToAction/index.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx index fbf5fc778758..b8115b0a2773 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx @@ -5,7 +5,6 @@ import { colors, useBreakpoint, Text, - defaultCardStyle, media, Title, Input, @@ -31,20 +30,14 @@ const Container = styled.div` display: flex; align-items: center; justify-content: space-between; - padding: 60px 40px; position: relative; overflow: hidden; - ${defaultCardStyle}; - - ${media.tablet` - padding: 60px 50px 50px; - `} + padding: ${DEFAULT_PADDING} 0px; ${media.phone` text-align: center; flex-direction: column; align-items: flex-start; - padding: 60px 30px 40px; `} `; @@ -62,7 +55,6 @@ const ButtonContainer = styled.div` ${media.phone` margin-left: 0; width: 100%; - margin-top: 20px; `} `; @@ -154,10 +146,12 @@ const CallToAction = ({ w="100%" maxWidth={isSmallerThanTablet ? undefined : '400px'} > - + <Title variant="h2" color="tenantText" mt="0"> {lоcalize(title)} - {lоcalize(description)} + + {lоcalize(description)} + {((enabled && secondaryButtonText) || From d553da71592b1c5357809a8624363aeb266118f2 Mon Sep 17 00:00:00 2001 From: Luuc van der Zee Date: Mon, 9 Dec 2024 13:35:20 -0300 Subject: [PATCH 09/11] Make carrousel titles proper h2 --- .../Widgets/_shared/AdminPublicationsCarrousel/index.tsx | 3 +-- .../components/Widgets/_shared/ProjectCarrousel/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/_shared/AdminPublicationsCarrousel/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/_shared/AdminPublicationsCarrousel/index.tsx index 5c7a7b22f0f7..9ad4f98c2e91 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/_shared/AdminPublicationsCarrousel/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/_shared/AdminPublicationsCarrousel/index.tsx @@ -109,8 +109,7 @@ const AdminPublicationsCarrousel = ({ <> { <> <CarrouselContainer> <Title - variant="h3" - as="h2" + variant="h2" mt="0px" ml={isSmallerThanPhone ? DEFAULT_PADDING : undefined} color="tenantText" From 3661a39311ee234de9ba421708a504433f6b2f0e Mon Sep 17 00:00:00 2001 From: Luuc van der Zee <luuc_v_d_zee@hotmail.com> Date: Mon, 9 Dec 2024 13:39:44 -0300 Subject: [PATCH 10/11] Make margin homepage banner slightly smaller on mobile --- .../components/Widgets/HomepageBanner/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx index cfb6e2da0249..457282127e33 100644 --- a/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx +++ b/front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/HomepageBanner/index.tsx @@ -9,6 +9,7 @@ import { Label, Input, Text, + useBreakpoint, } from '@citizenlab/cl2-component-library'; import { useNode } from '@craftjs/core'; import { useLocation, useSearchParams } from 'react-router-dom'; @@ -41,6 +42,8 @@ import eventEmitter from 'utils/eventEmitter'; import { convertUrlToUploadFile } from 'utils/fileUtils'; import { isValidUrl } from 'utils/validate'; +import { DEFAULT_Y_PADDING } from '../constants'; + import LayoutSettingField from './LayoutSettingField'; import messages from './messages'; import OverlayControls from './OverlayControls'; @@ -122,6 +125,7 @@ const HomepageBanner = ({ homepageSettings, image }: Props) => { const { data: authUser } = useAuthUser(); const [search] = useSearchParams(); const locale = useLocale(); + const isSmallerThanPhone = useBreakpoint('phone'); const isHomepage = pathname === `/${locale}` || pathname === `/${locale}/`; const showSignedInHeader = @@ -129,7 +133,10 @@ const HomepageBanner = ({ homepageSettings, image }: Props) => { search.get('variant') === 'signedIn'; return ( - <Box data-cy="e2e-homepage-banner" mb="40px"> + <Box + data-cy="e2e-homepage-banner" + mb={isSmallerThanPhone ? DEFAULT_Y_PADDING : '40px'} + > {showSignedInHeader ? ( <SignedInHeader homepageSettings={{ From 7bc691295ce280be54764fe61d73cfebccbb2216 Mon Sep 17 00:00:00 2001 From: Luuc van der Zee <luuc_v_d_zee@hotmail.com> Date: Mon, 9 Dec 2024 13:43:50 -0300 Subject: [PATCH 11/11] Remove events border and tweak spacing --- .../components/LandingPages/citizen/EventsWidget.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/front/app/components/LandingPages/citizen/EventsWidget.tsx b/front/app/components/LandingPages/citizen/EventsWidget.tsx index e42f0b4d1ed5..fa414622eb9f 100644 --- a/front/app/components/LandingPages/citizen/EventsWidget.tsx +++ b/front/app/components/LandingPages/citizen/EventsWidget.tsx @@ -7,6 +7,7 @@ import { isRtl, Box, Title, + useBreakpoint, } from '@citizenlab/cl2-component-library'; import { darken } from 'polished'; import styled from 'styled-components'; @@ -18,7 +19,6 @@ import EventsSpinner from 'containers/EventsPage/EventsViewer/EventsSpinner'; import eventsPageMessages from 'containers/EventsPage/messages'; import EventCards from 'components/EventCards'; -import VerticalCenterer from 'components/VerticalCenterer'; import { useIntl } from 'utils/cl-intl'; import Link from 'utils/cl-router/Link'; @@ -38,7 +38,6 @@ const Header = styled.div` display: flex; justify-content: space-between; padding-bottom: 30px; - border-bottom: 1px solid #d1d1d1; margin-bottom: 30px; ${media.phone` @@ -80,6 +79,7 @@ const EventsWidget = ({ staticPageId }: Props) => { sort: '-start_at', ...(staticPageId && { staticPageId }), }); + const isSmallerThanPhone = useBreakpoint('phone'); const eventsLoading = isNil(events); const eventsError = isError(events); @@ -104,11 +104,15 @@ const EventsWidget = ({ staticPageId }: Props) => { )} {!isNilOrError(events) && events.data.length === 0 && ( - <VerticalCenterer> + <Box + display="flex" + alignItems="center" + justifyContent={isSmallerThanPhone ? 'center' : 'flex-start'} + > <NoEventsText> {formatMessage(eventsPageMessages.noUpcomingOrOngoingEvents)} </NoEventsText> - </VerticalCenterer> + </Box> )} <EventCards events={events} />