From 8416628dad4e6466879b24e91b4e82269b7c49e0 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sat, 17 Oct 2020 16:49:38 +0100
Subject: [PATCH] fix(ui): make csv delay input thin

---
 .../components/Channels/ChannelCreateForm.js  | 27 +++++++++++++------
 renderer/components/Form/IntegerInput.js      |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/renderer/components/Channels/ChannelCreateForm.js b/renderer/components/Channels/ChannelCreateForm.js
index 129a543faea..5beb88ea806 100644
--- a/renderer/components/Channels/ChannelCreateForm.js
+++ b/renderer/components/Channels/ChannelCreateForm.js
@@ -310,14 +310,25 @@ class ChannelCreateForm extends React.Component {
         )}
 
         <Flex alignItems="center" justifyContent="space-between" mt={2}>
-          <Label
-            htmlFor="remoteCsvDelay"
-            tooltip={intl.formatMessage({ ...messages.remote_csv_delay_tooltip })}
-          >
-            <FormattedMessage {...messages.remote_csv_delay_label} />
-          </Label>
-
-          <IntegerInput field="remoteCsvDelay" placeholder="test" width={80} />
+          <Flex>
+            <Span color="gray" fontSize="s" mr={2}>
+              <Padlock />
+            </Span>
+            <Label
+              htmlFor="remoteCsvDelay"
+              tooltip={intl.formatMessage({ ...messages.remote_csv_delay_tooltip })}
+            >
+              <FormattedMessage {...messages.remote_csv_delay_label} />
+            </Label>
+          </Flex>
+
+          <IntegerInput
+            field="remoteCsvDelay"
+            placeholder="auto"
+            textAlign="right"
+            variant="thin"
+            width={80}
+          />
         </Flex>
       </Box>
     )
diff --git a/renderer/components/Form/IntegerInput.js b/renderer/components/Form/IntegerInput.js
index 7b381fcc519..f4823de4f67 100644
--- a/renderer/components/Form/IntegerInput.js
+++ b/renderer/components/Form/IntegerInput.js
@@ -70,7 +70,7 @@ const preventNonNumericOnPaste = e => {
  */
 class IntegerInput extends React.Component {
   render() {
-    return <BasicInput {...this.props} pattern="[0-9]*" placeholder="0" type="number" />
+    return <BasicInput pattern="[0-9]*" placeholder="0" {...this.props} type="number" />
   }
 }