[frontend] UI and UX Fixes

Improved Usability of UI, including improving the dark mode and how elements are displayed

frontend/.firebase/hosting.cHVibGlj.cache

@@ -1,32 +1,31 @@
-index.html,1725154496799,d9d7bc4ab8a92b15cc2009280fe4aea0d497560fe7b84d597ebcd2ad04f7c317
-404.html,1725154496712,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890
-images/logo.webp,1720431006580,2e2ed372391f67e94e94c4e0fecb24320da557538daa7fb4eabf4b7f411e9681
-images/svg/youtube.svg,1710785650591,e9016d78170c690d49d935a91bd81e02a734d4abafc67b0747ae8e803c827aab
-images/svg/ths.svg,1717953182261,5b1b5af7e08278a04437bfe6030dfce7ea53232079ad7388f70ee247c90dac8b
-images/svg/linkedin.svg,1710787637900,d01bff426eb95b311bccd560e257c1a426d0789b3721b80b8aa6e2223e363a3f
-images/svg/mbd.svg,1711051608799,6d486107a644d05cc58f7ecc67eeb6f433540450d21835b17a1cecbf7b972e35
-images/svg/medieteknik.svg,1717953208687,20a606c6b0f7ab0fbb9092d9f70c6a76c33a366768dd5ce7cd1a4aade30a10c5
-images/svg/instagram.svg,1710785600065,a093432cf165a98aa1a6b49122fe951860ca71dd9d4727a45ca9ec388b39544c
-images/cs.jpg,1708855444172,3a8f31249f57a708100ed5e597bbd003e8d706d9a6318436299ccef0934da9ce
-images/svg/datateknik.svg,1717954310511,7e222db520ffa91ed3eadfd3fa85812a277a5bf45ae8630d5a98f4306f332c26
+screenshots/phone.webp,1720428750813,09a5b82e9868b09f5a93ff1398bb8212ec54b74cdd8a64a3db8723de953016c5
+screenshots/desktop.webp,1720428118145,fb766eed3c7cb6c53358353f3c0d83346d55c386f8b8a543926266ec71872a5b
+images/ths_placeholder.jpg,1709687564492,af2c7227a1247730687e733f1daff25129f7f3ddd4497d2dab6c3afd2f6e2356
+images/testbg.jpg,1709696850461,02ac934a8ce6cb7efa6917f3c7853e084a969d34d4cd4cf635f53fe983b068c9
+images/sd.jpg,1709014945099,fa0727975b29d57738a268da4e7e262cdcb75b061285bc8ef1b0d39bed9322c7
+images/ml.jpg,1708856962239,8138b0b058ca7752ee40cc32cc4aa25d9d854d5165e4880d5d32e82aafaa6be7
 images/logobig_light.jpg,1713814110573,25b0591ae761e535a9ef043dd0740647fa78b3df140442cd4390656040e45665
 images/logobig_dark.jpg,1714179224566,9d5e1feb5cd3ca7b6a70f0118bf9c159e4f73e6c245dd1c942bf8788bad2d903
 images/logobig.png,1710782675272,7bc0f40f5bf714f1b70ccb4fbc1f0a6627afcb3136b2aad436b8ca678294a15a
-images/svg/facebook.svg,1710784995921,410040bc378c6c86fd75695f1f2a4eb749ad0ad1c53dfbe451d7f4981960086b
-images/ict.jpg,1708856955078,8a840e4b6ca2f83901c1e34ec8abd8fd9802343d39c5fb7dc94443d79ea65ee3
-images/sd.jpg,1709014945099,fa0727975b29d57738a268da4e7e262cdcb75b061285bc8ef1b0d39bed9322c7
-screenshots/phone.webp,1720428750813,09a5b82e9868b09f5a93ff1398bb8212ec54b74cdd8a64a3db8723de953016c5
-images/ml.jpg,1708856962239,8138b0b058ca7752ee40cc32cc4aa25d9d854d5165e4880d5d32e82aafaa6be7
-images/svg/kth.svg,1711063787967,04db06aa8f5073b9693efb4ffa236e1df2fca8776a31265bde377c07fb8950d7
-images/imt.jpg,1708856946101,503fec3af341c92bfb964b5f7332cd773429e63dfbd059599dcd79a7de1becae
+images/logo.webp,1720431006580,2e2ed372391f67e94e94c4e0fecb24320da557538daa7fb4eabf4b7f411e9681
 images/KTH.jpg,1711828165385,4f497bda7e0c7f3b997214c01c0dcc389a5546218ff43275ec7a40a75b0bd93f
