From f34519ac474dd8589a4ba8658c097505ed5d9980 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Wed, 24 Apr 2024 16:08:40 +0200
Subject: [PATCH] fix: remove white boxes

---
 .../item/publish/CustomizedTagsEdit.tsx       | 24 +++++++----
 .../item/settings/GeolocationPicker.tsx       | 24 +++++++----
 .../item/settings/ItemLicenseSettings.tsx     |  6 ++-
 .../item/settings/ItemMetadataContent.tsx     | 12 +++---
 src/components/item/settings/ItemSettings.tsx |  6 +--
 src/config/constants.ts                       |  5 +--
 src/utils/image.ts                            | 41 -------------------
 yarn.lock                                     |  4 +-
 8 files changed, 49 insertions(+), 73 deletions(-)
 delete mode 100644 src/utils/image.ts

diff --git a/src/components/item/publish/CustomizedTagsEdit.tsx b/src/components/item/publish/CustomizedTagsEdit.tsx
index 7ea84bb1f..e1cb38e44 100644
--- a/src/components/item/publish/CustomizedTagsEdit.tsx
+++ b/src/components/item/publish/CustomizedTagsEdit.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Chip, Stack, TextField, Typography } from '@mui/material';
+import { Box, Chip, Stack, TextField, Typography } from '@mui/material';
 import type { TextFieldProps } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
@@ -53,13 +53,21 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   };
 
   return (
-    <Stack direction="column">
-      <Typography variant="h4">
-        {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
-      </Typography>
-      <Typography variant="body1">
-        {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
-      </Typography>
+    <Stack
+      gap={1}
+      // bgcolor="white"
+      // p={2}
+      // borderRadius={2}
+      // border="1px solid #ddd"
+    >
+      <Box>
+        <Typography variant="h4">
+          {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
+        </Typography>
+        <Typography variant="body1">
+          {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
+        </Typography>
+      </Box>
       <Stack direction="row" alignItems="center" spacing={1}>
         <Stack flexGrow={1}>
           <TextField
diff --git a/src/components/item/settings/GeolocationPicker.tsx b/src/components/item/settings/GeolocationPicker.tsx
index d36f00433..6bb4f81a2 100644
--- a/src/components/item/settings/GeolocationPicker.tsx
+++ b/src/components/item/settings/GeolocationPicker.tsx
@@ -1,5 +1,5 @@
 import Clear from '@mui/icons-material/Clear';
-import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 
 import {
   type GeolocationPickerProps,
@@ -50,13 +50,21 @@ const GeolocationPicker = ({
   const isDisabled = Boolean(geoloc && geoloc?.item?.id !== item.id);
 
   return (
-    <Stack>
-      <Typography variant="h4">
-        {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)}
-      </Typography>
-      <Typography variant="body1">
-        {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)}
-      </Typography>
+    <Stack
+      gap={1}
+      // bgcolor="white"
+      // p={2}
+      // borderRadius={2}
+      // border="1px solid #ddd"
+    >
+      <Box>
+        <Typography variant="h4">
+          {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)}
+        </Typography>
+        <Typography variant="body1">
+          {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)}
+        </Typography>
+      </Box>
       <Stack direction="row" alignItems="center">
         <MapGeolocationPicker
           onChangeOption={onChangeOption}
diff --git a/src/components/item/settings/ItemLicenseSettings.tsx b/src/components/item/settings/ItemLicenseSettings.tsx
index 37c1af771..73d72baba 100644
--- a/src/components/item/settings/ItemLicenseSettings.tsx
+++ b/src/components/item/settings/ItemLicenseSettings.tsx
@@ -50,7 +50,11 @@ const ItemLicenseSettings = (): JSX.Element => {
         additionalInfo={
           item.settings?.ccLicenseAdaption && (
             <CreativeCommons
-              sx={{ border: '1px solid #bbb', borderRadius: 2 }}
+              sx={{
+                border: '1px solid #bbb',
+                borderRadius: 2,
+                backgroundColor: 'white',
+              }}
               requireAccreditation={requireAccreditation}
               allowSharedAdaptation={allowSharing as CCSharingVariant}
               allowCommercialUse={allowCommercialUse}
diff --git a/src/components/item/settings/ItemMetadataContent.tsx b/src/components/item/settings/ItemMetadataContent.tsx
index 9a4a6a027..db996934c 100644
--- a/src/components/item/settings/ItemMetadataContent.tsx
+++ b/src/components/item/settings/ItemMetadataContent.tsx
@@ -1,5 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
 
+import { Box } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,7 +29,6 @@ import {
 import { BUILDER } from '../../../langs/constants';
 import { OutletType } from '../../pages/item/type';
 import LanguageSelect from './LanguageSelect';
-import ThumbnailSetting from './ThumbnailSetting';
 
 const { useMember } = hooks;
 
@@ -70,10 +70,10 @@ const ItemMetadataContent = (): JSX.Element => {
   };
 
   return (
-    <>
-      <ThumbnailSetting item={item} />
-
-      <TableContainer sx={{ p: 2, boxSizing: 'border-box' }}>
+    <Box
+    // bgcolor="white" borderRadius={2} border="1px solid #ddd"
+    >
+      <TableContainer sx={{ boxSizing: 'border-box' }}>
         <Typography variant="h5" id={ITEM_PANEL_NAME_ID} noWrap>
           {item.name}
         </Typography>
@@ -137,7 +137,7 @@ const ItemMetadataContent = (): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-    </>
+    </Box>
   );
 };
 
diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx
index 3aea3a9b1..a211b87ca 100644
--- a/src/components/item/settings/ItemSettings.tsx
+++ b/src/components/item/settings/ItemSettings.tsx
@@ -11,6 +11,7 @@ import GeolocationPicker from './GeolocationPicker';
 import ItemLicenseSettings from './ItemLicenseSettings';
 import ItemMetadataContent from './ItemMetadataContent';
 import ItemSettingsProperties from './ItemSettingsProperties';
+import ThumbnailSetting from './ThumbnailSetting';
 
 const ItemSettings = (): JSX.Element => {
   const { item } = useOutletContext<OutletType>();
@@ -18,15 +19,12 @@ const ItemSettings = (): JSX.Element => {
   return (
     <Container disableGutters sx={{ mt: 2, mb: 4 }}>
       <Stack gap={2}>
+        <ThumbnailSetting item={item} />
         <ItemMetadataContent />
         <CustomizedTagsEdit item={item} />
-
         <GeolocationPicker item={item} />
-
         <ItemSettingsProperties item={item} />
-
         <AdminChatSettings item={item} />
-
         <ItemLicenseSettings />
       </Stack>
     </Container>
diff --git a/src/config/constants.ts b/src/config/constants.ts
index fa885a45a..ed464c00d 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -95,9 +95,8 @@ export const GRAASP_LOGO_HEADER_HEIGHT = 40;
 export const ITEMS_TABLE_CONTAINER_HEIGHT = '65vh';
 
 export const THUMBNAIL_ASPECT = 1;
-export const THUMBNAIL_EXTENSION = 'image/jpeg';
-export const THUMBNAIL_SETTING_MAX_WIDTH = 200;
-export const THUMBNAIL_SETTING_MAX_HEIGHT = 200;
+export const THUMBNAIL_SETTING_MAX_WIDTH = 256;
+export const THUMBNAIL_SETTING_MAX_HEIGHT = 256;
 
 export const H5P_FILE_DOT_EXTENSION = '.h5p';
 
diff --git a/src/utils/image.ts b/src/utils/image.ts
deleted file mode 100644
index 266ff0bba..000000000
--- a/src/utils/image.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Crop } from 'react-image-crop';
-
-import { THUMBNAIL_EXTENSION } from '../config/constants';
-
-// eslint-disable-next-line import/prefer-default-export
-export const getCroppedImg = (
-  image: HTMLImageElement,
-  crop: Crop,
-  extension = THUMBNAIL_EXTENSION,
-): Promise<Blob> => {
-  const canvas = document.createElement('canvas');
-  const scaleX = image.naturalWidth / image.width;
-  const scaleY = image.naturalHeight / image.height;
-  const ctx = canvas.getContext('2d');
-
-  canvas.width = crop.width * scaleX;
-  canvas.height = crop.height * scaleY;
-
-  ctx?.drawImage(
-    image,
-    crop.x * scaleX,
-    crop.y * scaleY,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  );
-
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (!blob) {
-        reject(new Error('Canvas is empty'));
-        console.error('Canvas is empty');
-        return;
-      }
-      resolve(blob);
-    }, extension);
-  });
-};
diff --git a/yarn.lock b/yarn.lock
index 9323d9e7d..84d7d95f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1576,7 +1576,7 @@ __metadata:
 
 "@graasp/ui@github:graasp/graasp-ui#update-table-for-background":
   version: 4.15.1
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=40d8a0ca8f02f5a85c5a6cdc30f41bfb69f34e9d"
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=af7a68cf5c243a9b0da782913e2a0c3cc106c56e"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.2.1"
     "@ag-grid-community/react": "npm:^31.1.1"
@@ -1608,7 +1608,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/4869fd8cb47faad1e75387b8f3384d817f615892d6c12ab9d64d4d2085fcc9141b6207c451d2be06671ed0f3437aa787f681435a9ec1630339022bb97060b39b
+  checksum: 10/b2d81599f7053ae9a0efbd601a0e62f756fc90d0916078d6c8a198afd6fdc253062eb73cae3f5da279b1c1cad8a2959d05fb0aaf10c3091a8f5404a5c7919d6c
   languageName: node
   linkType: hard