- {this.renderMetadata()}
-
-
-
-
-
- {!this.state.error ? children :
}
+
+
+ {this.renderMetadata()}
+
+
+
+
+ {!this.state.error ? children : }
+
+
+
+
+
)
}
-
- /**
- * Extension content scripts load after CaptainFact. We could have created a message
- * interface to communicate between the two but as our need is very basic for now
- * (detecting if extension is installed) we wait 5 seconds and check.
- * @returns {Promise}
- */
- checkExtensionInstall() {
- return new Promise((fulfill) => {
- setTimeout(() => fulfill(!!document.getElementById('captainfact-extension-installed')), 5000)
- })
- }
}
diff --git a/app/components/App/Logo.jsx b/app/components/App/Logo.jsx
index e891055fb..c4f057666 100644
--- a/app/components/App/Logo.jsx
+++ b/app/components/App/Logo.jsx
@@ -1,53 +1,21 @@
-import { Flex } from '@rebass/grid'
-import PropTypes from 'prop-types'
import React from 'react'
-import styled, { css } from 'styled-components'
-import { themeGet } from 'styled-system'
import logo from '../../assets/logo.svg'
import borderlessLogo from '../../assets/logo-borderless.svg'
-import { Span } from '../StyledUtils/Text'
-
-const LogoContainer = styled(Flex)`
- max-height: 100%;
- align-items: center;
- font-family: ${themeGet('fontFamily.serif')};
- color: ${themeGet('colors.black.500')};
-
- ${(props) => css`
- font-size: ${props.size / 2}px;
- height: ${props.size}px;
- `}
-`
-
-const Image = styled.img`
- height: 100%;
- width: ${(props) => props.size}px;
-`
/**
* The main website logo.
*/
-const Logo = ({ borderless, height }) => (
-
-
- aptain
-
- Fact
-
-
+const Logo = ({ borderless = false }) => (
+
+
+
aptain
+
Fact
+
)
-Logo.propTypes = {
- /** If true, a version of the logo without border will be used */
- borderless: PropTypes.bool,
- /** Base height of the component in pixels */
- height: PropTypes.number,
-}
-
-Logo.defaultProps = {
- borderless: false,
- height: 30,
-}
-
export default Logo
diff --git a/app/components/App/MenuToggleSwitch.jsx b/app/components/App/MenuToggleSwitch.jsx
index 4ff6c8021..a905c9034 100644
--- a/app/components/App/MenuToggleSwitch.jsx
+++ b/app/components/App/MenuToggleSwitch.jsx
@@ -2,8 +2,7 @@ import PropTypes from 'prop-types'
import React from 'react'
import { connect } from 'react-redux'
import styled, { withTheme } from 'styled-components'
-import { Menu as MenuIcon } from 'styled-icons/boxicons-regular'
-import { X as XIcon } from 'styled-icons/boxicons-regular'
+import { Menu as MenuIcon, X as XIcon } from 'styled-icons/boxicons-regular'
import { themeGet } from 'styled-system'
import { toggleSidebar } from '../../state/user_preferences/reducer'
diff --git a/app/components/App/Navbar.jsx b/app/components/App/Navbar.jsx
index 3063d91ab..0a480a985 100644
--- a/app/components/App/Navbar.jsx
+++ b/app/components/App/Navbar.jsx
@@ -1,12 +1,11 @@
-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 +21,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'
@@ -31,11 +31,12 @@ import { LoadingFrame } from '../Utils/LoadingFrame'
import Logo from './Logo'
import MenuToggleSwitch from './MenuToggleSwitch'
-const NavbarContainer = styled(Flex)`
+const NavbarContainer = styled.div`
position: fixed;
- z-index: 9999;
+ z-index: 40;
top: 0;
width: 100%;
+ display: flex;
justify-content: space-between;
align-items: center;
background: white;
@@ -46,7 +47,8 @@ const NavbarContainer = styled(Flex)`
animation: ${fadeIn} 0.3s;
`
-const UserMenuTrigger = styled(Flex)`
+const UserMenuTrigger = styled.div`
+ display: flex;
align-items: center;
height: 38px;
cursor: pointer;
@@ -65,7 +67,7 @@ const UserMenuEntry = styled((props) =>
+
-
+
{/* Left */}
-
+
{/* Show X icon only on small device */}
- {width >= 425 && (
-
-
-
+ {(isAuthenticated ? width >= 425 : width >= 275) && (
+
+
+
)}
-
+
{/* Center - holds the search bar (hidden on mobile) */}
{(ENABLE_PUBLIC_SEARCH || location.pathname.startsWith('/search')) && (
) : (
-
+
{isAuthenticated ? (
-
-
-
-
-
+
+
-
+
-
+
}
@@ -232,12 +227,12 @@ const Navbar = ({
-
+
{loggedInUser.email}
-
+
{({ Icon, key, route, title, index, isActive, onClick }) => (
@@ -248,49 +243,37 @@ const Navbar = ({
isActive={isActive}
onClick={onClick}
>
-
+
{title}
-
+
)}
-
+
+
+
+
+
+
-
+
)}
-
+
)
}
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..a8f5e7afe 100644
--- a/app/components/App/Sidebar.jsx
+++ b/app/components/App/Sidebar.jsx
@@ -1,35 +1,33 @@
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, Mail, 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'
-import { EnvelopeFill } from 'styled-icons/bootstrap'
-import { Github } from 'styled-icons/fa-brands'
-import { Discord } from 'styled-icons/fa-brands'
-import { Twitter } from 'styled-icons/fa-brands'
-import { Facebook } from 'styled-icons/fa-brands'
-import { Mastodon } from 'styled-icons/fa-brands'
+import { Discord, Facebook, Github, Mastodon, Twitter } 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,
} from '../../API/graphql_queries'
-import { MIN_REPUTATION_MODERATION, MOBILE_WIDTH_THRESHOLD } from '../../constants'
-import { MAX_DAILY_REPUTATION_GAIN } from '../../constants'
+import {
+ MAX_DAILY_REPUTATION_GAIN,
+ MIN_REPUTATION_MODERATION,
+ TABLET_WIDTH_THRESHOLD,
+} 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 +39,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) {
@@ -57,20 +57,24 @@ export default class Sidebar extends React.PureComponent {
}
closeSideBarIfMobile() {
- if (window.innerWidth <= MOBILE_WIDTH_THRESHOLD) {
+ if (window.innerWidth <= TABLET_WIDTH_THRESHOLD) {
this.props.closeSidebar()
}
}
- 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 (
- {iconName && }
- {customLink ? children : {children}}
+ {children}
)
}
@@ -92,82 +95,90 @@ export default class Sidebar extends React.PureComponent {
render() {
const { sidebarExpended, className, t, isAuthenticated } = this.props
return (
-