fix: remove white boxes

graasp · Apr 24, 2024 · f34519a · f34519a
1 parent df11b7e
commit f34519a
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 73 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -11,22 +11,20 @@ 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>();
 
   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
@@ -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
diff --git 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