From 1fb96d9a67d20b170bcbaf23fc76cca3c61f1ee6 Mon Sep 17 00:00:00 2001 From: aprendendofelipe <77860630+aprendendofelipe@users.noreply.github.com> Date: Fri, 24 Mar 2023 23:44:28 -0300 Subject: [PATCH 1/7] refactor(ui imports): centralize imports in TabNewsUI --- jsconfig.json | 5 +- models/rss.js | 4 +- pages/404.public.js | 3 +- pages/500.public.js | 3 +- pages/[username]/[slug]/index.public.js | 20 ++--- pages/[username]/index.public.js | 32 +++++--- .../[username]/pagina/[page]/index.public.js | 2 +- pages/_app.public.js | 10 +-- pages/cadastro/ativar/[token].public.js | 5 +- pages/cadastro/confirmar/index.public.js | 5 +- pages/cadastro/index.public.js | 5 +- pages/cadastro/recuperar/[token].public.js | 5 +- .../recuperar/confirmar/index.public.js | 3 +- pages/cadastro/recuperar/index.public.js | 6 +- .../recuperar/sucesso/index.public.js | 3 +- pages/contato/index.public.js | 5 +- pages/index.public.js | 6 +- pages/interface/components/Content/index.js | 27 ++++--- .../interface/components/ContentList/index.js | 14 ++-- .../components/DefaultLayout/index.js | 4 +- .../interface/components/EmptyState/index.js | 2 +- pages/interface/components/Footer/index.js | 3 +- .../components/GoToTopButton/index.js | 2 +- pages/interface/components/Head/index.js | 5 +- pages/interface/components/Header/index.js | 55 ++++++++------ pages/interface/components/Link/index.js | 6 +- pages/interface/components/Markdown/index.js | 16 ++-- .../components/PasswordInput/index.js | 4 +- .../components/PublishedSince/index.js | 4 +- .../components/TabCoinButtons/index.js | 11 ++- pages/interface/components/TabNewsUI/index.js | 40 ++++++++++ pages/interface/index.js | 18 +---- pages/login/index.public.js | 17 ++++- pages/museu/index.public.js | 73 +++++++++---------- pages/pagina/[page]/index.public.js | 6 +- .../perfil/confirmar-email/[token].public.js | 5 +- pages/perfil/index.public.js | 17 ++++- pages/publicar/index.public.js | 6 +- pages/recentes/index.public.js | 6 +- pages/recentes/pagina/[page]/index.public.js | 6 +- pages/status/index.public.js | 6 +- pages/termos-de-uso/index.public.js | 5 +- 42 files changed, 269 insertions(+), 211 deletions(-) create mode 100644 pages/interface/components/TabNewsUI/index.js diff --git a/jsconfig.json b/jsconfig.json index 36aa1a4dc..3ba6eb299 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,8 @@ { "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "paths": { + "@/*": ["pages/interface/components/*"] + } } } diff --git a/models/rss.js b/models/rss.js index 51cb6c148..cf12d8027 100644 --- a/models/rss.js +++ b/models/rss.js @@ -1,6 +1,6 @@ -import { renderToStaticMarkup } from 'react-dom/server'; -import { Viewer } from 'pages/interface'; +import { Viewer } from '@/TabNewsUI'; import removeMarkdown from 'models/remove-markdown'; +import { renderToStaticMarkup } from 'react-dom/server'; import { Feed } from 'feed'; import webserver from 'infra/webserver.js'; diff --git a/pages/404.public.js b/pages/404.public.js index d8e99729c..49632b2f3 100644 --- a/pages/404.public.js +++ b/pages/404.public.js @@ -1,6 +1,5 @@ +import { Box, DefaultLayout, Link } from '@/TabNewsUI'; import Image from 'next/image'; -import { DefaultLayout } from 'pages/interface/index.js'; -import { Box, Link } from '@primer/react'; import botSleepyFaceDarkTransparent from 'public/brand/bot-sleepy-face-dark-transparent.svg'; export default function Custom404() { diff --git a/pages/500.public.js b/pages/500.public.js index 241759ed4..92ace58f1 100644 --- a/pages/500.public.js +++ b/pages/500.public.js @@ -1,6 +1,5 @@ +import { Box, DefaultLayout, Link } from '@/TabNewsUI'; import Image from 'next/image'; -import { DefaultLayout } from 'pages/interface/index.js'; -import { Box, Link } from '@primer/react'; import botDeadFaceDarkTransparent from 'public/brand/bot-dead-face-dark-transparent.svg'; export default function Custom500() { diff --git a/pages/[username]/[slug]/index.public.js b/pages/[username]/[slug]/index.public.js index 145922584..3078ea4c6 100644 --- a/pages/[username]/[slug]/index.public.js +++ b/pages/[username]/[slug]/index.public.js @@ -1,15 +1,15 @@ -import useSWR from 'swr'; -import { useEffect, useState } from 'react'; -import { Link, DefaultLayout, Content, TabCoinButtons, Confetti, useCollapse } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; -import validator from 'models/validator.js'; -import authorization from 'models/authorization.js'; -import removeMarkdown from 'models/remove-markdown.js'; +import { Box, Button, Confetti, Content, DefaultLayout, Link, TabCoinButtons, Tooltip } from '@/TabNewsUI'; +import { CommentDiscussionIcon, CommentIcon, FoldIcon, UnfoldIcon } from '@primer/octicons-react'; import { NotFoundError } from 'errors/index.js'; -import { Box, Button, Tooltip } from '@primer/react'; -import { CommentIcon, CommentDiscussionIcon, FoldIcon, UnfoldIcon } from '@primer/octicons-react'; import webserver from 'infra/webserver.js'; +import authorization from 'models/authorization.js'; +import content from 'models/content.js'; +import removeMarkdown from 'models/remove-markdown.js'; +import user from 'models/user.js'; +import validator from 'models/validator.js'; +import { useCollapse } from 'pages/interface'; +import { useEffect, useState } from 'react'; +import useSWR from 'swr'; export default function Post({ contentFound: contentFoundFallback, diff --git a/pages/[username]/index.public.js b/pages/[username]/index.public.js index 0ac16739f..e3e486b06 100644 --- a/pages/[username]/index.public.js +++ b/pages/[username]/index.public.js @@ -1,16 +1,28 @@ -import useSWR from 'swr'; -import { useState } from 'react'; -import { DefaultLayout, ContentList, useUser } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; +import { + ActionList, + ActionMenu, + Box, + ContentList, + DefaultLayout, + Flash, + IconButton, + Label, + LabelGroup, + Pagehead, + useConfirm, +} from '@/TabNewsUI'; +import { KebabHorizontalIcon, TrashIcon } from '@primer/octicons-react'; +import { NotFoundError } from 'errors/index.js'; import authorization from 'models/authorization.js'; -import validator from 'models/validator.js'; +import content from 'models/content.js'; import removeMarkdown from 'models/remove-markdown.js'; -import { NotFoundError } from 'errors/index.js'; -import { FaUser } from 'react-icons/fa'; +import user from 'models/user.js'; +import validator from 'models/validator.js'; import { useRouter } from 'next/router'; -import { Box, Pagehead, ActionMenu, ActionList, Flash, IconButton, useConfirm, LabelGroup, Label } from '@primer/react'; -import { KebabHorizontalIcon, TrashIcon } from '@primer/octicons-react'; +import { useUser } from 'pages/interface'; +import { useState } from 'react'; +import { FaUser } from 'react-icons/fa'; +import useSWR from 'swr'; export default function Home({ contentListFound, pagination, userFound: userFoundFallback }) { const { data: userFound, mutate: userFoundMutate } = useSWR(`/api/v1/users/${userFoundFallback.username}`, { diff --git a/pages/[username]/pagina/[page]/index.public.js b/pages/[username]/pagina/[page]/index.public.js index 9788ede1a..d478cb8c3 100644 --- a/pages/[username]/pagina/[page]/index.public.js +++ b/pages/[username]/pagina/[page]/index.public.js @@ -1,4 +1,4 @@ -import { DefaultLayout, ContentList } from 'pages/interface/index.js'; +import { DefaultLayout, ContentList } from '@/TabNewsUI'; import user from 'models/user.js'; import content from 'models/content.js'; import authorization from 'models/authorization.js'; diff --git a/pages/_app.public.js b/pages/_app.public.js index ec9ff3571..9d9389667 100644 --- a/pages/_app.public.js +++ b/pages/_app.public.js @@ -1,9 +1,7 @@ -import { ThemeProvider, BaseStyles, SSRProvider } from '@primer/react'; +import { BaseStyles, NextNProgress, PrimerThemeProvider, SSRProvider } from '@/TabNewsUI'; import { Analytics } from '@vercel/analytics/react'; +import { DefaultHead, UserProvider } from 'pages/interface'; import { SWRConfig } from 'swr'; -import { UserProvider } from 'pages/interface/hooks/useUser/index.js'; -import NextNProgress from 'pages/interface/components/Progressbar/index.js'; -import { DefaultHead } from 'pages/interface/components/Head/index.js'; async function SWRFetcher(resource, init) { const response = await fetch(resource, init); @@ -22,12 +20,12 @@ function MyApp({ Component, pageProps }) { fetcher: SWRFetcher, }}> - + - + diff --git a/pages/cadastro/ativar/[token].public.js b/pages/cadastro/ativar/[token].public.js index 7fc83672e..00aea7099 100644 --- a/pages/cadastro/ativar/[token].public.js +++ b/pages/cadastro/ativar/[token].public.js @@ -1,8 +1,7 @@ +import { Box, Confetti, DefaultLayout, Flash } from '@/TabNewsUI'; import fetch from 'cross-fetch'; -import { Box, Flash } from '@primer/react'; -import { DefaultLayout, Confetti } from 'pages/interface/index.js'; -import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; export default function ActiveUser() { const router = useRouter(); diff --git a/pages/cadastro/confirmar/index.public.js b/pages/cadastro/confirmar/index.public.js index 6d0a3d608..2e236d269 100644 --- a/pages/cadastro/confirmar/index.public.js +++ b/pages/cadastro/confirmar/index.public.js @@ -1,6 +1,5 @@ -import { Box, Heading, Text } from '@primer/react'; -import { useState, useEffect } from 'react'; -import { DefaultLayout } from 'pages/interface/index.js'; +import { Box, DefaultLayout, Heading, Text } from '@/TabNewsUI'; +import { useEffect, useState } from 'react'; export default function ConfirmSignup() { const [email, setEmail] = useState(''); diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index ecc94faf3..b0f5c3a09 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -1,7 +1,6 @@ -import { useState, useRef } from 'react'; +import { Box, Button, DefaultLayout, Flash, FormControl, Heading, PasswordInput, TextInput } from '@/TabNewsUI'; import { useRouter } from 'next/router'; -import { DefaultLayout, PasswordInput } from 'pages/interface/index.js'; -import { FormControl, Box, Heading, Button, TextInput, Flash } from '@primer/react'; +import { useRef, useState } from 'react'; export default function Register() { return ( diff --git a/pages/cadastro/recuperar/[token].public.js b/pages/cadastro/recuperar/[token].public.js index ff3a6e5c4..1c6e072bd 100644 --- a/pages/cadastro/recuperar/[token].public.js +++ b/pages/cadastro/recuperar/[token].public.js @@ -1,8 +1,7 @@ -import { useState, useRef } from 'react'; +import { Box, Button, DefaultLayout, Flash, FormControl, Heading, PasswordInput } from '@/TabNewsUI'; import fetch from 'cross-fetch'; -import { FormControl, Box, Heading, Button, Flash } from '@primer/react'; -import { DefaultLayout, PasswordInput } from 'pages/interface/index.js'; import { useRouter } from 'next/router'; +import { useRef, useState } from 'react'; export default function RecoverPassword() { return ( diff --git a/pages/cadastro/recuperar/confirmar/index.public.js b/pages/cadastro/recuperar/confirmar/index.public.js index 9452e7194..980f0c124 100644 --- a/pages/cadastro/recuperar/confirmar/index.public.js +++ b/pages/cadastro/recuperar/confirmar/index.public.js @@ -1,5 +1,4 @@ -import { Box, Heading, Text } from '@primer/react'; -import { DefaultLayout } from 'pages/interface/index.js'; +import { Box, DefaultLayout, Heading, Text } from '@/TabNewsUI'; export default function ConfirmRecoverPassword() { return ( diff --git a/pages/cadastro/recuperar/index.public.js b/pages/cadastro/recuperar/index.public.js index 074105c28..14491cc05 100644 --- a/pages/cadastro/recuperar/index.public.js +++ b/pages/cadastro/recuperar/index.public.js @@ -1,7 +1,7 @@ -import { useState, useRef, useEffect } from 'react'; +import { Box, Button, DefaultLayout, Flash, FormControl, Heading, TextInput } from '@/TabNewsUI'; import { useRouter } from 'next/router'; -import { DefaultLayout, useUser } from 'pages/interface/index.js'; -import { FormControl, Box, Heading, Button, TextInput, Flash } from '@primer/react'; +import { useUser } from 'pages/interface'; +import { useEffect, useRef, useState } from 'react'; export default function RecoverPassword() { return ( diff --git a/pages/cadastro/recuperar/sucesso/index.public.js b/pages/cadastro/recuperar/sucesso/index.public.js index 60cd95d59..b76207b8b 100644 --- a/pages/cadastro/recuperar/sucesso/index.public.js +++ b/pages/cadastro/recuperar/sucesso/index.public.js @@ -1,5 +1,4 @@ -import { Box, Heading, Link, Text } from '@primer/react'; -import { DefaultLayout } from 'pages/interface/index.js'; +import { Box, DefaultLayout, Heading, Link, Text } from '@/TabNewsUI'; export default function ConfirmRecoverPassword() { return ( diff --git a/pages/contato/index.public.js b/pages/contato/index.public.js index 2bbddf40f..ac216591f 100644 --- a/pages/contato/index.public.js +++ b/pages/contato/index.public.js @@ -1,7 +1,4 @@ -import { Box, Heading } from '@primer/react'; -import { Viewer } from 'pages/interface'; - -import { DefaultLayout } from 'pages/interface/index.js'; +import { Box, DefaultLayout, Heading, Viewer } from '@/TabNewsUI'; export default function Page() { const body = `Leia com atenção qual a melhor forma de entrar em contato: diff --git a/pages/index.public.js b/pages/index.public.js index 32adaf74b..e9f3fa8d0 100644 --- a/pages/index.public.js +++ b/pages/index.public.js @@ -1,7 +1,7 @@ -import { DefaultLayout, ContentList } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; +import { ContentList, DefaultLayout } from '@/TabNewsUI'; import authorization from 'models/authorization.js'; +import content from 'models/content.js'; +import user from 'models/user.js'; import validator from 'models/validator.js'; import { FaTree } from 'react-icons/fa'; diff --git a/pages/interface/components/Content/index.js b/pages/interface/components/Content/index.js index fa9eeff5a..874edea11 100644 --- a/pages/interface/components/Content/index.js +++ b/pages/interface/components/Content/index.js @@ -1,22 +1,25 @@ -import { useState, useEffect, useCallback, useMemo } from 'react'; -import { useRouter } from 'next/router'; - import { - FormControl, + ActionList, + ActionMenu, Box, + BranchName, Button, - TextInput, + Editor, Flash, + FormControl, Heading, - Text, - BranchName, - ActionMenu, - ActionList, IconButton, + Link, + PublishedSince, + Text, + TextInput, useConfirm, -} from '@primer/react'; -import { KebabHorizontalIcon, PencilIcon, TrashIcon, LinkIcon } from '@primer/octicons-react'; -import { Editor, Link, PublishedSince, useUser, Viewer } from 'pages/interface'; + Viewer, +} from '@/TabNewsUI'; +import { KebabHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from '@primer/octicons-react'; +import { useRouter } from 'next/router'; +import { useUser } from 'pages/interface'; +import { useCallback, useEffect, useMemo, useState } from 'react'; export default function Content({ content, mode = 'view', viewFrame = false }) { const [componentMode, setComponentMode] = useState(mode); diff --git a/pages/interface/components/ContentList/index.js b/pages/interface/components/ContentList/index.js index 6b2853b31..c48688de7 100644 --- a/pages/interface/components/ContentList/index.js +++ b/pages/interface/components/ContentList/index.js @@ -1,10 +1,14 @@ -import useSWR from 'swr'; -import { Box, Text } from '@primer/react'; +// import useSWR from 'swr'; +import { Box, EmptyState, Link, PublishedSince, Text } from '@/TabNewsUI'; import { ChevronLeftIcon, ChevronRightIcon, CommentIcon } from '@primer/octicons-react'; -import { Link, PublishedSince, EmptyState } from 'pages/interface'; - -export default function ContentList({ contentList, pagination, paginationBasePath, revalidatePath, emptyStateProps }) { +export default function ContentList({ + contentList, + pagination, + paginationBasePath, + // revalidatePath, + emptyStateProps, +}) { const listNumberOffset = pagination.perPage * (pagination.currentPage - 1); // const { data: list } = useSWR(revalidatePath, { fallbackData: contentList, revalidateOnMount: true }); diff --git a/pages/interface/components/DefaultLayout/index.js b/pages/interface/components/DefaultLayout/index.js index ad2330594..83a388d24 100644 --- a/pages/interface/components/DefaultLayout/index.js +++ b/pages/interface/components/DefaultLayout/index.js @@ -1,5 +1,5 @@ -import { Box, Flash } from '@primer/react'; -import { Footer, GoToTopButton, Head, Header } from 'pages/interface/index.js'; +import { Box, Footer, GoToTopButton, Header } from '@/TabNewsUI'; +import { Head } from 'pages/interface'; export default function DefaultLayout({ children, containerWidth = 'large', metadata }) { return ( diff --git a/pages/interface/components/EmptyState/index.js b/pages/interface/components/EmptyState/index.js index 5f64f51f1..59d3898a2 100644 --- a/pages/interface/components/EmptyState/index.js +++ b/pages/interface/components/EmptyState/index.js @@ -1,4 +1,4 @@ -import { Text, Heading, Box, Button } from '@primer/react'; +import { Box, Button, Heading, Text } from '@/TabNewsUI'; import { PlusIcon } from '@primer/octicons-react'; export default function EmptyState(props) { diff --git a/pages/interface/components/Footer/index.js b/pages/interface/components/Footer/index.js index 5a88077e2..cb768cfd0 100644 --- a/pages/interface/components/Footer/index.js +++ b/pages/interface/components/Footer/index.js @@ -1,5 +1,4 @@ -import { Box } from '@primer/react'; -import { Link } from 'pages/interface'; +import { Box, Link } from '@/TabNewsUI'; import { CgTab } from 'react-icons/cg'; export default function Footer(props) { diff --git a/pages/interface/components/GoToTopButton/index.js b/pages/interface/components/GoToTopButton/index.js index 9390a0b70..3c7aa9e8e 100644 --- a/pages/interface/components/GoToTopButton/index.js +++ b/pages/interface/components/GoToTopButton/index.js @@ -1,5 +1,5 @@ +import { IconButton } from '@/TabNewsUI'; import { ChevronUpIcon } from '@primer/octicons-react'; -import { IconButton } from '@primer/react'; import { useEffect, useState } from 'react'; export default function GoToTopButton() { diff --git a/pages/interface/components/Head/index.js b/pages/interface/components/Head/index.js index d5f77a8a0..bf902b2fd 100644 --- a/pages/interface/components/Head/index.js +++ b/pages/interface/components/Head/index.js @@ -1,7 +1,7 @@ +import { useMediaQuery } from 'pages/interface'; import webserver from 'infra/webserver.js'; import NextHead from 'next/head'; import { useRouter } from 'next/router'; -import { useMediaQuery } from 'pages/interface/index.js'; const webserverHost = webserver.host; @@ -18,10 +18,9 @@ export function DefaultHead() { description: 'Conteúdos com valor concreto para quem trabalha com tecnologia.', url: `${webserverHost}${router.asPath}`, type: 'website', - noIndex: false, }; - const { type, title, description, image, url, noIndex } = defaultMetadata; + const { type, title, description, image, url } = defaultMetadata; return ( diff --git a/pages/interface/components/Header/index.js b/pages/interface/components/Header/index.js index e69bfe40f..4b70f8a29 100644 --- a/pages/interface/components/Header/index.js +++ b/pages/interface/components/Header/index.js @@ -1,8 +1,19 @@ -import { Header, Box, ActionMenu, ActionList, IconButton, Truncate, Text, Tooltip } from '@primer/react'; -import { PersonFillIcon, HomeIcon, SquareFillIcon } from '@primer/octicons-react'; -import { CgTab } from 'react-icons/cg'; -import { HeaderLink, Link, useUser } from 'pages/interface'; +import { + ActionList, + ActionMenu, + Box, + HeaderLink, + IconButton, + Link, + PrimerHeader, + Text, + Tooltip, + Truncate, +} from '@/TabNewsUI'; +import { HomeIcon, PersonFillIcon, SquareFillIcon } from '@primer/octicons-react'; import { useRouter } from 'next/router'; +import { useUser } from 'pages/interface'; +import { CgTab } from 'react-icons/cg'; export default function HeaderComponent() { const { user, isLoading, logout } = useUser(); @@ -14,44 +25,44 @@ export default function HeaderComponent() { }; return ( - + ); } diff --git a/pages/interface/components/Link/index.js b/pages/interface/components/Link/index.js index 42cb043c2..b277dd881 100644 --- a/pages/interface/components/Link/index.js +++ b/pages/interface/components/Link/index.js @@ -1,5 +1,5 @@ +import { NavList, PrimerHeader, PrimerLink } from '@/TabNewsUI'; import NextLink from 'next/link'; -import { Header, Link as PrimerLink, NavList } from '@primer/react'; import { useRouter } from 'next/router'; export function Link({ href, children, ...props }) { @@ -12,9 +12,9 @@ export function Link({ href, children, ...props }) { export function HeaderLink({ href, children, ...props }) { return ( - + {children} - + ); } diff --git a/pages/interface/components/Markdown/index.js b/pages/interface/components/Markdown/index.js index f47e79f3d..bbe7caeab 100644 --- a/pages/interface/components/Markdown/index.js +++ b/pages/interface/components/Markdown/index.js @@ -1,21 +1,21 @@ -import { Viewer as ByteMdViewer, Editor as ByteMdEditor } from '@bytemd/react'; -import { Box } from '@primer/react'; +import { Box } from '@/TabNewsUI'; +import { Editor as ByteMdEditor, Viewer as ByteMdViewer } from '@bytemd/react'; import { useEffect, useRef } from 'react'; // ByteMD dependencies: -import gfmPlugin from '@bytemd/plugin-gfm'; -import highlightSsrPlugin from '@bytemd/plugin-highlight-ssr'; -import mathPlugin from '@bytemd/plugin-math'; -import mermaidPlugin from '@bytemd/plugin-mermaid'; import breaksPlugin from '@bytemd/plugin-breaks'; import gemojiPlugin from '@bytemd/plugin-gemoji'; -import byteMDLocale from 'bytemd/locales/pt_BR.json'; +import gfmPlugin from '@bytemd/plugin-gfm'; import gfmLocale from '@bytemd/plugin-gfm/locales/pt_BR.json'; +import highlightSsrPlugin from '@bytemd/plugin-highlight-ssr'; +import mathPlugin from '@bytemd/plugin-math'; import mathLocale from '@bytemd/plugin-math/locales/pt_BR.json'; +import mermaidPlugin from '@bytemd/plugin-mermaid'; import mermaidLocale from '@bytemd/plugin-mermaid/locales/pt_BR.json'; import 'bytemd/dist/index.min.css'; -import 'highlight.js/styles/github.css'; +import byteMDLocale from 'bytemd/locales/pt_BR.json'; import 'github-markdown-css/github-markdown-light.css'; +import 'highlight.js/styles/github.css'; import 'katex/dist/katex.css'; const bytemdPluginList = [ diff --git a/pages/interface/components/PasswordInput/index.js b/pages/interface/components/PasswordInput/index.js index 1e56d2d2b..3d901e426 100644 --- a/pages/interface/components/PasswordInput/index.js +++ b/pages/interface/components/PasswordInput/index.js @@ -1,6 +1,6 @@ -import { useEffect, useState } from 'react'; -import { FormControl, TextInput } from '@primer/react'; +import { FormControl, TextInput } from '@/TabNewsUI'; import { EyeClosedIcon, EyeIcon } from '@primer/octicons-react'; +import { useEffect, useState } from 'react'; export default function PasswordInput({ inputRef, id, name, label, errorObject, setErrorObject, ...props }) { const [isPasswordVisible, setIsPasswordVisible] = useState(false); diff --git a/pages/interface/components/PublishedSince/index.js b/pages/interface/components/PublishedSince/index.js index e0bf210f0..d346bb404 100644 --- a/pages/interface/components/PublishedSince/index.js +++ b/pages/interface/components/PublishedSince/index.js @@ -1,6 +1,6 @@ -import { formatDistanceToNowStrict, format } from 'date-fns'; +import { Tooltip } from '@/TabNewsUI'; +import { format, formatDistanceToNowStrict } from 'date-fns'; import { ptBR } from 'date-fns/locale'; -import { Tooltip } from '@primer/react'; import { useEffect, useState } from 'react'; function formatPublishedSince(date) { diff --git a/pages/interface/components/TabCoinButtons/index.js b/pages/interface/components/TabCoinButtons/index.js index 002161f6c..b185fc0d6 100644 --- a/pages/interface/components/TabCoinButtons/index.js +++ b/pages/interface/components/TabCoinButtons/index.js @@ -1,10 +1,9 @@ -import { useState, useEffect } from 'react'; -import { Box, Text, IconButton, Tooltip } from '@primer/react'; -import { ChevronUpIcon, ChevronDownIcon } from '@primer/octicons-react'; -import { useReward } from 'react-rewards'; +import { Box, IconButton, Text, Tooltip } from '@/TabNewsUI'; +import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react'; import { useRouter } from 'next/router'; - -import { useUser } from 'pages/interface/index.js'; +import { useUser } from 'pages/interface'; +import { useEffect, useState } from 'react'; +import { useReward } from 'react-rewards'; export default function TabCoinButtons({ content }) { const router = useRouter(); diff --git a/pages/interface/components/TabNewsUI/index.js b/pages/interface/components/TabNewsUI/index.js new file mode 100644 index 000000000..f5cfb6b3d --- /dev/null +++ b/pages/interface/components/TabNewsUI/index.js @@ -0,0 +1,40 @@ +export { default as Confetti } from '@/Confetti/index.js'; +export { default as Content } from '@/Content/index.js'; +export { default as ContentList } from '@/ContentList/index.js'; +export { default as DefaultLayout } from '@/DefaultLayout/index.js'; +export { default as EmptyState } from '@/EmptyState/index.js'; +export { default as Footer } from '@/Footer/index.js'; +export { default as GoToTopButton } from '@/GoToTopButton/index.js'; +export { default as Header } from '@/Header/index.js'; +export { default as NextLink, HeaderLink, Link, NavItem } from '@/Link'; +export { default as Viewer, Editor } from '@/Markdown/index.js'; +export { default as PasswordInput } from '@/PasswordInput/index.js'; +export { default as NextNProgress } from '@/Progressbar/index.js'; +export { default as PublishedSince } from '@/PublishedSince/index.js'; +export { default as TabCoinButtons } from '@/TabCoinButtons/index.js'; +export { + ActionList, + ActionMenu, + BaseStyles, + Box, + BranchName, + Button, + Checkbox, + Flash, + FormControl, + Header as PrimerHeader, + Heading, + IconButton, + Label, + LabelGroup, + Link as PrimerLink, + NavList, + Pagehead, + SSRProvider, + Text, + TextInput, + ThemeProvider as PrimerThemeProvider, + Tooltip, + Truncate, + useConfirm, +} from '@primer/react'; diff --git a/pages/interface/index.js b/pages/interface/index.js index aa06f8557..ce053499f 100644 --- a/pages/interface/index.js +++ b/pages/interface/index.js @@ -1,18 +1,4 @@ -export { default as DefaultLayout } from './components/DefaultLayout/index.js'; -export { default as Header } from './components/Header/index.js'; -export { default as Content } from './components/Content/index.js'; -export { default as ContentList } from './components/ContentList/index.js'; -export { default as Footer } from './components/Footer/index.js'; -export { default as Head } from './components/Head/index.js'; -export { default as TabCoinButtons } from './components/TabCoinButtons/index.js'; -export { default as PublishedSince } from './components/PublishedSince/index.js'; -export { default as EmptyState } from './components/EmptyState/index.js'; -export { default as Confetti } from './components/Confetti/index.js'; -export { default as NextLink, HeaderLink, Link, NavItem } from './components/Link/index.js'; -export { default as GoToTopButton } from './components/GoToTopButton/index.js'; -export { default as Viewer, Editor } from './components/Markdown/index.js'; -export { default as PasswordInput } from './components/PasswordInput/index.js'; - +export { default as Head, DefaultHead } from './components/Head/index.js'; export { default as useCollapse } from './hooks/useCollapse/index.js'; -export { default as useUser } from './hooks/useUser/index.js'; export { default as useMediaQuery } from './hooks/useMediaQuery/index.js'; +export { default as useUser, UserProvider } from './hooks/useUser/index.js'; diff --git a/pages/login/index.public.js b/pages/login/index.public.js index 82d4d87aa..90989c63d 100644 --- a/pages/login/index.public.js +++ b/pages/login/index.public.js @@ -1,7 +1,18 @@ -import { useState, useRef, useEffect } from 'react'; +import { + Box, + Button, + DefaultLayout, + Flash, + FormControl, + Heading, + Link, + PasswordInput, + Text, + TextInput, +} from '@/TabNewsUI'; import { useRouter } from 'next/router'; -import { DefaultLayout, useUser, PasswordInput } from 'pages/interface/index.js'; -import { FormControl, Box, Heading, Button, TextInput, Flash, Link, Text } from '@primer/react'; +import { useUser } from 'pages/interface'; +import { useEffect, useRef, useState } from 'react'; export default function Login() { return ( diff --git a/pages/museu/index.public.js b/pages/museu/index.public.js index f3342daca..dd772d645 100644 --- a/pages/museu/index.public.js +++ b/pages/museu/index.public.js @@ -1,5 +1,4 @@ -import { Box, Link, Text } from '@primer/react'; -import { DefaultLayout } from 'pages/interface'; +import { Box, DefaultLayout, PrimerLink, Text } from '@/TabNewsUI'; export default function Page() { return ( @@ -19,75 +18,75 @@ export default function Page() { diff --git a/pages/pagina/[page]/index.public.js b/pages/pagina/[page]/index.public.js index 28f54297c..6d30118cc 100644 --- a/pages/pagina/[page]/index.public.js +++ b/pages/pagina/[page]/index.public.js @@ -1,7 +1,7 @@ -import { DefaultLayout, ContentList } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; +import { ContentList, DefaultLayout } from '@/TabNewsUI'; import authorization from 'models/authorization.js'; +import content from 'models/content.js'; +import user from 'models/user.js'; import validator from 'models/validator.js'; export default function Home({ contentListFound, pagination }) { diff --git a/pages/perfil/confirmar-email/[token].public.js b/pages/perfil/confirmar-email/[token].public.js index 2973e33fd..a9af7fff8 100644 --- a/pages/perfil/confirmar-email/[token].public.js +++ b/pages/perfil/confirmar-email/[token].public.js @@ -1,8 +1,7 @@ +import { Box, Confetti, DefaultLayout, Flash } from '@/TabNewsUI'; import fetch from 'cross-fetch'; -import { Box, Flash } from '@primer/react'; -import { DefaultLayout, Confetti } from 'pages/interface/index.js'; -import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; +import { useEffect, useState } from 'react'; export default function ActiveUser() { const router = useRouter(); diff --git a/pages/perfil/index.public.js b/pages/perfil/index.public.js index 4507a7093..878b99459 100644 --- a/pages/perfil/index.public.js +++ b/pages/perfil/index.public.js @@ -1,7 +1,18 @@ -import { useState, useRef, useEffect } from 'react'; +import { + Box, + Button, + Checkbox, + DefaultLayout, + Flash, + FormControl, + Heading, + Link, + TextInput, + useConfirm, +} from '@/TabNewsUI'; +import { useUser } from 'pages/interface'; import { useRouter } from 'next/router'; -import { DefaultLayout, useUser, Link } from 'pages/interface/index.js'; -import { FormControl, Box, Heading, Button, TextInput, Checkbox, Flash, useConfirm } from '@primer/react'; +import { useEffect, useRef, useState } from 'react'; export default function EditProfile() { return ( diff --git a/pages/publicar/index.public.js b/pages/publicar/index.public.js index 5086791b8..f2800fdfe 100644 --- a/pages/publicar/index.public.js +++ b/pages/publicar/index.public.js @@ -1,8 +1,8 @@ -import useSWR from 'swr'; +import { Box, Content, DefaultLayout, Flash, Heading, Link } from '@/TabNewsUI'; import { useRouter } from 'next/router'; -import { DefaultLayout, Content, useUser } from 'pages/interface/index.js'; -import { Box, Heading, Flash, Link } from '@primer/react'; +import { useUser } from 'pages/interface'; import { useEffect } from 'react'; +import useSWR from 'swr'; export default function Post() { const router = useRouter(); diff --git a/pages/recentes/index.public.js b/pages/recentes/index.public.js index de8412044..81fc5766c 100644 --- a/pages/recentes/index.public.js +++ b/pages/recentes/index.public.js @@ -1,7 +1,7 @@ -import { DefaultLayout, ContentList } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; +import { ContentList, DefaultLayout } from '@/TabNewsUI'; import authorization from 'models/authorization.js'; +import content from 'models/content.js'; +import user from 'models/user.js'; import validator from 'models/validator.js'; export default function Home({ contentListFound, pagination }) { diff --git a/pages/recentes/pagina/[page]/index.public.js b/pages/recentes/pagina/[page]/index.public.js index db202c01c..45c60f580 100644 --- a/pages/recentes/pagina/[page]/index.public.js +++ b/pages/recentes/pagina/[page]/index.public.js @@ -1,7 +1,7 @@ -import { DefaultLayout, ContentList } from 'pages/interface/index.js'; -import user from 'models/user.js'; -import content from 'models/content.js'; +import { ContentList, DefaultLayout } from '@/TabNewsUI'; import authorization from 'models/authorization.js'; +import content from 'models/content.js'; +import user from 'models/user.js'; import validator from 'models/validator.js'; export default function Home({ contentListFound, pagination }) { diff --git a/pages/status/index.public.js b/pages/status/index.public.js index a8b75e9f6..61b491ce1 100644 --- a/pages/status/index.public.js +++ b/pages/status/index.public.js @@ -1,8 +1,6 @@ +import { Box, DefaultLayout, Heading, Label, LabelGroup, Truncate } from '@/TabNewsUI'; +import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts'; import useSWR from 'swr'; -import { Box, Heading, Label, LabelGroup, Truncate } from '@primer/react'; -import { ResponsiveContainer, BarChart, Bar, Tooltip, XAxis } from 'recharts'; - -import { DefaultLayout } from 'pages/interface/index.js'; export default function Page() { const { data: statusObject, isLoading: statusObjectIsLoading } = useSWR('/api/v1/status', { diff --git a/pages/termos-de-uso/index.public.js b/pages/termos-de-uso/index.public.js index da0d5d368..7adf7126b 100644 --- a/pages/termos-de-uso/index.public.js +++ b/pages/termos-de-uso/index.public.js @@ -1,7 +1,4 @@ -import { Box, Heading } from '@primer/react'; -import { Viewer } from 'pages/interface'; - -import { DefaultLayout } from 'pages/interface/index.js'; +import { Box, DefaultLayout, Heading, Viewer } from '@/TabNewsUI'; export default function Page() { const body = `Ao utilizar o TabNews você está de acordo com os seguintes termos: From 3abd1a9f58301c8bc2efedf41398ea6229d5ebc8 Mon Sep 17 00:00:00 2001 From: aprendendofelipe <77860630+aprendendofelipe@users.noreply.github.com> Date: Mon, 27 Mar 2023 00:49:16 -0300 Subject: [PATCH 2/7] feat(dark mode): added theme change with no flash --- pages/_app.public.js | 28 ++++++----------- pages/_document.public.js | 8 ++++- pages/interface/components/TabNewsUI/index.js | 3 ++ .../components/ThemeProvider/index.js | 31 +++++++++++++++++++ 4 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 pages/interface/components/ThemeProvider/index.js diff --git a/pages/_app.public.js b/pages/_app.public.js index 9d9389667..6478d1c79 100644 --- a/pages/_app.public.js +++ b/pages/_app.public.js @@ -1,4 +1,4 @@ -import { BaseStyles, NextNProgress, PrimerThemeProvider, SSRProvider } from '@/TabNewsUI'; +import { ThemeProvider } from '@/TabNewsUI'; import { Analytics } from '@vercel/analytics/react'; import { DefaultHead, UserProvider } from 'pages/interface'; import { SWRConfig } from 'swr'; @@ -12,25 +12,15 @@ async function SWRFetcher(resource, init) { function MyApp({ Component, pageProps }) { return ( - <> - - - - - - - - - - - - - + + + + + + + - + ); } diff --git a/pages/_document.public.js b/pages/_document.public.js index 222e690bf..01c85dc54 100644 --- a/pages/_document.public.js +++ b/pages/_document.public.js @@ -1,6 +1,9 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; +import Script from 'next/script'; import { ServerStyleSheet } from 'styled-components'; +const noFlashScript = `document.documentElement.setAttribute('data-no-flash', true)`; + export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); @@ -32,6 +35,9 @@ export default class MyDocument extends Document { +
diff --git a/pages/interface/components/TabNewsUI/index.js b/pages/interface/components/TabNewsUI/index.js index f5cfb6b3d..a6ed53977 100644 --- a/pages/interface/components/TabNewsUI/index.js +++ b/pages/interface/components/TabNewsUI/index.js @@ -12,6 +12,7 @@ export { default as PasswordInput } from '@/PasswordInput/index.js'; export { default as NextNProgress } from '@/Progressbar/index.js'; export { default as PublishedSince } from '@/PublishedSince/index.js'; export { default as TabCoinButtons } from '@/TabCoinButtons/index.js'; +export { default as ThemeProvider } from '@/ThemeProvider/index.js'; export { ActionList, ActionMenu, @@ -30,6 +31,7 @@ export { Link as PrimerLink, NavList, Pagehead, + SegmentedControl, SSRProvider, Text, TextInput, @@ -37,4 +39,5 @@ export { Tooltip, Truncate, useConfirm, + useTheme, } from '@primer/react'; diff --git a/pages/interface/components/ThemeProvider/index.js b/pages/interface/components/ThemeProvider/index.js new file mode 100644 index 000000000..8dc3499da --- /dev/null +++ b/pages/interface/components/ThemeProvider/index.js @@ -0,0 +1,31 @@ +import { BaseStyles, NextNProgress, PrimerThemeProvider, SSRProvider } from '@/TabNewsUI'; +import { useEffect, useLayoutEffect, useState } from 'react'; +import { createGlobalStyle } from 'styled-components'; + +// script to be called before interactive in _document.js +// document.documentElement.setAttribute('data-no-flash', true) +const NoFleshGlobalStyle = createGlobalStyle`html[data-no-flash='true']:root {visibility: hidden}`; +const removeNoFlashStyle = () => setTimeout(() => document.documentElement.removeAttribute('data-no-flash')); +const useBrowserLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect; + +export default function ThemeProvider({ children, ...props }) { + const [colorMode, setColorMode] = useState('day'); + + useBrowserLayoutEffect(() => { + const cachedColorMode = localStorage.getItem('colorMode') || 'auto'; + setColorMode(cachedColorMode); + removeNoFlashStyle(); + }, []); + + return ( + + + + + + {children} + + + + ); +} From 54d77fc1db38574687e0eb60ac6997e403cf62e0 Mon Sep 17 00:00:00 2001 From: aprendendofelipe <77860630+aprendendofelipe@users.noreply.github.com> Date: Mon, 27 Mar 2023 01:51:37 -0300 Subject: [PATCH 3/7] feat(theme switcher): added theme selector to header --- pages/interface/components/Header/index.js | 16 ++++- pages/interface/components/TabNewsUI/index.js | 1 + .../components/ThemeSelector/index.js | 65 +++++++++++++++++++ 3 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 pages/interface/components/ThemeSelector/index.js diff --git a/pages/interface/components/Header/index.js b/pages/interface/components/Header/index.js index 4b70f8a29..e429c6502 100644 --- a/pages/interface/components/Header/index.js +++ b/pages/interface/components/Header/index.js @@ -7,6 +7,8 @@ import { Link, PrimerHeader, Text, + ThemeSelector, + ThemeSwitcher, Tooltip, Truncate, } from '@/TabNewsUI'; @@ -51,12 +53,18 @@ export default function HeaderComponent() { {!isLoading && !user && ( <> - + + + + Login - + Cadastrar + + Entrar + )} @@ -115,6 +123,10 @@ export default function HeaderComponent() { Editar perfil + + + + Deslogar diff --git a/pages/interface/components/TabNewsUI/index.js b/pages/interface/components/TabNewsUI/index.js index a6ed53977..76c110215 100644 --- a/pages/interface/components/TabNewsUI/index.js +++ b/pages/interface/components/TabNewsUI/index.js @@ -13,6 +13,7 @@ export { default as NextNProgress } from '@/Progressbar/index.js'; export { default as PublishedSince } from '@/PublishedSince/index.js'; export { default as TabCoinButtons } from '@/TabCoinButtons/index.js'; export { default as ThemeProvider } from '@/ThemeProvider/index.js'; +export { default as ThemeSelector, ThemeSwitcher } from '@/ThemeSelector/index.js'; export { ActionList, ActionMenu, diff --git a/pages/interface/components/ThemeSelector/index.js b/pages/interface/components/ThemeSelector/index.js new file mode 100644 index 000000000..deb3e44e1 --- /dev/null +++ b/pages/interface/components/ThemeSelector/index.js @@ -0,0 +1,65 @@ +import { Box, SegmentedControl, useTheme, Button } from '@/TabNewsUI'; +import { MoonIcon, SunIcon } from '@primer/octicons-react'; + +export default function ThemeSelector({ ...props }) { + const { colorMode, setColorMode } = useTheme(); + + const handleChangeColorMode = (mode) => { + setColorMode(mode); + localStorage.setItem('colorMode', mode); + }; + + return ( + + + handleChangeColorMode('night')} + icon={MoonIcon} + size="small" + /> + handleChangeColorMode('auto')} + size="small"> + Auto + + handleChangeColorMode('day')} + icon={SunIcon} + size="small" + /> + + + ); +} + +export function ThemeSwitcher({ ...props }) { + const { resolvedColorMode: mode, setColorMode } = useTheme(); + + const handleSwitchMode = () => { + const newMode = mode === 'day' ? 'night' : 'day'; + setColorMode(newMode); + localStorage.setItem('colorMode', newMode); + }; + + return ( + + ); +} From cdb33bc31b2a19d968ffd21f3b1d074c01599e4e Mon Sep 17 00:00:00 2001 From: aprendendofelipe <77860630+aprendendofelipe@users.noreply.github.com> Date: Wed, 29 Mar 2023 05:36:25 -0300 Subject: [PATCH 4/7] feat(dark mode): color and alignments corrections --- pages/[username]/[slug]/index.public.js | 10 +++++----- pages/cadastro/index.public.js | 6 ++++-- pages/cadastro/recuperar/index.public.js | 4 ++++ pages/interface/components/Content/index.js | 4 ++++ pages/interface/components/DefaultLayout/index.js | 4 ++-- pages/interface/components/EmptyState/index.js | 11 ++--------- pages/interface/components/PasswordInput/index.js | 3 ++- pages/interface/components/ThemeSelector/index.js | 3 ++- pages/login/index.public.js | 3 ++- pages/perfil/index.public.js | 6 ++++-- 10 files changed, 31 insertions(+), 23 deletions(-) diff --git a/pages/[username]/[slug]/index.public.js b/pages/[username]/[slug]/index.public.js index 3078ea4c6..91b449063 100644 --- a/pages/[username]/[slug]/index.public.js +++ b/pages/[username]/[slug]/index.public.js @@ -74,7 +74,7 @@ export default function Post({ sx={{ borderWidth: 0, borderRightWidth: 1, - borderColor: 'border.muted', + borderColor: 'btn.activeBorder', borderStyle: 'dotted', width: '50%', height: '100%', @@ -82,7 +82,7 @@ export default function Post({ /> - + @@ -246,7 +246,7 @@ function RenderChildrenTree({ childrenList, renderIntent, renderIncrement }) { borderStyle: 'dashed', }, svg: { - backgroundColor: 'white', + backgroundColor: 'canvas.default', }, }, }}> @@ -266,7 +266,7 @@ function RenderChildrenTree({ childrenList, renderIntent, renderIncrement }) { borderWidth: 0, borderRightWidth: 1, borderLeftWidth: 0, - borderColor: 'border.muted', + borderColor: 'btn.activeBorder', borderStyle: 'dotted', width: 0, transition: 'border 0.1s cubic-bezier(1,1,1,0)', @@ -275,7 +275,7 @@ function RenderChildrenTree({ childrenList, renderIntent, renderIncrement }) { - + diff --git a/pages/cadastro/index.public.js b/pages/cadastro/index.public.js index b0f5c3a09..b95c0b232 100644 --- a/pages/cadastro/index.public.js +++ b/pages/cadastro/index.public.js @@ -110,7 +110,8 @@ function SignUpForm() { spellCheck={false} block={true} aria-label="Seu nome de usuário" - sx={{ minHeight: '46px' }} + contrast + sx={{ minHeight: '46px', px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> {errorObject?.key === 'username' && ( {errorObject.message} @@ -132,7 +133,8 @@ function SignUpForm() { spellCheck={false} block={true} aria-label="Seu email" - sx={{ minHeight: '46px' }} + contrast + sx={{ minHeight: '46px', px: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} /> {errorObject?.key === 'email' && ( {errorObject.message} diff --git a/pages/cadastro/recuperar/index.public.js b/pages/cadastro/recuperar/index.public.js index 14491cc05..4b442d9d6 100644 --- a/pages/cadastro/recuperar/index.public.js +++ b/pages/cadastro/recuperar/index.public.js @@ -110,6 +110,8 @@ function RecoverPasswordForm() { Digite seu e-mail ou o nome de usuário da pessoa que deseja ajudar Digite seu e-mail Título Fonte (opcional) + {metadata && }
- + ); } diff --git a/pages/interface/components/EmptyState/index.js b/pages/interface/components/EmptyState/index.js index 59d3898a2..6087cb6e0 100644 --- a/pages/interface/components/EmptyState/index.js +++ b/pages/interface/components/EmptyState/index.js @@ -3,16 +3,9 @@ import { PlusIcon } from '@primer/octicons-react'; export default function EmptyState(props) { const { title, description, action, icon: Icon, isLoading } = props; - + if (isLoading) return null; return ( - + {Icon && } {title} {description && {description}} diff --git a/pages/interface/components/PasswordInput/index.js b/pages/interface/components/PasswordInput/index.js index 3d901e426..9ef13a8e5 100644 --- a/pages/interface/components/PasswordInput/index.js +++ b/pages/interface/components/PasswordInput/index.js @@ -52,7 +52,8 @@ export default function PasswordInput({ inputRef, id, name, label, errorObject, sx={{ color: 'fg.subtle' }} /> } - sx={{ minHeight: '46px' }} + contrast + sx={{ minHeight: '46px', pl: 2, '&:focus-within': { backgroundColor: 'canvas.default' } }} ref={inputRef} onChange={clearErrors} onKeyDown={detectCapsLock} diff --git a/pages/interface/components/ThemeSelector/index.js b/pages/interface/components/ThemeSelector/index.js index deb3e44e1..4762fa80a 100644 --- a/pages/interface/components/ThemeSelector/index.js +++ b/pages/interface/components/ThemeSelector/index.js @@ -1,4 +1,4 @@ -import { Box, SegmentedControl, useTheme, Button } from '@/TabNewsUI'; +import { Box, Button, SegmentedControl, useTheme } from '@/TabNewsUI'; import { MoonIcon, SunIcon } from '@primer/octicons-react'; export default function ThemeSelector({ ...props }) { @@ -49,6 +49,7 @@ export function ThemeSwitcher({ ...props }) { return (