feat: rearranged instructions

src/components/OperatingSystemDownload.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import MacLogo from '../static/apple.svg';
+import LinuxLogo from '../static/linux.svg';
+import WindowsLogo from '../static/windows.svg';
+import { ImageSelectionBox } from './ImageSelectionBox';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+
+  @media only screen and (min-width: 980px) {
+    padding: 0 80px;
+  }
+
+  @media only screen and (min-width: 1200px) {
+    padding: 0 115px;
+  }
+`;
+
+interface OSButtonProps {
+  linuxDownload: string;
+  windowsDownload: string;
+  macDownload: string;
+}
+
+export const OperatingSystemDownload = ({
+  linuxDownload,
+  windowsDownload,
+  macDownload
+}: OSButtonProps) => {
+
+  return (
+    <Container className="flex">
+      <ImageSelectionBox
+        text="Linux"
+        onClick={() => window.location.href = linuxDownload}
+        isActive={false}
+        src={LinuxLogo}
+      />
+      <ImageSelectionBox
+        text="Windows"
+        onClick={() => window.location.href = windowsDownload}
+        isActive={false}
+        src={WindowsLogo}
+      />
+      <ImageSelectionBox
+        text="Mac"
+        onClick={() => window.location.href = macDownload}
+        isActive={false}
+        src={MacLogo}
+      />
+    </Container>
+  );
+};

src/pages/Acknowledgements/Accordion.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface AccordionProps {
+  children: React.ReactNode;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({ children }) => {
+  return <div style={{ width: '100%'}}>{children}</div>;
+};
+
+export default Accordion;

src/pages/Acknowledgements/AccordionItem.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Down, Up } from 'grommet-icons';
+
+interface AccordionItemProps {
+  title: JSX.Element;
+  children: React.ReactNode;
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleOpen = () => setIsOpen(!isOpen);
+
+  const AccordionItemWrapper = styled.div`
+    border: 1px solid #efefef;
+    margin-bottom: 5px;
+  `;
+
+  const AccordionHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px;
+    background: #f0fbff;
+    font-weight: bold;
+  `;
+
+  const AccordionContent = styled.div`
+    padding: 20px;
+    border-top: 1px solid #efefef;
+  `;
+
+  const Arrow = styled.span`
+    margin-left: 10px;
+  `;
+
+  return (
+    <AccordionItemWrapper>
+      <AccordionHeader onClick={toggleOpen}>
+        {title}
+        <Arrow>{isOpen ? <Up /> : <Down />}</Arrow>
+      </AccordionHeader>
+      {isOpen && <AccordionContent>{children}</AccordionContent>}
+    </AccordionItemWrapper>
+  );
+};

src/pages/Acknowledgements/AcknowledgementSection.tsx