-screenshots/desktop.webp,1720428118145,fb766eed3c7cb6c53358353f3c0d83346d55c386f8b8a543926266ec71872a5b
-images/testbg.jpg,1709696850461,02ac934a8ce6cb7efa6917f3c7853e084a969d34d4cd4cf635f53fe983b068c9
-images/ths_placeholder.jpg,1709687564492,af2c7227a1247730687e733f1daff25129f7f3ddd4497d2dab6c3afd2f6e2356
-images/kth-landskap.jpg,1711819019756,b28a8cb7a0e430bf961ecf7870100d1b83ab8660476a1fca0b36f73aa313d20a
 images/kth-landskap.webp,1721805296540,5c9b68ff00d4ea5981d7776bc57f0bb5acca568e57175c974c54993d0934d8d3
+images/kth-landskap.jpg,1711819019756,b28a8cb7a0e430bf961ecf7870100d1b83ab8660476a1fca0b36f73aa313d20a
 images/international_placeholder.jpg,1709687695136,ca11b7b0dc9562294ad4b1e0d778243b1b4cdb1d7daf8bb5f6f7749f6ffc3976
-images/bg.webp,1720432387556,56af6239eed0080c917231b4e1e2fabfea36de843c5004b92e9941461e81c11f
-images/testbg2.jpg,1696497351214,ba0e6b61f35bde9dd9949426da569529ec7b33d63fbdbab307b99a0b14217046
+images/imt.jpg,1708856946101,503fec3af341c92bfb964b5f7332cd773429e63dfbd059599dcd79a7de1becae
+images/ict.jpg,1708856955078,8a840e4b6ca2f83901c1e34ec8abd8fd9802343d39c5fb7dc94443d79ea65ee3
+images/cs.jpg,1708855444172,3a8f31249f57a708100ed5e597bbd003e8d706d9a6318436299ccef0934da9ce
 images/bg2.webp,1723934109217,5848c87093a6345d24e8891469b68ab4916aba33add37dd0faa4b5d1d9491119
 images/bg2.jpg,1723589234023,b05c4b16cfe029c4a04ec98a3d92dd767efc0ce149d46fc31f46b48902d1feb9
+images/bg.webp,1720432387556,56af6239eed0080c917231b4e1e2fabfea36de843c5004b92e9941461e81c11f
+images/svg/youtube.svg,1710785650591,e9016d78170c690d49d935a91bd81e02a734d4abafc67b0747ae8e803c827aab
+images/svg/ths.svg,1717953182261,5b1b5af7e08278a04437bfe6030dfce7ea53232079ad7388f70ee247c90dac8b
+images/svg/medieteknik.svg,1717953208687,20a606c6b0f7ab0fbb9092d9f70c6a76c33a366768dd5ce7cd1a4aade30a10c5
+images/svg/mbd.svg,1711051608799,6d486107a644d05cc58f7ecc67eeb6f433540450d21835b17a1cecbf7b972e35
+images/svg/linkedin.svg,1710787637900,d01bff426eb95b311bccd560e257c1a426d0789b3721b80b8aa6e2223e363a3f
+images/svg/kth.svg,1711063787967,04db06aa8f5073b9693efb4ffa236e1df2fca8776a31265bde377c07fb8950d7
+images/svg/instagram.svg,1710785600065,a093432cf165a98aa1a6b49122fe951860ca71dd9d4727a45ca9ec388b39544c
+images/svg/facebook.svg,1710784995921,410040bc378c6c86fd75695f1f2a4eb749ad0ad1c53dfbe451d7f4981960086b
+images/svg/datateknik.svg,1717954310511,7e222db520ffa91ed3eadfd3fa85812a277a5bf45ae8630d5a98f4306f332c26
+index.html,1725155380688,25675684f0fb77c2522f06d811feb465048ba95f6d82ef213e938a15b044c9c9
+404.html,1725155380688,41d1e074106979fb6591ec6953bfe5ace2788be22f0ed4189bd54905ebb5b44d

frontend/.firebaserc

@@ -1,5 +1,12 @@
 {
   "projects": {
     "default": "medieteknik"
-  }
-}
+  },
+  "targets": {},
+  "etags": {
+    "medieteknik": {
+      "extensionInstances": {}
+    }
+  },
+  "dataconnectEmulatorConfig": {}
+}

frontend/.gitignore

@@ -13,6 +13,11 @@
 /.next/
 /out/
 
+# firebase
+/.firebaserc
+/.firebase/
+/firebase.json
+
 # production
 /build
 

frontend/firebase.json

