From 81281d543b7f41bdc9483b28e4bd2c30084ad455 Mon Sep 17 00:00:00 2001
From: John Marcus <johnmarcusdev@gmail.com>
Date: Thu, 19 Nov 2015 22:22:55 -0800
Subject: [PATCH 1/2] update style.css

---
 widget/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/widget/css/style.css b/widget/css/style.css
index 59b207a..062f0f0 100644
--- a/widget/css/style.css
+++ b/widget/css/style.css
@@ -39,7 +39,7 @@
 /* Bottom Message */
 .holder.bottom-post{
 	background:#fff;
-	position:absolute;
+	position:fixed;
 	left:0;
 	bottom:0;
 	width:100%;

From f37da42da8fc4c69885320f75703d04a0636cff0 Mon Sep 17 00:00:00 2001
From: John Marcus <johnmarcusdev@gmail.com>
Date: Thu, 14 Jan 2016 15:07:53 -0800
Subject: [PATCH 2/2] Clean up UI. Move appStyle css to own css file.

---
 control/content/templates/home.html |   4 +-
 widget/assets/css/style.css         | 250 ++++++++++++++++++++++++++++
 widget/index.html                   |   7 +-
 widget/templates/thread.html        |   6 +-
 4 files changed, 258 insertions(+), 9 deletions(-)

diff --git a/control/content/templates/home.html b/control/content/templates/home.html
index 7d140a3..e2de347 100644
--- a/control/content/templates/home.html
+++ b/control/content/templates/home.html
@@ -1,5 +1,5 @@
 <div ng-if="!ContentHome.socialAppId || !ContentHome.posts.length">
-    <h3 style="text-align: center;">You do not have any posts yet</h3>
+    <h4 class="text-center">You do not have any posts yet.</h4>
 </div>
 <div ng-if="ContentHome.socialAppId" ng-style="{'height': ContentHome.height ? ContentHome.height-100+ 'px' : '800px'}"
      style="overflow-y:scroll;" class="infinite-scroll-parent">
@@ -67,7 +67,7 @@ <h3 style="text-align: center;">You do not have any posts yet</h3>
             </div>
             <hr class="small margin-zero">
             <div ng-if="post.comments.length % 10 == 0 && post.viewComments && !post.moreComments"
-                 class="padding-top-ten head-btn text-center border-bottom-grey padding-bottom-ten">
+                 class="padding-top-ten head-btn text-center padding-bottom-ten">
                 <a ng-click="ContentHome.loadMoreComments(post)">Show More Comments</a>
             </div>
             <div class="comments-list" ng-if="post.comments.length && post.viewComments">
diff --git a/widget/assets/css/style.css b/widget/assets/css/style.css
index 87ec12b..19ede3f 100644
--- a/widget/assets/css/style.css
+++ b/widget/assets/css/style.css
@@ -1,3 +1,224 @@
+/* Plugin CSS */
+/* Fixed Bottom */
+.holder.has-bottom{
+	padding-bottom:38px !important;
+}
+.holder.has-bottom.has-bottom-viewing{
+	padding-bottom:65px !important;
+}
+.holder .bottom.fixed-bottom{
+	position:fixed;
+	bottom:0;
+	left:0;
+	width:100%;
+	background:#fff;
+	z-index:11;
+}
+.holder .bottom div{
+	padding:0;
+}
+.holder .bottom .padded{
+	padding:15px;
+}
+.holder .bottom div a{
+	display:inline-block;
+	width:100%;
+	height:100%;
+	padding:8px;
+	text-decoration:none;
+}
+.places-plugin .bottom.fixed-bottom .col-xs-4 + .col-xs-4{
+	border-left:1px solid rgba(20, 20, 20, 0.25);
+}
+.places-plugin .bottom.fixed-bottom .col-xs-4.active{
+	background:rgba(0,0,0,0.15);
+}
+.holder .bottom > .hidden-content{
+	background:#fff;
+}
+.holder .places-plugin .bottom,
+.holder .fixed-bottom.bottom{
+	bottom:-270px;
+}
+.holder .places-plugin .bottom.active,
+.holder .fixed-bottom.bottom.active{
+	bottom:0;
+}
+.holder .bottom .hidden-content .tabs .tab a,
+.notification-plugin .tabs .tab a{
+	display:block;
+	padding-top:10px;
+	color:#5f5f5f;
+}
+.holder .bottom .hidden-content .tabs .tab + .tab,
+.notification-plugin .tabs .tab + .tab{
+	border-left:1px solid #e5e5e5;
+}
+.notification-plugin .tabs .tab.active a{
+	color:#09a3ee;
+}
+.holder .bottom .hidden-content .tabs .tab.active:after,
+.notification-plugin .tabs .tab.active:after{
+	content:'';
+	display:block;
+	width:100%;
+	height:2px;
+	background:#09a3ee;
+	position:absolute;
+	bottom:-1px;
+	left:0;
+}
+.holder .bottom .hidden-content .tab-content .tab{
+	display:none;
+	height:229px;
+	overflow-y:auto !important;
+	-webkit-overflow-scrolling:touch !important;
+}
+.notification-plugin .tabs .tab a{
+	padding:14px 8px 10px;
+	display:block;
+}
+.notification-plugin .tab-content .tab{
+	display:none;
+}
+.holder .bottom .hidden-content .tab-content .tab.active,
+.notification-plugin .tab-content .tab.active{
+	display:block;
+}
+.holder .bottom .hidden-content .tab-content a,
+.notification-plugin .tab-content a{
+	height:auto;
+}
+.holder .bottom .hidden-content .tab-content a.list-item.active{
+	background:#09a3ee;
+	color:#fff;
+}
+.holder .bottom .hidden-content .toggle-btns{
+	border:1px solid #09a3ee;
+}
+.holder .bottom .hidden-content .toggle-btns a{
+	padding:6px 8px 4px;
+	font-size:12px;
+	vertical-align:top;
+}
+.holder .bottom .hidden-content .toggle-btns a.active{
+	color:#fff;
+}
+.holder .bottom .extra-links a{
+	position:absolute;
+	top:-45px;
+	left:10px;
+	border-radius:100%;
+	font-size:21px;
+	padding:7px;
+	text-align:center;
+	height:35px;
+	width:35px;
+	color:#fff;
+	z-index:13;
+	opacity:0.8;
+}
+.holder .bottom .extra-links a.view-type{
+	top:-95px;
+	
+	top:-45px;
+	left:inherit;
+	right:10px;
+	padding-top:6px;
+	font-size:22px;
+}
+.holder .bottom .viewing-label{
+	position:absolute;
+	top:-28px;
+	padding:3px;
+}
+
+.holder .plugin-banner{
+	position:relative;
+	border-bottom:none !important;
+}
+.holder .info-bar,
+.holder .info-circle{
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
+	padding:10px 0;
+	opacity:0.85;
+	z-index:9;
+}
+.holder .info-bar{
+	background:rgba(0,0,0,0.8);
+}
+.holder .info-circle{
+	bottom:inherit;
+	top:28px;
+	left:50%;
+	margin-left:-75px;
+	width:150px;
+	height:150px;
+	text-align:center;
+	border-radius:100%;
+	background:#efefef;
+}
+.holder .info-circle.bg-white{
+	background:rgba(255, 255, 255, 0.8);	
+}
+.holder .info-circle .info-circle-inner{
+	margin-top:33px;
+}
+.holder .info-circle .info-circle-inner h1{
+	font-size:50px;
+	line-height:54px;
+}
+.holder .info-circle.small{
+	width:110px;
+	height:110px;
+	margin-left:-55px;
+}
+.holder .info-circle.small .info-circle-inner{
+	margin-top:11px;
+}
+.holder .info-bar p{
+	max-width:100%;
+}
+.holder .info-bar .right-icon{
+	margin-top:7px;
+}
+.holder .info-bar .pull-right .padded-icon{
+	padding:5px;
+	display:inline-block;
+	width:30px;
+	height:30px;
+}
+.holder .info-bar .pull-right span.icon{
+	font-size:24px;
+	vertical-align:middle;
+}
+.holder .info-bar .pull-right span.icon.icon-sm{
+	font-size:14px;
+	position:relative;
+	top:-2px;
+}
+.holder .info-bar .pull-right.padded-icon span.icon{
+	font-size:18px;
+	vertical-align:middle;
+}
+.social-plugin .head-btn{
+	position:relative;
+}
+.social-plugin .head-btn:before{
+	content:'';
+	border-bottom:1px solid #ddd;
+	opacity:0.25;
+	bottom:0;
+	left:0;
+	position:absolute;
+	width:100%;
+}
+/* End Plugin CSS */
+
+
 /* Join Group Link */
 .head-btn a{
 	display:block;
@@ -91,11 +312,13 @@
 }
 .holder.bottom-post .post-holder .add-media .icon{
 	font-size:20px;
+	line-height:24px;
 }
 .holder.bottom-post .post-holder .send-message input{
 	border:none;
 	background:none;
 	height:100%;
+	padding-top:7px;
 }
 @media(max-width: 620px){
 	p{
@@ -109,6 +332,8 @@
 	resize: none;
 	padding: 2.5% 2%;
 	line-height:25px;
+	position:relative;
+	top:2px;
 }
 
 /* BOF Upload image section with uploader and cross */
@@ -149,3 +374,28 @@
     color: #555555 !important;
 }
 /* EOF Upload image section with uploader and cross */
+
+/* Play Btn */
+.play-btn{
+	position:relative;
+}
+.play-btn:after{
+	content:"\e612";
+	font-family:'icomoon';
+	position:absolute;
+	width:30px;
+	height:26px;
+	color:#fff;	
+	font-size:30px;
+	line-height:24px;
+	top:50%;
+	left:50%;
+	margin-top:-12px;
+	margin-left:-15px;
+}
+.list-item-media .list-media-holder.play-btn:after{
+	font-size:24px;
+	width:24px;
+	margin-left:-12px;
+	margin-top:-12px;
+}
\ No newline at end of file
diff --git a/widget/index.html b/widget/index.html
index d72bb20..2d3246a 100644
--- a/widget/index.html
+++ b/widget/index.html
@@ -4,7 +4,6 @@
 
     <!-- CSS -->
     <link rel="stylesheet" href="../../../styles/bootstrap.css">
-    <link rel="stylesheet" href="../../../styles/appStyle.css">
     <link rel="stylesheet" href="../../../styles/siteIcons.css">
     <link rel="stylesheet" href="../../../styles/helper.css">
     <link rel="stylesheet" href="../../../styles/transitionAnimation.css">
@@ -44,7 +43,7 @@
         <div class="slide content">
             <div class="padding-zero" style="height: 100%;">
                 <div class="social-plugin social-wall" style="height: calc(100% - 45px)">
-                    <div class="padded head-btn text-center border-bottom-grey padding-bottom-ten margin-bottom-fifteen" style="margin:0 !important;">
+                    <div class="padded head-btn text-center padding-bottom-ten margin-bottom-fifteen" style="margin:0 !important;">
                         <a ng-click="WidgetWall.followUnfollow(WidgetWall.getFollowingStatus())" >{{WidgetWall.getFollowingStatus()}}</a>
                     </div>
                     <div style="overflow-x:hidden; width:100%; overflow-y: auto;height: calc(100% - 48px);" class="infinite-scroll-parent">
@@ -102,7 +101,7 @@
                             </div>
                         </div>
                         <div ng-show=" WidgetWall.SocialItems.items.length<1">
-                            <h4 style="text-align: center;">You do not have any posts yet</h4>
+                            <h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
                         </div>
                     </div>
                 </div>
@@ -110,7 +109,7 @@ <h4 style="text-align: center;">You do not have any posts yet</h4>
 
         </div>
         <div class="holder padding-zero bottom-post bodyBackgroundTheme post-container" ng-if="WidgetWall.SocialItems.socialAppId">
-            <hr class="small">
+		    <hr class="small" style="border-top:none !important;">
             <form ng-submit="" handle-phone-submit  >
             <div class="post-holder clearfix">
                 <div class="add-media">
diff --git a/widget/templates/thread.html b/widget/templates/thread.html
index 38896b2..689e15d 100644
--- a/widget/templates/thread.html
+++ b/widget/templates/thread.html
@@ -1,7 +1,7 @@
 <div class="slide content">
     <div class="padding-zero" style="height: calc(100% - 45px);">
         <div class="social-plugin social-thread" style="height: 100%;">
-            <div class="padded head-btn text-center border-bottom-grey padding-bottom-ten">
+            <div class="padded head-btn text-center padding-bottom-ten">
                 <a ng-click="Thread.followUnfollow(Thread.getFollowingStatus())">{{Thread.getFollowingStatus()}}</a>
             </div>
             <div style="height: calc(100% - 48px);overflow-y: auto;overflow-x: hidden;">
@@ -54,7 +54,7 @@
                     </div>
                     <hr class="small margin-bottom-zero">
                     <div ng-if="Thread.post.commentsCount > 10 && Thread.showMore"
-                         class="padded head-btn text-center border-bottom-grey padding-bottom-ten margin-bottom-five">
+                         class="padded head-btn text-center padding-bottom-ten margin-bottom-five">
                         <a ng-click="Thread.loadMoreComments()">Load More Comments</a>
                     </div>
                     <div class="comments-list">
@@ -111,7 +111,7 @@
     </div>
 </div>
 <div class="holder padding-zero bottom-post bodyBackgroundTheme post-container">
-    <hr class="small">
+    <hr class="small" style="border-top:none !important;">
     <div class="post-holder clearfix">
         <div class="add-media">
             <a>