From febb6e3b656f0a5e48c928f26d071d2f1baf5b33 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 26 Jun 2015 23:19:29 +0500
Subject: mm-1256 - Improving view modal and close modal button

---
 web/react/components/channel_info_modal.jsx   | 15 ++++++++++++---
 web/sass-files/sass/partials/_modal.scss      | 23 +++++++++++++++++++++--
 web/sass-files/sass/partials/_responsive.scss | 11 ++++-------
 3 files changed, 37 insertions(+), 12 deletions(-)

(limited to 'web')

diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx
index 191297ce4..18addb52f 100644
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -35,9 +35,18 @@ module.exports = React.createClass({
                       <h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4>
                     </div>
                     <div className="modal-body">
-                      <p><strong>Channel Name: </strong>{channel.display_name}</p>
-                      <p><strong>Channel Handle: </strong>{channel.name}</p>
-                      <p><strong>Channel ID: </strong>{channel.id}</p>
+                      <div className="row form-group">
+                        <div className="col-sm-3 info__label">Channel Name: </div>
+                        <div className="col-sm-9">{channel.display_name}</div>
+                      </div>
+                      <div className="row form-group">
+                        <div className="col-sm-3 info__label">Channel Handle:</div>
+                        <div className="col-sm-9">{channel.name}</div>
+                      </div>
+                      <div className="row">
+                        <div className="col-sm-3 info__label">Channel ID:</div>
+                        <div className="col-sm-9">{channel.id}</div>
+                      </div>
                     </div>
                     <div className="modal-footer">
                       <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 22013aa4f..9009dd768 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -1,9 +1,17 @@
+.modal-body {
+	padding: 20px 15px;
+}
 .modal {
 	&.image_modal {
 		.modal-backdrop.in {
 			@include opacity(0.7);
 		}
 	}
+	.info__label {
+		font-weight: bold;
+		text-align: right;
+		padding-right: 0;
+	}
 	.remove__member {
 		float: right;
 	}
@@ -29,7 +37,7 @@
 		border-radius: 0;
 		background: $primary-color;
 		color: #FFF;
-	  	padding: 15px 15px 11px;
+		padding: 15px 15px 11px;
 		border: none;
 		min-height: 56px;
 		@include clearfix;
@@ -41,11 +49,22 @@
 			margin: 0;
 		}
 		button.close {
-			margin-top: 0;
+			margin: -2px -2px 0 0;
 			color: #fff;
 			@include opacity(1);
 			z-index: 5;
+			width: 30px;
+			height: 30px;
+			line-height: 30px;
+			@include single-transition(all, 0.25s, ease-in);
 			position: relative;
+			&:hover {
+				background: rgba(0, 0, 0, 0.1);
+			}
+			span {
+				position: relative;
+				top: -1px;
+			}
 		}
 		.btn {
 			margin-right: 10px;
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 3949fc064..509c764b3 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -231,17 +231,14 @@
         }
     }
     .modal {
+        .info__label {
+            text-align: left;
+            padding-bottom: 5px;
+        }
         .modal-header {
-            padding-left: 20px;
-            padding-right: 20px;
             .modal-action {
                 margin-top: 10px;
             }
-            button.close {
-                width: 35px;
-                height: 32px;
-                margin: -5px -10px 0;
-            }
             .modal-title {
                 float: none;
             }
-- 
cgit v1.2.3-1-g7c22