Skip to content

Commit b3f8dd8

Browse files
BetreeBetree
committed
iterate
1 parent 2215f82 commit b3f8dd8

25 files changed

+329
-238
lines changed

‎app/App.jsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,23 @@ const App = () => (
3535
<ThemeProvider>
3636
<TooltipProvider>
3737
<UserProvider>
38-
<InstantSearch
39-
searchClient={searchClient}
40-
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
41-
>
42-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
43-
<Configure hitsPerPage={16} />
44-
</Index>
45-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
46-
<Configure hitsPerPage={32} />
47-
</Index>
48-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
49-
<Configure hitsPerPage={24} />
50-
</Index>
51-
<CFRouter />
52-
</InstantSearch>
53-
</UserProvider>
54-
</TooltipProvider>
38+
<InstantSearch
39+
searchClient={searchClient}
40+
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
41+
>
42+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
43+
<Configure hitsPerPage={16} />
44+
</Index>
45+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
46+
<Configure hitsPerPage={32} />
47+
</Index>
48+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
49+
<Configure hitsPerPage={24} />
50+
</Index>
51+
<CFRouter />
52+
</InstantSearch>
53+
</UserProvider>
54+
</TooltipProvider>
5555
</ThemeProvider>
5656
</I18nextProvider>
5757
</ApolloProvider>

‎app/components/App/Navbar.jsx‎

Lines changed: 37 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { LogIn, Monitor, Moon, Sun } from 'lucide-react'
2-
import React, { useEffect, useMemo } from 'react'
3-
import { useTranslation, withTranslation } from 'react-i18next'
1+
import { LogIn } from 'lucide-react'
2+
import React, { useMemo } from 'react'
3+
import { withTranslation } from 'react-i18next'
44
import { withResizeDetector } from 'react-resize-detector'
55
import { Link, withRouter } from 'react-router-dom'
66
import Popup from 'reactjs-popup'
@@ -36,67 +36,42 @@ const getRedirectUrl = () => {
3636
return '/videos'
3737
}
3838

39-
// Inline theme selector component for user menu
40-
const InlineThemeSelector = () => {
41-
const { theme, setTheme } = useTheme()
42-
const { t } = useTranslation('main')
43-
44-
const themes = [
45-
{ value: 'auto', label: t('theme.auto'), Icon: Monitor },
46-
{ value: 'light', label: t('theme.light'), Icon: Sun },
47-
{ value: 'dark', label: t('theme.dark'), Icon: Moon },
48-
]
49-
50-
return (
51-
<div className="border-b border-[#e7e7e7] dark:border-border px-[15px] py-2.5">
52-
<div className="flex gap-1 w-full">
53-
{themes.map(({ value, label, Icon }) => (
54-
<button
55-
key={value}
56-
onClick={() => setTheme(value)}
57-
className={cn(
58-
'flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-sm rounded-md outline-none transition-colors',
59-
theme === value
60-
? 'bg-primary text-primary-foreground hover:bg-primary/90'
61-
: 'bg-white dark:bg-background text-gray-700 dark:text-foreground hover:bg-[#f5f7fa] dark:hover:bg-accent active:bg-[#f5f7fa] dark:active:bg-accent focus:bg-[#f5f7fa] dark:focus:bg-accent',
62-
)}
63-
title={label}
64-
>
65-
<Icon size={14} />
66-
<span className="hidden sm:inline">{label}</span>
67-
</button>
68-
))}
69-
</div>
70-
</div>
71-
)
72-
}
73-
7439
const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, location, width }) => {
7540
const isMobile = width < 600
7641
const loginRedirect = getRedirectUrl()
7742
const { resolvedTheme } = useTheme()
7843
const isDarkMode = resolvedTheme === 'dark'
79-
80-
const notificationsPopupStyle = useMemo(() => ({
81-
zIndex: 9999,
82-
overflow: 'hidden',
83-
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
84-
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
85-
borderRadius: '5px',
86-
boxShadow: isDarkMode ? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px' : 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
87-
width: isMobile ? '95%' : '400px',
88-
}), [isDarkMode, isMobile])
89-
90-
const userMenuPopupStyle = useMemo(() => ({
91-
zIndex: 9999,
92-
overflow: 'hidden',
93-
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
94-
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
95-
borderRadius: '5px',
96-
boxShadow: isDarkMode ? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px' : 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
97-
minWidth: '200px',
98-
}), [isDarkMode])
99-
44+
45+
const notificationsPopupStyle = useMemo(
46+
() => ({
47+
zIndex: 9999,
48+
overflow: 'hidden',
49+
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
50+
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
51+
borderRadius: '5px',
52+
boxShadow: isDarkMode
53+
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
54+
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
55+
width: isMobile ? '95%' : '400px',
56+
}),
57+
[isDarkMode, isMobile],
58+
)
59+
60+
const userMenuPopupStyle = useMemo(
61+
() => ({
62+
zIndex: 9999,
63+
overflow: 'hidden',
64+
backgroundColor: isDarkMode ? 'hsl(0, 0%, 12%)' : '#ffffff',
65+
border: isDarkMode ? '1px solid hsl(0, 0%, 20%)' : '1px solid #d3d3d3',
66+
borderRadius: '5px',
67+
boxShadow: isDarkMode
68+
? 'rgba(0, 0, 0, 0.3) 5px 10px 15px -6px'
69+
: 'rgba(150, 150, 150, 0.2) 5px 10px 15px -6px',
70+
minWidth: '200px',
71+
}),
72+
[isDarkMode],
73+
)
74+
10075
return (
10176
<div data-cy="Navbar">
10277
<div className="h-[60px] w-full" />
@@ -174,10 +149,11 @@ const Navbar = ({ t, loggedInUser, isAuthenticated, loggedInUserLoading, locatio
174149
<UserPicture size={USER_PICTURE_LARGE} user={loggedInUser} />
175150
<div className="flex flex-col justify-center">
176151
<UserAppellation user={loggedInUser} withoutActions />
177-
<span className="text-[0.8em] text-[#252525] dark:text-muted-foreground">{loggedInUser.email}</span>
152+
<span className="text-[0.8em] text-[#252525] dark:text-muted-foreground">
153+
{loggedInUser.email}
154+
</span>
178155
</div>
179156
</div>
180-
<InlineThemeSelector />
181157
<UserMenu user={loggedInUser} hasLogout isSelf>
182158
{({ Icon, key, route, title, index, isActive, onClick }) => (
183159
<Link

‎app/components/App/Sidebar.jsx‎

Lines changed: 84 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { Query } from '@apollo/client/react/components'
22
import { capitalize, get } from 'lodash'
3-
import { CircleHelp, Flag, Heart, ListVideo, Mail, Puzzle, Users } from 'lucide-react'
3+
import {
4+
CircleHelp,
5+
Flag,
6+
Heart,
7+
ListVideo,
8+
Mail,
9+
Monitor,
10+
Moon,
11+
Puzzle,
12+
Sun,
13+
Users,
14+
} from 'lucide-react'
415
import React from 'react'
5-
import { withTranslation } from 'react-i18next'
16+
import { useTranslation, withTranslation } from 'react-i18next'
617
import { connect } from 'react-redux'
718
import { NavLink } from 'react-router-dom'
819
import { Discord, Facebook, Github, Mastodon, Twitter } from 'styled-icons/fa-brands'
@@ -20,6 +31,7 @@ import {
2031
MIN_REPUTATION_MODERATION,
2132
TABLET_WIDTH_THRESHOLD,
2233
} from '../../constants'
34+
import { useTheme } from '../../hooks/use-theme'
2335
import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer'
2436
import UserLanguageSelector from '../LoggedInUser/UserLanguageSelector'
2537
import { withLoggedInUser } from '../LoggedInUser/UserProvider'
@@ -28,6 +40,39 @@ import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
2840
import ProgressBar from '../Utils/ProgressBar'
2941
import ReputationGuard from '../Utils/ReputationGuard'
3042

43+
// Theme selector component for sidebar
44+
const ThemeSelector = () => {
45+
const { theme, setTheme } = useTheme()
46+
const { t } = useTranslation('main')
47+
48+
const themes = [
49+
{ value: 'auto', label: t('theme.auto'), Icon: Monitor },
50+
{ value: 'light', label: t('theme.light'), Icon: Sun },
51+
{ value: 'dark', label: t('theme.dark'), Icon: Moon },
52+
]
53+
54+
return (
55+
<div className="flex gap-1 w-full mb-4">
56+
{themes.map(({ value, label, Icon }) => (
57+
<button
58+
key={value}
59+
onClick={() => setTheme(value)}
60+
className={cn(
61+
'flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 text-sm rounded-md outline-none transition-colors',
62+
theme === value
63+
? 'bg-primary text-primary-foreground hover:bg-primary/90'
64+
: 'bg-white dark:bg-background text-gray-700 dark:text-foreground hover:bg-[#f5f7fa] dark:hover:bg-accent active:bg-[#f5f7fa] dark:active:bg-accent focus:bg-[#f5f7fa] dark:focus:bg-accent',
65+
)}
66+
title={label}
67+
>
68+
<Icon size={14} />
69+
<span className="hidden sm:inline">{label}</span>
70+
</button>
71+
))}
72+
</div>
73+
)
74+
}
75+
3176
@connect((state) => ({ sidebarExpended: state.UserPreferences.sidebarExpended }), {
3277
toggleSidebar,
3378
closeSidebar,
@@ -90,10 +135,18 @@ export default class Sidebar extends React.PureComponent {
90135
)}
91136
>
92137
<div className="flex flex-col flex-grow overflow-y-auto p-4">
93-
<p className={'text-gray-600 dark:text-muted-foreground uppercase text-sm font-semibold mb-2'}>
138+
<p
139+
className={
140+
'text-gray-600 dark:text-muted-foreground uppercase text-sm font-semibold mb-2'
141+
}
142+
>
94143
{t('menu.language')}
95144
</p>
96145
<UserLanguageSelector className={cn('mb-4')} size="small" />
146+
<p className="text-gray-600 dark:text-muted-foreground uppercase text-sm font-semibold mb-2">
147+
{t('theme.title')}
148+
</p>
149+
<ThemeSelector />
97150
{isAuthenticated ? (
98151
<React.Fragment>
99152
<p className="text-gray-600 dark:text-muted-foreground uppercase text-sm font-semibold mb-2">
@@ -130,7 +183,10 @@ export default class Sidebar extends React.PureComponent {
130183
>
131184
<Users size="1.2em" className="mr-2" />
132185
{t('menu.forum')}
133-
<LinkExternal size="0.9em" className="text-gray-500 dark:text-muted-foreground hover:text-gray-900 dark:hover:text-foreground ml-2" />
186+
<LinkExternal
187+
size="0.9em"
188+
className="text-gray-500 dark:text-muted-foreground hover:text-gray-900 dark:hover:text-foreground ml-2"
189+
/>
134190
</ExternalLinkNewTab>
135191
<ExternalLinkNewTab
136192
href="https://opencollective.com/captainfact_io"
@@ -140,27 +196,45 @@ export default class Sidebar extends React.PureComponent {
140196
>
141197
<Heart size="1.2em" className="mr-2" />
142198
{t('menu.donation')}&nbsp;
143-
<LinkExternal size="0.9em" className="text-gray-500 dark:text-muted-foreground hover:text-gray-900 dark:hover:text-foreground ml-2" />
199+
<LinkExternal
200+
size="0.9em"
201+
className="text-gray-500 dark:text-muted-foreground hover:text-gray-900 dark:hover:text-foreground ml-2"
202+
/>
144203
</ExternalLinkNewTab>
145204
</ul>
146205
<p className="text-gray-600 dark:text-muted-foreground uppercase text-sm font-semibold mt-3 mb-2">
147206
{t('menu.followus')}
148207
</p>
149208
<div className={'flex space-x-4 px-4'}>
150209
<ExternalLinkNewTab href="https://github.com/CaptainFact">
151-
<Github size="1.5em" className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground" />
210+
<Github
211+
size="1.5em"
212+
className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground"
213+
/>
152214
</ExternalLinkNewTab>
153215
<ExternalLinkNewTab href="https://discord.captainfact.io">
154-
<Discord size="1.5em" className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground" />
216+
<Discord
217+
size="1.5em"
218+
className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground"
219+
/>
155220
</ExternalLinkNewTab>
156221
<ExternalLinkNewTab href="https://twitter.com/CaptainFact_io">
157-
<Twitter size="1.5em" className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground" />
222+
<Twitter
223+
size="1.5em"
224+
className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground"
225+
/>
158226
</ExternalLinkNewTab>
159227
<ExternalLinkNewTab href="https://www.facebook.com/CaptainFact.io">
160-
<Facebook size="1.5em" className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground" />
228+
<Facebook
229+
size="1.5em"
230+
className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground"
231+
/>
161232
</ExternalLinkNewTab>
162233
<ExternalLinkNewTab href="https://mamot.fr/@CaptainFact">
163-
<Mastodon size="1.5em" className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground" />
234+
<Mastodon
235+
size="1.5em"
236+
className="text-gray-700 dark:text-foreground hover:text-gray-900 dark:hover:text-foreground"
237+
/>
164238
</ExternalLinkNewTab>
165239
</div>
166240
</div>

‎app/components/Help/HelpPageContent.jsx‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,41 @@ class HelpPageContent extends PureComponent {
5454
className="content"
5555
remarkPlugins={[remarkGfm]}
5656
components={{
57-
h1: (props) => <h1 className="text-4xl mb-8 mt-12 text-gray-800 dark:text-foreground font-bold" {...props} />,
58-
h2: (props) => <h2 className="text-3xl font-bold mt-8 mb-6 text-gray-700 dark:text-foreground" {...props} />,
59-
h3: (props) => <h3 className="text-2xl font-bold mb-4 mt-6 text-gray-600 dark:text-foreground" {...props} />,
57+
h1: (props) => (
58+
<h1
59+
className="text-4xl mb-8 mt-12 text-gray-800 dark:text-foreground font-bold"
60+
{...props}
61+
/>
62+
),
63+
h2: (props) => (
64+
<h2
65+
className="text-3xl font-bold mt-8 mb-6 text-gray-700 dark:text-foreground"
66+
{...props}
67+
/>
68+
),
69+
h3: (props) => (
70+
<h3
71+
className="text-2xl font-bold mb-4 mt-6 text-gray-600 dark:text-foreground"
72+
{...props}
73+
/>
74+
),
6075
h4: (props) => (
61-
<h4 className="text-xl mb-4 mt-6 text-gray-600 dark:text-foreground font-semibold" {...props} />
76+
<h4
77+
className="text-xl mb-4 mt-6 text-gray-600 dark:text-foreground font-semibold"
78+
{...props}
79+
/>
80+
),
81+
p: (props) => (
82+
<p
83+
className="text-lg leading-relaxed text-gray-600 dark:text-foreground my-6"
84+
{...props}
85+
/>
6286
),
63-
p: (props) => <p className="text-lg leading-relaxed text-gray-600 dark:text-foreground my-6" {...props} />,
6487
ul: (props) => (
65-
<ul className="list-disc list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground" {...props} />
88+
<ul
89+
className="list-disc list-outside ml-6 mb-6 space-y-2 text-gray-600 dark:text-foreground"
90+
{...props}
91+
/>
6692
),
6793
ol: (props) => (
6894
<ol
@@ -115,7 +141,10 @@ class HelpPageContent extends PureComponent {
115141
),
116142
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
117143
thead: ({ node, ...props }) => (
118-
<thead className="bg-gray-50 dark:bg-accent border-b border-gray-200 dark:border-border" {...props} />
144+
<thead
145+
className="bg-gray-50 dark:bg-accent border-b border-gray-200 dark:border-border"
146+
{...props}
147+
/>
119148
),
120149
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
121150
tr: ({ node, ...props }) => (
@@ -126,10 +155,15 @@ class HelpPageContent extends PureComponent {
126155
),
127156
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
128157
th: ({ node, ...props }) => (
129-
<th className="p-3 font-medium text-left text-gray-700 dark:text-foreground" {...props} />
158+
<th
159+
className="p-3 font-medium text-left text-gray-700 dark:text-foreground"
160+
{...props}
161+
/>
130162
),
131163
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
132-
td: ({ node, ...props }) => <td className="p-3 text-gray-600 dark:text-foreground" {...props} />,
164+
td: ({ node, ...props }) => (
165+
<td className="p-3 text-gray-600 dark:text-foreground" {...props} />
166+
),
133167
}}
134168
>
135169
{this.props.markdownContent}

0 commit comments

Comments
 (0)