refactor: improve ui (#1)

strapi-community · May 11, 2022 · f641fb6 · f641fb6
1 parent f0b45b6
commit f641fb6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/admin/src/components/NoteCreateModal/index.js b/admin/src/components/NoteCreateModal/index.js
@@ -12,10 +12,11 @@ import { Textarea } from '@strapi/design-system/Textarea';
 import { Button } from '@strapi/design-system/Button';
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
+import Check from '@strapi/icons/Check';
 import { requestPluginEndpoint } from '../../utils/requestPluginEndpoint';
 
 const setInitialState = (note = {}) => ({
-	ModalTitle: note.id ? 'Edit Note' : 'Create Note',
+	ModalTitle: note.id ? 'Edit a note' : 'Add a note',
 	title: note.title || '',
 	content: note.content || '',
 });
@@ -65,16 +66,11 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => {
 			<ModalBody>
 				<Stack size={2}>
 					<TextInput
-						placeholder="title"
-						label="Note Title"
+						label="Title"
 						onChange={(e) => updateState('title', e.target.value)}
 						defaultValue={values.title}
 					/>
-					<Textarea
-						placeholder="Note content"
-						label="Content"
-						onChange={(e) => updateState('content', e.target.value)}
-					>
+					<Textarea label="Content" onChange={(e) => updateState('content', e.target.value)}>
 						{values.content}
 					</Textarea>
 				</Stack>
@@ -85,7 +81,11 @@ const NoteModalCreate = ({ toggleModal, note = {}, entity }) => {
 						Cancel
 					</Button>
 				}
-				endActions={<Button onClick={() => mutation.mutate()}>Save</Button>}
+				endActions={
+					<Button onClick={() => mutation.mutate()} startIcon={<Check />}>
+						Save
+					</Button>
+				}
 			/>
 		</ModalLayout>
 	);

diff --git a/admin/src/components/NoteListItem/index.js b/admin/src/components/NoteListItem/index.js
@@ -34,14 +34,26 @@ const NoteListItem = ({ note, setActiveNote, toggleModal }) => {
 	};
 
 	return (
-		<Box padding={1} shadow="popupShadow">
+		<Box paddingTop={2} paddingBottom={2}>
 			<Flex justifyContent="space-between">
-				<Box>
-					<Typography>{note.title}</Typography>
+				<Box style={{ maxWidth: '60%' }}>
+					<Typography variant="pi" ellipsis>
+						{note.title}
+					</Typography>
 				</Box>
 				<IconButtonGroup>
-					<IconButton onClick={() => openNoteCreateModel(note)} label="Edit" icon={<Pencil />} />
-					<IconButton onClick={() => handleNoteDelete(note)} label="Delete" icon={<Trash />} />
+					<IconButton
+						style={{ border: 'none' }}
+						onClick={() => openNoteCreateModel(note)}
+						label="Edit"
+						icon={<Pencil />}
+					/>
+					<IconButton
+						style={{ border: 'none' }}
+						onClick={() => handleNoteDelete(note)}
+						label="Delete"
+						icon={<Trash />}
+					/>
 				</IconButtonGroup>
 			</Flex>
 		</Box>

diff --git a/admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js b/admin/src/components/NoteListLayout/components/NoteListLayoutContent/index.js
@@ -28,7 +28,10 @@ const NoteListLayoutContent = ({ entity }) => {
 
 	return (
 		<React.Fragment>
-			<Stack marginBottom={4} style={{ maxHeight: '150px', overflowY: 'auto' }}>
+			<Stack
+				marginBottom={4}
+				style={{ maxHeight: '150px', overflowY: 'auto', overflowX: 'hidden' }}
+			>
 				{!query.isLoading &&
 					query.data.data.notes.map((n) => (
 						<NoteListItem

diff --git a/admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js b/admin/src/components/NoteListLayout/components/NoteListLayoutFooter/index.js
@@ -10,7 +10,7 @@ const NoteListLayoutFooter = ({ entity }) => {
 
 	return (
 		<React.Fragment>
-			<TextButton label="Notes" endIcon={<Plus />} onClick={toggleModal}>
+			<TextButton label="Notes" startIcon={<Plus />} onClick={toggleModal}>
 				Add a note
 			</TextButton>
 			{isVisible && <NoteModalCreate toggleModal={toggleModal} entity={entity} />}