From aebe8a8b830b7d4e7b45983b919b645ca7845bdd Mon Sep 17 00:00:00 2001
From: nikolasrnickova <nikola.srnickova@gmail.com>
Date: Tue, 21 Jul 2020 13:39:57 +0200
Subject: [PATCH 1/3] Update gitignore

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index c539ffa..f68128c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,5 @@ typings/
 .env
 .next
 src/**/*.d.ts
-test
\ No newline at end of file
+test
+.history
\ No newline at end of file

From de28a7666be464cfabd39e6d3ca3a62b032ea418 Mon Sep 17 00:00:00 2001
From: nikolasrnickova <nikola.srnickova@gmail.com>
Date: Tue, 21 Jul 2020 13:44:27 +0200
Subject: [PATCH 2/3] commit

---
 .prettierrc                                   |   7 +
 src/components/DropZone/Circle/Circle.tsx     |  52 +++++
 src/components/DropZone/Circle/index.ts       |   1 +
 .../DropZone/Circle/style/Circle.style.ts     |  93 ++++++++
 src/components/DropZone/Circle/style/index.ts |   1 +
 src/components/DropZone/DropZone.story.jsx    |  52 +++++
 src/components/DropZone/DropZone.test.jsx     |  17 ++
 src/components/DropZone/DropZone.tsx          | 212 ++++++++++++++++++
 src/components/DropZone/index.ts              |   1 +
 .../DropZone/style/DropZone.style.ts          | 147 ++++++++++++
 src/components/DropZone/style/index.ts        |   1 +
 11 files changed, 584 insertions(+)
 create mode 100644 .prettierrc
 create mode 100644 src/components/DropZone/Circle/Circle.tsx
 create mode 100644 src/components/DropZone/Circle/index.ts
 create mode 100644 src/components/DropZone/Circle/style/Circle.style.ts
 create mode 100644 src/components/DropZone/Circle/style/index.ts
 create mode 100644 src/components/DropZone/DropZone.story.jsx
 create mode 100644 src/components/DropZone/DropZone.test.jsx
 create mode 100644 src/components/DropZone/DropZone.tsx
 create mode 100644 src/components/DropZone/index.ts
 create mode 100644 src/components/DropZone/style/DropZone.style.ts
 create mode 100644 src/components/DropZone/style/index.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..2841b1a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}
