PLT-2027- Improvements to about dialog

5 files changed, 102 insertions, 4 deletions

diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 259beeb57..00590495a 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -12,7 +12,7 @@
         text-align: left;
 
         &.light {
-            color: $dark-gray;
+            @include opacity(.6);
             font-size: 1.05em;
             font-style: italic;
             font-weight: normal;
@@ -41,10 +41,13 @@
 
     .form-group {
         margin-bottom: 25px;
+    }
+}
 
-        &.less {
-            margin-bottom: 10px;
-        }
+
+.form-group {
+    &.less {
+        margin-bottom: 10px;
     }
 }
 
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index e2bce5562..947a81318 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -644,6 +644,15 @@ body.ios {
     .post__img {
         width: 46px;
 
+        svg {
+            height: 36px;
+            width: 36px;
+        }
+
+        path {
+            fill: inherit;
+        }
+
         img {
             @include border-radius(50px);
             height: 36px;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 0e1a471cf..909d98416 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -786,6 +786,26 @@
 }
 
 @media screen and (max-width: 640px) {
+    .modal {
+        .about-modal {
+            .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..da6a5717a
--- /dev/null
+++ b/webapp/sass/routes/_about-modal.scss
@@ -0,0 +1,65 @@
+@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;
+            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__logo {
+            @include opacity(.9);
+            float: left;
+            padding: 0 40px 0 20px;
+
+            svg {
+                height: 125px;
+                width: 125px;
+            }
+
+            path {
+                fill: inherit;
+            }
+        }
+    }
+}
diff --git a/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss
index b76dd147f..4f3f6f9cd 100644
--- a/webapp/sass/routes/_module.scss
+++ b/webapp/sass/routes/_module.scss
@@ -1,4 +1,5 @@
 // Only for combining all the files in this folder
+@import 'about-modal';
 @import 'access-history';
 @import 'activity-log';
 @import 'admin-console';