Skip to content
Snippets Groups Projects
Commit aa53b62f authored by chris's avatar chris
Browse files

align state buttons to the right

parent ec287dbe
No related branches found
No related tags found
1 merge request!414align state buttons to the right
...@@ -16,10 +16,14 @@ const renderImage = file => { ...@@ -16,10 +16,14 @@ const renderImage = file => {
}); });
}; };
const NormalButton = styled.button` const ButtonContainer = styled.div`
left: 600px;
position: absolute; position: absolute;
right: 80px;
top: 16px; top: 16px;
`;
const NormalButton = styled.button`
margin-right: 10px;
/* stylelint-disable-next-line order/properties-alphabetical-order */ /* stylelint-disable-next-line order/properties-alphabetical-order */
${props => ${props =>
...@@ -31,9 +35,7 @@ const NormalButton = styled.button` ...@@ -31,9 +35,7 @@ const NormalButton = styled.button`
`; `;
const ReadOnlyButton = styled.button` const ReadOnlyButton = styled.button`
left: 670px; margin-right: 10px;
position: absolute;
top: 16px;
/* stylelint-disable-next-line order/properties-alphabetical-order */ /* stylelint-disable-next-line order/properties-alphabetical-order */
${props => ${props =>
...@@ -45,9 +47,7 @@ const ReadOnlyButton = styled.button` ...@@ -45,9 +47,7 @@ const ReadOnlyButton = styled.button`
`; `;
const TestModeButton = styled.button` const TestModeButton = styled.button`
left: 760px; margin-right: 10px;
position: absolute;
top: 16px;
/* stylelint-disable-next-line order/properties-alphabetical-order */ /* stylelint-disable-next-line order/properties-alphabetical-order */
${props => ${props =>
...@@ -59,10 +59,6 @@ const TestModeButton = styled.button` ...@@ -59,10 +59,6 @@ const TestModeButton = styled.button`
`; `;
const SubmitButton = styled.button` const SubmitButton = styled.button`
left: 850px;
position: absolute;
top: 16px;
/* stylelint-disable-next-line order/properties-alphabetical-order */ /* stylelint-disable-next-line order/properties-alphabetical-order */
${props => ${props =>
props.isActive && props.isActive &&
...@@ -148,22 +144,23 @@ const Hhmi = () => { ...@@ -148,22 +144,23 @@ const Hhmi = () => {
return ( return (
<> <>
<NormalButton isActive={!readOnly} onClick={normalQuestions}> <ButtonContainer>
Normal <NormalButton isActive={!readOnly} onClick={normalQuestions}>
</NormalButton> Normal
<ReadOnlyButton </NormalButton>
isActive={readOnly && !submitted && !testMode} <ReadOnlyButton
onClick={readOnlyQuestions} isActive={readOnly && !submitted && !testMode}
> onClick={readOnlyQuestions}
Read Only >
</ReadOnlyButton> Read Only
<TestModeButton isActive={testMode} onClick={testModeQuestions}> </ReadOnlyButton>
Test Mode <TestModeButton isActive={testMode} onClick={testModeQuestions}>
</TestModeButton> Test Mode
<SubmitButton isActive={submitted} onClick={submitQuestions}> </TestModeButton>
Submit <SubmitButton isActive={submitted} onClick={submitQuestions}>
</SubmitButton> Submit
</SubmitButton>
</ButtonContainer>
<Wax <Wax
config={config} config={config}
autoFocus autoFocus
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment