Fix react-future warnings and styletron warnings

src/components/Dialog/SettingsDialog.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { styled, withStyleDeep } from 'styletron-react';
 import { Settings } from '../constants/Settings';
 import { StyleProps } from '../../util/style';
 import { Dialog } from './Dialog';
@@ -84,7 +84,7 @@ const SettingInfoText = styled('span', {
   userSelect: 'none',
 });
 
-const SettingInfoSubtext = styled(SettingInfoText, {
+const SettingInfoSubtext = withStyleDeep(SettingInfoText, {
   fontSize: '10pt',
 });
 

src/components/documentation/EnumerationBrief.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { withStyleDeep } from 'styletron-react';
 
 import EnumerationDocumentation from '../../state/State/Documentation/EnumerationDocumentation';
 import { StyleProps } from '../../util/style';
@@ -15,7 +15,7 @@ export interface EnumerationBriefProps extends StyleProps, ThemeProps {
 
 type Props = EnumerationBriefProps;
 
-const StyledEnumerationName = styled(FileName, ({ theme }: ThemeProps) => ({
+const StyledEnumerationName = withStyleDeep(FileName, ({ theme }: ThemeProps) => ({
   display: 'block',
   marginBottom: `${theme.itemPadding}px`,
   ':last-child': {

src/components/documentation/FileBrief.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { withStyleDeep } from 'styletron-react';
 
 import FileDocumentation from '../../state/State/Documentation/FileDocumentation';
 import { StyleProps } from '../../util/style';
@@ -14,7 +14,7 @@ export interface FileBriefProps extends StyleProps, ThemeProps {
 
 type Props = FileBriefProps;
 
-const StyledFileName = styled(FileName, ({ theme }: ThemeProps) => ({
+const StyledFileName = withStyleDeep(FileName, ({ theme }: ThemeProps) => ({
   display: 'block',
   marginBottom: `${theme.itemPadding}px`,
   ':last-child': {

src/components/documentation/ModuleBrief.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { withStyleDeep } from 'styletron-react';
 
 import ModuleDocumentation from '../../state/State/Documentation/ModuleDocumentation';
 import { StyleProps } from '../../util/style';
@@ -13,7 +13,7 @@ export interface FileBriefProps extends StyleProps, ThemeProps {
 
 type Props = FileBriefProps;
 
-const StyledModuleName = styled(ModuleName, ({ theme }: ThemeProps) => ({
+const StyledModuleName = withStyleDeep(ModuleName, ({ theme }: ThemeProps) => ({
   display: 'block',
   marginBottom: `${theme.itemPadding}px`,
   ':last-child': {

src/components/documentation/RootDocumentation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { styled, withStyleDeep } from 'styletron-react';
 import Dict from '../../util/objectOps/Dict';
 import Documentation from '../../state/State/Documentation';
 import DocumentationLocation from '../../state/State/Documentation/DocumentationLocation';
@@ -40,7 +40,7 @@ const Container = styled('div', {
   width: '100%',
 });
 
-const StyledInput = styled(Input, ({ theme }: ThemeProps) => ({
+const StyledInput = withStyleDeep(Input, ({ theme }: ThemeProps) => ({
   borderLeft: 'none',
   borderRight: 'none',
   borderTop: 'none',

src/components/documentation/StructureBrief.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from 'styletron-react';
+import { withStyleDeep } from 'styletron-react';
 
 import StructureDocumentation from '../../state/State/Documentation/StructureDocumentation';
 import { StyleProps } from '../../util/style';
@@ -15,7 +15,7 @@ export interface StructureBriefProps extends StyleProps, ThemeProps {
 
 type Props = StructureBriefProps;
 
-const StyledStructureName = styled(FileName, ({ theme }: ThemeProps) => ({
+const StyledStructureName = withStyleDeep(FileName, ({ theme }: ThemeProps) => ({
   display: 'block',
   marginBottom: `${theme.itemPadding}px`,
   ':last-child': {

src/index.tsx

@@ -25,7 +25,7 @@ const root = createRoot(reactRoot);
 root.render(
   <StyletronProvider value={engine} debug={debug} debugAfterHydration>
     <ReduxProvider store={store}>
-      <BrowserRouter>
+      <BrowserRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }}>
         <App />
       </BrowserRouter>
     </ReduxProvider>

src/lms/AssignmentsView.tsx

@@ -53,7 +53,7 @@ const Container = styled('div', ({ $theme }: { $theme: Theme }) => ({
   padding: `${$theme.itemPadding * 2}px`,
 }));
 
-const Search = styled(Input, ({ theme }: ThemeProps) => ({
+const Search = withStyleDeep(Input, ({ theme }: ThemeProps) => ({
   width: '100%',
   marginBottom: `${theme.itemPadding * 2}px`,
 }));

src/lms/plugin/BriefAssignmentsView.tsx

@@ -32,7 +32,7 @@ const Container = styled('div', ({ $theme }: { $theme: Theme }) => ({
   padding: `${$theme.itemPadding * 2}px`,
 }));
 
-const Search = styled(Input, ({ theme }: ThemeProps) => ({
+const Search = withStyleDeep(Input, ({ theme }: ThemeProps) => ({
   width: '100%',
   marginBottom: `${theme.itemPadding * 2}px`,
 }));