- {!this.state.error ? children :
+
+
+ {this.renderMetadata()}
+
-
+ {!this.state.error ? children :
+
+ 
+ aptain
+ Fact
+
)
Logo.propTypes = {
diff --git a/app/components/App/Navbar.jsx b/app/components/App/Navbar.jsx
index 3063d91ab..bb1a029a9 100644
--- a/app/components/App/Navbar.jsx
+++ b/app/components/App/Navbar.jsx
@@ -1,12 +1,12 @@
import { Box, Flex } from '@rebass/grid'
import { omit } from 'lodash'
+import { LogIn } from 'lucide-react'
import React from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
import { withResizeDetector } from 'react-resize-detector'
import { Link, withRouter } from 'react-router-dom'
import Popup from 'reactjs-popup'
import styled, { css, withTheme } from 'styled-components'
-import { HelpCircle } from 'styled-icons/boxicons-regular'
import { UserCircle } from 'styled-icons/fa-regular'
import { CaretDown } from 'styled-icons/fa-solid'
import { themeGet } from 'styled-system'
@@ -22,6 +22,7 @@ import Container from '../StyledUtils/Container'
import { fadeIn } from '../StyledUtils/Keyframes'
import StyledLink from '../StyledUtils/StyledLink'
import { Span } from '../StyledUtils/Text'
+import { Button } from '../ui/button'
import ScoreTag from '../Users/ScoreTag'
import UserAppellation from '../Users/UserAppellation'
import UserMenu from '../Users/UserMenu'
@@ -33,7 +34,7 @@ import MenuToggleSwitch from './MenuToggleSwitch'
const NavbarContainer = styled(Flex)`
position: fixed;
- z-index: 9999;
+ z-index: 40;
top: 0;
width: 100%;
justify-content: space-between;
@@ -65,7 +66,7 @@ const UserMenuEntry = styled((props) =>
+
+
+
+
+
-
+
)}
)}
@@ -292,5 +274,5 @@ const Navbar = ({
}
export default withTheme(
- withLoggedInUser(withNamespaces('main')(withRouter(withResizeDetector(Navbar)))),
+ withLoggedInUser(withTranslation('main')(withRouter(withResizeDetector(Navbar)))),
)
diff --git a/app/components/App/Sidebar.jsx b/app/components/App/Sidebar.jsx
index 87aaf6d54..269b1fe7b 100644
--- a/app/components/App/Sidebar.jsx
+++ b/app/components/App/Sidebar.jsx
@@ -1,9 +1,8 @@
import { Query } from '@apollo/client/react/components'
-import { Flex } from '@rebass/grid'
-import classNames from 'classnames'
import { capitalize, get } from 'lodash'
+import { CircleHelp, Flag, Heart, ListVideo, Puzzle, Users } from 'lucide-react'
import React from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
@@ -16,6 +15,8 @@ import { Mastodon } from 'styled-icons/fa-brands'
import { Star } from 'styled-icons/fa-solid'
import { LinkExternal } from 'styled-icons/octicons'
+import { cn } from '@/lib/css-utils'
+
import {
loggedInUserPendingModerationCount,
loggedInUserTodayReputationGain,
@@ -25,11 +26,10 @@ import { MAX_DAILY_REPUTATION_GAIN } from '../../constants'
import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer'
import UserLanguageSelector from '../LoggedInUser/UserLanguageSelector'
import { withLoggedInUser } from '../LoggedInUser/UserProvider'
+import { Badge } from '../ui/badge'
import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
import ProgressBar from '../Utils/ProgressBar'
-import RawIcon from '../Utils/RawIcon'
import ReputationGuard from '../Utils/ReputationGuard'
-import Tag from '../Utils/Tag'
const WhiteStar = styled(Star)`
color: white;
@@ -41,12 +41,14 @@ const WhiteStar = styled(Star)`
`
const DailyGainText = styled.p`
color: #858585;
+ font-size: 0.9em;
`
+
@connect((state) => ({ sidebarExpended: state.UserPreferences.sidebarExpended }), {
toggleSidebar,
closeSidebar,
})
-@withNamespaces('main')
+@withTranslation('main')
@withLoggedInUser
export default class Sidebar extends React.PureComponent {
constructor(props) {
@@ -62,15 +64,19 @@ export default class Sidebar extends React.PureComponent {
}
}
- MenuLink({ title, iconName, customLink, className, children, ...props }) {
- const classes = classNames(className, { 'link-with-icon': !!iconName })
+ MenuLink({ title, className, children, ...props }) {
+ const classes = cn(
+ 'flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md hover:text-gray-900',
+ { 'bg-gray-100': props.isActive },
+ className,
+ )
return (
-
{t('menu.language')}
-
+
-
) : null}
-
+ {t('menu.language')} +
+{t('menu.yourProfile')}
++ {t('menu.yourProfile')} +
{this.renderMenuProfile()}{t('menu.factChecking')}
++ {t('menu.factChecking')} +
{this.renderMenuContent()} -{t('menu.other')}
--
-
-
- {this.renderDailyGainGauge()}
+ {t('menu.other')} +
+-
+
{t('menu.followus')}
-
- {' '}
-
+
-
-
-
-
-
-
+
)
}
@@ -184,8 +203,8 @@ export default class Sidebar extends React.PureComponent {
const dailyGain = get(data, 'loggedInUser.todayReputationGain', 0)
return (
- + {t('menu.followus')} +
+
+
{`${t('menu.dailyGain')} ${dailyGain}/${MAX_DAILY_REPUTATION_GAIN}`}
-
+
)
}}
@@ -207,7 +226,7 @@ export default class Sidebar extends React.PureComponent {
renderMenuProfile() {
return (
- -
+
-
-
-
+