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 && ( - + {formatMessage(eventsPageMessages.noUpcomingOrOngoingEvents)} - + )} 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/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` 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..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, @@ -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 ( - + @@ -150,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) || 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..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 @@ -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 ( - + 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..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 ( -
+ {showSignedInHeader ? ( { /> )} -
+ ); }; 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..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 @@ -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 ( - + { <> <CarrouselContainer> <Title - variant="h3" - as="h2" + variant="h2" mt="0px" ml={isSmallerThanPhone ? DEFAULT_PADDING : undefined} color="tenantText"