material ui out

package.json

@@ -50,5 +50,8 @@
     "ts-auto-guard": "^4.1.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@vectopus/atlas-icons": "^0.0.7"
   }
 }

services/cms/next.config.js

@@ -46,6 +46,7 @@ const config = {
       transform: "lodash/{{member}}",
     },
   },
+  transpilePackages: ["@vectopus/atlas-icons-react"],
 }
 
 if (process.env.NEXT_PUBLIC_BASE_PATH) {

services/cms/package.json

@@ -31,6 +31,7 @@
     "@mui/material": "^5.14.2",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.32.1",
+    "@vectopus/atlas-icons-react": "github:rage/Atlas-icons-react#d310057c60f4f011306c35ae9caf025c5a09e41b",
     "@wordpress/base-styles": "^4.29.0",
     "@wordpress/block-editor": "^12.6.0",
     "@wordpress/block-library": "^8.15.0",

services/cms/src/components/SerializeGutenbergModal.tsx

@@ -1,10 +1,9 @@
-import { css } from "@emotion/css"
-import { Dialog, Paper } from "@mui/material"
 import { BlockInstance, serialize } from "@wordpress/blocks"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import Button from "../shared-module/components/Button"
+import Dialog from "../shared-module/components/Dialog"
 import MonacoEditor from "../shared-module/components/monaco/MonacoEditor"
 
 export interface SerializeGutenbergModalProps {
@@ -23,19 +22,13 @@ const SerializeGutenbergModal: React.FC<React.PropsWithChildren<SerializeGutenbe
         {t("serialize-to-html")}
       </Button>
       {/* eslint-disable-next-line i18next/no-literal-string */}
-      <Dialog maxWidth="xl" open={serialized !== null} onClose={() => setSerialized(null)}>
-        <Paper
-          className={css`
-            overflow: hidden;
-          `}
-        >
-          <MonacoEditor
-            height="90vh"
-            width="80vw"
-            defaultLanguage="html"
-            defaultValue={serialized ?? undefined}
-          />
-        </Paper>
+      <Dialog open={serialized !== null} onClose={() => setSerialized(null)}>
+        <MonacoEditor
+          height="90vh"
+          width="80vw"
+          defaultLanguage="html"
+          defaultValue={serialized ?? undefined}
+        />
       </Dialog>
     </div>
   )

services/cms/src/pages/_app.tsx

@@ -1,5 +1,4 @@
 import { config } from "@fortawesome/fontawesome-svg-core"
-import { ThemeProvider } from "@mui/material"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import Head from "next/head"
@@ -10,7 +9,6 @@ import { LoginStateContextProvider } from "../shared-module/contexts/LoginStateC
 import useLanguage from "../shared-module/hooks/useLanguage"
 import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
-import muiTheme from "../shared-module/styles/muiTheme"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 import "../styles/Gutenberg/style.scss"
@@ -52,16 +50,14 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
         </Head>
       )}
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={muiTheme}>
-          <GlobalStyles />
-          <LocalStyles />
-          <LoginStateContextProvider>
-            {/* @ts-expect-error: hideBreadcrumbs is an addtional property on Component */}
-            <Layout hideBreadcrumbs={Component.hideBreadcrumbs}>
-              <Component {...pageProps} />
-            </Layout>
-          </LoginStateContextProvider>
-        </ThemeProvider>
+        <GlobalStyles />
+        <LocalStyles />
+        <LoginStateContextProvider>
+          {/* @ts-expect-error: hideBreadcrumbs is an addtional property on Component */}
+          <Layout hideBreadcrumbs={Component.hideBreadcrumbs}>
+            <Component {...pageProps} />
+          </Layout>
+        </LoginStateContextProvider>
       </QueryClientProvider>
     </>
   )

services/course-material/next.config.js

@@ -47,6 +47,7 @@ const config = {
       transform: "lodash/{{member}}",
     },
   },
