Upgrade dependencies

src/App.tsx

@@ -4,8 +4,8 @@ import About from './components/About.tsx';
 import Editor from './components/Editor';
 import usePreference from './hooks/usePreference.ts';
 import themes, { Themes } from './style/themes.ts';
-import { loadFromBytebin } from './util/storage';
 import { useQueryRouting } from './util/constants';
+import { loadFromBytebin } from './util/storage';
 
 const INITIAL = Symbol();
 const LOADING = Symbol();
@@ -33,6 +33,7 @@ export default function App() {
 
   useEffect(() => {
     if (pasteId && state === INITIAL) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setState(LOADING);
       setContent('Loading...');
 

src/components/About.tsx

@@ -180,6 +180,10 @@ const AboutPanel = styled.div`
   span {
     color: ${props => props.theme.logo};
   }
+
+  a {
+    color: ${props => props.theme.logo};
+  }
 `;
 
 const BannerContainer = styled.div`

src/components/Editor.tsx

@@ -48,6 +48,7 @@ export default function Editor({
 
   useEffect(() => {
     if (contentType) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLanguage(contentType);
     }
   }, [contentType]);
@@ -84,7 +85,7 @@ export default function Editor({
         fontSize={fontSize}
         readOnly={readOnly}
         wordWrap={wordWrap}
-        resetFunction={resetFunction}
+        resetFunctionRef={resetFunction}
       />
     </>
   );

src/components/EditorControls.tsx

@@ -4,9 +4,9 @@ import { RefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
+import { useQueryRouting } from '../util/constants';
 import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
-import { useQueryRouting } from '../util/constants';
 import Button from './Button';
 import { ResetFunction } from './Editor';
 import MenuButton from './MenuButton';
@@ -44,6 +44,7 @@ export default function EditorControls({
   const [recentlySaved, setRecentlySaved] = useState<boolean>(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecentlySaved(false);
   }, [actualContent, language]);
 

src/components/EditorTextArea.tsx

@@ -5,14 +5,7 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import {
-  MutableRefObject,
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import themes, { Theme } from '../style/themes';
 
@@ -62,7 +55,7 @@ export interface EditorTextAreaProps {
   fontSize: number;
   readOnly: boolean;
   wordWrap: boolean;
-  resetFunction: MutableRefObject<ResetFunction | null>;
+  resetFunctionRef: RefObject<ResetFunction | null>;
 }
 
 export default function EditorTextArea({
@@ -73,7 +66,7 @@ export default function EditorTextArea({
   fontSize,
   readOnly,
   wordWrap,
-  resetFunction,
+  resetFunctionRef,
 }: EditorTextAreaProps) {
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
   const [monaco, setMonaco] = useState<Monaco>();
@@ -129,7 +122,7 @@ export default function EditorTextArea({
     setEditor(editor);
     setMonaco(monaco);
 
-    resetFunction.current = () => {
+    resetFunctionRef.current = () => {
       editor.setValue('');
       editor.focus();
     };

src/components/MenuButton.tsx

@@ -132,6 +132,7 @@ const Menu = styled.ul`
 
   > li {
     padding: 0em 1em 0.05em 1em;
+    color: ${props => props.theme.primary};
   }
 
   > li:hover {

src/style/themes.ts

@@ -1,9 +1,14 @@
 import type { editor } from 'monaco-editor';
 
 import { CatppuccinFlavor, ColorFormat, flavors } from '@catppuccin/palette';
+
+// @ts-expect-error Alias import added in vite.config.ts
 import dracula from 'monaco-themes/themes/Dracula.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import monokai from 'monaco-themes/themes/Monokai.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedDark from 'monaco-themes/themes/Solarized-dark.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedLight from 'monaco-themes/themes/Solarized-light.json';
 
 type Color = `#${string}`;
@@ -87,7 +92,7 @@ const themes: Themes = {
     secondary: '#022550',
     highlight: '#36368c',
     background: '#ffffff',
-    logo: '#022550',
+    logo: '#00a2ff',
     lightOrDark: 'light',
 
     highlightedLine: {

src/util/constants.ts

@@ -1,5 +1,5 @@
 export const bytebinUrl =
   import.meta.env.VITE_BYTEBIN_URL || 'https://api.pastes.dev/';
 export const postUrl = bytebinUrl + 'post';
-export const useQueryRouting = 
+export const useQueryRouting =
   import.meta.env.VITE_USE_QUERY_ROUTING === 'true';