Add some more experimental code

own-react-experiments/src/App.tsx

@@ -1,22 +1,7 @@
-import { Button, CssBaseline, ThemeProvider } from "@mui/material"
-import SettingsPage from "./pages/SettingsPage"
-import { koolaste_temat, standard_temat } from "./theme"
-import { useState } from "react";
+import TestSomeComponentsPage from "./pages/TestSomeComponentsPage";
 
 function App() {
-  const [notheme, setNotheme] = useState(true);
-
-  return (
-    <>
-      <Button onClick={() => { setNotheme(!notheme) }}>What</Button>
-      {notheme ?
-        <><SettingsPage /></> :
-        <ThemeProvider theme={koolaste_temat}>
-          <CssBaseline />
-          <SettingsPage />
-        </ThemeProvider>}
-    </>
-  )
+  return <TestSomeComponentsPage />;
 }
 
-export default App
+export default App;

own-react-experiments/src/main.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

own-react-experiments/src/pages/SettingsPage.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, List, ListItemButton, ListItemText, Typography } from "@mui/material"
+import {
+  Box,
+  Button,
+  List,
+  ListItemButton,
+  ListItemText,
+  Typography,
+} from "@mui/material";
 
 function SettingsPage() {
   return (
@@ -14,7 +21,7 @@ function SettingsPage() {
         </List>
       </Box>
     </>
-  )
+  );
 }
 
-export default SettingsPage
+export default SettingsPage;

own-react-experiments/src/pages/TestSomeComponentsPage.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, Link, Stack, Typography } from "@mui/material";
+
+// Trying to mimic https://www.transportstyrelsen.se/sv/vagtrafik/Fordon/
+
+function TestSomeComponentsPage() {
+  return (
+    <>
+      <Box maxWidth={455} margin={15}>
+        <Typography variant="h3">Fordon</Typography>
+        <Typography variant="subtitle1">
+          På de här sidorna kan du hitta information inom fordonsområdet. Du
+          hittar bland annat information om betalning av skatter och avgifter,
+          hur man går tillväga vid ägarbyte och vad man behöver tänka på vid av-
+          och påställning av fordon.
+        </Typography>
+        <Typography variant="body2">
+          Välj den sida som intresserar dig i menyn till vänster. Om du inte
+          hittar det du letar efter så kan du använda vår sökfunktion.
+        </Typography>
+        <Typography variant="h4">
+          Populära e-tjänster inom fordonsområdet
+        </Typography>
+        <Stack spacing={2}>
+          <Button variant="contained">
+            Fordonsuppgifter - sök med registreringsnummer
+          </Button>
+          <Button variant="contained">Fordonsuppgifter - dina fordon</Button>
+          <Button variant="contained">Ställ av / ställ på fordon</Button>
+          <Button variant="contained">Fordonets skulder</Button>
+          <Button variant="contained">
+            Se uppgifter om din trängselskatt eller infrastrukturavgift
+          </Button>
+          <Button variant="contained">Ägarbyte</Button>
+          <Button variant="outlined">Alla e-tjänster inom vägtrafik</Button>
+        </Stack>
+        <Typography variant="h4">Sms-tjänsten Vem äger fordonet?</Typography>
+        <Typography variant="body1" component="div">
+          Via sms-tjänsten{" "}
+          <Box display="inline" fontWeight="bold">
+            Vem äger fordonet?
+          </Box>{" "}
+          kan du på ett enkelt sätt få fordons- och ägaruppgifter direkt till
+          din mobiltelefon genom att du skickar registreringsnumret till{" "}
+          <Box display="inline" fontWeight="bold">
+            71640
+          </Box>
+          . Tjänsten är kostnadsfri (teleoperatörens avgift kan tillkomma).
+        </Typography>
+        <Link variant="body1">Sms-tjänsten Vem äger fordonet?</Link>
+        <Typography variant="h4">
+          Transportstyrelsens app – Mina fordon
+        </Typography>
+        <Typography variant="body1">
+          Ladda ner vår <Link>app Mina fordon</Link> för att snabbt uträtta dina
+          fordonsärenden.
+        </Typography>
+      </Box>
+    </>
+  );
+}
+
+export default TestSomeComponentsPage;

own-react-experiments/src/pages/ThemeWrappingPage.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import SettingsPage from "./SettingsPage";
+import { Button, CssBaseline, ThemeProvider } from "@mui/material";
+import { koolaste_temat } from "../theme";
+
+function ThemeWrappingPage() {
+  const [notheme, setNotheme] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setNotheme(!notheme);
+        }}
+      >
+        What
+      </Button>
+      {notheme ? (
+        <>
+          <SettingsPage />
+        </>
+      ) : (
+        <ThemeProvider theme={koolaste_temat}>
+          <CssBaseline />
+          <SettingsPage />
+        </ThemeProvider>
+      )}
+    </>
+  );
+}
+
+export default ThemeWrappingPage;

own-react-experiments/src/pages/UnitConverterPage.tsx

@@ -0,0 +1,15 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+
+function UnitConverterPage() {
+  return (
+    <Box>
+      <Typography variant="h1">The miracle unit converter!</Typography>
+      <Typography variant="body1">
+        Use the controls to your advantage!
+      </Typography>
+    </Box>
+  );
+}
+
+export default UnitConverterPage;

own-react-experiments/src/theme.ts

@@ -28,7 +28,10 @@ export const koolaste_temat: Theme = createTheme(
                 default: "#aaaaff",
                 paper: "#ffffff"
             }
-        }
+        },
+        shape: {
+            borderRadius: 20
+        },
     });
 
 export const standard_temat: Theme = createTheme();