@react-magma/dropzone 1.0.0 → 1.0.1

package/src/components/dropzone/FileIcon.tsx

@@ -24,55 +24,55 @@ const icons = {
   default: {
     Icon: InsertDriveFileIcon,
     style: {
-      color: '#707070',
+      color: magma.colors.neutral500,
     },
   },
   word: {
     Icon: FileWordIcon,
     style: {
-      color: '#006298',
+      color: magma.colors.info500,
     },
   },
   excel: {
     Icon: FileExcelIcon,
     style: {
-      color: '#3A8200',
+      color: magma.colors.success500,
     },
   },
   powerpoint: {
     Icon: FilePowerpointIcon,
     style: {
-      color: '#FC4C02',
+      color: magma.colors.warning500,
     },
   },
   pdf: {
     Icon: FilePdfIcon,
     style: {
-      color: '#C61D23',
+      color: magma.colors.danger500,
     },
   },
   image: {
     Icon: ImageIcon,
     style: {
-      color: '#707070',
+      color: magma.colors.neutral500,
     },
   },
   video: {
     Icon: VideocamIcon,
     style: {
-      color: '#707070',
+      color: magma.colors.neutral500,
     },
   },
   audio: {
     Icon: AudiotrackIcon,
     style: {
-      color: '#707070',
+      color: magma.colors.neutral500,
     },
   },
   archive: {
     Icon: FileZipIcon,
     style: {
-      color: '#707070',
+      color: magma.colors.neutral500,
     },
   },
 };

package/src/components/dropzone/Preview.tsx

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 
 import {
   CheckCircleIcon,
@@ -44,6 +39,9 @@ export interface PreviewProps extends Omit<FlexProps, 'behavior'> {
   minSize?: number;
   onDeleteFile?: (file: FilePreview) => void;
   onRemoveFile?: (file: FilePreview) => void;
+  /**
+   * @internal
+   */
   testId?: string;
   thumbnails: boolean;
 }
@@ -78,7 +76,7 @@ const IconStyles = {
 };
 
 const Errors = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral06};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};
   padding: 16px;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
@@ -103,15 +101,14 @@ const FileName = styled(Flex)`
 `;
 
 const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`
-  background-color: ${({ isInverse, theme }) =>
-    isInverse ? theme.colors.foundation02 : theme.colors.neutral08};
+  background-color: none;
   border-color: ${({ file, theme, isInverse }) =>
     file.errors
       ? isInverse
-        ? theme.colors.dangerInverse
+        ? theme.colors.danger200
         : theme.colors.danger
-      : theme.colors.neutral06};
-  border-width: ${({ file }) => (file.errors ? '2px' : '1px')};
+      : theme.colors.neutral300};
+  border-width: 1px;
   margin: 10px 0;
 `;
 
@@ -149,12 +146,20 @@ const formatError = (
     case 'file-too-large':
       return {
         ...error,
-        message: `${error.message} ${formatFileSize(constraints.maxSize, 2, byteLabel)}.`,
+        message: `${error.message} ${formatFileSize(
+          constraints.maxSize,
+          2,
+          byteLabel
+        )}.`,
       };
     case 'file-too-small':
       return {
         ...error,
-        message: `${error.message} ${formatFileSize(constraints.minSize, 2, byteLabel)}.`,
+        message: `${error.message} ${formatFileSize(
+          constraints.minSize,
+          2,
+          byteLabel
+        )}.`,
       };
     case 'file-invalid-type':
       return { ...error, message: `${error.message}: ${messageSuffix}` };
@@ -197,7 +202,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
       useEffect(() => {
         let mounted = true;
         setTimeout(() => {
-          if(mounted) {
+          if (mounted) {
             setDone(true);
           }
         }, 1000);
@@ -224,9 +229,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
         return (
           <StatusIcons>
             <Spinner
-              color={
-                isInverse ? theme.colors.foundation04 : theme.colors.primary
-              }
+              color={isInverse ? theme.colors.neutral100 : theme.colors.primary}
             />
           </StatusIcons>
         );
@@ -236,9 +239,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
         <StatusIcons>
           <Transition isOpen={!done} unmountOnExit fade>
             <CheckCircleIcon
-              color={
-                isInverse ? theme.colors.successInverse : theme.colors.success
-              }
+              color={isInverse ? theme.colors.success200 : theme.colors.success}
               style={{ marginTop: '4px' }}
             />
           </Transition>
@@ -283,7 +284,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
               {file.errors ? (
                 <ErrorIcon
                   color={
-                    isInverse ? theme.colors.dangerInverse : theme.colors.danger
+                    isInverse ? theme.colors.danger200 : theme.colors.danger
                   }
                   size={24}
                 />
@@ -299,9 +300,15 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
             <FileName xs behavior={FlexBehavior.item} theme={theme}>
               {file.name}
             </FileName>
-            {file.processor && file.processor.status === 'pending' && <Flex role="progressbar" style={{ marginLeft: 'auto' }} behavior={FlexBehavior.item}>
-              {file.processor.percent}
-            </Flex>}
+            {file.processor && file.processor.status === 'pending' && (
+              <Flex
+                role="progressbar"
+                style={{ marginLeft: 'auto' }}
+                behavior={FlexBehavior.item}
+              >
+                {file.processor.percent}
+              </Flex>
+            )}
             <Flex behavior={FlexBehavior.item}>{actions}</Flex>
           </StyledFlex>
           {file.errors && (
@@ -317,7 +324,7 @@ export const Preview = forwardRef<HTMLDivElement, PreviewProps>(
                     <ErrorHeader
                       style={{
                         color: isInverse
-                          ? theme.colors.dangerInverse
+                          ? theme.colors.danger200
                           : theme.colors.danger,
                       }}
                     >