From 0aa07b9d0f5e8c53182f4422596f64c4d579548b Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulipchat.com>
Date: Wed, 8 Feb 2017 23:17:07 -0800
Subject: [PATCH] subs: Improve transitions styling for subscriptions page.

---
 static/js/subs.js               |  4 ++--
 static/styles/subscriptions.css | 20 ++++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/js/subs.js b/static/js/subs.js
index 700a554737..9276e37ea4 100644
--- a/static/js/subs.js
+++ b/static/js/subs.js
@@ -677,7 +677,7 @@ exports.onlaunchtrigger = function () {
 exports.launch = function () {
     meta.is_open = true;
     exports.setup_page(function () {
-        $("#subscription_overlay").fadeIn(300);
+        $("#subscription_overlay").addClass("show");
     });
 };
 
@@ -691,7 +691,7 @@ Object.defineProperty(exports, "is_open", {
 exports.close = function () {
     hashchange.exit_settings();
     meta.is_open = false;
-    $("#subscription_overlay").fadeOut(500);
+    $("#subscription_overlay").removeClass("show");
     subs.remove_miscategorized_streams();
 };
 
diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css
index 20b03fdcc4..ae34278502 100644
--- a/static/styles/subscriptions.css
+++ b/static/styles/subscriptions.css
@@ -401,7 +401,7 @@ form#add_new_subscription {
     top: 3px;
     margin-left: 3px;
     font-size: 1.7em;
-    font-weight: 300;
+    font-weight: 500;
     cursor: pointer;
 }
 
@@ -783,7 +783,8 @@ form#add_new_subscription {
 }
 
 #subscription_overlay {
-    display: none;
+    pointer-events: none;
+    opacity: 0;
     position: fixed;
     top: 0px;
     left: 0px;
@@ -792,10 +793,25 @@ form#add_new_subscription {
     background-color: rgba(0,0,0,0.8);
     overflow: auto;
     z-index: 102;
+
+    transition: all 0.3s ease;
 }
 
 #subscription_overlay.show {
     display: block;
+    pointer-events: all;
+    opacity: 1;
+}
+
+#subscription_overlay .subscriptions-container {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    transition: all 0.3s ease;
+}
+
+#subscription_overlay.show .subscriptions-container {
+    -webkit-transform: scale(1);
+    transform: scale(1);
 }
 
 #subscription_overlay .settings {