centered button icons on mobile view when if text should not be displayed

This commit is contained in:
Florian Scholdei
2019-04-18 18:07:13 +02:00
parent ba3557fbb6
commit 4eb08770b7
5 changed files with 62 additions and 35 deletions

View File

@@ -27,22 +27,26 @@ class FileButtonGroup extends React.Component<Props> {
return (
<ButtonGroup>
<Button action={this.showSources} color={ this.color(!historyIsSelected) }>
<Button
action={this.showSources}
className="reduced-mobile"
color={this.color(!historyIsSelected)}
>
<span className="icon">
<i className="fas fa-code"/>
</span>
<span className="is-hidden-mobile">
{t("sources.content.sourcesButton")}
<i className="fas fa-code" />
</span>
<span>{t("sources.content.sourcesButton")}</span>
</Button>
<Button action={this.showHistory} color={ this.color(historyIsSelected) }>
<Button
action={this.showHistory}
className="reduced-mobile"
color={this.color(historyIsSelected)}
>
<span className="icon">
<i className="fas fa-history"/>
<i className="fas fa-history" />
</span>
<span className="is-hidden-mobile">
{t("sources.content.historyButton")}
</span>
</Button>
<span>{t("sources.content.historyButton")}</span>
</Button>
</ButtonGroup>
);
}