From f641fb6f0d2ebff30329864bfd3b25c8e1428e7d Mon Sep 17 00:00:00 2001
From: daedalus <44623501+ComfortablyCoding@users.noreply.github.com>
Date: Tue, 10 May 2022 21:16:21 -0400
Subject: [PATCH] refactor: improve ui (#1)

---
 admin/src/components/NoteCreateModal/index.js | 18 +++++++--------
 admin/src/components/NoteListItem/index.js    | 22 ++++++++++++++-----
 .../components/NoteListLayoutContent/index.js |  5 ++++-
 .../components/NoteListLayoutFooter/index.js  |  2 +-
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/admin/src/components/NoteCreateModal/index.js b/admin/src/components/NoteCreateModal/index.js
index 3565c9d..891a28e 100644
--- 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
index 9fbe495..dc6b9df 100644
--- 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
index 3f428ec..11aaa45 100644
--- 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
index 639debb..2df575d 100644
--- 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} />}