diff --git a/QandA/frontend/src/Styles.ts b/QandA/frontend/src/Styles.ts index bf6cc3b..d1510d1 100644 --- a/QandA/frontend/src/Styles.ts +++ b/QandA/frontend/src/Styles.ts @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { css } from '@emotion/react'; export const gray1 = '#383737'; export const gray2 = '#5c5a5a'; @@ -33,3 +34,70 @@ export const PrimaryButton = styled.button` cursor: not-allowed; } `; + +export const Fieldset = styled.fieldset` + margin: 10px auto 0 auto; + padding: 30px; + width: 350px; + background-color: ${gray6}; + border-radius: 4px; + border: 1px solid ${gray5}; + box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16); +`; + +export const FieldContainer = styled.label` + font-weight: 10px; +`; + +const baseFieldCSS = css` + box-sizing: border-box; + font-family: ${fontFamily}; + font-size: ${fontSize}; + margin-bottom: 5px; + padding: 8px 10px; + border: 1px solid ${gray5}; + border-radius: 3px; + color: ${gray2}; + background-color: white; + width: 100%; + :focus { + outline-color: ${gray5}; + } + :disabled { + background-color: ${gray6}; + } +`; + +export const FieldLabel = styled.label` + font-weight: bold; +`; + +export const FieldInput = styled.input` + ${baseFieldCSS} +`; + +export const FieldTextArea = styled.textarea` + ${baseFieldCSS} + height: 100px; +`; + +export const FieldError = styled.div` + font-size: 12px; + color: red; +`; + +export const FormButtonContainer = styled.div` + margin: 30px 0px 0px 0px; + padding: 20px 0px 0px 0px; + border-top: 1px solid ${gray5}; +`; + +export const SubmissionSussess = styled.div` + margin-top: 10px; + color: green; +`; + +export const SubmissionFailure = styled.div` + margin-top: 10px; + color: red; +`;