Switch from bootstrap to semantic-ui

It just looks way nice to me, even though there's still a hacky
workaround required
(Semantic-Org/Semantic-UI-CSS#75).

package.json

@@ -11,10 +11,11 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.1.0",
-    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
     "react-router": "^6.3.0",
     "react-scripts": "5.0.1",
+    "semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git",
+    "semantic-ui-react": "^2.1.3",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

src/custom.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  const content: any;
+  export default content;
+}

src/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "semantic-ui-css/semantic.min.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>