UI/update sidebar (#480)

* update minicalendar

* update left sidebar

* chore: update twake-mui to version 1.1.4

- Update @linagora/twake-mui from local file to npm package 1.1.4
- Add margin to TempCalendarsInput section in sidebar
- Remove margin from PeopleSearch component (moved to parent)

* Changed wording on my calendars and event creation button

---------

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

__test__/components/CalendarSelection.test.tsx

@@ -148,7 +148,7 @@ describe("CalendarSelection", () => {
       }
     );
 
-    const addButtons = screen.getAllByTestId("MoreVertIcon");
+    const addButtons = screen.getAllByTestId("MoreHorizIcon");
     fireEvent.click(addButtons[0]);
 
     userEvent.click(screen.getByText(/delete/i));
@@ -180,7 +180,7 @@ describe("CalendarSelection", () => {
       }
     );
 
-    const addButtons = screen.getAllByTestId("MoreVertIcon");
+    const addButtons = screen.getAllByTestId("MoreHorizIcon");
     fireEvent.click(addButtons[1]);
 
     userEvent.click(screen.getByText(/remove/i));

__test__/features/user/HandleLogin.test.tsx

@@ -114,6 +114,11 @@ describe("HandleLogin", () => {
   test("goes to error page when there is error in user data", async () => {
     const mockDispatch = jest.fn();
     jest.spyOn(appHooks, "useAppDispatch").mockReturnValue(mockDispatch);
+    jest.spyOn(oidcAuth, "Auth").mockResolvedValue({
+      code_verifier: "verifier123",
+      state: "state123",
+      redirectTo: new URL("http://login.url"),
+    });
 
     renderWithProviders(<HandleLogin />, {
       user: {
@@ -128,14 +133,17 @@ describe("HandleLogin", () => {
         tokens: { access_token: "test" },
       },
       calendars: {
-        pending: false,
-        error: false,
         list: {},
+        pending: false,
+        error: null,
       },
     });
 
-    await waitFor(() => {
-      expect(mockDispatch).toHaveBeenCalledWith(push("/error"));
-    });
+    await waitFor(
+      () => {
+        expect(mockDispatch).toHaveBeenCalledWith(push("/error"));
+      },
+      { timeout: 3000 }
+    );
   });
 });

package-lock.json

@@ -17,7 +17,7 @@
         "@fullcalendar/moment-timezone": "^6.1.19",
         "@fullcalendar/react": "^6.1.17",
         "@fullcalendar/timegrid": "^6.1.17",
-        "@linagora/twake-mui": "^1.1.3",
+        "@linagora/twake-mui": "1.1.4",
         "@lottiefiles/dotlottie-react": "^0.17.13",
         "@mui/icons-material": "^7.1.2",
         "@mui/material": "^7.1.2",
@@ -141,7 +141,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -2074,7 +2073,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2098,7 +2096,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2201,7 +2198,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2245,7 +2241,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2518,7 +2513,6 @@
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
       "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
@@ -3142,10 +3136,9 @@
       }
     },
     "node_modules/@linagora/twake-mui": {
-      "version": "1.1.3",
-      "resolved": "https://npm.pkg.github.com/download/@linagora/twake-mui/1.1.3/c8ed9f2e04beaf55c1cfd1e014d2f43081c975ae",
-      "integrity": "sha512-lLylOmnMOpXRlkFCsKq2Jaf1bfaobQsHz1fvxRIR0MIs8EAy2gyKc/5D22Q/Mqo3aN2zEum9qrd1D030lm8NJg==",
-      "license": "MIT",
+      "version": "1.1.4",
+      "resolved": "https://npm.pkg.github.com/download/@linagora/twake-mui/1.1.4/56321d9e10cd99550e751f15c34aaac6842442c1",
+      "integrity": "sha512-L6e+6KgqFUxFY6avmk4UG4/bsdfzo6TxBkahUZlKxvCNEEikVe8z2Cxd0JtUUAWrPGZonTII9n2KhdFSNmNxvg==",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -3277,7 +3270,6 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.6.tgz",
       "integrity": "sha512-R4DaYF3dgCQCUAkr4wW1w26GHXcf5rCmBRHVBuuvJvaGLmZdD8EjatP80Nz5JCw0KxORAzwftnHzXVnjR8HnFw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/core-downloads-tracker": "^7.3.6",
@@ -3388,7 +3380,6 @@
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.6.tgz",
       "integrity": "sha512-8fehAazkHNP1imMrdD2m2hbA9sl7Ur6jfuNweh5o4l9YPty4iaZzRXqYvBCWQNwFaSHmMEj2KPbyXGp7Bt73Rg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/private-theming": "^7.3.6",
@@ -3747,7 +3738,6 @@
       "integrity": "sha512-LvoOF53PL6zXgdzEhgnnP51S4FseDFH1bHrobK4EK6zZX/tN8qgf5tdlmN7h4OkMv/Qs1oUfvj0QcLWSstnnvA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rspack/core": "1.6.8",
         "@rspack/lite-tapable": "~1.1.0",
@@ -3975,7 +3965,6 @@
       "integrity": "sha512-FolcIAH5FW4J2FET+qwjd1kNeFbCkd0VLuIHO0thyolEjaPSxw5qxG67DA7BZGm6PVcoiSgPLks1DL6eZ8c+fA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@module-federation/runtime-tools": "0.21.6",
         "@rspack/binding": "1.6.8",
@@ -4235,7 +4224,6 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -4320,7 +4308,6 @@
       "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.8.0"
       }
@@ -4331,7 +4318,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4634,7 +4620,6 @@
       "integrity": "sha512-N2clP5pJhB2YnZJ3PIHFk5RkygRX5WO/5f0WC08tp0wd+sv0rsJk3MqWn3CbNmT2J505a5336jaQj4ph1AdMug==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4656,7 +4641,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4668,7 +4652,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4725,7 +4708,6 @@
       "integrity": "sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
         "@typescript-eslint/scope-manager": "8.51.0",
@@ -4755,7 +4737,6 @@
       "integrity": "sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.51.0",
         "@typescript-eslint/types": "8.51.0",
@@ -5262,7 +5243,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6022,7 +6002,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -6734,7 +6713,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
       "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.21.0"
       },
