fix(ui): fix notes paddings etc
This commit is contained in:
sylenien
parent
9da6788afd
commit
35202fb6b6
7 changed files with 64 additions and 61 deletions
|
|
@ -75,12 +75,12 @@ function NoteEvent(props: Props) {
|
|||
style={{ background: 'rgba(253, 243, 155, 0.1)' }}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<div className="p-2 bg-gray-light rounded-full">
|
||||
<div className="p-3 bg-gray-light rounded-full">
|
||||
<Icon name="quotes" color="main" />
|
||||
</div>
|
||||
<div className="ml-2">
|
||||
<div>{props.userEmail}</div>
|
||||
<div className="text-disabled-text">
|
||||
<div className="text-base">{props.userEmail}</div>
|
||||
<div className="text-disabled-text text-sm">
|
||||
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,26 +88,28 @@ function NoteEvent(props: Props) {
|
|||
<ItemMenu bold items={menuItems} />
|
||||
</div>
|
||||
</div>
|
||||
<div>{props.note.message}</div>
|
||||
<div className="text-xl my-3 overflow-y-scroll overflow-x-hidden" style={{ maxHeight: 200, maxWidth: 220 }}>{props.note.message}</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 flex-wrap w-full">
|
||||
{props.note.tag ? (
|
||||
<div
|
||||
key={props.note.tag}
|
||||
style={{
|
||||
// @ts-ignore
|
||||
background: tagProps[props.note.tag],
|
||||
userSelect: 'none',
|
||||
minWidth: 60,
|
||||
width: 50,
|
||||
textAlign: 'center',
|
||||
fontSize: 11,
|
||||
}}
|
||||
className="rounded-full text-sm px-2 py-1 text-white"
|
||||
className="rounded-full px-2 py-1 text-white text-sm"
|
||||
>
|
||||
{props.note.tag}
|
||||
</div>
|
||||
) : null}
|
||||
{!props.note.isPublic ? null : (
|
||||
<>
|
||||
<Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
|
||||
<Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -161,22 +161,23 @@ function CreateNote({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-2" style={{ lineHeight: '15px' }}>
|
||||
{TAGS.map((tag) => (
|
||||
<div
|
||||
key={tag}
|
||||
style={{
|
||||
background: tagActive(tag) ? tagProps[tag] : 'rgba(0,0,0, 0.38)',
|
||||
userSelect: 'none',
|
||||
minWidth: 60,
|
||||
minWidth: 50,
|
||||
fontSize: 11,
|
||||
}}
|
||||
className="cursor-pointer rounded-full justify-center px-2 py-1 mr-2 text-white flex items-center gap-2"
|
||||
className="cursor-pointer rounded-full justify-center px-2 py-1 text-white flex items-center gap-2"
|
||||
onClick={() => addTag(tag)}
|
||||
>
|
||||
{tagActive(tag) ? <Icon name="check-circle-fill" color="white" size={16} /> : null}
|
||||
<span>
|
||||
{tagActive(tag) ? <Icon name="check-circle-fill" color="white" size={13} /> : null}
|
||||
<div>
|
||||
{tag}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,52 +42,53 @@ function ReadNote(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 300px)' }}>
|
||||
<div
|
||||
className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
|
||||
style={{ background: '#FFFEF5', width: 500 }}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<div className="p-2 bg-gray-light rounded-full">
|
||||
<Icon name="quotes" color="main" size={16} />
|
||||
</div>
|
||||
<div className="ml-2">
|
||||
<div>{props.userEmail}</div>
|
||||
<div className="text-disabled-text">
|
||||
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
|
||||
<div onClick={props.onClose} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }} className="flex items-center justify-center">
|
||||
<div
|
||||
className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
|
||||
style={{ background: '#FFFEF5', width: 500 }}
|
||||
>
|
||||
<div className="flex items-center w-full">
|
||||
<div className="p-2 bg-gray-light rounded-full">
|
||||
<Icon name="quotes" color="main" size={16} />
|
||||
</div>
|
||||
<div className="ml-2">
|
||||
<div className="text-base">{props.userEmail}</div>
|
||||
<div className="text-disabled-text text-sm">
|
||||
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
|
||||
<Icon name="close" size={18} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
|
||||
<Icon name="close" size={18} />
|
||||
</div>
|
||||
</div>
|
||||
<div>{props.note.message}</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center gap-2 flex-wrap w-full">
|
||||
{props.note.tag ? (
|
||||
<div
|
||||
style={{ background: tagProps[props.note.tag], userSelect: 'none' }}
|
||||
className="rounded-xl text-sm px-2 py-1 text-white"
|
||||
>
|
||||
{props.note.tag}
|
||||
</div>
|
||||
) : null}
|
||||
{!props.note.isPublic ? null : (
|
||||
<>
|
||||
<Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
|
||||
</>
|
||||
)}
|
||||
<div className="text-xl py-3 overflow-y-scroll" style={{ maxHeight: 400 }}>{props.note.message}</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center gap-2 flex-wrap w-full">
|
||||
{props.note.tag ? (
|
||||
<div
|
||||
// @ts-ignore
|
||||
style={{ background: tagProps[props.note.tag], userSelect: 'none', fontSize: 11 }}
|
||||
className="rounded-full text-sm px-2 py-1 text-white flex items-center justify-center"
|
||||
>
|
||||
{props.note.tag}
|
||||
</div>
|
||||
) : null}
|
||||
{!props.note.isPublic ? null : (
|
||||
<>
|
||||
<Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div
|
||||
onClick={props.onClose}
|
||||
className="ml-auto rounded py-2 px-4 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
|
||||
>
|
||||
<Icon size={16} name="play-fill" color="main" />
|
||||
<span>Play Session</span>
|
||||
<div
|
||||
onClick={props.onClose}
|
||||
className="ml-auto rounded py-2 px-4 flex items-center text-blue gap-2 cursor-pointer border border-main hover:bg-light-blue-bg"
|
||||
>
|
||||
<Icon size={16} name="play-fill" color="main" />
|
||||
<span>Play Session</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,17 +52,18 @@ function NoteItem(props: Props) {
|
|||
}
|
||||
>
|
||||
<div className="flex flex-col gap-1 cursor-pointer">
|
||||
<div>{props.note.message}</div>
|
||||
<div className="text-xl py-3">{props.note.message}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{props.note.tag ? (
|
||||
<div
|
||||
style={{
|
||||
// @ts-ignore
|
||||
background: tagProps[props.note.tag],
|
||||
userSelect: 'none',
|
||||
minWidth: 60,
|
||||
textAlign: 'center',
|
||||
width: 50,
|
||||
fontSize: 11,
|
||||
}}
|
||||
className="rounded-full px-2 py-1 mr-2 text-white"
|
||||
className="rounded-full px-2 py-1 mr-2 text-white flex items-center justify-center"
|
||||
>
|
||||
{props.note.tag}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
|
|||
const { notesStore } = useStore();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!notesStore.notes.length) {
|
||||
notesStore.fetchNotes();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const list = notesStore.notes;
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ const SVG = (props: Props) => {
|
|||
case 'chat-dots': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/><path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/></svg>;
|
||||
case 'chat-right-text': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>;
|
||||
case 'chat-square-quote': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>;
|
||||
case 'check-circle-fill': return <svg width={ `${ width }px` } height={ `${ height }px` } ><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>;
|
||||
case 'check-circle-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>;
|
||||
case 'check-circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"/></svg>;
|
||||
case 'check': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>;
|
||||
case 'chevron-double-left': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/><path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 318 B After Width: | Height: | Size: 266 B |
Loading…
Add table
Reference in a new issue