From 222b020e9a8053b99b103a8a1bb41f0c77740be5 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 30 Mar 2022 23:03:21 -0700
Subject: [PATCH] client: new-post style improvements and date picker bug fixes

---
 client/components/new-post/index.tsx       | 34 +++++++++++++++++-----
 client/components/new-post/post.module.css | 16 ++++++++++
 client/components/post-list/list-item.tsx  | 33 +++++++++++----------
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx
index 604d03d0..a26b727b 100644
--- a/client/components/new-post/index.tsx
+++ b/client/components/new-post/index.tsx
@@ -163,6 +163,28 @@ const Post = () => {
         }
     }, [title])
 
+    const CustomTimeInput = ({ date, value, onChange }: {
+        date: Date,
+        value: string,
+        onChange: (date: string) => void
+    }) => (
+        <input
+            type="time"
+            value={value}
+            onChange={(e) => {
+                if (!isNaN(date.getTime())) {
+                    onChange(e.target.value || date.toISOString().slice(11, 16))
+                }
+            }}
+            style={{
+                backgroundColor: 'var(--bg)',
+                border: '1px solid var(--light-gray)',
+                borderRadius: 'var(--radius)'
+            }}
+            required
+        />
+    );
+
     return (
         <div style={{ paddingBottom: 150 }}>
             <Title title={title} onChange={onChangeTitle} />
@@ -178,23 +200,19 @@ const Post = () => {
                             id: generateUUID()
                         }])
                     }}
-                    style={{ flex: .7, lineHeight: '40px' }}
                     type="default"
                 >
                     Add a File
                 </Button>
-                <div style={{
-                    display: 'flex',
-                    gap: 'var(--gap)',
-                    alignItems: 'center',
-                }}>
+                <div className={styles.rightButtons}>
                     {<DatePicker
                         onChange={onChangeExpiration}
-                        customInput={<Input label="Expires at" clearable height="40px" />}
+                        customInput={<Input label="Expires at" clearable width="100%" height="40px" />}
                         placeholderText="Won't expire"
                         selected={expiresAt}
                         showTimeInput={true}
-                        // customTimeInput={<Input htmlType="time" />}
+                        // @ts-ignore
+                        customTimeInput={<CustomTimeInput />}
                         timeInputLabel="Time:"
                         dateFormat="MM/dd/yyyy h:mm aa"
                         className={styles.datePicker}
diff --git a/client/components/new-post/post.module.css b/client/components/new-post/post.module.css
index 77e4b07a..b6faa863 100644
--- a/client/components/new-post/post.module.css
+++ b/client/components/new-post/post.module.css
@@ -4,6 +4,13 @@
 	justify-content: space-between;
 	width: 100%;
 	margin-top: var(--gap-double);
+	gap: var(--gap);
+}
+
+.buttons .rightButtons {
+	display: flex;
+	gap: var(--gap);
+	align-items: center;
 }
 
 .datePicker {
@@ -30,4 +37,13 @@
 		justify-content: space-between;
 		min-height: 95px;
 	}
+
+	.buttons .rightButtons {
+		flex-direction: column;
+		align-items: flex-end;
+	}
+
+	.buttons .rightButtons > * {
+		width: min(100%, 350px);
+	}
 }
diff --git a/client/components/post-list/list-item.tsx b/client/components/post-list/list-item.tsx
index a67baa03..cd92cad6 100644
--- a/client/components/post-list/list-item.tsx
+++ b/client/components/post-list/list-item.tsx
@@ -18,31 +18,34 @@ const ListItem = ({ post, isOwner = true, deletePost }: { post: Post, isOwner?:
     return (<FadeIn><li key={post.id}>
         <Card style={{ overflowY: 'scroll' }}>
             <Card.Body>
-                <Text h3>
+                <Text h3 style={{
+                }}>
                     <NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
                         <Link color marginRight={'var(--gap)'}>
                             {post.title}
                         </Link>
                     </NextLink>
-                    <div style={{ display: 'inline-flex' }}>
-                        <span>
-                            <VisibilityBadge visibility={post.visibility} />
-                        </span>
-                        <span style={{ marginLeft: 'var(--gap)' }}>
-                            <CreatedAgoBadge createdAt={post.createdAt} />
-                        </span>
-                        <span style={{ marginLeft: 'var(--gap)' }}>
-                            <Badge type="secondary">{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Badge>
-                        </span>
-                        <span style={{ marginLeft: 'var(--gap)' }}>
-                            <ExpirationBadge postExpirationDate={post.expiresAt} />
-                        </span>
-                    </div>
                     {isOwner && <span style={{ float: 'right' }}>
                         <Button iconRight={<Trash />} onClick={deletePost} auto />
                     </span>}
                 </Text>
 
+
+                <div style={{ display: 'inline-flex' }}>
+                    <span>
+                        <VisibilityBadge visibility={post.visibility} />
+                    </span>
+                    <span style={{ marginLeft: 'var(--gap)' }}>
+                        <CreatedAgoBadge createdAt={post.createdAt} />
+                    </span>
+                    <span style={{ marginLeft: 'var(--gap)' }}>
+                        <Badge type="secondary">{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Badge>
+                    </span>
+                    <span style={{ marginLeft: 'var(--gap)' }}>
+                        <ExpirationBadge postExpirationDate={post.expiresAt} />
+                    </span>
+                </div>
+
             </Card.Body>
             <Divider h="1px" my={0} />
             <Card.Content>