diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js index c34a0449aaab258cf0deab9234dd1953ad824535..2b562b31325db1591767e853b2675f6131a2025d 100644 --- a/editors/demo/src/HHMI/HHMI.js +++ b/editors/demo/src/HHMI/HHMI.js @@ -16,10 +16,14 @@ const renderImage = file => { }); }; -const NormalButton = styled.button` - left: 600px; +const ButtonContainer = styled.div` position: absolute; + right: 80px; top: 16px; +`; + +const NormalButton = styled.button` + margin-right: 10px; /* stylelint-disable-next-line order/properties-alphabetical-order */ ${props => @@ -31,9 +35,7 @@ const NormalButton = styled.button` `; const ReadOnlyButton = styled.button` - left: 670px; - position: absolute; - top: 16px; + margin-right: 10px; /* stylelint-disable-next-line order/properties-alphabetical-order */ ${props => @@ -45,9 +47,7 @@ const ReadOnlyButton = styled.button` `; const TestModeButton = styled.button` - left: 760px; - position: absolute; - top: 16px; + margin-right: 10px; /* stylelint-disable-next-line order/properties-alphabetical-order */ ${props => @@ -59,10 +59,6 @@ const TestModeButton = styled.button` `; const SubmitButton = styled.button` - left: 850px; - position: absolute; - top: 16px; - /* stylelint-disable-next-line order/properties-alphabetical-order */ ${props => props.isActive && @@ -148,22 +144,23 @@ const Hhmi = () => { return ( <> - <NormalButton isActive={!readOnly} onClick={normalQuestions}> - Normal - </NormalButton> - <ReadOnlyButton - isActive={readOnly && !submitted && !testMode} - onClick={readOnlyQuestions} - > - Read Only - </ReadOnlyButton> - <TestModeButton isActive={testMode} onClick={testModeQuestions}> - Test Mode - </TestModeButton> - <SubmitButton isActive={submitted} onClick={submitQuestions}> - Submit - </SubmitButton> - + <ButtonContainer> + <NormalButton isActive={!readOnly} onClick={normalQuestions}> + Normal + </NormalButton> + <ReadOnlyButton + isActive={readOnly && !submitted && !testMode} + onClick={readOnlyQuestions} + > + Read Only + </ReadOnlyButton> + <TestModeButton isActive={testMode} onClick={testModeQuestions}> + Test Mode + </TestModeButton> + <SubmitButton isActive={submitted} onClick={submitQuestions}> + Submit + </SubmitButton> + </ButtonContainer> <Wax config={config} autoFocus