+  transpilePackages: ["@vectopus/atlas-icons-react"],
 }
 
 if (process.env.NEXT_PUBLIC_BASE_PATH) {

services/course-material/package.json

@@ -26,6 +26,7 @@
     "@mui/material": "^5.14.2",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.32.1",
+    "@vectopus/atlas-icons-react": "github:rage/Atlas-icons-react#d310057c60f4f011306c35ae9caf025c5a09e41b",
     "axios": "^1.4.0",
     "citation-js": "^0.6.8",
     "date-fns": "^2.30.0",

services/course-material/src/components/FeedbackHandler.tsx

@@ -1,5 +1,4 @@
 import { css } from "@emotion/css"
-import { Menu, MenuItem } from "@mui/material"
 import React, { useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -85,35 +84,58 @@ const FeedbackHandler: React.FC<React.PropsWithChildren<Props>> = ({
             z-index: 1100;
           `}
         >
-          <Menu
-            open={feedbackMenuAnchor !== null}
-            anchorEl={feedbackMenuAnchor}
-            onClose={() => setFeedbackMenuAnchor(null)}
-          >
-            <MenuItem
-              onClick={() => {
-                setFeedbackMenuAnchor(null)
-                setFeedbackDialogOpen(true)
-                setLastSelection("")
-              }}
-            >
-              {t("written-feedback")}
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                setFeedbackMenuAnchor(null)
-                setEditProposalDialogOpen(true)
-                onEnterEditProposalMode()
-              }}
+          {feedbackMenuAnchor !== null && (
+            <div
+              className={css`
+                display: flex;
+                flex-direction: column;
+                background: white;
+                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+                padding: 10px;
+                position: fixed;
+                bottom: 20px;
+                right: 25px;
+                z-index: 1110;
+              `}
             >
-              {t("improve-material")}
-            </MenuItem>
-          </Menu>
+              <Button
+                onClick={() => {
+                  setFeedbackMenuAnchor(null)
+                  setFeedbackDialogOpen(true)
+                  setLastSelection("")
+                }}
+                variant={"icon"}
+                transform="capitalize"
+                size={"small"}
+              >
+                {t("written-feedback")}
+              </Button>
+              <Button
+                onClick={() => {
+                  setFeedbackMenuAnchor(null)
+                  setEditProposalDialogOpen(true)
+                  onEnterEditProposalMode()
+                }}
+                variant={"icon"}
+                transform="capitalize"
+                size={"small"}
+              >
+                {t("improve-material")}
+              </Button>
+            </div>
+          )}
+
           <Button
             className="give-feedback-button"
             variant={"primary"}
             size={"medium"}
-            onClick={(ev) => setFeedbackMenuAnchor(ev.currentTarget)}
+            onClick={(ev) => {
+              if (feedbackMenuAnchor !== null) {
+                setFeedbackMenuAnchor(null)
+              } else {
+                setFeedbackMenuAnchor(ev.currentTarget)
+              }
+            }}
           >
             {t("give-feedback")}
           </Button>

services/course-material/src/components/modals/ExamTimeOverModal.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable i18next/no-literal-string */
 
 import { css } from "@emotion/css"
-import { Dialog } from "@mui/material"
 import React, { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import Button from "../../shared-module/components/Button"
+import Dialog from "../../shared-module/components/Dialog"
 
 export interface ExamTimeOverModalProps {
   disabled: boolean

services/course-material/src/pages/_app.tsx

@@ -1,5 +1,4 @@
 import { config } from "@fortawesome/fontawesome-svg-core"
-import { ThemeProvider } from "@mui/material"
 import { QueryClientProvider } from "@tanstack/react-query"
 import type { AppProps } from "next/app"
 import React, { useEffect } from "react"
@@ -9,7 +8,6 @@ import { LoginStateContextProvider } from "../shared-module/contexts/LoginStateC
 import useLanguage from "../shared-module/hooks/useLanguage"
 import { queryClient } from "../shared-module/services/appQueryClient"
 import GlobalStyles from "../shared-module/styles/GlobalStyles"
-import muiTheme from "../shared-module/styles/muiTheme"
 import generateWebVitalsReporter from "../shared-module/utils/generateWebVitalsReporter"
 import initI18n from "../shared-module/utils/initI18n"
 
@@ -45,14 +43,12 @@ const MyApp: React.FC<React.PropsWithChildren<AppProps>> = ({ Component, pagePro
 
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={muiTheme}>
-        <GlobalStyles />
-        <LoginStateContextProvider>
-          <Layout>
-            <Component {...pageProps} />
-          </Layout>
-        </LoginStateContextProvider>
-      </ThemeProvider>
+      <GlobalStyles />
+      <LoginStateContextProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </LoginStateContextProvider>
     </QueryClientProvider>
   )
 }

services/example-exercise/next.config.js

@@ -44,6 +44,8 @@ const config = {
       transform: "lodash/{{member}}",
     },
   },
+
+  transpilePackages: ["@vectopus/atlas-icons-react"],
 }
 
 if (process.env.NEXT_PUBLIC_BASE_PATH) {