Added styled components

- also removed existing css
  - left the capabilities included

src/index.css

@@ -1,11 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}

src/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import { createGlobalStyle } from "styled-components";
 import App from "./App";
 import { store } from "./app/store";
-import "./index.css";
 import "./infrastructure/i18n/init";
 import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@@ -12,8 +12,23 @@ import reportWebVitals from "./reportWebVitals";
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  }
+`;
+
 root.render(
   <React.StrictMode>
+    <GlobalStyle />
     <Provider store={store}>
       <OidcProvider>
         <Loader>

src/infrastructure/navbar/Navbar.css

@@ -1,3 +0,0 @@
-nav a {
-  padding-right: 10px;
-}

src/infrastructure/navbar/Navbar.tsx

@@ -3,18 +3,18 @@ import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import styled from "styled-components";
 import { ROUTE_KEYS } from "../../Routes";
 import { Config } from "../config";
-import "./Navbar.css";
-type Props = {};
+type Props = { className?: string };
 
-export const Navbar: FunctionComponent<Props> = () => {
+const Navbar: FunctionComponent<Props> = ({ className }) => {
   const [translate, i18n] = useTranslation();
   const { login, logout, isAuthenticated } = useOidc();
   const { accessTokenPayload } = useOidcAccessToken();
   const { home, about, counter } = ROUTE_KEYS;
   return (
-    <>
+    <div className={className}>
       <h1>{translate("navBar.intro")}</h1>
       <p>
         {/* trans can also be used to translate */}
@@ -48,6 +48,14 @@ export const Navbar: FunctionComponent<Props> = () => {
         <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />
       </nav>
-    </>
+    </div>
   );
 };
+
+const StyledNavBar = styled(Navbar)`
+  nav a {
+    padding-right: 10px;
+  }
+`;
+
+export { StyledNavBar as Navbar };

src/infrastructure/navbar/TestComponent.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent } from "react";
+import styled from "styled-components";
+
+type Props = {};
+
+const TestComponent: FunctionComponent<Props> = () => {
+  return <h1>TestComponent</h1>;
+};
+
+const StyledTestComponent = styled(TestComponent)``;
+
+export { StyledTestComponent as TestComponent };