feat(explorer): make epoch settings component layout horizontal

Author: Alenar

mithril-explorer/src/components/EpochSettings/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Card, ButtonGroup, DropdownButton } from "react-bootstrap";
+import {Card, Row, Col, Stack, Container} from "react-bootstrap";
 import { useSelector } from "react-redux";
 import LinkButton from "#/LinkButton";
 import RawJsonButton from "#/RawJsonButton";
@@ -66,23 +66,33 @@ export default function EpochSettings() {
 
       <Card>
         <Card.Body>
-          <Card.Title>Current Epoch</Card.Title>
-          <div className="mb-2 ps-3">{epochSettings.epoch}</div>
-          <Card.Title>Protocol Parameters</Card.Title>
-          <ProtocolParameters className="mb-2" protocolParameters={epochSettings.protocol} />
-          <Card.Title>Next Protocol Parameters</Card.Title>
-          <ProtocolParameters protocolParameters={epochSettings.next_protocol} />
+          <Container>
+            <Row>
+              <Col xs={12} md="auto">
+                <h5>Current Epoch</h5>
+                <div className="mb-2 ps-3">{epochSettings.epoch}</div>
+              </Col>
+              <Col xs={12} md="auto">
+                <h5>Protocol Parameters</h5>
+                <ProtocolParameters className="mb-2" protocolParameters={epochSettings.protocol}/>
+              </Col>
+              <Col xs={12} md="auto">
+                <h5>Next Protocol Parameters</h5>
+                <ProtocolParameters protocolParameters={epochSettings.next_protocol}/>
+              </Col>
+            </Row>
+          </Container>
         </Card.Body>
         {registrationPageUrl && inOutRegistrationsPageUrl && (
-          <Card.Footer className="text-center">
-            <ButtonGroup>
-              <LinkButton href={registrationPageUrl}>Registered Signers</LinkButton>
-              <DropdownButton as={ButtonGroup}>
-                <LinkButton href={inOutRegistrationsPageUrl} variant="light">
-                  In/Out Registrations
-                </LinkButton>
-              </DropdownButton>
-            </ButtonGroup>
+          <Card.Footer>
+            <Stack direction="horizontal" gap={1} className="justify-content-md-end align-items-stretch justify-content-sm-center">
+              <LinkButton href={registrationPageUrl}>
+                <i className="bi bi-pen"></i> Registered Signers
+              </LinkButton>
+              <LinkButton href={inOutRegistrationsPageUrl} className="">
+                <i className="bi bi-arrow-left-right translate-middle-y"></i> In/Out Registrations
+              </LinkButton>
+            </Stack>
           </Card.Footer>
         )}
       </Card>