Skip to content
Snippets Groups Projects
Commit 85022cf3 authored by Brian Peiris's avatar Brian Peiris
Browse files

add and style menu button

parent 0e0b78f4
No related branches found
No related tags found
No related merge requests found
......@@ -3,16 +3,18 @@
width: 100%;
background-color: rgba(0, 0, 0, 0.35);
bottom: 0;
display: grid;
display: flex;
font-size: 1.3em;
height: 48px;
}
:local(.hub-info) {
grid-column: 1;
grid-row: 1;
flex: 1;
margin: 8px;
}
:local(.share-button) {
:local(.menu) {
margin: 8px;
}
:local(.menu-button) {
background: none;
border: 3px solid white;
border-radius: 16px;
......@@ -20,16 +22,15 @@
margin: 0 8px;
pointer-events: auto;
cursor: pointer;
width: 32px;
height: 32px;
width: 33px;
height: 33px;
}
:local(.share-button__icon) {
margin-bottom: 1px;
:local(.menu-button__icon) {
margin-left: -1px;
margin-bottom: 1px;
}
:local(.hub-stats) {
grid-column: 3;
grid-row: 1;
flex: 1;
text-align: right;
margin: 8px;
}
......
import React, { Component } from "react";
import PropTypes from "prop-types";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faShare from "@fortawesome/fontawesome-free-solid/faShare";
import faEllipsisH from "@fortawesome/fontawesome-free-solid/faEllipsisH";
import faShareAlt from "@fortawesome/fontawesome-free-solid/faShareAlt";
import faUsers from "@fortawesome/fontawesome-free-solid/faUsers";
import styles from "../assets/stylesheets/footer.scss";
......@@ -16,8 +17,10 @@ export default class Footer extends Component {
<div className={styles.container}>
<div className={styles.hubInfo}>
<span className={styles.hubName}>{this.props.hubName}</span>
<button className={styles.shareButton} onClick={this.emitChangeToPrevious}>
<FontAwesomeIcon icon={faShare} className={styles.shareButtonIcon} />
</div>
<div className={styles.menu}>
<button className={styles.menuButton}>
<FontAwesomeIcon icon={faEllipsisH} className={styles.menuButtonIcon} />
</button>
</div>
<div className={styles.hubStats}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment