feat: add identity and feed management (#272)

* feat(wip): add basic feed operations

* ci: bump checks

* ci: bump checks

* feat: rework stamps and add feed functionalities

* refactor: polish and fixes

* feat(wip): add formulas

* feat: show bzz.link for websites

* feat: add stamp empty states and formatBzz

* feat: add feed download

* chore: update manifest-js version

* feat: dev mode support with bee-js 3.1.0 (#273)

* feat: dev mode support with bee-js 3.1.0

* fix: added missing package-lock.json file

* build: remove PR preview

* style: work on design

* feat: add TroubleshootConnectionCard

* build: remove depcheck

Co-authored-by: Attila Gazso <agazso@gmail.com>

src/components/SwarmButton.tsx

@@ -9,13 +9,16 @@ interface Props {
   className?: string
   disabled?: boolean
   loading?: boolean
+  cancel?: boolean
 }
 
 const useStyles = makeStyles(() =>
   createStyles({
     button: {
+      height: '52px',
       position: 'relative',
       whiteSpace: 'nowrap',
+      color: '#242424',
       '&:hover, &:focus': {
         '& svg': {
           stroke: '#fff',
@@ -23,6 +26,10 @@ const useStyles = makeStyles(() =>
         },
       },
     },
+    cancelButton: {
+      background: '#f7f7f7',
+      color: '#606060',
+    },
     spinnerWrapper: {
       position: 'absolute',
       left: '50%',
@@ -34,19 +41,37 @@ const useStyles = makeStyles(() =>
   }),
 )
 
-export function SwarmButton({ children, onClick, iconType, className, disabled, loading }: Props): ReactElement {
+export function SwarmButton({
+  children,
+  onClick,
+  iconType,
+  className,
+  disabled,
+  loading,
+  cancel,
+}: Props): ReactElement {
   const classes = useStyles()
 
+  function getIconColor() {
+    if (loading || disabled) {
+      return 'rgba(0, 0, 0, 0.26)'
+    }
+
+    return cancel ? '#606060' : '#dd7700'
+  }
+
+  function getButtonClassName() {
+    return [className, classes.button, cancel && classes.cancelButton].filter(x => x).join(' ')
+  }
+
   const icon = React.createElement(iconType, {
     size: '1.25rem',
-    color: disabled ? 'rgba(0, 0, 0, 0.26)' : '#dd7700',
+    color: getIconColor(),
   })
 
-  const classNames = className ? [className, classes.button].join(' ') : classes.button
-
   return (
     <Button
-      className={classNames}
+      className={getButtonClassName()}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         onClick()
         event.currentTarget.blur()