@@ -6750,8 +6728,7 @@
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
       "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/debug": {
       "version": "4.4.3",
@@ -7351,7 +7328,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8706,7 +8682,6 @@
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
       "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.7.6"
       }
@@ -9681,7 +9656,6 @@
       "integrity": "sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "30.2.0",
         "@jest/types": "30.2.0",
@@ -10445,7 +10419,6 @@
       "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/core": "^7.19.6",
         "@svgr/babel-preset": "^6.5.1",
@@ -10904,7 +10877,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -11341,7 +11313,6 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -11351,7 +11322,6 @@
       "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
       "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "moment": "^2.29.4"
       },
@@ -11387,6 +11357,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -12335,7 +12306,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -12358,7 +12328,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -12378,7 +12347,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -12403,7 +12371,6 @@
       "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12504,8 +12471,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-first-history": {
       "version": "5.2.0",
@@ -13732,7 +13698,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13913,7 +13878,6 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -14130,7 +14094,6 @@
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14939,7 +14902,6 @@
       "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -12,7 +12,7 @@
     "@fullcalendar/moment-timezone": "^6.1.19",
     "@fullcalendar/react": "^6.1.17",
     "@fullcalendar/timegrid": "^6.1.17",
-    "@linagora/twake-mui": "^1.1.3",
+    "@linagora/twake-mui": "1.1.4",
     "@lottiefiles/dotlottie-react": "^0.17.13",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",

src/components/Attendees/PeopleSearch.tsx

@@ -140,7 +140,10 @@ export function PeopleSearch({
         ...params.InputProps,
         startAdornment: (
           <>
-            <PeopleOutlineOutlinedIcon sx={{ mr: 1, color: "action.active" }} />
+            <PeopleOutlineOutlinedIcon
+              fontSize="small"
+              sx={{ mr: 1, color: "action.active" }}
+            />
             {params.InputProps.startAdornment}
           </>
         ),
@@ -275,7 +278,14 @@ export function PeopleSearch({
           );
           onChange(event, mapped);
         }}
-        slotProps={customSlotProps}
+        slotProps={{
+          ...customSlotProps,
+          popper: {
+            placement: "bottom-start",
+            sx: { minWidth: "300px", ...customSlotProps?.popper?.sx },
+            ...customSlotProps?.popper,
+          },
+        }}
         // When render input is custom, the adornments should be handled by the custom component
         forcePopupIcon={!customRenderInput}
         disableClearable={!!customRenderInput}

src/components/Calendar/Calendar.styl

@@ -25,7 +25,7 @@
 
 .sidebar
   border-right 2px solid #f3f4f6
-  width 350px
+  width 270px
   height 100%
   flex-direction column
   overflow-y: scroll
@@ -86,10 +86,6 @@
   gap 30px
   font-family "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
 
-/* mini calendar style */
-.MuiDayCalendar-weekContainer:has(.selectedWeek)
-  background-color lightgray !important
-
 /* sidebar header */
 .sidebar-calendar h2
   font-size 1.3rem

src/components/Calendar/Calendar.tsx

@@ -597,8 +597,11 @@ export default function CalendarApp({
       <Box
         className="sidebar"
         sx={{
-          padding: "0 15px 16px 25px",
-          position: "relative",
+          paddingTop: 0,
+          paddingBottom: 3,
+          paddingLeft: 3,
+          paddingRight: 2,
+          width: "270px",
         }}
       >
         <Box
@@ -607,11 +610,11 @@ export default function CalendarApp({
             top: 0,
             zIndex: 10,
             backgroundColor: "#fff",
-            paddingTop: "16px",
+            paddingTop: 3,
           }}
         >
           <Button
-            size="large"
+            size="medium"
             variant="contained"
             fullWidth
             onClick={() =>
@@ -619,9 +622,13 @@ export default function CalendarApp({
             }
             sx={{
               borderRadius: radius.lg,
+              fontSize: "16px",
+              fontWeight: 500,
+              lineHeight: "normal",
             }}
           >
-            <AddIcon /> <p>{t("event.createEvent")}</p>
+            <AddIcon sx={{ marginRight: 0.5, fontSize: "20px" }} />{" "}
+            {t("event.createEvent")}
           </Button>
         </Box>
 
@@ -632,15 +639,17 @@ export default function CalendarApp({
           setSelectedMiniDate={setSelectedMiniDate}
           dottedEvents={dottedEvents}
         />
-        <TempCalendarsInput
-          tempUsers={tempUsers}
-          setTempUsers={setTempUsers}
-          handleToggleEventPreview={() => {
-            eventHandlers.handleDateSelect(null as unknown as DateSelectArg);
-          }}
-          selectedCalendars={selectedCalendars}
-          setSelectedCalendars={setSelectedCalendars}
-        />
+        <Box sx={{ mb: 3, mt: 2 }}>
+          <TempCalendarsInput
+            tempUsers={tempUsers}
+            setTempUsers={setTempUsers}
+            handleToggleEventPreview={() => {
+              eventHandlers.handleDateSelect(null as unknown as DateSelectArg);
+            }}
+            selectedCalendars={selectedCalendars}
+            setSelectedCalendars={setSelectedCalendars}
+          />
+        </Box>
         <div className="calendarList">
           <CalendarSelection
             selectedCalendars={selectedCalendars}

src/components/Calendar/CalendarSelection.tsx

@@ -17,7 +17,7 @@ import {
 } from "@linagora/twake-mui";
 import AddIcon from "@mui/icons-material/Add";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import { useEffect, useMemo, useState } from "react";
 import { useI18n } from "twake-i18n";
 import CalendarPopover from "./CalendarModal";
@@ -54,7 +54,18 @@ function CalendarAccordion({
     <Accordion
       defaultExpanded={defaultExpanded}
       expanded={expended}
-      style={{ width: "100%", padding: 0, margin: 0, boxShadow: "none" }}
+      style={{
+        width: "100%",
+        padding: 0,
+        margin: 0,
+        marginBottom: "12px",
+        boxShadow: "none",
+      }}
+      sx={{
+        "&::before": {
+          display: "none",
+        },
+      }}
     >
       <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
@@ -70,7 +81,7 @@ function CalendarAccordion({
           },
         }}
       >
-        <Typography component="h3">{title}</Typography>
+        <span>{title}</span>
         {showAddButton && (
           <IconButton
             component="span"
@@ -254,7 +265,6 @@ function CalendarSelector({
           alignItems: "center",
           justifyContent: "space-between",
           transition: "background-color 0.2s ease",
-          padding: "8px 24px 8px 16px",
           "& .MoreBtn": { opacity: 0 },
           "&:hover": {
             backgroundColor: "#F3F3F6",
@@ -290,7 +300,7 @@ function CalendarSelector({
           </span>
         </label>
         <IconButton className="MoreBtn" onClick={handleClick}>
-          <MoreVertIcon />
+          <MoreHorizIcon />
         </IconButton>
       </ListItem>
       <Menu id={id} anchorEl={anchorEl} open={open} onClose={handleClose}>

src/components/Calendar/MiniCalendar.tsx

@@ -10,6 +10,7 @@ import { DateCalendar } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import moment from "moment";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useEffect, useState } from "react";
 import { useI18n } from "twake-i18n";
 
@@ -65,7 +66,16 @@ export function MiniCalendar({
           );
         }}
         views={["month", "day"]}
-        sx={{ width: "100%" }}
+        slots={{
+          switchViewIcon: KeyboardArrowDownIcon,
+        }}
+        sx={{
+          width: "100%",
+          height: "300px",
+          "& .MuiPickersCalendarHeader-root": {
+            marginTop: 3,
+          },
+        }}
         slotProps={{
           day: (ownerState) => {
             const date = ownerState.day.toDate();

src/components/Menubar/EventSearchBar.tsx

@@ -213,7 +213,6 @@ export default function SearchBar() {
         ref={containerRef}
         sx={{
           margin: "0 auto",
-          height: "44px",
           position: "relative",
           width: extended ? searchWidth : "auto",
           transition: "width 0.25s ease-out",

src/locales/en.json

@@ -1,9 +1,9 @@
 {
   "locale": "en-gb",
   "calendar": {
-    "personal": "Personal Calendars",
-    "delegated": "Delegated Calendars",
-    "other": "Other Calendars",
+    "personal": "My calendars",
+    "delegated": "Delegated calendars",
+    "other": "Other calendars",
     "caldav_access": "CalDAV access",
     "secretUrl": "Secret URL",
     "secretUrlDesc": "The secret address can be used to view all calendar events even without access permissions. You can reset your current secret address and get a new one.",
@@ -85,7 +85,7 @@
     "hex": "Hex"
   },
   "event": {
-    "createEvent": "Create Event",
+    "createEvent": "Create",
     "updateEvent": "Update Event",
     "organizer": "Organizer",
     "untitled": "Untitled",

src/locales/fr.json

@@ -1,7 +1,7 @@
 {
   "locale": "fr-fr",
   "calendar": {
-    "personal": "Calendriers personnels",
+    "personal": "Mes calendriers",
     "delegated": "Calendriers délégués",
     "other": "Autres calendriers",
     "caldav_access": "Accès CalDAV",
@@ -87,7 +87,7 @@
     "hex": "Hex"
   },
   "event": {
-    "createEvent": "Créer un événement",
+    "createEvent": "Créer",
     "updateEvent": "Mettre à jour un événement",
     "organizer": "Organisateur",
     "untitled": "Sans titre",
@@ -248,7 +248,7 @@
       "label": "Libre",
       "tooltip": "Les autres vous voient comme disponible pendant la plage horaire de cet événement."
     },
-    "attendingQuestion": "Vous participez ?",
+    "attendingQuestion": "Participer ?",
     "ACCEPTED": "Accepter",
     "TENTATIVE": "Peut-être",
     "DECLINED": "Décliner",

src/setupTests.ts

@@ -59,6 +59,30 @@ class IntersectionObserverMock {
 
 (global as any).IntersectionObserver = IntersectionObserverMock;
 
+// Suppress jsdom CSS selector parsing errors for Emotion/MUI
+if (typeof window !== "undefined" && window.getComputedStyle) {
+  const originalGetComputedStyle = window.getComputedStyle;
+  window.getComputedStyle = function (
+    element: Element,
+    pseudoElement?: string | null
+  ) {
+    try {
+      return originalGetComputedStyle.call(this, element, pseudoElement);
+    } catch (error) {
+      // If CSS selector parsing fails, return a minimal computed style
+      if (
+        error instanceof Error &&
+        error.message.includes("is not a valid selector")
+      ) {
+        return {
+          getPropertyValue: () => "",
+        } as CSSStyleDeclaration;
+      }
+      throw error;
+    }
+  };
+}
+
 beforeAll(() => {
   console.warn = (...args: unknown[]) => {
     if (