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

scm-ui-components/packages/ui-components/src/repos/DiffFile.js

@@ -11,7 +11,7 @@ import {
 import injectSheets from "react-jss";
 import classNames from "classnames";
 import { translate } from "react-i18next";
-import {Button} from "../buttons";
+import { Button } from "../buttons";
 
 const styles = {
   panel: {
@@ -181,11 +181,17 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
-    const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
+    const fileControls = fileControlFactory
-    return <div className={classNames("panel", classes.panel)}>
+      ? fileControlFactory(file, this.setCollapse)
+      : null;
+    return (
+      <div className={classNames("panel", classes.panel)}>
         <div className="panel-heading">
           <div className="level">
-            <div className={classNames("level-left", classes.titleHeader)} onClick={this.toggleCollapse}>
+            <div
+              className={classNames("level-left", classes.titleHeader)}
+              onClick={this.toggleCollapse}
+            >
               <i className={icon} />
               <span className={classes.title}>
                 {this.renderFileTitle(file)}
@@ -195,11 +201,16 @@ class DiffFile extends React.Component<Props, State> {
               </span>
             </div>
             <div className="level-right">
-              <Button action={this.toggleSideBySide}>
+              <Button action={this.toggleSideBySide} className="reduced-mobile">
                 <span className="icon is-small">
-                  <i className={classNames("fas", sideBySide ? "fa-align-left" : "fa-columns")} />
+                  <i
+                    className={classNames(
+                      "fas",
+                      sideBySide ? "fa-align-left" : "fa-columns"
+                    )}
+                  />
                 </span>
-                <span className="is-hidden-mobile">
+                <span>
                   {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
                 </span>
               </Button>
@@ -208,7 +219,8 @@ class DiffFile extends React.Component<Props, State> {
           </div>
         </div>
         {body}
-      </div>;
+      </div>
+    );
   }
 }
 

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js

@@ -23,21 +23,17 @@ class ChangesetButtonGroup extends React.Component<Props> {
 
     return (
       <ButtonGroup className="is-pulled-right">
-        <Button link={changesetLink}>
+        <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
+          <span>{t("changeset.buttons.details")}</span>
-            {t("changeset.buttons.details")}
-          </span>
         </Button>
-        <Button link={sourcesLink}>
+        <Button link={sourcesLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-code" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
+          <span>{t("changeset.buttons.sources")}</span>
-            {t("changeset.buttons.sources")}
-          </span>
         </Button>
       </ButtonGroup>
     );

scm-ui/src/repos/branches/components/BranchButtonGroup.js

@@ -25,21 +25,17 @@ class BranchButtonGroup extends React.Component<Props> {
 
     return (
       <ButtonGroup>
-        <Button link={changesetLink}>
+        <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
+          <span>{t("branch.commits")}</span>
-            {t("branch.commits")}
-          </span>
         </Button>
-        <Button link={sourcesLink}>
+        <Button link={sourcesLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-code" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
+          <span>{t("branch.sources")}</span>
-            {t("branch.sources")}
-          </span>
         </Button>
       </ButtonGroup>
     );

scm-ui/src/repos/sources/components/content/FileButtonGroup.js

@@ -27,21 +27,25 @@ 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"/>
+            <i className="fas fa-code" />
-          </span>
-            <span className="is-hidden-mobile">
-            {t("sources.content.sourcesButton")}
           </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>
+          <span>{t("sources.content.historyButton")}</span>
         </Button>
       </ButtonGroup>
     );

scm-ui/styles/scm.scss

@@ -111,6 +111,25 @@ $fa-font-path: "webfonts";
   &.is-primary[disabled] {
     background-color: #40dde7;
   }
+  &.reduced-mobile {
+    @media screen and (max-width: 1087px) {
+      > span:nth-child(2) {
+        display: none;
+      }
+    }
+    @media screen and (max-width: 1087px) and (min-width: 769px) {
+      // simultaneously with left margin of Bulma
+      > .icon:first-child:not(:last-child) {
+        margin: 0;
+      }
+    }
+    @media screen and (max-width: 768px) {
+      // simultaneously with left margin of Bulma
+      .icon:first-child:not(:last-child) {
+        margin-right: calc(-0.375em - 1px);
+      }
+    }
+  }
 }
 
 // multiline Columns