@@ -34,6 +34,7 @@ export interface AcknowledgementSectionData {
   content: JSX.Element;
   acknowledgementText?: JSX.Element;
   acknowledgementId: AcknowledgementIdsEnum;
+  showTitle: boolean;
 }
 
 interface AcknowledgementSectionProps {
@@ -52,6 +53,7 @@ export const AcknowledgementSection = ({
   handleGoBackClick,
   handleSubmit,
   allAgreedTo,
+  showTitle,
 }: AcknowledgementSectionProps & AcknowledgementSectionData): JSX.Element => {
   const isIntroSection =
     acknowledgementId === AcknowledgementIdsEnum.introSection;
@@ -112,9 +114,9 @@ export const AcknowledgementSection = ({
   return (
     <Container>
       <div>
-        <Heading level={2} size="medium" color="blueDark" className="mb50">
+        {showTitle && <Heading level={2} size="medium" color="blueDark" className="mb50">
           {title}
-        </Heading>
+        </Heading>}
         {content}
       </div>
       <div className="mt20">
@@ -123,7 +125,7 @@ export const AcknowledgementSection = ({
             {acknowledgementText}
           </AcknowledgementText>
         )}
-        {renderButtons()}
+        {showTitle && renderButtons()}
       </div>
     </Container>
   );

src/pages/Acknowledgements/index copy.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import styled from 'styled-components';
+import { Dispatch } from 'redux';
+import _every from 'lodash/every';
+import _pickBy from 'lodash/pickBy';
+import _values from 'lodash/values';
+import {
+  AcknowledgementIdsEnum,
+  AcknowledgementStateInterface,
+  StoreState,
+} from '../../store/reducers';
+import {
+  DispatchWorkflowUpdateType,
+  WorkflowStep,
+  updateWorkflow,
+} from '../../store/actions/workflowActions';
+import {
+  DispatchAcknowledgementStateUpdateType,
+  updateAcknowledgementState,
+} from '../../store/actions/acknowledgementActions';
+import { pageContent, PageContentInterface } from './pageContent';
+import { AcknowledgementProgressTracker } from './AcknowledgementProgressTracker';
+import { AcknowledgementSection } from './AcknowledgementSection';
+import { WorkflowPageTemplate } from '../../components/WorkflowPage/WorkflowPageTemplate';
+import { Paper } from '../../components/Paper';
+
+interface OwnProps {}
+interface StateProps {
+  acknowledgementState: AcknowledgementStateInterface;
+  workflow: WorkflowStep;
+}
+
+interface DispatchProps {
+  dispatchAcknowledgementStateUpdate: DispatchAcknowledgementStateUpdateType;
+  dispatchWorkflowUpdate: DispatchWorkflowUpdateType;
+}
+type Props = StateProps & DispatchProps & OwnProps;
+
+const _AcknowledgementPage = ({
+  acknowledgementState,
+  dispatchAcknowledgementStateUpdate,
+  workflow,
+  dispatchWorkflowUpdate,
+}: Props): JSX.Element => {
+  const [activeAcknowledgementId, setActiveAcknowledgementId] = useState<
+    AcknowledgementIdsEnum
+  >(
+    workflow === WorkflowStep.OVERVIEW
+      ? AcknowledgementIdsEnum.introSection
+      : AcknowledgementIdsEnum.confirmation
+  );
+
+  const allAgreedTo = _every(
+    _values(
+      _pickBy(
+        acknowledgementState,
+        // @ts-ignore
+        (val: boolean, id: AcknowledgementIdsEnum) => {
+          // eslint-disable-next-line eqeqeq
+          return id != AcknowledgementIdsEnum.confirmation;
+        }
+      )
+    )
+  );
+
+  const Subtitle = styled.p`
+    font-size: 20px;
+    margin-bottom: 32px;
+  `;
+
+  const handleSubmit = () => {
+    if (workflow === WorkflowStep.OVERVIEW) {
+      dispatchWorkflowUpdate(WorkflowStep.SELECT_CLIENT);
+    }
+  };
+
+  const handleContinueClick = (id: AcknowledgementIdsEnum) => {
+    dispatchAcknowledgementStateUpdate(id, true);
+    if (+id + 1 in AcknowledgementIdsEnum) {
+      setTimeout(() => setActiveAcknowledgementId(+id + 1), 500);
+    }
+  };
+
+  const handleGoBackClick = (id: AcknowledgementIdsEnum) => {
+    if (+id - 1 in AcknowledgementIdsEnum) {
+      setActiveAcknowledgementId(+id - 1);
+    }
+  };
+
+  const {
+    title,
+    content,
+    acknowledgementText,
+  }: PageContentInterface = pageContent[activeAcknowledgementId];
+  const { formatMessage } = useIntl();
+  return (
+    <WorkflowPageTemplate
+      title={formatMessage({ defaultMessage: 'Advisories' })}
+    >
+      <Subtitle>
+        <FormattedMessage defaultMessage="Everything you should understand before becoming a validator." />
+      </Subtitle>
+      <Paper className="flex flex-row">
+        <AcknowledgementProgressTracker
+          activeAcknowledgementId={activeAcknowledgementId}
+          setActiveAcknowledgementId={setActiveAcknowledgementId}
+        />
+        <AcknowledgementSection
+          showTitle={true}
+          handleContinueClick={handleContinueClick}
+          handleGoBackClick={handleGoBackClick}
+          handleSubmit={handleSubmit}
+          allAgreedTo={allAgreedTo}
+          title={title}
+          content={content}
+          acknowledgementId={activeAcknowledgementId}
+          acknowledgementText={acknowledgementText}
+        />
+      </Paper>
+    </WorkflowPageTemplate>
+  );
+};
+
+const mapStateToProps = (state: StoreState): StateProps => ({
+  workflow: state.workflow,
+  acknowledgementState: state.acknowledgementState,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  dispatchAcknowledgementStateUpdate: (id, value) =>
+    dispatch(updateAcknowledgementState(id, value)),
+  dispatchWorkflowUpdate: step => dispatch(updateWorkflow(step)),
+});
+
+export const AcknowledgementPage = connect<
+  StateProps,
+  DispatchProps,
+  OwnProps,
+  StoreState
+>(
+  mapStateToProps,
+  mapDispatchToProps
+)(_AcknowledgementPage);