Adding the build date and the build hash

3 files changed, 128 insertions, 0 deletions

diff --git a/webapp/components/about_build_modal.jsx b/webapp/components/about_build_modal.jsx
index a47225f7e..011f3d063 100644
--- a/webapp/components/about_build_modal.jsx
+++ b/webapp/components/about_build_modal.jsx
@@ -109,6 +109,22 @@ export default class AboutBuildModal extends React.Component {
                         </div>
                         <div className='col-sm-9'>{config.BuildHash}</div>
                     </div>
+                    <div className='about-modal__hash form-group padding-top x2'>
+                        <p>
+                            <FormattedMessage
+                                id='about.hash'
+                                defaultMessage='Build Hash:'
+                            />
+                            &nbsp;{config.BuildHash}
+                        </p>
+                        <p>
+                            <FormattedMessage
+                                id='about.date'
+                                defaultMessage='Build Date:'
+                            />
+                            &nbsp;{config.BuildDate}
+                        </p>
+                    </div>
                 </Modal.Body>
                 <Modal.Footer>
                     <button
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 0e1a471cf..4e77849ce 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -786,6 +786,40 @@
 }
 
 @media screen and (max-width: 640px) {
+    .modal {
+        .about-modal {
+            .about-modal__content {
+                display: block;
+            }
+
+            .about-modal__hash {
+                p {
+                    word-break: break-all;
+
+                    &:first-child {
+                        float: none;
+                    }
+                }
+            }
+
+            .about-modal__logo {
+                float: none;
+                padding: 0;
+                text-align: center;
+                width: 100%;
+
+                svg {
+                    height: 100px;
+                    width: 100px;
+                }
+            }
+
+            .about-modal__logo + div {
+                padding: 2em 0 0;
+            }
+        }
+    }
+
     .access-history__table {
         > div {
             display: block;
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
new file mode 100644
index 000000000..98119c8aa
--- /dev/null
+++ b/webapp/sass/routes/_about-modal.scss
@@ -0,0 +1,78 @@
+@charset 'UTF-8';
+
+.modal {
+    .about-modal {
+        .modal-header {
+            background: transparent;
+            border: none;
+            color: inherit;
+            padding: 20px 25px 0;
+
+            .close {
+                color: inherit;
+                font-weight: normal;
+                right: 15px;
+            }
+
+            .modal-title {
+                color: inherit;
+                font-size: 16px;
+            }
+        }
+
+        .modal-body {
+            padding: 20px 25px 5px;
+        }
+
+        .about-modal__content {
+            @include clearfix;
+            @include display-flex;
+            @include flex-direction(row);
+            padding: 1em 0 3em;
+        }
+
+        .about-modal__copyright {
+            @include opacity(.6);
+            margin-top: .5em;
+        }
+
+        .about-modal__footer {
+            font-size: 13.5px;
+        }
+
+        .about-modal__title {
+            line-height: 1.5;
+            margin: 0 0 10px;
+        }
+
+        .about-modal__subtitle {
+            @include opacity(.6);
+        }
+
+        .about-modal__hash {
+            @include opacity(.4);
+            font-size: .75em;
+            text-align: right;
+
+            p {
+                &:first-child {
+                    float: left;
+                }
+            }
+        }
+
+        .about-modal__logo {
+            @include opacity(.9);
+            padding: 0 40px 0 20px;
+
+            svg {
+                height: 125px;
+                width: 125px;
+            }
+
+            path {
+                fill: inherit;
+            }
+        }
+    }
+}