fix: theme mode dark on prod build (stakwork#349)

gouravmpk · Jul 25, 2023 · 90604aa · 90604aa
1 parent c174bd6
commit 90604aa
Show file tree

Hide file tree

Showing 18 changed files with 1,132 additions and 8,595 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:18-alpine3.17 as build
+FROM node:18.15.0 as build
 
 # Create app directory
 WORKDIR /usr/src/app

diff --git a/build/assets/index-c9b2eeec.js b/build/assets/index-c9b2eeec.js
diff --git a/build/index.html b/build/index.html
@@ -22,7 +22,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Second Brain</title>
-    <script type="module" crossorigin src="/assets/index-c9b2eeec.js"></script>
+    <script type="module" crossorigin src="/assets/index-1b48a01d.js"></script>
     <link rel="stylesheet" href="/assets/index-43d18007.css">
   </head>
   <body style="background: #000">

diff --git a/package.json b/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.51",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
-    "@mui/base": "^5.0.0-beta.0",
-    "@mui/material": "^5.11.16",
-    "@mui/styled-engine-sc": "^5.11.11",
-    "@mui/system": "^5.13.2",
-    "@mui/x-date-pickers": "^6.4.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "^5.0.0-beta.8",
+    "@mui/material": "^5.14.1",
+    "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/system": "^5.14.1",
+    "@mui/x-date-pickers": "^6.10.0",
     "@react-three/drei": "9.57.0",
     "@react-three/fiber": "^8.11.5",
     "@react-three/postprocessing": "^2.7.0",
@@ -140,8 +140,8 @@
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.182",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@types/react-input-mask": "3.0.2",
     "@types/styled-components": "^5.1.25",
     "@types/three": "^0.150.2",
@@ -169,7 +169,7 @@
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-polyfill-node": "^0.12.0",
-    "typescript": "^4.4.2",
+    "typescript": "4.9.5",
     "vite": "^4.3.9",
     "vite-compatible-readable-stream": "^3.6.1",
     "vite-plugin-eslint": "^1.8.1",

diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx
@@ -8,9 +8,9 @@ import { toast } from 'react-toastify'
 import * as sphinx from 'sphinx-bridge-kevkevinpal'
 import styled from 'styled-components'
 import { Button } from '~/components/Button'
-import { BaseModal } from '~/components/Modal'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
+import { BaseModal } from '~/components/Modal'
 import {
   DOCUMENT,
   GITHUB_REPOSITORY,
@@ -33,8 +33,8 @@ import { getLSat } from '~/utils/getLSat'
 import { executeIfProd } from '~/utils/tests'
 import { timeToMilliseconds } from '~/utils/timeToMilliseconds'
 import { useDataStore } from '../../stores/useDataStore/index'
-import StyledSelect from '../Select'
 import { ToastMessage } from '../common/Toast/toastMessage'
+import StyledSelect from '../Select'
 import { Document } from './Document'
 import { GithubRepository } from './GithubRepository'
 import { RSSFeed } from './RSSFeed'
@@ -339,6 +339,7 @@ export const AddNodeModal = () => {
             {!activeType ? (
               <Stack
                 alignItems={{ xs: 'stretch', sm: 'center' }}
+                component="div"
                 direction={{ xs: 'column', sm: 'row' }}
                 justifyContent="space-between"
                 spacing={2}

diff --git a/src/components/App/FooterMenu/index.tsx b/src/components/App/FooterMenu/index.tsx
@@ -66,7 +66,7 @@ export const FooterMenu = () => {
         <ButtonsWrapper>
           <SlideWrapper>
             <Slide direction="up" in={isOpened} mountOnEnter unmountOnExit>
-              <Stack alignItems="flex-end" spacing={2}>
+              <Stack alignItems="flex-end" component="div" spacing={2}>
                 <ActionButton onClick={() => handleOpenSidebar('about')}>
                   <Text>About</Text>
                   <IconWrapper>

diff --git a/src/components/App/Helper/ActionsMenu/index.tsx b/src/components/App/Helper/ActionsMenu/index.tsx
@@ -1,5 +1,5 @@
-import { Chip, styled } from '@mui/material'
-import { Stack } from '@mui/system'
+import { Chip, Stack, styled } from '@mui/material'
+
 import { TABS, TabsVariants } from '../const'
 
 type Props = { onChange: (value: TabsVariants) => void; active: TabsVariants | null }
@@ -11,9 +11,15 @@ export const ActionsMenu = ({ onChange, active }: Props) => {
 
   if (!active) {
     return (
-      <Stack flexGrow={1} id="cy-helper-menu" justifyContent="flex-end" mb={1} spacing={1}>
+      <Stack component="div" flexGrow={1} id="cy-helper-menu" justifyContent="flex-end" mb={1} spacing={1}>
         {TABS.map((tab, index) => (
-          <Chip key={tab.value} id={tab.value} label={tab.label} onClick={(e) => handleSelect(e, index)} />
+          <Chip
+            key={tab.value}
+            component="div"
+            id={tab.value}
+            label={tab.label}
+            onClick={(e) => handleSelect(e, index)}
+          />
         ))}
       </Stack>
     )
@@ -25,6 +31,7 @@ export const ActionsMenu = ({ onChange, active }: Props) => {
         <Chip
           key={tab.value}
           color={tab.value === active ? 'primary' : 'default'}
+          component="div"
           id={tab.value}
           label={tab.label}
           onClick={(e) => handleSelect(e, index)}

diff --git a/src/components/App/Helper/AskQuestion/index.tsx b/src/components/App/Helper/AskQuestion/index.tsx
@@ -136,7 +136,7 @@ export const AskQuestion = () => {
     <>
       <Flex>
         <Flex>
-          <FormControl>
+          <FormControl component="div">
             <StyledInput id="select-label" size="small">
               Expertise level
             </StyledInput>
@@ -150,7 +150,7 @@ export const AskQuestion = () => {
               value={selectedValue}
             >
               {names.map((name) => (
-                <MenuItem key={name} value={name}>
+                <MenuItem key={name} component="li" value={name}>
                   {name}
                 </MenuItem>
               ))}

diff --git a/src/components/App/Helper/HelperContent.tsx b/src/components/App/Helper/HelperContent.tsx
@@ -71,7 +71,7 @@ const ContentWrapper = styled('div')(() => ({
 }))
 
 const CloseButton = styled((props: IconButtonProps) => (
-  <IconButton size="small" {...props}>
+  <IconButton component="button" size="small" {...props}>
     <MdClose />
   </IconButton>
 ))(() => ({

diff --git a/src/components/App/Helper/SentimentAnalysis/index.tsx b/src/components/App/Helper/SentimentAnalysis/index.tsx
@@ -70,9 +70,9 @@ export const SentimentAnalysis = memo(() => {
   const ref = useRef<HTMLDivElement>(null)
 
   return (
-    <Stack flexGrow={1} p={1} spacing={2} width="100%">
+    <Stack component="div" flexGrow={1} p={1} spacing={2} width="100%">
       {isLoading && (
-        <Stack alignItems="center" flexGrow={1} p={4} spacing={2} width="100%">
+        <Stack alignItems="center" component="div" flexGrow={1} p={4} spacing={2} width="100%">
           <PropagateLoader color={colors.white} />
         </Stack>
       )}
@@ -95,6 +95,7 @@ export const SentimentAnalysis = memo(() => {
         value={value}
       />
       <Slider
+        component="div"
         getAriaValueText={(v) => moment(v).format('L')}
         id="cy-sentiment-analysis-slider"
         marks

diff --git a/src/components/App/Providers/index.tsx b/src/components/App/Providers/index.tsx
@@ -1,19 +1,23 @@
-import { ThemeProvider, createTheme } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material'
+import createPalette from '@mui/material/styles/createPalette'
 
+import { StyledEngineProvider } from '@mui/material/styles'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { FC, PropsWithChildren } from 'react'
 import { ThemeProvider as StyleThemeProvider } from 'styled-components'
 import { colors } from '~/utils/colors'
 import { breakpoints } from '~/utils/media'
 
-export const appTheme = createTheme({
-  palette: {
-    primary: {
-      main: colors.primaryButton,
-    },
-    mode: 'dark',
+const palette = createPalette({
+  mode: 'dark',
+  primary: {
+    main: colors.primaryButton,
   },
+})
+
+export const appTheme = createTheme({
+  palette,
   breakpoints: {
     values: {
       xs: breakpoints.small,
@@ -27,6 +31,7 @@ export const appTheme = createTheme({
 
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => (
   <ThemeProvider theme={appTheme}>
+    <StyledEngineProvider injectFirst />
     <StyleThemeProvider theme={appTheme}>
       <LocalizationProvider dateAdapter={AdapterMoment}>{children}</LocalizationProvider>
     </StyleThemeProvider>

diff --git a/src/components/App/SecondarySidebar/Sentiment/index.tsx b/src/components/App/SecondarySidebar/Sentiment/index.tsx
@@ -54,7 +54,7 @@ export const Sentiment = () => {
     <ChartWrapper align="flex-start" direction="column" id="cy-sentiment-chart-wrapper" justify="flex-end">
       <Text className="title">Sentiment chart</Text>
       {isLoading && (
-        <Stack alignItems="center" flexGrow={1} p={4} spacing={2} width="100%">
+        <Stack alignItems="center" component="div" flexGrow={1} p={4} spacing={2} width="100%">
           <PropagateLoader color={colors.white} />
         </Stack>
       )}

diff --git a/src/components/App/SecondarySidebar/SourcesView/QueuedSources/Table/index.tsx b/src/components/App/SecondarySidebar/SourcesView/QueuedSources/Table/index.tsx
@@ -11,7 +11,7 @@ import { approveRadarData, deleteRadarData } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { Sources } from '~/types'
 import { colors } from '~/utils/colors'
-import { TWITTER_LINK, sourcesMapper } from '../../constants'
+import { sourcesMapper, TWITTER_LINK } from '../../constants'
 import { Props } from '../../types'
 
 const Table: React.FC<Props> = ({ data }) => {
@@ -55,9 +55,9 @@ const Table: React.FC<Props> = ({ data }) => {
   return !data?.length ? (
     <Text>There is not any results for selected filters</Text>
   ) : (
-    <MaterialTable>
-      <TableHead>
-        <TableRow>
+    <MaterialTable component="table">
+      <TableHead component="thead">
+        <TableRow component="tr">
           <StyledTableCell>Type</StyledTableCell>
           <StyledTableCell>Source</StyledTableCell>
           <StyledTableCell />
@@ -66,7 +66,7 @@ const Table: React.FC<Props> = ({ data }) => {
       {data?.length && (
         <tbody>
           {data?.map((i: Sources) => (
-            <TableRow key={i.source}>
+            <TableRow key={i.source} component="tr">
               <StyledTableCell>{sourcesMapper[i.source_type]}</StyledTableCell>
               <StyledTableCell width="268px">
                 {i.source_type === 'twitter_handle' ? (

diff --git a/src/components/App/SecondarySidebar/SourcesView/Sources/Table/index.tsx b/src/components/App/SecondarySidebar/SourcesView/Sources/Table/index.tsx
@@ -12,7 +12,7 @@ import { deleteRadarData, putRadarData } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { RadarRequest, Sources } from '~/types'
 import { colors } from '~/utils/colors'
-import { TWITTER_LINK, sourcesMapper } from '../../constants'
+import { sourcesMapper, TWITTER_LINK } from '../../constants'
 
 type Props = {
   data: Sources[] | undefined
@@ -61,17 +61,17 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
   return !data?.length ? (
     <Text>There is not any results for selected filters</Text>
   ) : (
-    <MaterialTable aria-label="a dense table" id="sources-table" size="small">
-      <TableHead>
-        <TableRow>
+    <MaterialTable aria-label="a dense table" component="table" id="sources-table" size="small">
+      <TableHead component="thead">
+        <TableRow component="tr">
           <StyledTableCell>Type</StyledTableCell>
           <StyledTableCell align="left">Source</StyledTableCell>
           {canEdit && <StyledTableCell align="left" />}
         </TableRow>
       </TableHead>
-      <TableBody>
+      <TableBody component="tbody">
         {data?.map((i: Sources) => (
-          <TableRow key={i.source}>
+          <TableRow key={i.source} component="tr">
             <StyledTableCell align="left">{sourcesMapper[i.source_type]}</StyledTableCell>
             <StyledTableCell align="left">
               <ConditionalWrapper

diff --git a/src/components/App/SecondarySidebar/SourcesView/index.tsx b/src/components/App/SecondarySidebar/SourcesView/index.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react'
-import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import { Sources } from './Sources'
-import { colors } from '~/utils/colors'
-import { QueuedSources } from './QueuedSources'
+import Tabs from '@mui/material/Tabs'
+import * as React from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+import { QueuedSources } from './QueuedSources'
+import { Sources } from './Sources'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -45,7 +45,7 @@ export const SourcesView = () => {
 
   return (
     <Wrapper direction="column">
-      <Tabs aria-label="basic tabs example" onChange={handleChange} value={value}>
+      <Tabs aria-label="basic tabs example" component="div" onChange={handleChange} value={value}>
         <StyledTab label="Sources table" {...a11yProps(0)} />
         <StyledTab color={colors.white} label="Queued sources" {...a11yProps(1)} />
       </Tabs>

diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -114,10 +114,10 @@ export const Episode = ({ boostCount, date, description, id, imageUrl, type, onC
         </Flex>
         {isSelected && (
           <Flex align="center" className="player-controls" direction="row" onClick={(e) => e.stopPropagation()}>
-            <IconButton onClick={() => setIsPlaying(true)} size="medium">
+            <IconButton component="button" onClick={() => setIsPlaying(true)} size="medium">
               <FaPlay size={14} />
             </IconButton>
-            <IconButton onClick={() => setIsPlaying(false)} size="medium">
+            <IconButton component="button" onClick={() => setIsPlaying(false)} size="medium">
               <FaPause size={14} />
             </IconButton>
           </Flex>

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "strictNullChecks": true,
     "jsx": "react-jsx"
   },
   "files": ["./vite-env.d.ts"],