feat: improve upload flow (#240)

* feat: separate flow for folder and file uploads * feat: add basic index document detection * feat(wip): separate preview step * fix: fix kb and mb units * feat: add post upload summary, add some styling * feat: upload flow * fix: change element order and add conditional rendering * refactor: remove unused variables for now * fix: put back stamp creation to stamp page * refactor: rework postage stamps and grid * feat: add website and folder icons * feat: add asset preview to download flow, add file icon * feat: add basic design to postage stamp selection dialog * feat: add web icon, shorten stamp in preview * feat: extract swarm hash in download flow * fix: extract swarmbutton and solve icon hover and focus color * fix: always show buy button on stamp page * refactor: downgrade * refactor: speed up icon transition * style: improve download buttons * style: change [back to upload] icon * style: add spacing before swarm gateway text * style: post upload summary spacing * refactor: drop verticalspacing and use box * refactor: merge icons to one component * refactor: use conditions instead of weird assignment * docs: explain filter(x => x) * refactor: generalize capacity * refactor: avoid passing arrow functions * refactor: get rid of PaperGridContainer and Container * fix: fix hover color for postage stamps * feat: add disabled and loading state to buttons * fix: make drag and drop work for websites * feat: handle folders and non existing hashes * fix: provide empty default value to select to avoid console warning * style: remove body2 font variants * fix: remove typo * feat: disable folder upload, add website upload * fix: disable showPreviews to avoid flickering * feat(temp): remove folder upload * fix: remove stuck focus on buttons even after rendering different buttons * style: merge hover and focus styles, fix safari text wrap issue * style: remove dropbox outline in safari
2021-11-25 09:54:03 +01:00
parent 82cf6d9c01
commit 635621b04a
31 changed files with 1187 additions and 183 deletions
@@ -0,0 +1,30 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { ReactElement } from 'react'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+    },
+  }),
+)
+
+interface Props {
+  alt: string
+  src: string | undefined
+  maxHeight?: string
+  maxWidth?: string
+}
+
+export function FitImage(props: Props): ReactElement {
+  const classes = useStyles()
+
+  const inlineStyles: Record<string, string> = {}
+
+  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
+  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+
+  return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
+}