From c330a21f59e4e32a561364b6146ceba93e7746b7 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Thu, 3 Jun 2021 02:25:35 +0300 Subject: [PATCH] fix stylelint --- .stylelintrc | 2 +- package-lock.json | 23 +++- package.json | 2 +- src/components/Accordion/Accordion.tsx | 1 - src/components/Card.tsx | 4 +- src/components/CrossFadeImages.tsx | 13 +- src/components/Footer/FooterContent.tsx | 3 + src/components/Header.tsx | 3 +- src/components/Hero/Hero.tsx | 3 +- src/components/Hero/HeroAside.tsx | 2 +- src/components/Hero/HeroPrimaryButtons.tsx | 2 +- src/components/Hero/HeroPrimarySection.tsx | 2 +- src/components/Loader.tsx | 6 +- src/components/Navigation.tsx | 2 - src/components/PageLink.tsx | 2 +- src/components/Sections/CTASection.tsx | 116 ++++++++++-------- src/components/Sections/CardSection.tsx | 1 - src/components/Sections/FullWidthSection.tsx | 1 - src/components/Sections/TextSection.tsx | 8 +- src/components/Widgets/Checkbox/Checkbox.tsx | 2 +- .../Widgets/RadioButton/RadioButton.tsx | 4 +- .../SignupQuestionsWidget.tsx | 2 - src/pages/404.tsx | 1 + src/pages/_app.tsx | 2 +- src/views/ActualPage/ActualPageView.tsx | 1 + src/views/CorporatePage/JobAdList.tsx | 1 + src/views/EventPage/EventPageView.tsx | 1 + src/views/FeedPage/FeedPageView.tsx | 1 + src/views/FreshmenPage/FreshmenPageView.tsx | 2 +- src/views/FrontPage/FrontPageView.tsx | 2 + src/views/GuildPage/GuildPageView.tsx | 4 +- src/views/InEnglishPage/InEnglishPageView.tsx | 1 + src/views/SignUpPage/SignUpPageView.tsx | 1 + src/views/common/FormWrapper.tsx | 3 +- src/views/common/LoadingView.tsx | 23 ++-- src/views/common/MarkdownStyles.tsx | 3 +- 36 files changed, 151 insertions(+), 99 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 6e4409d..7c25601 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,6 @@ { "extends": [ - "stylelint-config-recommended", + "stylelint-config-standard", "stylelint-config-styled-components" ], "syntax": "css" diff --git a/package-lock.json b/package-lock.json index 88a2797..dbae5ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,7 @@ "next-sitemap": "^1.6.99", "npm-run-all": "^4.1.5", "stylelint": "^13.13.1", - "stylelint-config-recommended": "^5.0.0", + "stylelint-config-standard": "^22.0.0", "stylelint-config-styled-components": "^0.1.1", "testcafe": "^1.14.2", "typescript": "^4.3.2" @@ -11748,6 +11748,18 @@ "stylelint": "^13.13.0" } }, + "node_modules/stylelint-config-standard": { + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-22.0.0.tgz", + "integrity": "sha512-uQVNi87SHjqTm8+4NIP5NMAyY/arXrBgimaaT7skvRfE9u3JKXRK9KBkbr4pVmeciuCcs64kAdjlxfq6Rur7Hw==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^5.0.0" + }, + "peerDependencies": { + "stylelint": "^13.13.0" + } + }, "node_modules/stylelint-config-styled-components": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz", @@ -23419,6 +23431,15 @@ "dev": true, "requires": {} }, + "stylelint-config-standard": { + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-22.0.0.tgz", + "integrity": "sha512-uQVNi87SHjqTm8+4NIP5NMAyY/arXrBgimaaT7skvRfE9u3JKXRK9KBkbr4pVmeciuCcs64kAdjlxfq6Rur7Hw==", + "dev": true, + "requires": { + "stylelint-config-recommended": "^5.0.0" + } + }, "stylelint-config-styled-components": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz", diff --git a/package.json b/package.json index ae72e72..5ff493b 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "next-sitemap": "^1.6.99", "npm-run-all": "^4.1.5", "stylelint": "^13.13.1", - "stylelint-config-recommended": "^5.0.0", + "stylelint-config-standard": "^22.0.0", "stylelint-config-styled-components": "^0.1.1", "testcafe": "^1.14.2", "typescript": "^4.3.2" diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 77d17b4..c2353f9 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -30,7 +30,6 @@ const Container = styled.div` font-size: 1.125rem; margin: auto; } - } & > div { diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 576ce7a..b5826b2 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -42,7 +42,6 @@ const StyledCard = styled.article` } } - h3 { padding: 0.5rem; font-size: 1.5rem; @@ -54,7 +53,6 @@ const StyledCard = styled.article` button { cursor: pointer; - padding: 0.8rem 2rem; margin: 0.5rem; font-size: 0.8rem; @@ -74,7 +72,7 @@ const WrappedCard: React.FC = ({ }) => ( {image && ( - {image.alt} + {image.alt} )}

{startTime}

{title}

diff --git a/src/components/CrossFadeImages.tsx b/src/components/CrossFadeImages.tsx index 3be53b2..adc1c75 100644 --- a/src/components/CrossFadeImages.tsx +++ b/src/components/CrossFadeImages.tsx @@ -45,21 +45,22 @@ const CrossFadeImages: React.FC = ({ const animation = keyframes` 0% { - opacity:1; + opacity: 1; } ${(presentationTime / TOTAL_TIME) * 100}% { - opacity:1; + opacity: 1; } ${(1 / len) * 100}% { - opacity:0; + opacity: 0; } ${100 - ((fadeTime / TOTAL_TIME) * 100)}% { - opacity:0; + opacity: 0; } + 100% { - opacity:1; + opacity: 1; } - `; +`; const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse(); diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index 5afc07a..91374d8 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -7,6 +7,7 @@ import breakpoints from "@theme/breakpoints"; const Columns = styled.div` display: flex; justify-content: space-between; + & > div > div { margin-bottom: 1rem; } @@ -56,9 +57,11 @@ const MarginSpace = styled.div` const Map = styled.div` flex: 1; + @media screen and (max-width: ${breakpoints.mobile}) { display: none; } + iframe { border: none; } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index edd5da7..477985b 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -11,6 +11,7 @@ import BlockScroll from "./BlockScroll"; const StyledHeader = styled.header` display: flex; flex-flow: row nowrap; + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; } @@ -20,11 +21,9 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>` position: sticky; top: 0; z-index: 10; - padding: 0 1rem; background-color: ${colors.darkBlue}; transition: all 200ms ease-out; - height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")}; ${(p) => (p.$isHidden ? (` diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx index 0f4b3c8..d26409a 100644 --- a/src/components/Hero/Hero.tsx +++ b/src/components/Hero/Hero.tsx @@ -9,11 +9,11 @@ const Container = styled.div` justify-content: space-between; position: relative; padding: 0; - min-height: 75vh; section { padding: 2rem 6rem; + @media screen and (max-width: ${breakpoints.mobile}) { padding: 1rem; } @@ -40,6 +40,7 @@ const Container = styled.div` color: ${colors.white}; background-color: ${colors.darkBlue}; + a:hover { color: ${colors.white}; } diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx index f607ac2..3032d6f 100644 --- a/src/components/Hero/HeroAside.tsx +++ b/src/components/Hero/HeroAside.tsx @@ -39,6 +39,7 @@ interface HeroAsideProps { // TODO: Color combos const Aside = styled.aside<{ colors: string }>` ${(p) => p.colors} + flex: 4; display: flex; flex-direction: column; @@ -58,7 +59,6 @@ const Aside = styled.aside<{ colors: string }>` line-height: 2rem; } - & > p { font-weight: 600; margin-bottom: 2rem; diff --git a/src/components/Hero/HeroPrimaryButtons.tsx b/src/components/Hero/HeroPrimaryButtons.tsx index 37b7a60..5cc521e 100644 --- a/src/components/Hero/HeroPrimaryButtons.tsx +++ b/src/components/Hero/HeroPrimaryButtons.tsx @@ -20,7 +20,7 @@ const Buttons = styled.div<{ row?: boolean }>` margin: 0.5rem; font-size: 0.8rem; font-weight: 800; - letter-spacing: .1em; + letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid ${colors.lightTurquoise}; diff --git a/src/components/Hero/HeroPrimarySection.tsx b/src/components/Hero/HeroPrimarySection.tsx index d5d8cd2..555df48 100644 --- a/src/components/Hero/HeroPrimarySection.tsx +++ b/src/components/Hero/HeroPrimarySection.tsx @@ -29,7 +29,7 @@ const Section = styled.section` &:hover { color: ${colors.white}; - text-decoration: none + text-decoration: none; } } `; diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx index e4e26a4..8887527 100644 --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -15,9 +15,9 @@ const Loader = styled((props) => ( height: 1em; @keyframes rotation { - 0% { transform: rotate(0deg) } - 50% { transform: rotate(180deg) } - 100% { transform: rotate(360deg) } + 0% { transform: rotate(0deg); } + 50% { transform: rotate(180deg); } + 100% { transform: rotate(360deg); } } & > div { diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 2843a4e..144a69c 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -30,7 +30,6 @@ const Nav = styled.div` flex-flow: row nowrap; justify-content: space-between; align-items: center; - font-size: 0.8rem; color: ${colors.lightBlue}; margin-left: 5rem; @@ -53,7 +52,6 @@ const Nav = styled.div` svg { width: 1.5rem; height: 1.5rem; - fill: ${colors.white}; color: ${colors.white}; } diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx index 7639ea5..f5e813c 100644 --- a/src/components/PageLink.tsx +++ b/src/components/PageLink.tsx @@ -32,8 +32,8 @@ const StyledPageLink = styled.div` margin-left: 1rem; text-decoration: none; font-weight: normal; - color: ${colors.blue1}; + &:hover { color: ${colors.darkBlue}; } diff --git a/src/components/Sections/CTASection.tsx b/src/components/Sections/CTASection.tsx index 6d3a020..c160cd2 100644 --- a/src/components/Sections/CTASection.tsx +++ b/src/components/Sections/CTASection.tsx @@ -3,15 +3,73 @@ import styled from "styled-components"; import colors from "@theme/colors"; import { Link } from "@components/index"; -const Section = styled.section<{ colors: string }>` - ${(p) => p.colors} +type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue"; + +const textColors = (bgColor: Colors) => { + switch (bgColor) { + case "orange1": return ( + ` + color: ${colors.white}; + background-color: ${colors[bgColor]}; + a:hover { + color: ${colors.darkBlue}; + } + ` + ); + case "sik100Blue": return ( + ` + background-color: ${colors[bgColor]}; + color: ${colors.sik100Gold}; + ` + ); + case "darkBlue": return ( + ` + background-color: ${colors[bgColor]}; + color: ${colors.white}; + ` + ); + + case "lightBlue": return ( + ` + background-color: ${colors[bgColor]}; + color: ${colors.darkBlue}; + a:hover { + color: ${colors.white}; + } + ` + ); + + case "lightTurquoise": return ( + ` + background-color: ${colors[bgColor]}; + color: ${colors.darkBlue}; + a:hover { + color: ${colors.white}; + } + ` + ); + case "blue1": return ( + ` + background-color: ${colors[bgColor]}; + color: ${colors.white}; + a:hover { + color: ${colors.darkBlue}; + } + ` + ); + default: return ""; + } +}; + +const Section = styled.section<{ bgColor: Colors }>` + ${({ bgColor }) => textColors(bgColor)} display: flex; justify-content: center; text-align: center; align-items: baseline; padding: 2rem 0; - border: 0.5rem colors.sik100Gold; + border: 0.5rem ${colors.sik100Gold}; flex-flow: row wrap; a { @@ -29,71 +87,25 @@ const Section = styled.section<{ colors: string }>` & > h1 { a { - - text-decoration: underline; + text-decoration: underline; } + a:hover { text-decoration: none; } } `; -type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue"; - interface CTASectionProps extends React.HTMLAttributes { bgColor?: Colors; link?: string; linkText?: string; } -const textColors = (bgColor: Colors) => { - switch (bgColor) { - case "orange1": return ` -color: ${colors.white}; -background-color: ${colors[bgColor]}; -a:hover { - color: ${colors.darkBlue}; -} -`; - case "sik100Blue": return ` -background-color: ${colors[bgColor]}; -color: ${colors.sik100Gold}; - `; - case "darkBlue": return ` -background-color: ${colors[bgColor]}; -color: ${colors.white}; - `; - - case "lightBlue": return ` -background-color: ${colors[bgColor]}; -color: ${colors.darkBlue}; -a:hover { - color: ${colors.white}; -} - `; - - case "lightTurquoise": return ` -background-color: ${colors[bgColor]}; -color: ${colors.darkBlue}; -a:hover { - color: ${colors.white}; -} - `; - case "blue1": return ` -background-color: ${colors[bgColor]}; -color: ${colors.white}; -a:hover { - color: ${colors.darkBlue}; -} - `; - default: return ""; - } -}; - const CTASection: React.FC = ({ bgColor = "orange1", link, linkText, children, ...props }) => ( -
+

{children}

{link && ( diff --git a/src/components/Sections/CardSection.tsx b/src/components/Sections/CardSection.tsx index 29d7ceb..d4292d2 100644 --- a/src/components/Sections/CardSection.tsx +++ b/src/components/Sections/CardSection.tsx @@ -3,7 +3,6 @@ import colors from "@theme/colors"; import breakpoints from "@theme/breakpoints"; const CardSection = styled.section` - h6 { color: ${colors.orange1}; } diff --git a/src/components/Sections/FullWidthSection.tsx b/src/components/Sections/FullWidthSection.tsx index c61e1ab..5e77302 100644 --- a/src/components/Sections/FullWidthSection.tsx +++ b/src/components/Sections/FullWidthSection.tsx @@ -4,7 +4,6 @@ import styled from "styled-components"; const StyledSection = styled.section` display: block; padding: 1.5rem; - grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; grid-template-areas: diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx index f73b140..54d8a78 100644 --- a/src/components/Sections/TextSection.tsx +++ b/src/components/Sections/TextSection.tsx @@ -6,10 +6,8 @@ import breakpoints from "@theme/breakpoints"; const StyledSection = styled.section` display: grid; padding: 1.5rem; - word-break: break-word; hyphens: auto; - grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: @@ -45,7 +43,8 @@ const StyledSection = styled.section` margin-top: 0; } - & > div, p { + & > div, + p { grid-area: content; } @@ -69,13 +68,16 @@ const StyledSection = styled.section` & > aside:first-of-type { grid-area: rightaside; padding-left: 1.5rem; + @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } } + & > aside:nth-of-type(2) { grid-area: leftaside; padding-right: 1.5rem; + @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } diff --git a/src/components/Widgets/Checkbox/Checkbox.tsx b/src/components/Widgets/Checkbox/Checkbox.tsx index 4f2895b..2353e1d 100644 --- a/src/components/Widgets/Checkbox/Checkbox.tsx +++ b/src/components/Widgets/Checkbox/Checkbox.tsx @@ -34,7 +34,7 @@ const CustomCBoxElement = styled.span<{ checked?: boolean }>` width: 1em; background-color: ${(props) => (props.checked ? colors.blue1 : colors.grey2)}; - &:focus &:before { + &:focus &::before { transition: box-shadow 150ms ease; content: ''; display: block; diff --git a/src/components/Widgets/RadioButton/RadioButton.tsx b/src/components/Widgets/RadioButton/RadioButton.tsx index 67287e9..22d9f80 100644 --- a/src/components/Widgets/RadioButton/RadioButton.tsx +++ b/src/components/Widgets/RadioButton/RadioButton.tsx @@ -28,7 +28,9 @@ const CustomRadioElement = styled.span<{ checked?: boolean }>` left: 0; height: 1em; width: 1em; - background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")}; /* blue1 or grey2 */ + + /* blue1 or grey2 */ + background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")}; border-radius: 50%; `; diff --git a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx index 63a67e7..7e3c084 100644 --- a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx @@ -12,7 +12,6 @@ const Widget = styled.div` display: flex; flex-flow: row nowrap; align-items: center; - background: none; padding: 0; margin: 1rem 0; @@ -21,7 +20,6 @@ const Widget = styled.div` margin-right: 8px !important; margin-top: -2px !important; } - } `; diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 1638247..6c47ce5 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -9,6 +9,7 @@ const NotFound = styled.main` display: flex; justify-content: center; align-items: center; + p { text-align: center; font-size: 4rem; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3104358..e9c4bfd 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -21,6 +21,7 @@ const GlobalCommonStyles = createGlobalStyle` html { font-family: ${fontFamily}; + /* 12px */ font-size: ${fontSize * 0.75}pt; line-height: ${lineHeight}; @@ -106,7 +107,6 @@ li { font-weight: 600; } - a { text-decoration: underline; color: ${colors.blue1}; diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx index ca99f99..22dc2e7 100644 --- a/src/views/ActualPage/ActualPageView.tsx +++ b/src/views/ActualPage/ActualPageView.tsx @@ -22,6 +22,7 @@ const Gallery = styled.div` @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column; + & > div { min-height: 100vw; } diff --git a/src/views/CorporatePage/JobAdList.tsx b/src/views/CorporatePage/JobAdList.tsx index 26fb11f..7ea856f 100644 --- a/src/views/CorporatePage/JobAdList.tsx +++ b/src/views/CorporatePage/JobAdList.tsx @@ -12,6 +12,7 @@ interface JobAdListProps { const List = styled.ul` padding: 0; + li { margin: 1rem 0; list-style: none; diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index cfd45a0..c90419d 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -22,6 +22,7 @@ const StyledTextSection = styled(TextSection)` & > h1 { color: ${colors.darkBlue}; + p { color: ${colors.orange1}; } diff --git a/src/views/FeedPage/FeedPageView.tsx b/src/views/FeedPage/FeedPageView.tsx index 4014395..6a9675e 100644 --- a/src/views/FeedPage/FeedPageView.tsx +++ b/src/views/FeedPage/FeedPageView.tsx @@ -19,6 +19,7 @@ const StyledTextSection = styled(TextSection)` & > h1 { color: ${colors.darkBlue}; + p { color: ${colors.orange1}; } diff --git a/src/views/FreshmenPage/FreshmenPageView.tsx b/src/views/FreshmenPage/FreshmenPageView.tsx index 1f03055..1ed4c36 100644 --- a/src/views/FreshmenPage/FreshmenPageView.tsx +++ b/src/views/FreshmenPage/FreshmenPageView.tsx @@ -14,7 +14,7 @@ const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`; const ImageContainer = styled.div` width: 100%; - display: block + display: block; `; const FreshmenPageView: React.FC = () => ( diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 1233304..aa5cece 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/src/views/FrontPage/FrontPageView.tsx @@ -42,6 +42,7 @@ const cardTimeOpts: Intl.DateTimeFormatOptions = { const SponsorReel = styled.div` text-align: center; + & > div { display: flex; flex-flow: row wrap; @@ -54,6 +55,7 @@ const SponsorReel = styled.div` min-width: 200px; } } + a { color: ${colors.blue1}; text-decoration: underline; diff --git a/src/views/GuildPage/GuildPageView.tsx b/src/views/GuildPage/GuildPageView.tsx index 779081c..2c150c0 100644 --- a/src/views/GuildPage/GuildPageView.tsx +++ b/src/views/GuildPage/GuildPageView.tsx @@ -30,16 +30,18 @@ const Column = styled.div` section:last-of-type { background-color: ${colors.lightBlue}; + p { a { font-weight: normal; } } } + ul { list-style: none; - li:before { + li::before { content: attr(data-icon); margin-right: 4px; } diff --git a/src/views/InEnglishPage/InEnglishPageView.tsx b/src/views/InEnglishPage/InEnglishPageView.tsx index dcf7950..674a6d8 100644 --- a/src/views/InEnglishPage/InEnglishPageView.tsx +++ b/src/views/InEnglishPage/InEnglishPageView.tsx @@ -22,6 +22,7 @@ const Gallery = styled.div` @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column; + & > div { min-height: 100vw; } diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx index c5268d1..f40e9ae 100644 --- a/src/views/SignUpPage/SignUpPageView.tsx +++ b/src/views/SignUpPage/SignUpPageView.tsx @@ -32,6 +32,7 @@ const StyledSection = styled(TextSection)` & > aside { justify-content: start; + li { padding-bottom: 0.3rem; } diff --git a/src/views/common/FormWrapper.tsx b/src/views/common/FormWrapper.tsx index 25d1a70..e3b6c17 100644 --- a/src/views/common/FormWrapper.tsx +++ b/src/views/common/FormWrapper.tsx @@ -53,8 +53,7 @@ const FormStyleWrapper = styled(Form)` input[type="email"], input[type="number"], textarea, - select - { + select { display: block; width: 100%; } diff --git a/src/views/common/LoadingView.tsx b/src/views/common/LoadingView.tsx index 59fdd2a..87128ae 100644 --- a/src/views/common/LoadingView.tsx +++ b/src/views/common/LoadingView.tsx @@ -22,10 +22,13 @@ const DotPulse = styled.div` 0% { box-shadow: 9984px 0 0 -5px ${colors.white}; } + 30% { box-shadow: 9984px 0 0 2px ${colors.white}; } - 60%, 100% { + + 60%, + 100% { box-shadow: 9984px 0 0 -5px ${colors.white}; } } @@ -34,10 +37,13 @@ const DotPulse = styled.div` 0% { box-shadow: 9999px 0 0 -5px ${colors.white}; } + 30% { box-shadow: 9999px 0 0 2px ${colors.white}; } - 60%, 100% { + + 60%, + 100% { box-shadow: 9999px 0 0 -5px ${colors.white}; } } @@ -46,17 +52,19 @@ const DotPulse = styled.div` 0% { box-shadow: 10014px 0 0 -5px ${colors.white}; } + 30% { box-shadow: 10014px 0 0 2px ${colors.white}; } - 60%, 100% { + + 60%, + 100% { box-shadow: 10014px 0 0 -5px ${colors.white}; } } display: inline-block; margin-left: 1.5rem; - position: relative; left: -9999px; width: 10px; @@ -66,9 +74,10 @@ const DotPulse = styled.div` color: ${colors.white}; box-shadow: 9999px 0 0 -5px ${colors.white}; animation: dotPulse 1.5s infinite linear; - animation-delay: .25s; + animation-delay: 0.25s; - &::before, &::after { + &::before, + &::after { content: ''; display: inline-block; position: absolute; @@ -89,7 +98,7 @@ const DotPulse = styled.div` &::after { box-shadow: 10014px 0 0 -5px ${colors.white}; animation: dotPulseAfter 1.5s infinite linear; - animation-delay: .5s; + animation-delay: 0.5s; } `; diff --git a/src/views/common/MarkdownStyles.tsx b/src/views/common/MarkdownStyles.tsx index 113d5df..1829882 100644 --- a/src/views/common/MarkdownStyles.tsx +++ b/src/views/common/MarkdownStyles.tsx @@ -7,7 +7,8 @@ const MarkdownStyles = styled(ReactMarkdown)` color: ${colors.black}; } - h1, h3 { + h1, + h3 { color: ${colors.orange2}; }