diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts index 99c1689..641e938 100644 --- a/src/components/Button/styled.ts +++ b/src/components/Button/styled.ts @@ -15,7 +15,7 @@ export const ButtonContainer = styled.input<{ bgColor: string }>` border-radius: 0.8rem; margin: 0 1rem 0 1rem; - padding: 0.8rem 1.2rem; + padding: 0 3rem; `; ButtonContainer.defaultProps = { type: 'button' }; diff --git a/src/components/FileFind/styled.ts b/src/components/FileFind/styled.ts index 8ba3316..2ac0a05 100644 --- a/src/components/FileFind/styled.ts +++ b/src/components/FileFind/styled.ts @@ -4,7 +4,8 @@ export const FileFindContainer = styled.div` width: 100%; display: flex; align-items: center; - margin-top: 2rem; + justify-content: center; + margin: 2rem 2rem 0 2rem; `; export const FileFindText = styled.p` diff --git a/src/components/Progress/styled.ts b/src/components/Progress/styled.ts index 366c5e5..1fb1039 100644 --- a/src/components/Progress/styled.ts +++ b/src/components/Progress/styled.ts @@ -4,15 +4,16 @@ export const ProgressContainer = styled.div` display: flex; flex-direction: column; align-items: center; + width: 100%; `; export const ProgressBar = styled.div<{ width: number }>` display: flex; - min-width: 70rem; - min-height: 5.6rem; background: var(--color-backgorund-progressbar); - border-radius: 1.5rem; - overflow: hidden; + border-radius: 0.5rem; + width: 90%; + height: 3rem; + &::before { content: ' '; transition: all 1s; @@ -28,10 +29,3 @@ export const ProgressText = styled.div` font-weight: 700; margin-top: 2rem; `; - -export const ProgressAnimationBox = styled.div` - width: 20rem; - height: 20rem; - overflow: hidden; - margin-bottom: 1rem; -`; diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 61f8a75..48cf60e 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -17,7 +17,7 @@ import * as S from './styled'; export function MainPage() { const typingText = ['.', '..', '...']; const [typingCount, setTypingCount] = useState(0); - const [uploading, setUploading] = useState(true); + const [uploading, setUploading] = useState(false); const [progressValue, setProgressValue] = useState(0); const [progressStateText, setProgressStateText] = useState('uploading'); @@ -145,8 +145,8 @@ export function MainPage() { }, [typingCount]); return ( - {uploading ? ( - <> + {!uploading ? ( + sethideBoolean(!hideBoolean)} @@ -191,7 +191,7 @@ export function MainPage() { hideBoolean={hideBoolean} /> - + ) : (