Test #1

frontend/src/components/AsideMenuLayer.tsx

@@ -32,9 +32,7 @@ export default function AsideMenuLayer({
   };
 
   return (
-    <aside
+<aside id='asideMenu' style={{ borderRadius: 0 }} className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden rounded-none`}>
-      id='asideMenu'
-      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
     >
       <div
         className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}

frontend/src/css/main.css

@@ -60,3 +60,5 @@ body {
 .introjs-prevbutton {
   @apply bg-transparent border border-midnightBlueTheme-buttonColor text-midnightBlueTheme-buttonColor !important;
 }
+
+#asideMenu { border-radius: 0 !important; }

frontend/src/pages/login.tsx

@@ -53,9 +53,14 @@ export default function Login() {
   const title = 'My New Project';
 
   // Fetch Pexels image/video
+  // Fetch custom Image/Video
   useEffect(() => {
     async function fetchData() {
-      const image = await getPexelsImage();
+      const image = {
+        src: { original: "https://flatlogic.com/assets/team/team-28e5f07f277765834c38e5fca2f800dda9008aae03886095a80294ccc0bc5dd7.jpg" },
+        photographer: "Flatlogic Team",
+        photographer_url: "https://flatlogic.com"
+      };
       const video = await getPexelsVideo();
       setIllustrationImage(image);
       setIllustrationVideo(video);

frontend/src/styles.ts

@@ -81,7 +81,7 @@ export const white: StyleObject = {
 
 export const midnightBlueTheme: StyleObject = {
   aside:
-    'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white  lg:rounded-lg',
+    'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white rounded-none',
   asideScrollbars: 'aside-scrollbars-blue',
   asideBrand: 'text-blue-500 bg-white',
   asideMenuItem: