Merge pull request #1280 from CaptainFact/staging

improve videos page layout
CaptainFact · Jul 17, 2024 · c68e0e5 · c68e0e5
2 parents d3894a3 + dea5ca4
commit c68e0e5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/app/components/Videos/VideosIndexPage.jsx b/app/components/Videos/VideosIndexPage.jsx
@@ -1,4 +1,3 @@
-import { capitalize } from 'lodash'
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { withNamespaces } from 'react-i18next'
@@ -7,7 +6,6 @@ import { connect } from 'react-redux'
 import { toAbsoluteURL } from '../../lib/cf_routes'
 import { changeVideosLanguageFilter, setVideosFilter } from '../../state/user_preferences/reducer'
 import Container from '../StyledUtils/Container'
-import { Icon } from '../Utils'
 import AddVideoBtn from './AddVideoBtn'
 import PaginatedVideosContainer from './PaginatedVideosContainer'
 import VideosFilterBar from './VideosFilterBar'
@@ -36,12 +34,23 @@ export default class VideosIndexPage extends React.PureComponent {
             content="Découvrez diverses vidéos sourcées et vérifiées par la communauté CaptainFact"
           />
         </Helmet>
-        <section className="header">
-          <h2 className="title is-2">
-            <Icon name="television" />
-            <span> {capitalize(t('entities.videoFactChecking'))}</span>
+        <Container
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          maxWidth="1315px"
+          mx="auto"
+          px="20px"
+          pb="24px"
+          borderBottom="1px solid #f7f7f7"
+        >
+          <h2 className="is-size-3">
+            {t('menu.factChecking')}
+            <span className="mx-1"> &rsaquo; </span>
+            {t('entities.videoFactChecking')}
           </h2>
-        </section>
+          <AddVideoBtn />
+        </Container>
         <Container
           flexDirection={['column-reverse', 'row']}
           flexWrap="wrap"
@@ -53,7 +62,6 @@ export default class VideosIndexPage extends React.PureComponent {
           px="20px"
           py="15px"
           mx="auto"
-          mt={['30px', '80px']}
           mb="32px"
           boxShadow="rgba(0, 0, 0, 0.1) 0px 10px 10px -10px"
           borderBottom="1px solid #f2f2f2"
@@ -70,7 +78,6 @@ export default class VideosIndexPage extends React.PureComponent {
             language={languageFilter}
             source={videosFilter}
           />
-          <AddVideoBtn />
         </Container>
         <PaginatedVideosContainer
           baseURL={this.props.location.pathname}

diff --git a/app/i18n/en/main.json b/app/i18n/en/main.json
@@ -6,7 +6,7 @@
     "speaker_plural": "speakers",
     "statement": "statement",
     "statement_plural": "statements",
-    "videoFactChecking": "Video fact-checking"
+    "videoFactChecking": "Videos"
   },
   "menu": {
     "login": "Log in",

diff --git a/app/i18n/fr/main.json b/app/i18n/fr/main.json
@@ -6,7 +6,7 @@
     "speaker_plural": "intervenant(e)s",
     "statement": "déclaration",
     "statement_plural": "déclarations",
-    "videoFactChecking": "Vérification de vidéos"
+    "videoFactChecking": "Vidéos"
   },
   "menu": {
     "login": "Se connecter",