Skip to content
This repository has been archived by the owner on Feb 27, 2024. It is now read-only.

Commit

Permalink
♻️ #289 UploadForm を CSS Modules に置換え
Browse files Browse the repository at this point in the history
  • Loading branch information
@keitakn
keitakn committed May 30, 2023
1 parent 7d038b7 commit 4e42ec5
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 104 deletions.
103 changes: 58 additions & 45 deletions ...ts/Upload/UploadForm/StyledComponents.tsx → ...s/Upload/UploadForm/UploadForm.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import styled from 'styled-components';
import { mixins } from '../../../styles';

export const _Wrapper = styled.div`
.wrapper {
display: flex;
flex: none;
flex-direction: column;
Expand All @@ -10,41 +7,44 @@ export const _Wrapper = styled.div`
align-items: center;
order: 0;
padding: 0;
`;
}

export const _Form = styled.form`
@media (max-width: ${mixins.mediaQuerySize.default}) {
width: 380px;
}
.form {
flex: none;
flex-grow: 0;
order: 1;
width: 500px;
`;
}

export const _InputFileArea = styled.div`
@media (max-width: 767px) {
.form {
width: 380px;
}
}

.input-file-area {
box-sizing: border-box;
display: grid;
height: 220px;
background: ${mixins.colors.white};
border: 1px dashed ${mixins.colors.text};
`;
background: var(--white-color);
border: 1px dashed var(--text-color);
}

export const _Text = styled.div`
.text {
font-family: Roboto, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 28px;
color: ${mixins.colors.subText};
color: var(--sub-text-color);
text-align: center;
`;
}

export const _InputFile = styled.input`
.input-file {
display: none;
`;
}

export const _InputFileLabel = styled.label`
.input-file-label {
inset: 0;
box-sizing: border-box;
display: flex;
Expand All @@ -56,12 +56,12 @@ export const _InputFileLabel = styled.label`
padding: 12px 20px;
margin: auto;
cursor: pointer;
background: ${mixins.colors.background};
border: 1px solid ${mixins.colors.subText};
background: var(--background-color);
border: 1px solid var(--sub-text-color);
border-radius: 4px;
`;
}

export const _InputFileLabelText = styled.div`
.input-file-label-text {
flex: none;
flex-grow: 0;
order: 0;
Expand All @@ -72,73 +72,86 @@ export const _InputFileLabelText = styled.div`
font-style: normal;
font-weight: 700;
line-height: 19px;
color: ${mixins.colors.primaryVariant};
`;
color: var(--primary-variant-color);
}

export const _MaxUploadSizeText = styled.div`
.max-upload-size-text {
height: 28px;
font-family: Roboto, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 28px;
color: ${mixins.colors.subText};
color: var(--sub-text-color);
text-align: right;
`;
}

export const _CautionTextArea = styled.div`
.caution-text-area {
height: 28px;
font-family: Roboto, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
color: ${mixins.colors.text};
color: var(--text-color);
text-align: center;
`;
}

export const _Notes = styled.div`
.notes {
top: 609px;
height: 96px;
font-family: Roboto, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: ${mixins.colors.text};
`;
color: var(--text-color);
}

export const _DescriptionAreaWrapper = styled.div`
.description-area-wrapper {
display: grid;
gap: 24px;
`;
}

export const _PrivacyPolicyArea = styled.div`
.privacy-policy-area {
height: 42px;
font-family: Roboto, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 21px;
color: ${mixins.colors.text};
color: var(--text-color);
text-align: center;
`;
}

export const _PrivacyLinkText = styled.span`
.privacy-link-text {
height: 42px;
font-family: Roboto, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 21px;
color: ${mixins.colors.primary};
color: var(--primary-color);
text-align: center;
text-decoration-line: underline;
cursor: pointer;
`;
}

export const _UploadButtonWrapper = styled.div`
.upload-button-wrapper {
display: flex;
align-items: center;
justify-content: center;
`;
}

.fa-cloud-upload-alt {
font-style: normal;
font-weight: 900;
font-size: 42px;
line-height: 39px;
color: var(--primary-variant-color);
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
18 changes: 18 additions & 0 deletions src/components/Upload/UploadForm/UploadForm.module.css.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
declare const styles: {
readonly wrapper: string;
readonly form: string;
readonly 'input-file-area': string;
readonly text: string;
readonly 'input-file': string;
readonly 'input-file-label': string;
readonly 'input-file-label-text': string;
readonly 'max-upload-size-text': string;
readonly 'caution-text-area': string;
readonly notes: string;
readonly 'description-area-wrapper': string;
readonly 'privacy-policy-area': string;
readonly 'privacy-link-text': string;
readonly 'upload-button-wrapper': string;
readonly 'fa-cloud-upload-alt': string;
};
export = styles;
99 changes: 40 additions & 59 deletions src/components/Upload/UploadForm/UploadForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
createPrivacyPolicyLinksFromLanguages,
} from '../../../features';
import { isAcceptableFileSize } from '../../../features/lgtmImage';
import { mixins } from '../../../styles';
import type {
AcceptedTypesImageExtension,
ImageUploader,
Expand All @@ -30,22 +29,6 @@ import { UploadErrorMessageArea } from '../UploadErrorMessageArea';
import { UploadModal } from '../UploadModal';
import { UploadTitleArea } from '../UploadTitleArea';

import {
_CautionTextArea,
_DescriptionAreaWrapper,
_Form,
_InputFile,
_InputFileArea,
_InputFileLabel,
_InputFileLabelText,
_MaxUploadSizeText,
_Notes,
_PrivacyLinkText,
_PrivacyPolicyArea,
_Text,
_UploadButtonWrapper,
_Wrapper,
} from './StyledComponents';
import {
cautionText,
createImageSizeTooLargeErrorMessage,
Expand All @@ -55,43 +38,35 @@ import {
unexpectedErrorMessage,
uploadInputButtonText,
} from './i18n';

const faCloudUploadAltStyle = {
fontStyle: 'normal',
fontWeight: 900,
fontSize: '42px',
lineHeight: '39px',
color: `${mixins.colors.primaryVariant}`,
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto',
};
import styles from './UploadForm.module.css';

export const createPrivacyPolicyArea = (language: Language): JSX.Element => {
const privacyLinkAttribute = createPrivacyPolicyLinksFromLanguages(language);

switch (language) {
case 'ja':
return (
<_PrivacyPolicyArea>
<div className={styles['privacy-policy-area']}>
アップロードするボタンを押下することで{' '}
<Link href={privacyLinkAttribute.link} prefetch={false}>
<_PrivacyLinkText>{privacyLinkAttribute.text}</_PrivacyLinkText>
<span className={styles['privacy-link-text']}>
{privacyLinkAttribute.text}
</span>
</Link>{' '}
に同意したと見なします
</_PrivacyPolicyArea>
</div>
);
case 'en':
return (
<_PrivacyPolicyArea>
<div className={styles['privacy-policy-area']}>
By pressing the upload button, you agree to the{' '}
<Link href={privacyLinkAttribute.link} prefetch={false}>
<_PrivacyLinkText>{privacyLinkAttribute.text}</_PrivacyLinkText>
<span className={styles['privacy-link-text']}>
{privacyLinkAttribute.text}
</span>
</Link>{' '}
.
</_PrivacyPolicyArea>
</div>
);
default:
return assertNever(language);
Expand Down Expand Up @@ -298,46 +273,52 @@ export const UploadForm: FC<Props> = ({
const { getRootProps } = useDropzone({ onDrop });

return (
<_Wrapper>
<div className={styles.wrapper}>
{/* eslint-disable no-magic-numbers */}
{displayErrorMessages.length === 0 ? (
''
) : (
<UploadErrorMessageArea messages={displayErrorMessages} />
)}
<UploadTitleArea language={language} />
<_Form>
<form className={styles.form}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<div {...getRootProps()}>
<_InputFileArea>
<FaCloudUploadAlt style={faCloudUploadAltStyle} />
<_Text>{imageDropAreaText(language)}</_Text>
<_InputFileLabel>
<_InputFileLabelText>
{uploadInputButtonText(language)}
</_InputFileLabelText>
<_InputFile type="file" onChange={handleFileUpload} />
</_InputFileLabel>
</_InputFileArea>
<div {...getRootProps()} className={styles['input-file-area']}>
<FaCloudUploadAlt className={styles['fa-cloud-upload-alt']} />
<div className={styles.text}>{imageDropAreaText(language)}</div>
<label className={styles['input-file-label']}>
<div className={styles['input-file-label-text']}>
{uploadInputButtonText(language)}
</div>
<input
type="file"
className={styles['input-file']}
onChange={handleFileUpload}
/>
</label>
</div>
<div className={styles['max-upload-size-text']}>
Maximum upload size is 4MB
</div>
<_MaxUploadSizeText>Maximum upload size is 4MB</_MaxUploadSizeText>
<_DescriptionAreaWrapper>
<_CautionTextArea>{cautionText(language)}</_CautionTextArea>
<_Notes>
<div className={styles['description-area-wrapper']}>
<div className={styles['caution-text-area']}>
{cautionText(language)}
</div>
<div className={styles.notes}>
{noteList(language).map((note, index) => (
<p key={index}>{note}</p>
))}
</_Notes>
</div>
{createPrivacyPolicyArea(language)}
</_DescriptionAreaWrapper>
<_UploadButtonWrapper>
</div>
<div className={styles['upload-button-wrapper']}>
<UploadButton
language={language}
disabled={shouldDisableButton()}
onClick={onClickUploadButton}
/>
</_UploadButtonWrapper>
</_Form>
</div>
</form>
{imagePreviewUrl || createdLgtmImageUrl ? (
<UploadModal
isOpen={modalIsOpen}
Expand All @@ -356,6 +337,6 @@ export const UploadForm: FC<Props> = ({
) : (
''
)}
</_Wrapper>
</div>
);
};

0 comments on commit 4e42ec5

Please sign in to comment.