style: add padding to files download (#387) (#639)

Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>

src/components/ExpandableListItemInput.tsx

@@ -1,4 +1,4 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
@@ -134,31 +134,33 @@ export default function ExpandableListItemKey({
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
-        <ExpandableListItemActions>
+        <Box mt={2}>
-          <SwarmButton
+          <ExpandableListItemActions>
-            disabled={
+            <SwarmButton
-              loading ||
+              disabled={
-              inputValue === value ||
+                loading ||
-              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+                inputValue === value ||
-              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+                Boolean(confirmLabelDisabled) || // Disable if external validation is provided
-            }
+                (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
-            loading={loading}
+              }
-            iconType={confirmIcon ?? Check}
+              loading={loading}
-            onClick={() => {
+              iconType={confirmIcon ?? Check}
-              if (onConfirm) onConfirm(inputValue)
+              onClick={() => {
-            }}
+                if (onConfirm) onConfirm(inputValue)
-          >
+              }}
-            {confirmLabel || 'Save'}
+            >
-          </SwarmButton>
+              {confirmLabel || 'Save'}
-          <SwarmButton
+            </SwarmButton>
-            disabled={loading || inputValue === value || inputValue === ''}
+            <SwarmButton
-            iconType={X}
+              disabled={loading || inputValue === value || inputValue === ''}
-            onClick={() => setInputValue(value || '')}
+              iconType={X}
-            cancel
+              onClick={() => setInputValue(value || '')}
-          >
+              cancel
-            Cancel
+            >
-          </SwarmButton>
+              Cancel
-        </ExpandableListItemActions>
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
       </Collapse>
     </>
   )