enhancement: Misc design updates, fixes and improvements

CaptainFact · Feb 7, 2024 · 7e06368 · 7e06368
1 parent 3353aba
commit 7e06368
Show file tree

Hide file tree

Showing 32 changed files with 478 additions and 311 deletions.
diff --git a/app/API/socket_api.js b/app/API/socket_api.js
@@ -23,8 +23,16 @@ class CaptainFactSocketApi {
 
   createSocket(token) {
     this.socket = new Socket(this.socketUrl, { params: { token } })
-    this.socket.onError(noInternetError)
-    this.socket.onClose(noInternetError)
+    this.socket.onError((e) => {
+      // eslint-disable-next-line no-console
+      console.warning('Socket error:', e)
+      noInternetError()
+    })
+    this.socket.onClose((e) => {
+      if (!e.wasClean) {
+        noInternetError()
+      }
+    })
   }
 
   /**

diff --git a/app/components/App/LanguageSelector.jsx b/app/components/App/LanguageSelector.jsx
@@ -20,7 +20,11 @@ export default class LanguageSelector extends React.PureComponent {
     const options = defaultLocales.merge(this.props.additionalOptions || {}).sortBy((v, k) => k)
 
     return (
-      <select onChange={(e) => this.props.handleChange(e.target.value)} value={this.props.value}>
+      <select
+        onChange={(e) => this.props.handleChange(e.target.value)}
+        value={this.props.value}
+        id={this.props.id}
+      >
         {this.renderLocalesMap(options)}
       </select>
     )

diff --git a/app/components/App/Navbar.jsx b/app/components/App/Navbar.jsx
@@ -21,7 +21,9 @@ import SearchBox from '../Search/SearchBox'
 import Container from '../StyledUtils/Container'
 import { fadeIn } from '../StyledUtils/Keyframes'
 import StyledLink from '../StyledUtils/StyledLink'
+import { Span } from '../StyledUtils/Text'
 import ScoreTag from '../Users/ScoreTag'
+import UserAppellation from '../Users/UserAppellation'
 import UserMenu from '../Users/UserMenu'
 import UserPicture from '../Users/UserPicture'
 import { ErrorView } from '../Utils/ErrorView'
@@ -36,7 +38,7 @@ const NavbarContainer = styled(Flex)`
   width: 100%;
   justify-content: space-between;
   align-items: center;
-  background: rgba(255, 255, 255, 0.9);
+  background: white;
   height: ${themeGet('navbarHeight')}px;
   border-bottom: 1px solid ${themeGet('colors.black.200')};
   box-shadow: 0px 0px 15px rgba(125, 125, 125, 0.25);
@@ -63,8 +65,13 @@ const UserMenuEntry = styled((props) => <StyledLink {...omit(props, 'isActive')}
   display: block;
   border-left: 2px solid white;
   background: white;
+  font-size: 1.1em;
+  padding: 10px 15px;
+  outline: none;
 
-  &:hover {
+  &:hover,
+  &:active,
+  &:focus {
     background: ${themeGet('colors.black.50')};
   }
 
@@ -81,10 +88,13 @@ const UserMenuEntry = styled((props) => <StyledLink {...omit(props, 'isActive')}
     `}
 `
 
-UserMenuEntry.defaultProps = {
-  px: 2,
-  py: 1,
-}
+const UserHero = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid ${themeGet('colors.black.100')};
+  padding: 10px 15px;
+`
 
 const ScoreHelpButton = styled(HelpCircle)`
   color: #39b714;
@@ -117,7 +127,7 @@ const NotificationPopup = styled(StyledPopup)`
 `
 const MenuPopup = styled(StyledPopup)`
   &-content {
-    width: 200px;
+    min-width: 200px;
   }
 `
 
@@ -219,23 +229,34 @@ const Navbar = ({
                     </UserMenuTrigger>
                   }
                 >
-                  <UserMenu user={loggedInUser} hasLogout isSelf>
-                    {({ Icon, key, route, title, index, isActive, onClick }) => (
-                      <UserMenuEntry
-                        key={key}
-                        to={route}
-                        index={index}
-                        isActive={isActive}
-                        onClick={onClick}
-                      >
-                        <Box>
-                          <Icon size="1em" />
-                          &nbsp;
-                          {title}
-                        </Box>
-                      </UserMenuEntry>
-                    )}
-                  </UserMenu>
+                  <div>
+                    <UserHero>
+                      <UserPicture size={USER_PICTURE_LARGE} user={loggedInUser} />
+                      <Flex flexDirection="column" justifyContent="center">
+                        <UserAppellation user={loggedInUser} withoutActions />
+                        <Span fontSize="0.8em" color="black.500">
+                          {loggedInUser.email}
+                        </Span>
+                      </Flex>
+                    </UserHero>
+                    <UserMenu user={loggedInUser} hasLogout isSelf>
+                      {({ Icon, key, route, title, index, isActive, onClick }) => (
+                        <UserMenuEntry
+                          key={key}
+                          to={route}
+                          index={index}
+                          isActive={isActive}
+                          onClick={onClick}
+                        >
+                          <Box>
+                            <Icon size="1em" />
+                            &nbsp;
+                            {title}
+                          </Box>
+                        </UserMenuEntry>
+                      )}
+                    </UserMenu>
+                  </div>
                 </MenuPopup>
               </Flex>
             ) : (

diff --git a/app/components/App/Sidebar.jsx b/app/components/App/Sidebar.jsx
@@ -64,12 +64,19 @@ export default class Sidebar extends React.PureComponent {
 
   MenuLink({ title, iconName, customLink, className, children, ...props }) {
     const classes = classNames(className, { 'link-with-icon': !!iconName })
+
     return (
       <NavLink
         className={classes}
         activeClassName="is-active"
         onClick={this.closeSideBarIfMobile}
         title={title ? title : children}
+        // For `/help/contact`, override the default `isActive` as we would activate both help and contact otherwise
+        isActive={
+          props.to === '/help'
+            ? (match, location) => (location.pathname === '/help/contact' ? false : match)
+            : null
+        }
         {...props}
       >
         {iconName && <RawIcon name={iconName} />}

diff --git a/app/components/FormUtils/FieldWithLabelAddon.jsx b/app/components/FormUtils/FieldWithLabelAddon.jsx
@@ -2,12 +2,12 @@ import React from 'react'
 
 import Button from '../Utils/Button'
 
-const FieldWithLabelAddon = ({ label, children }) => {
+const FieldWithLabelAddon = ({ label, children, inputId }) => {
   return (
     <div className="field has-addons">
-      <p className="control">
+      <label className="control" htmlFor={inputId}>
         <Button className="is-static">{label}</Button>
-      </p>
+      </label>
       <div className="control">{children}</div>
     </div>
   )

diff --git a/app/components/Home/Home.jsx b/app/components/Home/Home.jsx
@@ -1,3 +1,4 @@
+import { Flex } from '@rebass/grid'
 import React from 'react'
 import { Trans, withNamespaces } from 'react-i18next'
 import { Link } from 'react-router-dom'
@@ -40,6 +41,7 @@ export default class Home extends React.PureComponent {
                     To train a critical mind, improve the quality of information and
                     decision-making.
                     <br />
+                    <br />
                     Against fake news, fraud and disinformation
                   </Trans>
                 </h2>
@@ -50,7 +52,7 @@ export default class Home extends React.PureComponent {
                     <p>
                       <Link
                         onClick={() => Matomo.registerClick('Home', 'Button', 'ExtensionPage')}
-                        className="button is-primary is-medium"
+                        className="button is-medium"
                         to="/extension"
                       >
                         {t('installExtension')}
@@ -62,7 +64,7 @@ export default class Home extends React.PureComponent {
                     <p>
                       <Link
                         onClick={() => Matomo.registerClick('Home', 'Button', 'SignUp')}
-                        className="button is-secondary is-medium"
+                        className="button is-gradient-primary-light is-medium"
                         to="/signup"
                       >
                         {t('registerAndFactCheck')}
@@ -92,7 +94,7 @@ export default class Home extends React.PureComponent {
           </div>
         </section>
 
-        {this.props.lng === 'fr' && (
+        {this.props.lng === 'fr' && process.env.HIDE_FR_SITE !== 'true' && (
           <section className="section know-more-fr has-text-centered">
             <p className="has-text-weight-semibold">
               {t('knowMoreFR')}
@@ -128,10 +130,7 @@ export default class Home extends React.PureComponent {
                 Équipe
               </ExternalLinkNewTab>
               <br />
-              <ExternalLinkNewTab
-                className="button is-primary is-large"
-                href="https://fr.captainfact.io"
-              >
+              <ExternalLinkNewTab className="button is-large" href="https://fr.captainfact.io">
                 {t('goToFRSite')}
               </ExternalLinkNewTab>
             </p>
@@ -141,19 +140,19 @@ export default class Home extends React.PureComponent {
         <section className="section last-videos" style={{ paddingBottom: '3em' }}>
           <div className="has-text-centered">
             <h2 className="title is-3">{t('latest')}</h2>
+          </div>
+          <div className="last-videos-cards">
+            <LastVideos />
+          </div>
+          <Flex justifyContent="center" mt={3}>
             <Link
               onClick={() => Matomo.registerClick('Home', 'Button', 'SeeAllVideos')}
-              className="button animated-hover is-medium is-gradient-primary-light"
+              className="button is-medium"
               to="/videos"
             >
               {t('seeVideos')}
             </Link>
-          </div>
-          <br />
-          <br />
-          <div className="last-videos-cards">
-            <LastVideos />
-          </div>
+          </Flex>
         </section>
 
         <section className="section section-alt-bg has-text-centered">
@@ -211,7 +210,7 @@ export default class Home extends React.PureComponent {
                 </p>
                 <Link
                   onClick={() => Matomo.registerClick('Home', 'Button', 'ExtensionPage')}
-                  className="button is-primary is-medium"
+                  className="button is-medium"
                   to="/extension"
                 >
                   {t('installExtension')}
@@ -230,7 +229,7 @@ export default class Home extends React.PureComponent {
                 </p>
                 <Link
                   onClick={() => Matomo.registerClick('Home', 'Button', 'SignUp')}
-                  className="button is-primary is-medium"
+                  className="button is-medium"
                   to="/signup"
                 >
                   {t('registerAndFactCheck')}
@@ -262,10 +261,11 @@ export default class Home extends React.PureComponent {
                   <br />
                 </p>
                 <ExternalLinkNewTab
-                  className="button is-primary is-medium"
+                  className="button is-medium"
                   href="https://github.com/CaptainFact/captain-fact/wiki/Les-partenariats-entre-les-chaînes-Youtube-et-CaptainFact.io"
                 >
-                  {t('learnMore')} (fr)
+                  {t('learnMore')}
+                  {this.props.lng !== 'fr' ? ' (FR)' : ''}
                 </ExternalLinkNewTab>
               </div>
             </div>
@@ -296,15 +296,12 @@ export default class Home extends React.PureComponent {
           </div>
         </section>
 
-        {this.props.lng === 'fr' && (
+        {this.props.lng === 'fr' && process.env.HIDE_FR_SITE !== 'true' && (
           <section className="section know-more-fr has-text-centered">
             <p className="has-text-weight-semibold">
               {t('knowMoreFR')}
               <br />
-              <ExternalLinkNewTab
-                className="button is-primary is-large"
-                href="https://fr.captainfact.io"
-              >
+              <ExternalLinkNewTab className="button is-large" href="https://fr.captainfact.io">
                 {t('goToFRSite')}
               </ExternalLinkNewTab>
             </p>

diff --git a/app/components/Moderation/Moderation.jsx b/app/components/Moderation/Moderation.jsx
@@ -41,7 +41,7 @@ export default class Moderation extends React.PureComponent {
     }
 
     return (
-      <div className="section">
+      <div id="moderation-page" className="section">
         <h1 className="title is-1 has-text-centered">
           {t('title')} <Report size="1em" />
         </h1>
@@ -52,7 +52,11 @@ export default class Moderation extends React.PureComponent {
             {t('learnMore')}
           </Link>
         </div>
-        {!entry && <Message className="has-text-centered">{t('emptyModeration')}</Message>}
+        {!entry && (
+          <Message mt={4} className="has-text-centered mt-6">
+            {t('emptyModeration')}
+          </Message>
+        )}
         {entry && (
           <div>
             {this.renderAction(entry.action)}

diff --git a/app/components/StyledUtils/Container.jsx b/app/components/StyledUtils/Container.jsx
@@ -40,6 +40,7 @@ const Container = styled.div`
   ${styledSystem.zIndex}
 
   ${styledCustom.cursor}
+  ${styledCustom.gap}
 `
 
 export default Container
diff --git a/app/components/Users/PublicAchievementUnlocker.jsx b/app/components/Users/PublicAchievementUnlocker.jsx
@@ -65,7 +65,7 @@ class PublicAchievementUnlocker extends React.PureComponent {
       const achievementTitle = this.props.t(`${this.props.achievementId}.title`)
       this.props.flashSuccessMsg('achievements:unlocked', {
         i18nParams: { achievement: achievementTitle },
-        infoUrl: `/u/${this.props.loggedInUser.username}`,
+        infoUrl: `/u/${this.props.loggedInUser.username}/profile`,
         iconName: 'trophy',
       })
     })

diff --git a/app/components/Utils/FacetButton.jsx b/app/components/Utils/FacetButton.jsx
@@ -43,7 +43,7 @@ const Wrapper = styled.button`
     border-radius: 50%;
     transition:
       opacity 0.3s,
-      color 0.3s;
+      color 0.1s;
     backface-visibility: hidden;
     overflow: visible;
     padding: ${({ size }) => `${size / 4}px`};
@@ -52,11 +52,12 @@ const Wrapper = styled.button`
 
     /* Activated icon */
     &:nth-child(1) {
-      color: ${themeGet('colors.yellow')};
+      color: ${(props) =>
+        props.$isSecondary ? props.theme.colors.secondary : props.theme.colors.black[400]};
       transform: rotateY(180deg);
 
       &:hover {
-        opacity: 0.7;
+        color: ${themeGet('colors.primary')};
       }
     }
 
@@ -66,7 +67,7 @@ const Wrapper = styled.button`
       opacity: ${({ activated }) => (activated ? 0 : 0.7)};
 
       &:hover {
-        color: #e2b26f;
+        color: ${themeGet('colors.black.500')};
       }
     }
   }
@@ -81,9 +82,16 @@ const FacetButton = ({
   size,
   keepTooltipInside,
   className,
+  isSecondary,
 }) => {
   const popupContent = (
-    <Wrapper activated={activated} onClick={onClick} size={size} className={className}>
+    <Wrapper
+      activated={activated}
+      onClick={onClick}
+      size={size}
+      $isSecondary={isSecondary}
+      className={className}
+    >
       {activatedIcon}
       {deactivatedIcon || activatedIcon}
     </Wrapper>