Modify load more button

With box-shadows being removed from buttons there were a few places that needed to be adjusted: white buttons on light gray backdrop

src/views/explore/explore.jsx

@@ -209,7 +209,6 @@ class Explore extends React.Component {
                             showViews={false}
                         />
                         <Button
-                            className="white"
                             onClick={this.handleGetExploreMore}
                         >
                             <FormattedMessage id="general.loadMore" />

src/views/explore/explore.scss

@@ -114,6 +114,7 @@ $base-bg: $ui-white;
         .button {
             display: block;
             margin: 0 auto;
+            width: 58.75rem;
         }
     }
 }
@@ -128,6 +129,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
+
+        #projectBox {
+          .button {
+            width: $cols4;
+          }
+        }
     }
 }
 
@@ -141,6 +148,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
+
+        #projectBox {
+          .button {
+            width: $cols6;
+          }
+        }
     }
 }
 
@@ -161,6 +174,9 @@ $base-bg: $ui-white;
                     width: $cols9;
                 }
             }
+            .button {
+              width: $cols9;
+            }
         }
     }
 }

src/views/messages/messages.scss

@@ -122,6 +122,7 @@
 .messages-social-loadmore {
     display: block;
     margin: 1rem auto;
+    width: 58.75rem;
 }
 
 .emoji-text.mod-comment {
@@ -137,6 +138,10 @@
     .comment-text {
         max-width: 9.75rem;
     }
+
+    .messages-social-loadmore {
+      width: $cols4;
+    }
 }
 
 @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
@@ -148,10 +153,18 @@
     .comment-text {
         max-width: 19.5rem;
     }
+
+    .messages-social-loadmore {
+      width: $cols6;
+    }
 }
 
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
     .comment-text {
         max-width: 23.75rem;
     }
+
+    .messages-social-loadmore {
+      width: $cols8;
+    }
 }

src/views/messages/presentation.jsx

@@ -161,7 +161,7 @@ class SocialMessagesList extends React.Component {
         if (loadMore) {
             return (
                 <Button
-                    className="messages-social-loadmore white"
+                    className="messages-social-loadmore"
                     key="load-more"
                     onClick={this.props.onLoadMoreMethod}
                 >

src/views/search/search.jsx

@@ -136,7 +136,6 @@ class Search extends React.Component {
         } else if (this.state.loadMore) {
             searchAction = (
                 <Button
-                    className="white"
                     onClick={this.handleGetSearchMore}
                 >
                     <FormattedMessage id="general.loadMore" />

src/views/search/search.scss

@@ -131,6 +131,7 @@ $base-bg: $ui-white;
         .button {
             display: block;
             margin: 0 auto;
+            width: 58.75rem;
         }
 
         .search-prompt {
@@ -160,6 +161,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols4;
         }
+
+        #projectBox {
+          .button {
+            width: $cols4;
+          }
+        }
     }
 }
 
@@ -174,6 +181,12 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols6;
         }
+
+        #projectBox {
+          .button {
+            width: $cols6;
+          }
+        }
     }
 }
 
@@ -187,5 +200,11 @@ $base-bg: $ui-white;
         .sort-controls {
             width: $cols8;
         }
+
+        #projectBox {
+          .button {
+            width: $cols9;
+          }
+        }
     }
 }