Merge branch 'develop' into refactor/rest-like-endpoints

package.json

@@ -23,21 +23,21 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.0.26",
+    "@storybook/addon-a11y": "^7.2.2",
     "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
+    "@storybook/addon-essentials": "^7.2.2",
+    "@storybook/addon-interactions": "^7.2.2",
+    "@storybook/addon-links": "^7.2.2",
+    "@storybook/blocks": "^7.2.2",
     "@storybook/jest": "^0.1.0",
-    "@storybook/svelte": "^7.0.18",
-    "@storybook/sveltekit": "^7.0.18",
+    "@storybook/svelte": "^7.2.2",
+    "@storybook/sveltekit": "^7.2.2",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
     "@sveltejs/adapter-auto": "^2.0.1",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.22.4",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "@vitest/coverage-c8": "^0.31.4",
     "autoprefixer": "^10.4.13",
     "axe-playwright": "^1.2.3",
@@ -53,15 +53,15 @@
     "prettier-plugin-tailwindcss": "^0.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.18",
+    "storybook": "^7.2.2",
     "svelte": "^3.55.1",
     "svelte-check": "^2.9.2",
     "svelte-icons-pack": "^2.1.0",
-    "svelte-preprocess": "^5.0.0",
+    "svelte-preprocess": "^5.0.4",
     "tailwindcss": "^3.2.4",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
     "vitest": "^0.31.4"
   },
   "type": "module"

src/lib/error-page/Button.svelte

@@ -5,8 +5,8 @@
     width: keyof typeof widthList,
     text: string;
   const colorList = {
-    primary: { main: 'bg-primary', hover: 'hover:bg-primary' },
-    secondary: { main: 'bg-secondary', hover: 'hover:bg-secondary' },
+    primary: { main: 'bg-muted-red-700', hover: 'hover:bg-muted-red-500' },
+    secondary: { main: 'bg-muted-red-500', hover: 'hover:bg-muted-red-500' },
     red: { main: 'bg-red-500', hover: 'hover:bg-red-500' },
     green: { main: 'bg-green-500', hover: 'hover:bg-green-500' },
     blue: { main: 'bg-blue-500', hover: 'hover:bg-blue-500' }

src/lib/layout/Footer.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="z-10 w-full bg-transparent p-3 max-sm:hidden">
-  <footer class="grid grid-cols-3 justify-between border-t-2 border-secondary p-2 text-white">
+  <footer class="grid grid-cols-3 justify-between border-t-2 border-muted-red-500 p-2 text-white">
     <div class="footer-icons grid w-fit grid-cols-6 gap-4 self-center p-3">
       <Icon
         src={Icons.Instagram}
@@ -104,7 +104,9 @@
 </div>
 
 <div class="hidden w-full bg-transparent p-3 max-sm:block">
-  <footer class="flex flex-col justify-between border-t-2 border-secondary p-2 text-sm text-white">
+  <footer
+    class="flex flex-col justify-between border-t-2 border-muted-red-500 p-2 text-sm text-white"
+  >
     <div class="flex w-full flex-row items-center justify-between self-center p-3">
       <span>NIAEFEUP</span>
       <img src="/images/ni_negative_logo.svg" alt="NIAFEUP logo" class="h-auto w-11" />

src/lib/layout/MemberButton.svelte

@@ -5,10 +5,10 @@
 
 <a
   href="/#"
-  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-tertiary60"
+  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-muted-red-400/60"
 >
   <p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>
-  <div class="rounded-md bg-tertiary px-1 pt-1">
+  <div class="rounded-md bg-muted-red-400 px-1 pt-1">
     <Icon src={Icons.User} color="#411315" size="32px" />
   </div>
 </a>

src/lib/notifications/Snackbar.svelte

@@ -10,15 +10,15 @@
 <div
   out:slide
   in:fly={{ x: 100 }}
-  class="mb-4 flex h-auto w-80 rounded-lg bg-primary px-3 py-2"
+  class="mb-4 flex h-auto w-80 rounded-lg bg-muted-red-700 px-3 py-2"
   role="status"
 >
   <div class="m-auto ml-3 font-medium text-white">
     {notification.message}
   </div>
   <div class="ml-1 flex flex-col">
     <button
-      class="rounded-lg p-1.5 hover:bg-secondary"
+      class="rounded-lg p-1.5 hover:bg-muted-red-500"
       on:click={() => notification.close()}
       aria-label="Close"
     >

src/routes/api/[...endpoint]/+server.ts

@@ -3,11 +3,19 @@ import { fetchWithAuth } from './proxy';
 import { endpoint } from '$lib/api/proxy';
 
 const dispatchToBackend: RequestHandler = async (event) => {
-  const body = event.request.method === 'GET' ? undefined : await event.request.text();
+  const body =
+    event.request.method === 'GET' ||
+    event.request.method === 'OPTIONS' ||
+    event.request.method === 'HEAD'
+      ? undefined
+      : await event.request.text();
   return fetchWithAuth(event.cookies, endpoint(event.url), event.request.method, undefined, body);
 };
 
 export const GET: RequestHandler = dispatchToBackend;
 export const POST: RequestHandler = dispatchToBackend;
 export const PUT: RequestHandler = dispatchToBackend;
 export const DELETE: RequestHandler = dispatchToBackend;
+export const PATCH: RequestHandler = dispatchToBackend;
+export const OPTIONS: RequestHandler = dispatchToBackend;
+export const HEAD: RequestHandler = dispatchToBackend;

src/routes/api/[...endpoint]/proxy.ts

@@ -11,6 +11,10 @@ async function _fetchApi(
   const url = new URL(relativeUrl, PUBLIC_API_URL);
   headers ??= new Headers();
   headers.append('Content-Type', 'application/json');
+  headers.append('Accept', 'application/json');
+  if (window?.location?.origin) {
+    headers.append('Origin', window.location.origin);
+  }
   return fetch(url, { method: method, body, headers });
 }
 

tailwind.config.cjs

@@ -1,18 +1,34 @@
-const primaryColor = '#872020FF';
-const secondaryColor = '#B33636FF';
-const tertiaryColor = '#C04343FF';
-const tertiary60Color = '#C0434399';
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts,stories.js,stories.ts}'],
   theme: {
     extend: {
       colors: {
-        primary: primaryColor,
-        secondary: secondaryColor,
-        tertiary: tertiaryColor,
-        tertiary60: tertiary60Color
+        taupe: {
+          300: '#AB8586',
+          200: '#D7C0C0',
+          100: '#FFE9E9'
+        },
+        'vivid-red': {
+          950: '#4D0000',
+          900: '#570000',
+          700: '#A40202',
+          400: '#DC4F47'
+        },
+        'muted-red': {
+          800: '#740F0F',
+          700: '#872020',
+          600: '#9D2B2B',
+          500: '#B33636',
+          400: '#C04343',
+          300: '#DF6363'
+        },
+        rose: {
+          950: '#411315',
+          600: '#8D3739',
+          400: '#A46868',
+          200: '#DAB5B5'
+        }
       },
 
       fontFamily: {