fix of follow-unfollow button behaviour, multiple fixes and improvements of UI glitches, adding of missing players

css/profile.css

@@ -57,49 +57,37 @@
 {
     color: #fff;    
 }
-.profile-card .direct-messages,
-.profile-card .direct-messages-with-user,
-.profile-card .mentions-from-user,
-.profile-card .follow,
-.profile-card .profileUnfollow
+
+.profile-card-buttons
 {
-    display: block;
     position: absolute;
-    bottom: 20px;
-    right: 125px;
-    padding: 10px;
+    bottom: 30px;
+    right: 0;
+}
+
+.profile-card-buttons .direct-messages-with-user,
+.profile-card-buttons .mentions-from-user,
+.profile-card-buttons .follow,
+.profile-card-buttons .unfollow
+{
+    display: inline;
+    padding: 4px 12px;
     font-size: 12px;
-    width: 110px;
+    width: auto;
     text-align: center;
     color: rgba( 0, 0, 0, .7 );
     background: rgba( 0, 0, 0, .1 );
     border: none;
     transition: all .2s linear;
 }
-.profile-card .follow,
-.profile-card .profileUnfollow
-{
-    right: 240px;
-}
-.profile-card .mentions-from-user
-{
-    right: 10px;
-}
-.profile-card .profileUnfollow
-{
-    background-color: rgba( 0, 0, 0, .3 );
-}
-.profile-card .direct-messages:hover,
-.profile-card .direct-messages-with-user:hover,
-.profile-card .mentions-from-user:hover,
-.profile-card .follow:hover
-{
-    background: rgba( 0, 0, 0, .3 );
-}
-.profile-card .profileUnfollow:hover
+
+.profile-card-buttons .direct-messages-with-user:hover,
+.profile-card-buttons .mentions-from-user:hover
 {
-    background: rgba( 0, 0, 0, .1 );
+    color: #fff;
+    background: #45474d;
 }
+
 .profile-card.forEdition
 {
     margin: 0 auto;
@@ -175,24 +163,27 @@
     padding: 10px;
     text-align: right;
 }
+
 /*************************************
-****************** PROFILE MODAL
-*************************************
+************ PROFILE MODAL ***********
+**************************************/
+
 .profile-modal .modal-wrapper
 {
     width: 580px;
     border-radius: 5px;
     overflow: hidden;
     position: absolute;
-    top:10%;
-    height: 80%;
+    top:5%;
+    height: 90%;
     margin-left: -290px;
 
-}*/
+}
 .profile-modal .modal-content
 {
     padding: 3px;
     height: 100%;
+    overflow-y: hidden;
 }
 #msngrswr {
     display: none;
@@ -274,7 +265,7 @@
 {
     margin-left: 0;
     padding: 5px 0 5px 0;
-    height: 75%;
+    height: 73%;
 }
 .profile-modal .postboard h2
 {
@@ -314,20 +305,13 @@
     height: 200px;
 }
 */
-.profile-modal .direct-messages,
-.profile-modal .direct-messages-with-user,
-.profile-modal .mentions-from-user,
-.profile-modal .follow,
-.profile-modal .profileUnfollow
-{
-    bottom: 10px;
-}
 
 h1.profile-name {
     display: inline;
 }
+
 h2.profile-screen-name {
-    display: inline;
+    display: block;
 }
 
 .profile-modal .modal-buttons {

css/style.css

@@ -90,9 +90,11 @@ h3
     color: #1a1;
     content: '\2714';
 }
+
 /*************************************
-**************************** BUTTONS **
+************** BUTTONS ***************
 **************************************/
+
 button
 {
     background: #45474d;
@@ -101,18 +103,51 @@ button
     padding: 5px 10px;
     cursor: pointer;
 }
+
 button:hover
 {
     color: #fff;
 }
+
 button.disabled
 {
     opacity: .4;
 }
+
 button.disabled:hover
 {
     color: rgba( 255, 255, 255, .8 );
 }
