From 978754f9bc81d0d836ddea6656af4a3dadce5248 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 28 Jan 2021 19:34:15 +0200 Subject: Move container and return styles back to FormPage --- src/commonStyles.tsx | 53 +------------------------------------------------- src/pages/FormPage.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 51 insertions(+), 54 deletions(-) diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 1136b34..57002a9 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -60,62 +60,11 @@ const invalidStyles = css` } `; -const containerStyles = css` - margin: auto; - width: 50%; - - text-align: center; - font-size: 1.5rem; - - > div { - display: inline-block; - margin: 2rem auto; - width: 50%; - } - - @media (max-width: 850px) { - width: 100%; - - > div { - display: flex; - justify-content: center; - - margin: 0 auto; - } - } - - .return_button { - text-align: left; - } - - .return_button.closed { - text-align: center; - } -`; - -const returnStyles = css` - padding: 0.5rem 2rem; - border-radius: 8px; - - color: white; - text-decoration: none; - white-space: nowrap; - - background-color: ${colors.greyple}; - transition: background-color 300ms; - - :hover { - background-color: ${colors.darkerGreyple}; - } -`; - export { selectable, unselectable, hiddenInput, multiSelectInput, textInputs, - invalidStyles, - containerStyles, - returnStyles + invalidStyles }; diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index abb008f..de80e8a 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -13,10 +13,58 @@ import ScrollToTop from "../components/ScrollToTop"; import { Form, FormFeatures, getForm } from "../api/forms"; import colors from "../colors"; -import { unselectable, containerStyles, returnStyles } from "../commonStyles"; +import { unselectable } from "../commonStyles"; import { Question, QuestionType } from "../api/question"; import ApiClient from "../api/client"; +const containerStyles = css` + margin: auto; + width: 50%; + + text-align: center; + font-size: 1.5rem; + + > div { + display: inline-block; + margin: 2rem auto; + width: 50%; + } + + @media (max-width: 850px) { + width: 100%; + + > div { + display: flex; + justify-content: center; + + margin: 0 auto; + } + } + + .return_button { + text-align: left; + } + + .return_button.closed { + text-align: center; + } +`; + +const returnStyles = css` + padding: 0.5rem 2rem; + border-radius: 8px; + + color: white; + text-decoration: none; + white-space: nowrap; + + background-color: ${colors.greyple}; + transition: background-color 300ms; + + :hover { + background-color: ${colors.darkerGreyple}; + } +`; interface PathParams { id: string @@ -74,7 +122,7 @@ class Navigation extends React.Component {
Return Home
-
+
{ submit } ); -- cgit v1.2.3