diff --git a/src/components/DropZone/Circle/Circle.tsx b/src/components/DropZone/Circle/Circle.tsx
new file mode 100644
index 0000000..c6b6e2b
--- /dev/null
+++ b/src/components/DropZone/Circle/Circle.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text } from '../../Typography/Text';
+import {
+    StyledLoadingCircle,
+    StyledSVG,
+    StyledSVGCircleOne,
+    StyledSVGCircleTwo,
+    StyledSVGCircleText,
+} from './style/Circle.style';
+import { ColorResult } from 'react-color';
+import { Type } from 'src/types';
+
+interface LoadingCircleProps {
+    progress: number;
+}
+
+export const LoadingCircle: React.FC<LoadingCircleProps> = (props) => {
+    const { progress } = props;
+    const totalDashOffset = 251;
+    const currentDashOffset =
+        totalDashOffset - progress * (totalDashOffset / 100);
+    let circleTwoType: Type = 'error';
+
+    if (progress > 25) {
+        circleTwoType = 'warning';
+    }
+    if (progress > 50) {
+        circleTwoType = 'primary';
+    }
+    if (progress > 75) {
+        circleTwoType = 'success';
+    }
+
+    return (
+        <StyledLoadingCircle>
+            <StyledSVG height="100" width="100" className="svg">
+                <StyledSVGCircleOne cx="50" cy="50" r="40" fill="none" />
+                <StyledSVGCircleTwo
+                    cx="50"
+                    cy="50"
+                    r="40"
+                    fill="none"
+                    type={circleTwoType}
+                    dashOffset={currentDashOffset}
+                />
+            </StyledSVG>
+            <StyledSVGCircleText key={progress} type={circleTwoType}>
+                {`${progress}%`}
+            </StyledSVGCircleText>
+        </StyledLoadingCircle>
+    );
+};
diff --git a/src/components/DropZone/Circle/index.ts b/src/components/DropZone/Circle/index.ts
new file mode 100644
index 0000000..0eda138
--- /dev/null
+++ b/src/components/DropZone/Circle/index.ts
@@ -0,0 +1 @@
+export * from './Circle';
diff --git a/src/components/DropZone/Circle/style/Circle.style.ts b/src/components/DropZone/Circle/style/Circle.style.ts
new file mode 100644
index 0000000..fccc9d3
--- /dev/null
+++ b/src/components/DropZone/Circle/style/Circle.style.ts
@@ -0,0 +1,93 @@
+import styled, { css } from 'styled-components';
+import { Text } from '../../../Typography/Text';
+import { Type } from 'src/types';
+
+interface StyledSVGCircleTwoProps {
+    type: Type;
+    dashOffset: number;
+}
+
+interface StyledSVGCircleText {
+    type: Type;
+    key: number;
+}
+
+export const StyledLoadingCircle = styled.div`
+    height: 100px;
+    width: 100px;
+    position: relative;
+`;
+
+export const StyledSVG = styled.svg`
+    display: block;
+    max-width: 100%;
+`;
+
+export const StyledSVGCircleOne = styled.circle`
+    stroke: ${(props) => props.theme.color.border};
+    stroke-width: 3px;
+`;
+
+export const StyledSVGCircleTwo = styled.circle<StyledSVGCircleTwoProps>`
+    stroke-width: 3px;
+    stroke-dasharray: 251;
+    stroke-dashoffset: ${(props) => props.dashOffset};
+    transform-origin: 50% 50%;
+    transform: rotate(-90deg);
+    transition: stroke 1s ease;
+    
+
+    ${(props) =>
+        props.type === 'error' &&
+        css`
+            stroke: ${props.theme.color.error.alpha};
+        `}
+    ${(props) =>
+        props.type === 'warning' &&
+        css`
+            stroke: ${props.theme.color.warning.alpha};
+        `}
+    ${(props) =>
+        props.type === 'primary' &&
+        css`
+            stroke: ${props.theme.color.primary.alpha};
+        `}
+    ${(props) =>
+        props.type === 'success' &&
+        css`
+            stroke: ${props.theme.color.success.alpha};
+        `}
+`;
+
+export const StyledSVGCircleText = styled(Text)<StyledSVGCircleText>`
+    font-size: 26px;
+    text-anchor: middle;
+    font-weight: bold;
+    position: absolute;
+    top: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: color 1s ease;
+
+    ${(props) =>
+        props.type === 'error' &&
+        css`
+            color: ${props.theme.color.error.alpha};
+        `}
+    ${(props) =>
+        props.type === 'warning' &&
+        css`
+            color: ${props.theme.color.warning.alpha};
+        `}
+    ${(props) =>
+        props.type === 'primary' &&
+        css`
+            color: ${props.theme.color.primary.alpha};
+        `}
+    ${(props) =>
+        props.type === 'success' &&
+        css`
+            color: ${props.theme.color.success.alpha};
+        `}
+        
+`;
diff --git a/src/components/DropZone/Circle/style/index.ts b/src/components/DropZone/Circle/style/index.ts
new file mode 100644
index 0000000..be11f72
--- /dev/null
+++ b/src/components/DropZone/Circle/style/index.ts
@@ -0,0 +1 @@
+export * from './Circle.style';
diff --git a/src/components/DropZone/DropZone.story.jsx b/src/components/DropZone/DropZone.story.jsx
new file mode 100644
index 0000000..1414f91
--- /dev/null
+++ b/src/components/DropZone/DropZone.story.jsx
@@ -0,0 +1,52 @@
+import { select, text, withKnobs, number } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { specs } from 'storybook-addon-specifications';
+import { defaultValues } from '../../constants/defaultValues';
+import { Component, tests } from './DropZone.test';
+import { DropZone } from './DropZone';
+
+const stories = storiesOf('DropZone', module);
+
+stories.addDecorator(withKnobs);
+
+stories.add(
+    'Overview',
+    () => {
+        return (
+            <>
+                <DropZone />
+            </>
+        );
+    },
+    {
+        info: { inline: true },
+    }
+);
+
+stories.add(
+    'Playground',
+    () => {
+        const size = select(
+            `size:`,
+            ['small', `medium`, 'large'],
+            defaultValues.size
+        );
+        const type = select(
+            `type:`,
+            ['primary', 'success', 'warning', 'error'],
+            defaultValues.type
+        );
+        const state = select(`state:`, ['default', 'uploading'], 'default');
+        const progress = number(`progress: `, 0);
+
+        const dropZone = Component(size, type, state, progress);
+
+        specs(() => tests(dropZone));
+
+        return dropZone;
+    },
+    {
+        info: { inline: true },
+    }
+);
diff --git a/src/components/DropZone/DropZone.test.jsx b/src/components/DropZone/DropZone.test.jsx
new file mode 100644
index 0000000..a2d4b5a
--- /dev/null
+++ b/src/components/DropZone/DropZone.test.jsx
@@ -0,0 +1,17 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { defaultValues } from '../../constants/defaultValues';
+import expect from 'expect';
+import { DropZone } from './DropZone';
+
+export const Component = (size, type, state, progress) => {
+    return (
+        <DropZone size={size} type={type} state={state} progress={progress} />
+    );
+};
+
+export const tests = (dropZone = Component()) => {
+    let output = shallow(dropZone);
+};
+
+tests();
diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
new file mode 100644
index 0000000..f255a88
--- /dev/null
+++ b/src/components/DropZone/DropZone.tsx
@@ -0,0 +1,212 @@
+import React, { ReactElement } from 'react';
+import { Icon } from '../Icon';
+import { Text, Title } from '../Typography';
+import {
+    StyledDropZone,
+    StyledDropZoneIcon,
+    StyledDropZoneIconWrapper,
+    StyledSmallText,
+    StyledUploadingTitle,
+    StyledDropZoneText,
+    StyledProgressCircle,
+    StyledSVG,
+    StyledSVGCircle,
+    StyledSVGCircleText,
+} from './style/DropZone.style';
+import { Size, Type } from 'src/types';
+import { LoadingCircle } from './Circle';
+
+type DropZoneState = 'default' | 'uploading';
+
+interface DropZoneProps {
+    size: Size;
+    type: Type;
+    state: DropZoneState;
+    progress: number;
+}
+
+export const DropZone: React.FC<DropZoneProps> = (props) => {
+    const { size, type, state, progress } = props;
+    console.log('progress ' + progress);
+
+    const defaultText = {
+        small: {
+            upload: (
+                <Text element="span" type="default">
+                    Nahrát soubory
+                </Text>
+            ),
+            importSuccees: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl úspěšně
+                </StyledUploadingTitle>
+            ),
+            importFailed: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import se bohužel nezdařil
+                </StyledUploadingTitle>
+            ),
+            importWarning: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl částečně
+                </StyledUploadingTitle>
+            ),
+            progressText: (
+                <>
+                    <Text type="default">Probíhá nahrávání</Text>
+                </>
+            ),
+        },
+        medium: {
+            upload: (
+                <>
+                    <Title level={5}>Přetáhněte soubory zde</Title>
+                    <StyledSmallText element="span" type="default">
+                        - nebo -
+                    </StyledSmallText>
+                    <StyledDropZoneText element="strong">
+                        klikněte a vyberte soubory
+                    </StyledDropZoneText>
+                </>
+            ),
+            importSuccees: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl úspěšně
+                </StyledUploadingTitle>
+            ),
+            importFailed: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import se bohužel nezdařil
+                </StyledUploadingTitle>
+            ),
+            importWarning: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl částečně
+                </StyledUploadingTitle>
+            ),
+            progressText: (
+                <>
+                    <Title level={5}>Probíhá nahrávání souboru</Title>
+                    <Text element="span" type="default">
+                        Nezavírejte prosím okno prohlížeče
+                    </Text>
+                </>
+            ),
+        },
+        large: {
+            upload: (
+                <>
+                    <Title level={5}>Přetáhněte soubory zde</Title>
+                    <StyledSmallText element="span" type="default">
+                        - nebo -
+                    </StyledSmallText>
+                    <StyledDropZoneText element="strong">
+                        klikněte zde a vyberte soubory z místního úložiště
+                    </StyledDropZoneText>
+                </>
+            ),
+            importSuccees: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl úspěšně
+                </StyledUploadingTitle>
+            ),
+            importFailed: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import se bohužel nezdařil
+                </StyledUploadingTitle>
+            ),
+            importWarning: (
+                <StyledUploadingTitle level={5} size={size}>
+                    Import proběhl částečně
+                </StyledUploadingTitle>
+            ),
+            progressText: (
+                <>
+                    <Title level={5}>Probíhá nahrávání souboru</Title>
+                    <Text element="span" type="default">
+                        Nezavírejte prosím okno prohlížeče
+                    </Text>
+                </>
+            ),
+        },
+    };
+
+    let uploadText = defaultText.small.upload;
+    let importWarning = defaultText.small.importWarning;
+    let importSuccess = defaultText.small.importSuccees;
+    let importFailed = defaultText.small.importFailed;
+
+    if (size === 'medium') {
+        uploadText = defaultText.medium.upload;
+        importWarning = defaultText.medium.importWarning;
+        importSuccess = defaultText.medium.importSuccees;
+        importFailed = defaultText.medium.importFailed;
+    }
+
+    if (size === 'large') {
+        uploadText = defaultText.large.upload;
+        importWarning = defaultText.large.importWarning;
+        importSuccess = defaultText.large.importSuccees;
+        importFailed = defaultText.large.importFailed;
+    }
+
+    let Content = (
+        <>
+            <StyledDropZone size={size}>
+                <StyledDropZoneIconWrapper>
+                    {type == 'primary' && (
+                        <StyledDropZoneIcon
+                            name="upload"
+                            type={type}
+                            size={size}
+                        />
+                    )}
+                    {type == 'warning' && (
+                        <StyledDropZoneIcon
+                            name="warning"
+                            type={type}
+                            size={size}
+                        />
+                    )}
+                    {type == 'success' && (
+                        <StyledDropZoneIcon
+                            name="checkCircle"
+                            type={type}
+                            size={size}
+                        />
+                    )}
+                    {type == 'error' && (
+                        <StyledDropZoneIcon
+                            name="checkCircle"
+                            type={type}
+                            size={size}
+                        />
+                    )}
+                </StyledDropZoneIconWrapper>
+                {type == 'primary' && uploadText}
+                {type == 'warning' && importWarning}
+                {type == 'success' && importSuccess}
+                {type == 'error' && importFailed}
+            </StyledDropZone>
+        </>
+    );
+
+    if (state === 'uploading') {
+        Content = (
+            <>
+                <StyledDropZone size={size}>
+                    <LoadingCircle progress={progress} />
+                    {size === 'small' && defaultText.small.progressText}
+                    {size === 'medium' && defaultText.medium.progressText}
+                    {size === 'large' && defaultText.large.progressText}
+                </StyledDropZone>
+            </>
+        );
+    }
+
+    return <div>{Content}</div>;
+};
+
+DropZone.defaultProps = {
+    size: 'medium',
+};
diff --git a/src/components/DropZone/index.ts b/src/components/DropZone/index.ts
new file mode 100644
index 0000000..e87f3b4
--- /dev/null
+++ b/src/components/DropZone/index.ts
@@ -0,0 +1 @@
+export * from './DropZone';
\ No newline at end of file
diff --git a/src/components/DropZone/style/DropZone.style.ts b/src/components/DropZone/style/DropZone.style.ts
new file mode 100644
index 0000000..d875a83
--- /dev/null
+++ b/src/components/DropZone/style/DropZone.style.ts
@@ -0,0 +1,147 @@
+import styled, { css } from 'styled-components';
+import { Text } from '../../Typography/Text';
+import { Icon } from '../../Icon';
+import { Title } from '../../Typography/Title';
+import { Type, Size } from 'src/types';
+
+interface StyledDropZoneProps {
+    size: Size;
+}
+
+interface StyledDropZoneIconProps {
+    type: Type;
+    size: Size;
+}
+
+interface StyledUploadingTitle {
+    size: Size;
+}
+
+export const StyledDropZoneText = styled(Text)``;
+
+export const StyledSmallText = styled(Text)`
+    font-size: 10px;
+`;
+
+export const StyledDropZone = styled.div<StyledDropZoneProps>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: paddind-box;
+    padding: ${(props) => props.theme.padding.lg};
+    margin: ${(props) => props.theme.margin.lg};
+    border: 1px dashed ${(props) => props.theme.color.border};
+
+    &:hover {
+        border: 1px dashed ${(props) => props.theme.color.primary.alpha};
+        ${StyledDropZoneText} {
+            color: ${(props) => props.theme.color.primary.alpha};
+        }
+    }
+
+    ${(props) =>
+        props.size === 'small' &&
+        css`
+            width: 120px;
+            height: 120px;
+        `}
+
+    ${(props) =>
+        props.size === 'medium' &&
+        css`
+            width: 220px;
+            height: 200px;
+        `}
+
+    ${(props) =>
+        props.size === 'large' &&
+        css`
+            width: 460px;
+            height: 200px;
+        `}
+`;
+
+export const StyledDropZoneIconWrapper = styled.div`
+    padding-bottom: ${(props) => props.theme.padding.md};
+`;
+
+export const StyledDropZoneIcon = styled(Icon)<StyledDropZoneIconProps>`
+
+    ${(props) =>
+        props.size === 'small' &&
+        css`
+            height: 40px;
+            width: 60px;
+        `}
+
+    ${(props) =>
+        (props.size == 'medium' || props.size == 'large') &&
+        css`
+            height: 80px;
+            width: 80px;
+        `}
+
+    ${(props) =>
+        props.type === 'primary' &&
+        css`
+            color: ${props.theme.color.primary.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'warning' &&
+        css`
+            color: ${props.theme.color.warning.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'success' &&
+        css`
+            color: ${props.theme.color.success.alpha};
+        `}
+
+    ${(props) =>
+        props.type === 'error' &&
+        css`
+            color: ${props.theme.color.error.alpha};
+        `}
+`;
+
+export const StyledUploadingTitle = styled(Title)<StyledUploadingTitle>`
+    text-align: center;
+    ${(props) =>
+        props.size === 'small' &&
+        css`
+            font-size: 13px;
+        `}
+
+    ${(props) =>
+        (props.size == 'medium' || props.size == 'large') &&
+        css`
+            width: 70%;
+            padding-top: ${(props) => props.theme.padding.md};
+        `}
+`;
+
+export const StyledProgressCircle = styled.div`
+    height: 100px;
+    width: 100px;
+    position: relative;
+`;
+
+export const StyledSVG = styled.svg`
+    display: block;
+    max-width: 100%;
+`;
+
+export const StyledSVGCircle = styled.circle``;
+
+export const StyledSVGCircleText = styled(Text)`
+    font-size: 26px;
+    text-anchor: middle;
+    color: #d9121a;
+    font-weight: bold;
+    position: absolute;
+    top: 25px;
+    left: 25px;
+`;
diff --git a/src/components/DropZone/style/index.ts b/src/components/DropZone/style/index.ts
new file mode 100644
index 0000000..cad5b8a
--- /dev/null
+++ b/src/components/DropZone/style/index.ts
@@ -0,0 +1 @@
+export * from './DropZone.style';
\ No newline at end of file

From bad8598b16c48123d20f413cb7b0c7f97c0ad0eb Mon Sep 17 00:00:00 2001
From: nikolasrnickova <nikola.srnickova@gmail.com>
Date: Wed, 22 Jul 2020 08:34:51 +0200
Subject: [PATCH 3/3] dropzone coderiview changes

---
 .gitignore                                    |  3 +-
 src/components/DropZone/Circle/Circle.tsx     |  7 ++---
 .../DropZone/Circle/style/Circle.style.ts     |  9 ++++--
 src/components/DropZone/DropZone.tsx          |  4 ---
 .../DropZone/style/DropZone.style.ts          | 28 ++-----------------
 5 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/.gitignore b/.gitignore
index f68128c..b5f197b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,5 @@ typings/
 .next
 src/**/*.d.ts
 test
-.history
\ No newline at end of file
+.history
+.prettierrc
\ No newline at end of file
diff --git a/src/components/DropZone/Circle/Circle.tsx b/src/components/DropZone/Circle/Circle.tsx
index c6b6e2b..8cf48ad 100644
--- a/src/components/DropZone/Circle/Circle.tsx
+++ b/src/components/DropZone/Circle/Circle.tsx
@@ -5,9 +5,8 @@ import {
     StyledSVG,
     StyledSVGCircleOne,
     StyledSVGCircleTwo,
-    StyledSVGCircleText,
+    StyledLoadingCircleText,
 } from './style/Circle.style';
-import { ColorResult } from 'react-color';
 import { Type } from 'src/types';
 
 interface LoadingCircleProps {
@@ -44,9 +43,9 @@ export const LoadingCircle: React.FC<LoadingCircleProps> = (props) => {
                     dashOffset={currentDashOffset}
                 />
             </StyledSVG>
-            <StyledSVGCircleText key={progress} type={circleTwoType}>
+            <StyledLoadingCircleText key={progress} type={circleTwoType}>
                 {`${progress}%`}
-            </StyledSVGCircleText>
+            </StyledLoadingCircleText>
         </StyledLoadingCircle>
     );
 };
diff --git a/src/components/DropZone/Circle/style/Circle.style.ts b/src/components/DropZone/Circle/style/Circle.style.ts
index fccc9d3..81f562b 100644
--- a/src/components/DropZone/Circle/style/Circle.style.ts
+++ b/src/components/DropZone/Circle/style/Circle.style.ts
@@ -36,22 +36,24 @@ export const StyledSVGCircleTwo = styled.circle<StyledSVGCircleTwoProps>`
     transform: rotate(-90deg);
     transition: stroke 1s ease;
     
-
     ${(props) =>
         props.type === 'error' &&
         css`
             stroke: ${props.theme.color.error.alpha};
         `}
+
     ${(props) =>
         props.type === 'warning' &&
         css`
             stroke: ${props.theme.color.warning.alpha};
         `}
+
     ${(props) =>
         props.type === 'primary' &&
         css`
             stroke: ${props.theme.color.primary.alpha};
         `}
+        
     ${(props) =>
         props.type === 'success' &&
         css`
@@ -59,7 +61,7 @@ export const StyledSVGCircleTwo = styled.circle<StyledSVGCircleTwoProps>`
         `}
 `;
 
-export const StyledSVGCircleText = styled(Text)<StyledSVGCircleText>`
+export const StyledLoadingCircleText = styled(Text)<StyledSVGCircleText>`
     font-size: 26px;
     text-anchor: middle;
     font-weight: bold;
@@ -74,16 +76,19 @@ export const StyledSVGCircleText = styled(Text)<StyledSVGCircleText>`
         css`
             color: ${props.theme.color.error.alpha};
         `}
+
     ${(props) =>
         props.type === 'warning' &&
         css`
             color: ${props.theme.color.warning.alpha};
         `}
+
     ${(props) =>
         props.type === 'primary' &&
         css`
             color: ${props.theme.color.primary.alpha};
         `}
+
     ${(props) =>
         props.type === 'success' &&
         css`
diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
index f255a88..88ccd0b 100644
--- a/src/components/DropZone/DropZone.tsx
+++ b/src/components/DropZone/DropZone.tsx
@@ -8,10 +8,6 @@ import {
     StyledSmallText,
     StyledUploadingTitle,
     StyledDropZoneText,
-    StyledProgressCircle,
-    StyledSVG,
-    StyledSVGCircle,
-    StyledSVGCircleText,
 } from './style/DropZone.style';
 import { Size, Type } from 'src/types';
 import { LoadingCircle } from './Circle';
diff --git a/src/components/DropZone/style/DropZone.style.ts b/src/components/DropZone/style/DropZone.style.ts
index d875a83..baaa5e3 100644
--- a/src/components/DropZone/style/DropZone.style.ts
+++ b/src/components/DropZone/style/DropZone.style.ts
@@ -34,7 +34,8 @@ export const StyledDropZone = styled.div<StyledDropZoneProps>`
     border: 1px dashed ${(props) => props.theme.color.border};
 
     &:hover {
-        border: 1px dashed ${(props) => props.theme.color.primary.alpha};
+        border-color: ${(props) => props.theme.color.primary.alpha};
+
         ${StyledDropZoneText} {
             color: ${(props) => props.theme.color.primary.alpha};
         }
@@ -67,7 +68,6 @@ export const StyledDropZoneIconWrapper = styled.div`
 `;
 
 export const StyledDropZoneIcon = styled(Icon)<StyledDropZoneIconProps>`
-
     ${(props) =>
         props.size === 'small' &&
         css`
@@ -109,6 +109,7 @@ export const StyledDropZoneIcon = styled(Icon)<StyledDropZoneIconProps>`
 
 export const StyledUploadingTitle = styled(Title)<StyledUploadingTitle>`
     text-align: center;
+
     ${(props) =>
         props.size === 'small' &&
         css`
@@ -122,26 +123,3 @@ export const StyledUploadingTitle = styled(Title)<StyledUploadingTitle>`
             padding-top: ${(props) => props.theme.padding.md};
         `}
 `;
-
-export const StyledProgressCircle = styled.div`
-    height: 100px;
-    width: 100px;
-    position: relative;
-`;
-
-export const StyledSVG = styled.svg`
-    display: block;
-    max-width: 100%;
-`;
-
-export const StyledSVGCircle = styled.circle``;
-
-export const StyledSVGCircleText = styled(Text)`
-    font-size: 26px;
-    text-anchor: middle;
-    color: #d9121a;
-    font-weight: bold;
-    position: absolute;
-    top: 25px;
-    left: 25px;
-`;