Release 2024-12-09_2

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} />

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}
         </Title>

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`

front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/CallToAction/index.tsx

@@ -5,7 +5,6 @@ import {
   colors,
   useBreakpoint,
   Text,
-  defaultCardStyle,
   media,
   Title,
   Input,
@@ -23,26 +22,22 @@ 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`
   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;
   `}
 `;
 
@@ -60,7 +55,6 @@ const ButtonContainer = styled.div`
   ${media.phone`
     margin-left: 0;
     width: 100%;
-    margin-top: 20px;
   `}
 `;
 
@@ -136,12 +130,14 @@ const CallToAction = ({
   const isSmallerThanSmallTablet = useBreakpoint('tablet');
 
   return (
-    <Box bg={colors.background} data-cy="e2e-highlight">
+    <Box
+      border={`1px ${colors.grey300} solid`}
+      data-cy="e2e-highlight"
+      my={isSmallerThanTablet ? DEFAULT_PADDING : DEFAULT_Y_PADDING}
+    >
       <Box
         maxWidth="1200px"
         margin="0 auto"
-        pt={isSmallerThanTablet ? DEFAULT_PADDING : '40px'}
-        pb={isSmallerThanTablet ? DEFAULT_PADDING : '40px'}
         px={isSmallerThanTablet ? DEFAULT_PADDING : '0px'}
       >
         <Container>
@@ -150,10 +146,12 @@ const CallToAction = ({
             w="100%"
             maxWidth={isSmallerThanTablet ? undefined : '400px'}
           >
-            <Title variant="h2" color="tenantText">
+            <Title variant="h2" color="tenantText" mt="0">
               {lоcalize(title)}
             </Title>
-            <Text color="textSecondary">{lоcalize(description)}</Text>
+            <Text color="textSecondary" m="0">
+              {lоcalize(description)}
+            </Text>
           </Box>
           <ButtonContainer>
             {((enabled && secondaryButtonText) ||

front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/Events/index.tsx

@@ -1,28 +1,25 @@
 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';
 
 import { useIntl } from 'utils/cl-intl';
 
+import { DEFAULT_Y_PADDING } from '../constants';
+
 import messages from './messages';
 
 const Events = () => {
   const isSmallerThanTablet = useBreakpoint('tablet');
   return (
-    <Box bg={colors.background} data-cy="e2e-events">
+    <Box data-cy="e2e-events">
       <Box
         maxWidth="1200px"
         margin="0 auto"
-        pt={isSmallerThanTablet ? DEFAULT_PADDING : '40px'}
-        pb={isSmallerThanTablet ? DEFAULT_PADDING : '40px'}
+        pt={isSmallerThanTablet ? DEFAULT_PADDING : DEFAULT_Y_PADDING}
+        pb={isSmallerThanTablet ? DEFAULT_PADDING : DEFAULT_Y_PADDING}
         px={isSmallerThanTablet ? DEFAULT_PADDING : '0px'}
       >
         <EventsWidget />

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,14 +125,18 @@ 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 =
     (isHomepage && authUser?.data !== undefined) ||
     search.get('variant') === 'signedIn';
 
   return (
-    <div data-cy="e2e-homepage-banner">
+    <Box
+      data-cy="e2e-homepage-banner"
+      mb={isSmallerThanPhone ? DEFAULT_Y_PADDING : '40px'}
+    >
       {showSignedInHeader ? (
         <SignedInHeader
           homepageSettings={{
@@ -156,7 +163,7 @@ const HomepageBanner = ({ homepageSettings, image }: Props) => {
           />
         </Fragment>
       )}
-    </div>
+    </Box>
   );
 };
 

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';
@@ -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};
   `}
@@ -32,7 +33,7 @@ const Projects = ({
   currentlyWorkingOnText?: Multiloc;
 }) => {
   return (
-    <Box bg={colors.background} data-cy="e2e-projects">
+    <Box data-cy="e2e-projects">
       <Box maxWidth="1200px" margin="0 auto">
         <ProjectSection id="e2e-landing-page-project-section">
           <ProjectAndFolderCards

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"

front/app/containers/Admin/pagesAndMenu/containers/ContentBuilder/components/Widgets/_shared/ProjectCarrousel/index.tsx

@@ -103,8 +103,7 @@ const ProjectCarrousel = ({ title, projects, hasMore, onLoadMore }: Props) => {
     <>
       <CarrouselContainer>
         <Title
-          variant="h3"
-          as="h2"
+          variant="h2"
           mt="0px"
           ml={isSmallerThanPhone ? DEFAULT_PADDING : undefined}
           color="tenantText"