+
+button.follow, button.unfollow, .following-list button.private {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+.following-list .public-following {
+    padding: 4px 16px;
+}
+
+.following-list .public-following:hover {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+button.follow:hover, button.unfollow:hover, .following-list button.private:hover {
+    color: #fff;
+    background: #45474d;
+}
+
+.follow-suggestions .follow, .follow-suggestions .unfollow {
+    display: block;
+    position: relative;
+    left: 50%;
+}
+
 /*************************************
 **************************** MENU *****
 **************************************/
@@ -356,12 +391,7 @@ button.disabled:hover
 .userMenu-search-sugestions a:hover,
 .userMenu-search-profiles li:hover a
 {
-    background: #45474d;
-    color: #fff;
-}
-.userMenu-search-profiles li:hover span
-{
-    color: #fff;    
+    background: #fefef1;
 }
 .userMenu-search-profiles button
 {
@@ -749,17 +779,6 @@ textarea.splited-post {
     opacity: 1;
 }
 
-.follow, .unfollow {
-    background: none;
-    border: solid 1px rgba( 0, 0, 0 ,.2 );
-    padding: 3px 15px;
-    color: rgba( 0, 0, 0 ,.4 );
-}
-
-.follow:hover, .unfollow:hover {
-    color: rgba( 0, 0, 0 ,.7 );
-}
-
 .refresh-users,
 .view-all-users
 {
@@ -885,7 +904,7 @@ ol.toptrends-list {
 .post:hover,
 .post .post
 {
-    background: #ececed;
+    background: #fefef1;
 }
 .post:hover
 {
@@ -1564,9 +1583,13 @@ ol.toptrends-list {
 }
 
 /*************************************
-*************** FOLLOWING-CONFIG PROMPT
+****** FOLLOWING-CONFIG PROMPT *******
 **************************************/
 
+.following-config-modal
+{
+    margin-top: -80px;
+}
 .following-config-modal .modal-content
 {
     padding: 10px;
@@ -1581,10 +1604,8 @@ ol.toptrends-list {
     padding: 10px;
 }
 
-
-
 /*************************************
-****************** RETWIST POSTS PROMPT
+******** RETWIST POSTS PROMPT ********
 **************************************/
 
 .reTwist
@@ -1798,6 +1819,55 @@ ol.toptrends-list {
     -ms-transition: height 1s linear;
 }
 
+/* Following page */
+
+.following-list
+{
+    overflow-y: auto;
+}
+
+.following ol.following-list > li{
+    width: 425px;
+    height: 150px;
+    margin: 5px;
+    padding: 8px;
+    float: left;
+    border: 0;
+    background: #fff;
+}
+
+.w1200 .following ol.following-list > li{
+    width: 385px;
+}
+
+.following ol.following-list > li:hover{
+    background: #fefef1;
+}
+
+.following-list .following-config
+{
+    position: absolute;
+    left: 30%;
+    top: 69px;
+}
+
+.following-list .mini-profile-actions
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+}
+
+.following-list .swarm-status
+{
+    font: 12px "Open Sans", sans-serif;
+    display: block;
+    position: absolute;
+    top: 110px;
+    right: 10px;
+}
+
 /* Autocomplite*/
 .textcomplete-wrapper textarea {
     display: inline;

following.html

@@ -176,8 +176,10 @@
                             <li>Display retransmissions</li>
                         </ul>
                     </div>
-                    <button class="unfollow">Unfollow</button>
-                    <button class="public-following">Public</button>
+                    <div class="following-config">
+                        <button class="follow">Follow</button>
+                        <button class="public-following">Public</button>
+                    </div>
                 </div>
                 <div>
                     <span class="swarm-status" style="display: none;"></span>
@@ -427,8 +429,11 @@
                         <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                     </ul>
                 </div>
-                <button class="dinamicFollowButton" href="#">Follow</button>
+              <div class="profile-card-buttons">
+                <button class="follow" href="#">Follow</button>
                 <button class="direct-messages-with-user" href="#">Direct Messages</button>
+                <button class="mentions-from-user" href="#">Mentions</button>
+              </div>
             </div>
             <div class="who-follow"></div>
           </div>
@@ -515,5 +520,7 @@
   </div>
   <!-- TEMPLATES END -->
 
+  <audio id="player"></audio>
+  <audio id="playerSec"></audio>
   </body>
 </html>

home.html

@@ -457,9 +457,11 @@
                   <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                 </ul>
               </div>
-              <button class="dinamicFollowButton" href="#">Follow</button>
-              <button class="direct-messages-with-user" href="#">Direct Messages</button>
-              <button class="mentions-from-user" href="#">Mentions</a>
+              <div class="profile-card-buttons">
+                <button class="follow" href="#">Follow</button>
+                <button class="direct-messages-with-user" href="#">Direct Messages</button>
+                <button class="mentions-from-user" href="#">Mentions</button>
+              </div>
             </div>
             <div class="who-follow"></div>
           </div>
@@ -546,6 +548,7 @@
 
   </div>
   <!-- TEMPLATES END -->
+
   <audio id="player"></audio>
   <audio id="playerSec"></audio>
   <!-- hide elements -->

js/interface_common.js

@@ -158,14 +158,14 @@ function openProfileModalWithUsernameHandler(username)
     //título do modal
     $( "."+profileModalClass + " h3" ).text( polyglot.t("users_profile", { username: username }) );
 
-    //hed//add dinamic follow button in profile modal window
-    if(followingUsers.indexOf(username) != -1){
-        $('.profile-card button.dinamicFollowButton').first().addClass('profileUnfollow').text(polyglot.t('Unfollow')).on('click', function(){
-            unfollow(username);
-	        window.setTimeout("loadModalFromHash();",500);
-        });
-    } else {
-        $('.profile-card button.dinamicFollowButton').first().addClass('follow').text(polyglot.t('Follow')).on('click', userClickFollow );
+    //setup follow button in profile modal window
+    var button = $('.profile-card-buttons .follow');
+    if (button) {
+        if(followingUsers.indexOf(username) !== -1){
+            toggleFollowButton(username, true, function(){ window.setTimeout("loadModalFromHash();", 500);});
+        } else {
+            button.on('click', userClickFollow);
+        };
     };
 
     $(".tox-ctc").attr("title", polyglot.t("Copy to clipboard"));
@@ -558,31 +558,47 @@ function closeThis() {
     $( this ).slideUp( "fast" );
 }
 
-function toggleFollowButton(button, followingUser) {
-    if (!button || !followingUser)
+function toggleFollowButton(username, toggleUnfollow, bindFunc) {
+    if (!username)
         return;
 
-    button
-        .removeClass("follow")
-        .addClass("unfollow")
-        .unbind("click")
-        .bind("click",
-            (function(e) {
-                unfollow(this.toString(),
-                    (function() {
-                        this
-                            .removeClass("unfollow")
-                            .addClass("follow")
-                            .unbind("click")
-                            .bind("click", userClickFollow)
-                            .text(polyglot.t('Follow'))
-                            .trigger("toggleFollow");
-                    }).bind($(e.target))
-                );
-            }).bind(followingUser)
-        )
-        .text(polyglot.t('Unfollow'))
-        .trigger("toggleUnfollow");
+    if (toggleUnfollow) {
+        $("[data-screen-name='"+username+"']").find(".follow")
+            .removeClass("follow")
+            .addClass("unfollow")
+            .unbind("click")
+            .bind("click",
+                (function(e) {
+                    e.stopPropagation();
+
+                    unfollow(this.username.toString(),
+                        (function() {
+                            toggleFollowButton(this.username);
+
+                            if (this.bindFunc)
+                                this.bindFunc;
+                        }).bind({username: this.username, bindFunc: this.bindFunc})
+                    );
+                }).bind({username: username, bindFunc: bindFunc})
+            )
+            .text(polyglot.t('Unfollow'))
+            .trigger("eventToggleUnfollow");
+    } else {
+        $("[data-screen-name='"+username+"']").find(".unfollow")
+            .removeClass("unfollow")
+            .addClass("follow")
+            .unbind("click")
+            .bind("click",
+                (function(e) {
+                    userClickFollow;
+
+                    if (this.bindFunc)
+                        this.bindFunc;
+                }).bind({bindFunc: bindFunc})
+            )
+            .text(polyglot.t('Follow'))
+            .trigger("eventToggleFollow");
+    }
 }
 
 var postExpandFunction = function( e, postLi )

js/twister_following.js

@@ -524,7 +524,6 @@ function showFollowingUsers(){
         resItem.find(".mini-profile-info").attr("data-screen-name", followingUsers[i]);
         resItem.find(".following-screen-name").text(followingUsers[i]);
         resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(followingUsers[i]));
-        resItem.find("a.unfollow").attr("href",$.MAL.unfollowUrl(followingUsers[i]));
         resItem.find("a.direct-messages-with-user").attr("href", $.MAL.dmchatUrl(followingUsers[i]));
         if (isPublicFollowing(followingUsers[i])) {
             resItem.find(".public-following").text(polyglot.t("Public"));
@@ -538,11 +537,11 @@ function showFollowingUsers(){
         }
         
         resItem.prependTo($followingList);
+        toggleFollowButton(followingUsers[i], true)
     }
     $.MAL.followingListLoaded();
 }
 
-
 function processSuggestion(arg, suggestion, followedBy) {
     var dashboard = $(".follow-suggestions");
     if( suggestion ) {
@@ -656,9 +655,9 @@ function processDropdownUserResults(partialName, results){
             resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(results[i]));
             getAvatar(results[i],resItem.find(".mini-profile-photo"));
             getFullname(results[i],resItem.find(".mini-profile-name"));
-            if (followingUsers.indexOf(results[i]) >= 0)
-                toggleFollowButton(resItem.find(".follow"), results[i]);
             resItem.appendTo(typeaheadAccounts);
+            if (followingUsers.indexOf(results[i]) >= 0)
+                toggleFollowButton(results[i], true);
         }
 
         $.MAL.searchUserListLoaded();
@@ -682,11 +681,6 @@ function userClickFollow(e) {
     e.stopPropagation();
     e.preventDefault();
 
-    var followingInitiator = $(".followingInitiator");
-    if (followingInitiator)
-        followingInitiator.removeClass("followingInitiator");
-    $(e.target).addClass("followingInitiator");
-
     var $this = $(this);
     var $userInfo = $this.closest("[data-screen-name]");
     var username = $userInfo.attr("data-screen-name");
@@ -723,16 +717,6 @@ function initUserSearch() {
     });
 }
 
-function followingListUnfollow(e) {
-    e.stopPropagation();
-    e.preventDefault();
-
-    var $this = $(this);
-    var username = $this.closest(".mini-profile-info").attr("data-screen-name");
-
-    unfollow(username);
-}
-
 function followingListPublicCheckbox(e) {
     e.stopPropagation();
 
@@ -764,9 +748,7 @@ function setFollowingMethod(e) {
     //console.log("start following @" +username +" by method "+publicFollow);
     follow(username, publicFollow,
         (function() {
-            var followingInitiator = $(".followingInitiator");
-            if (followingInitiator)
-                toggleFollowButton(followingInitiator, this);
+            toggleFollowButton(this, true);
         }).bind(username)
     );
 }
@@ -818,7 +800,6 @@ function initInterfaceFollowing() {
     initUserSearch();
     initInterfaceDirectMsg();
 
-    $("button.unfollow").bind( "click", followingListUnfollow );
     $(".mini-profile-info .public-following").bind( "click", followingListPublicCheckbox );
 
     $(".mentions-from-user").bind( "click", openMentionsModal );

network.html

@@ -225,5 +225,7 @@
 
   </div>
 
+  <audio id="player"></audio>
+  <audio id="playerSec"></audio>
   </body>
 </html>

options.html

@@ -141,7 +141,6 @@
                 <input type="range" name="playerVol" id="playerVol" class="container" min="0" max="1" step="0.01"><span class="volValue container">0</span>
                 </div>
               </form>
-              <audio id="player"></audio>
             </div>
           </div>
           <div class="module">
@@ -347,5 +346,8 @@
       </div><!-- /tab-content -->
     </div><!-- /options -->
   </div><!-- /options -->
+
+  <audio id="player"></audio>
+  <audio id="playerSec"></audio>
 </body>
 </html>

theme_calm/css/profile.css

@@ -61,36 +61,37 @@
     top: 19%;
     color: #f8f8f8;
 }
-.profile-card .direct-messages,
-.profile-card .direct-messages-with-user,
-.profile-card .follow,
-.profile-card .profileUnfollow
+
+.profile-card-buttons
 {
-    display: block;
     position: absolute;
-    bottom: 20px;
-    right: 3px;
-    padding: 10px 3px;
+    bottom: 30px;
+    right: 0;
+}
+
+.profile-card-buttons .direct-messages-with-user,
+.profile-card-buttons .mentions-from-user,
+.profile-card-buttons .follow,
+.profile-card-buttons .unfollow
+{
+    display: inline;
+    padding: 4px 12px;
     font-size: 12px;
-    width: 120px;
+    width: auto;
     text-align: center;
     color: rgba( 0, 0, 0, .7 );
     background: rgba( 0, 0, 0, .1 );
     border: none;
     transition: all .2s linear;
 }
-.profile-card .follow,
-.profile-card .profileUnfollow
-{
-    right: 128px;
-}
-.profile-card .direct-messages:hover,
-.profile-card .direct-messages-with-user:hover,
-.profile-card .follow:hover,
-.profile-card .profileUnfollow:hover
+
+.profile-card-buttons .direct-messages-with-user:hover,
+.profile-card-buttons .mentions-from-user:hover
 {
-    background: rgba( 0, 0, 0, .3 );
+    color: #fff;
+    background: #b2d67b;
 }
+
 .profile-card.forEdition
 {
     margin: 0 auto;
@@ -217,9 +218,11 @@
 .secret-key-container .secret-key {
     color: #d2dbf1;
 }
+
 /*************************************
-****************** PROFILE MODAL
+************ PROFILE MODAL ***********
 **************************************/
+
 .profile-modal .modal-wrapper
 {
     width: 580px;
@@ -228,7 +231,7 @@
     position: absolute;
     top:5%;
     height: 90%;
-    margin-left: -300px;
+    margin-left: -290px;
 
 }
 .profile-modal .modal-header, .profile-modal .profile-card {
@@ -328,32 +331,11 @@
     margin-left: -4px;
     border-bottom: 0;
 }
-button.follow:hover {
-    background: #b2d67b;
-    color: #fff;
-}
-.profile-modal button.follow:hover {
-    background: #b2d67b;
-    color: #fff;
-}
-.profile-card .profileUnfollow:hover {
-    background: #e18882;
-    color: #fff;
-}
-.profile-modal button.direct-messages-with-user:hover {
-    background: #b2d67b;
-    color: #fff;
-}
-.profile-modal .separator {
-    height: 10px;
-    width: 100%;
-    background-color: #000;
-}
 .profile-modal .postboard
 {
     margin-left: 0;
     padding: 5px 0 5px 0;
-    height: 60%;
+    height: 73%;
 }
 .profile-modal .postboard h2 {
     width: auto;
@@ -368,17 +350,6 @@ button.follow:hover {
     font: 18px/40px 'Open Sans Condensed', sans-serif;
     padding-left: 10px;
 }
-.profile-modal .postboard-posts-wrapper
-{
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 99%;
-    box-sizing: border-box;
-    border-top: 292px solid transparent;
-    overflow: auto;
-    z-index: 0;
-}
 .profile-modal .profile-card-main
 {
     background: #f3f5fb;
@@ -408,13 +379,6 @@ button.follow:hover {
     height: 200px;
 }
 */
-.profile-modal .direct-messages,
-.profile-modal .direct-messages-with-user,
-.profile-modal .follow,
-.profile-card .profileUnfollow
-{
-    bottom: 10px;
-}
 
 h1.profile-name {
     display: inline;

theme_calm/css/style.css

@@ -101,9 +101,11 @@ h3
     color: #1a1;
     content: '\2714';
 }
+
 /*************************************
-**************************** BUTTONS **
+************** BUTTONS ***************
 **************************************/
+
 button
 {
     background: #45474d;
@@ -112,18 +114,61 @@ button
     padding: 5px 10px;
     cursor: pointer;
 }
+
 button:hover
 {
     color: #fff;
 }
+
 button.disabled
 {
     opacity: .4;
 }
+
 button.disabled:hover
 {
     color: rgba( 255, 255, 255, .8 );
 }
+
+button.follow, button.unfollow, .following-list button.private {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+.following-list .public-following {
+    padding: 4px 16px;
+}
+
+.following-list .public-following:hover {
+    color: rgba( 0, 0, 0, .4 );
+    background: none;
+    border: solid 1px rgba( 0, 0, 0, .2 );
+    padding: 3px 15px;
+}
+
+.following-list button.private:hover {
+    color: #fff;
+    background: #45474d;
+}
+
+button.follow:hover {
+    color: #fff;
+    background: #b2d67b;
+}
+
+button.unfollow:hover {
+    color: #fff;
+    background: #e18882;
+}
+
+.follow-suggestions .follow, .follow-suggestions .unfollow {
+    display: block;
+    position: relative;
+    left: 50%;
+}
+
 /*************************************
 **************************** MENU *****
 **************************************/
@@ -921,17 +966,6 @@ textarea.splited-post {
     text-decoration: none;
 }
 
-.follow, .unfollow {
-    background: none;
-    border: solid 1px rgba( 0, 0, 0 ,.2 );
-    padding: 3px 15px;
-    color: rgba( 0, 0, 0 ,.4 );
-}
-
-.follow:hover, .unfollow:hover {
-    color: rgba( 0, 0, 0 ,.7 );
-}
-
 .refresh-users,
 .view-all-users
 {
@@ -1747,14 +1781,14 @@ textarea.splited-post {
 {
     padding: 5px 20px;
 }
+
 /*************************************
-*************** FOLLOWING-CONFIG MODAL
+****** FOLLOWING-CONFIG PROMPT *******
 **************************************/
-.following-config-modal .modal-wrapper
+
+.following-config-modal
 {
-    top: 43%;
-    left: 25%;
-    width: 50%;
+    margin-top: -80px;
 }
 .following-config-modal .modal-content
 {
@@ -1769,8 +1803,9 @@ textarea.splited-post {
 {
     padding: 10px;
 }
+
 /*************************************
-****************** RETWIST POSTS PROMPT
+******** RETWIST POSTS PROMPT ********
 **************************************/
 
 .reTwist

theme_nin/css/style.css

@@ -556,7 +556,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   padding: 15px;
 }
 /* line 146, ../sass/_profile.sass */
-.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .profileUnfollow, .profile-card .follow {
+.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .unfollow {
   display: inline-block;
   position: static;
 }
@@ -566,7 +566,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   position: absolute;
 }
 /* line 154, ../sass/_profile.sass */
-.profile-card .profileUnfollow {
+.profile-card .unfollow {
   background: #aaa;
 }
 /* line 157, ../sass/_profile.sass */
@@ -2579,18 +2579,46 @@ ol.toptrends-list a:hover {
 .following-config-method-buttons {
   padding: 10px;
 }
+
+/****** FOLLOWING-CONFIG PROMPT ***** */
 /* line 699, ../sass/style.sass */
+.following-config-modal
+{
+  margin-top: -100px;
+}
+.following-config-modal .modal-content
+{
+  padding: 10px;
+  text-align: center;
+}
+.following-config-modal .modal-buttons
+{
+  display: none;
+}
 .following-config-method-buttons .public-following {
   background-color: #B4C669;
+  margin: 0px 2px;
+  padding: 6px 16px;
 }
 
-/************ RETWIST POSTS MODAL ********* */
+/********** RETWIST POSTS PROMPT ********* */
 /* line 705, ../sass/style.sass */
+.reTwist {
+  margin-top: -110px;
+}
 .reTwist .modal-wrapper {
   width: 520px;
   top: 20%;
   margin: 0 0 0 -260px;
 }
+.reTwist .modal-content
+{
+  padding: 20px 15px;
+}
+.reTwist button.modal-propagate
+{
+  background-color: #B4C669;
+}
 /* line 709, ../sass/style.sass */
 .reTwist .post-expand, .reTwist .post-interactions {
   display: none;

theme_nin/js/theme_option.js

@@ -39,10 +39,10 @@ $(function(){
     });
 
     $(".userMenu-search-profiles .follow")
-        .on("toggleFollow", function() {
+        .on("eventToggleFollow", function() {
             $(this).text('').attr('title', polyglot.t('Follow'));
         })
-        .on("toggleUnfollow", function() {
+        .on("eventToggleUnfollow", function() {
             $(this).text('').attr('title', polyglot.t('Unfollow'));
         });
 

theme_nin/sass/_profile.sass

@@ -143,7 +143,7 @@ $modal-postboard-post-height: $modal-height - 45px
   position: relative
   padding: $modal-gut
 
-  .direct-messages-with-user, .follow, .profileUnfollow, .follow
+  .direct-messages-with-user, .follow, .unfollow
     display: inline-block
     position: static
 
@@ -151,7 +151,7 @@ $modal-postboard-post-height: $modal-height - 45px
     font-size: 15px
     position: absolute
 
-  .profileUnfollow
+  .unfollow
     background: $main-color-light
 
   .twister-user-info

theme_nin/sass/style.sass

@@ -697,6 +697,7 @@ ol.toptrends-list
 /************ FOLLOWING-CONFIG MODAL **********/
 
 .following-config-modal
+  margin-top: -100px
   h2
     text-transform: none
   .modal-wrapper
@@ -710,17 +711,24 @@ ol.toptrends-list
   .modal-buttons
     display: none
 .following-config-method-buttons
-  padding: 10px
   .public-following
-    background-color: #B4C669
+    background-color: $color-green
+    margin: 0px 2px
+    padding: 6px 16px
 
 /************ RETWIST POSTS MODAL **********/
 
 .reTwist
+  margin-top: -110px
   .modal-wrapper
     width: $postboard-modal-width
     top: 20%
     margin: 0 0 0 0-($postboard-modal-width/2)
+  .modal-content
+    padding: 20px 15px
+  .modal-buttons
+    .modal-propagate
+      background-color: $color-green
   .post-expand, .post-interactions
     display: none