@@ -1,11 +1,21 @@
 {
   "hosting": {
-    "public": "public",
+    "source": ".",
     "ignore": [
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
-    ]
+    ],
+    "frameworksBackend": {
+      "region": "europe-west1",
+      "nextjs": {
+        "source": "src",
+        "functionConfig": {
+          "memory": "512MB",
+          "timeoutSeconds": 120
+        }
+      }
+    }
   },
   "remoteconfig": {
     "template": "remoteconfig.template.json"

frontend/src/api/index.ts

@@ -1,7 +1,8 @@
+import { API_BASE_URL } from '@/utility/Constants';
 import axios from 'axios';
 
 const api = axios.create({
-    baseURL: 'http://localhost:8000/api/v1',
+    baseURL: API_BASE_URL,
 });
 
 export default api

frontend/src/app/[language]/account/base.tsx

@@ -87,7 +87,7 @@ export default function Base({
     ]
 
     const additionalPages: AccountPage[] = []
-    if (permissions &&  permissions.author.length >= 1) {
+    if (permissions.author && permissions.author.length >= 1) {
       additionalPages.push({
         name: 'items',
         icon: DocumentDuplicateIcon,

frontend/src/app/[language]/account/pages/account/accountForm.tsx

@@ -28,7 +28,9 @@ import useSWR from 'swr'
 import Loading from '@/components/tooltips/Loading'
 
 const fetcher = (url: string) =>
-  fetch(url).then(
+  fetch(url, {
+    credentials: 'include',
+  }).then(
     (res) =>
       res.json() as Promise<{
         token: string
@@ -69,14 +71,10 @@ export default function AccountForm({
   ]
 
   const AccountFormSchema = z.object({
-    profilePicture: z.instanceof(window.File),
+    profilePicture: z.instanceof(window.File).optional(),
     emailTwo: z.string().email().optional().or(z.literal('')),
     emailThree: z.string().email().optional().or(z.literal('')),
-    currentPassword: z
-      .string({
-        required_error: 'Password is required to edit account settings',
-      })
-      .min(3),
+    currentPassword: z.string().min(3).optional().or(z.literal('')),
     newPassword: z
       .string()
       .min(8)
@@ -138,10 +136,23 @@ export default function AccountForm({
   const postAccountForm = async (data: z.infer<typeof AccountFormSchema>) => {
     const formData = new FormData()
 
-    formData.append('profile_picture', data.profilePicture)
+    if (
+      !data.profilePicture &&
+      !data.emailTwo &&
+      !data.emailThree &&
+      !data.currentPassword &&
+      !data.newPassword
+    ) {
+      alert('No changes were made')
+      return
+    }
+
+    if (data.profilePicture)
+      formData.append('profile_picture', data.profilePicture)
     if (data.emailTwo) formData.append('email_two', data.emailTwo)
     if (data.emailThree) formData.append('email_three', data.emailThree)
-    formData.append('current_password', data.currentPassword)
+    if (data.currentPassword)
+      formData.append('current_password', data.currentPassword)
     if (data.newPassword) formData.append('new_password', data.newPassword)
     formData.append('csrf_token', data.csrf_token || csrf.token)
 
@@ -353,6 +364,9 @@ export default function AccountForm({
                 name='newPassword'
                 render={({ field }) => (
                   <FormItem className='pl-2 mt-8'>
+                    <FormDescription>
+                      Leave blank if you do not want to change your password
+                    </FormDescription>
                     <FormControl>
                       <Input
                         {...field}

frontend/src/app/[language]/account/pages/calendarPage.tsx

@@ -261,15 +261,17 @@ export default function CalendarPage({ language }: { language: string }) {
                     className='flex items-center gap-2'
                     title='Contact an administrator to gain access'
                   >
-                    {permissions.author.includes('EVENT') ? (
+                    {permissions.author &&
+                    permissions.author.includes('EVENT') ? (
                       <CheckIcon className='w-6 h-6 text-green-500' />
                     ) : (
                       <XMarkIcon className='w-6 h-6 text-red-500' />
                     )}
                     <p>
                       You{' '}
                       <span className='font-bold'>
-                        {permissions.author.includes('EVENT')
+                        {permissions.author &&
+                        permissions.author.includes('EVENT')
                           ? 'can'
                           : 'cannot'}
                       </span>{' '}
@@ -280,7 +282,7 @@ export default function CalendarPage({ language }: { language: string }) {
                     className='flex items-center gap-2'
                     title='Contact an administrator to gain access'
                   >
-                    {permissions.student.includes(
+                    {permissions.student && permissions.student.includes(
                       Permission.CALENDAR_PRIVATE
                     ) ? (
                       <CheckIcon className='w-6 h-6 text-green-500' />
@@ -290,7 +292,7 @@ export default function CalendarPage({ language }: { language: string }) {
                     <p>
                       You{' '}
                       <span className='font-bold'>
-                        {permissions.student.includes(
+                        {permissions.student && permissions.student.includes(
                           Permission.CALENDAR_PRIVATE
                         )
                           ? 'can'