feat: redesign share page (but it is a hack for now)

Author: vojtechsimetka

src/components/AssetPreview.tsx

@@ -1,4 +1,5 @@
 import { Box, Grid } from '@material-ui/core'
+
 import { Typography } from './swarm-ui'
 import type { ReactElement, CSSProperties } from 'react'
 import { File, Folder, Monitor } from 'react-feather'

src/components/Tabs.tsx

@@ -1,5 +1,5 @@
 import { createUseStyles } from 'react-jss'
-import { ReactElement, ReactNode, CSSProperties, ElementType } from 'react'
+import type { ReactElement, ReactNode, CSSProperties, ElementType, MouseEventHandler } from 'react'
 
 import Typography from './Typography'
 import { colors } from './css'
@@ -31,6 +31,28 @@ const useStyles = createUseStyles({
         transition: '0.1s',
       },
     },
+    '& > *:not(:last-child)': {
+      marginRight: 10,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  },
+  light: {
+    color: colors.text.normal,
+    backgroundColor: colors.white,
+    padding: 8,
+    cursor: 'pointer',
+    '& svg': {
+      fill: colors.text.normal,
+    },
+    '&:hover, &:active': {
+      backgroundColor: colors.lightOrange,
+      color: colors.swarmOrange,
+      '& svg': {
+        fill: colors.swarmOrange,
+      },
+    },
   },
   disabled: {
     color: colors.text.normal,
@@ -42,27 +64,19 @@ const useStyles = createUseStyles({
     '&:hover, &:active': {
       color: colors.text.normal,
       backgroundColor: colors.surface.lightGray,
-      transition: '0.1s',
       '& svg': {
         fill: colors.text.normal,
-        transition: '0.1s',
       },
     },
   },
-  icon: {
-    marginRight: 10,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 })
 
 interface Props {
-  variant: 'primary' | 'secondary'
-  children: ReactNode
+  variant: 'primary' | 'secondary' | 'light'
+  children?: ReactNode
   icon?: ReactElement
   style?: CSSProperties
-  onClick?: () => void
+  onClick?: MouseEventHandler
   className?: string
   component?: ElementType
   disabled?: boolean
@@ -73,15 +87,19 @@ const Button = ({ variant, children, style, onClick, icon, className, component,
 
   const DefaultComponent: ElementType = component || 'div'
 
+  let variantClass = ''
+
+  if (variant === 'light') variantClass = classes.light
+
   return (
-    <Typography variant="button" style={style} className={className}>
+    <Typography variant={variant === 'light' ? 'code' : 'button'} style={style} className={className}>
       <DefaultComponent
-        className={`${classes.common} ${disabled ? classes.disabled : ''}`}
+        className={`${classes.common} ${variantClass} ${disabled ? classes.disabled : ''}`}
         onClick={disabled ? undefined : onClick}
         disabled={disabled}
       >
-        {icon ? <div className={classes.icon}>{icon}</div> : null}
-        {children}
+        {icon}
+        {children ? <span>{children}</span> : null}
       </DefaultComponent>
     </Typography>
   )

src/components/swarm-ui/Button.tsx

@@ -1,5 +1,5 @@
 import { createUseStyles } from 'react-jss'
-import { ReactElement, CSSProperties, ElementType } from 'react'
+import type { ReactElement, CSSProperties, ElementType, MouseEventHandler } from 'react'
 
 import { colors } from './css'
 
@@ -44,7 +44,7 @@ const useStyles = createUseStyles({
 interface Props {
   icon?: ReactElement
   style?: CSSProperties
-  onClick?: () => void
+  onClick?: MouseEventHandler
   className?: string
   component?: ElementType
 }

src/components/swarm-ui/IconButton.tsx

@@ -1,5 +1,6 @@
 export const colors = {
   swarmOrange: '#dd7200',
+  lightOrange: '#fcf2e8',
   white: 'white',
   text: {
     normal: '#303030',

src/components/swarm-ui/css.ts

@@ -0,0 +1,18 @@
+import { IconProps, DEFAULT_SIZE } from './index'
+
+export default function ClipboardLine({ size, ...rest }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size || DEFAULT_SIZE}
+      height={size || DEFAULT_SIZE}
+      {...rest}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
+    </svg>
+  )
+}
+
+ClipboardLine.displayName = 'ClipboardLine'

src/components/swarm-ui/icons/ClipboardLine.tsx

@@ -0,0 +1,18 @@
+import { IconProps, DEFAULT_SIZE } from './index'
+
+export default function EyeLine({ size, ...rest }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size || DEFAULT_SIZE}
+      height={size || DEFAULT_SIZE}
+      {...rest}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
+    </svg>
+  )
+}
+
+EyeLine.displayName = 'EyeLine'

src/components/swarm-ui/icons/EyeLine.tsx

@@ -0,0 +1,18 @@
+import { IconProps, DEFAULT_SIZE } from './index'
+
+export default function EyeOffLine({ size, ...rest }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size || DEFAULT_SIZE}
+      height={size || DEFAULT_SIZE}
+      {...rest}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M17.882 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066L1.392 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31zM5.935 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.935 7.35zm6.979 6.978l-3.242-3.242a2.5 2.5 0 0 0 3.241 3.241zm7.893 2.264l-1.431-1.43A8.935 8.935 0 0 0 20.777 12 9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.769z" />
+    </svg>
+  )
+}
+
+EyeOffLine.displayName = 'EyeOffLine'

src/components/swarm-ui/icons/EyeOffLine.tsx

@@ -6,11 +6,25 @@ import FolderAddLine from './FolderAddLine'
 import DownloadLine from './DownloadLine'
 import UploadLine from './UploadLine'
 import DragDropLine from './DragDropLine'
+import EyeLine from './EyeLine'
+import EyeOffLine from './EyeOffLine'
+import ClipboardLine from './ClipboardLine'
 
 export interface IconProps extends SVGAttributes<SVGElement> {
   size?: string | number
 }
 
 export const DEFAULT_SIZE = 18
 
-export { ArrowLeftLine, CheckFill, DragDropLine, DownloadLine, UploadLine, FileAddLine, FolderAddLine }
+export {
+  ArrowLeftLine,
+  CheckFill,
+  DragDropLine,
+  DownloadLine,
+  UploadLine,
+  FileAddLine,
+  FolderAddLine,
+  EyeLine,
+  EyeOffLine,
+  ClipboardLine,
+}

src/components/swarm-ui/icons/index.ts

@@ -3,5 +3,6 @@ import IconButton from './IconButton'
 import Link from './Link'
 import Tooltip from './Tooltip'
 import Typography from './Typography'
+import { colors } from './css'
 
-export { Button, IconButton, Link, Tooltip, Typography }
+export { Button, IconButton, Link, Tooltip, Typography, colors }