Change button colors

src/App.vue

@@ -148,6 +148,7 @@ button {
   background-color: $btn-background-color;
   border: none;
   border-radius: $btn-border-radius;
+  box-shadow: $btn-shadow;
   color: $btn-text-color;
   cursor: pointer;
   display: inline-block;
@@ -162,6 +163,16 @@ button {
   }
 }
 
+.btn.secondary {
+  background-color: $btn-secondary-background-color;
+  color: $btn-secondary-text-color;
+
+  &:hover {
+    background-color: $btn-background-hover-color;
+    color: $btn-text-hover-color;
+  }
+}
+
 menu {
   list-style: none;
 }
@@ -200,7 +211,7 @@ header {
     border-radius: $btn-border-radius;
     box-shadow: $shadow;
     box-sizing: border-box;
-    color: $btn-text-color;
+    color: $text-color;
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
@@ -208,7 +219,7 @@ header {
     padding: 7px $body-padding;
 
     img {
-      filter: $btn-text-colorizer;
+      filter: $text-colorizer;
       height: 1.2em;
       margin-right: 5px;
     }
@@ -218,11 +229,11 @@ header {
     }
 
     &:hover {
-      background-color: $btn-text-color;
-      color: $btn-text-hover-color;
+      background-color: $btn-background-color;
+      color: $btn-text-color;
 
       img {
-        filter: $btn-text-hover-colorizer;
+        filter: $btn-text-colorizer;
       }
     }
   }

src/components/PostEditor.vue

@@ -310,10 +310,6 @@ textarea {
     color: $error-color;
     margin-right: $block-inner-padding;
   }
-
-  button {
-    box-shadow: $btn-shadow;
-  }
 }
 
 .post-form.reply {

src/components/PostList.vue

@@ -7,7 +7,7 @@
   ></post-or-repost>
   <button
     v-if="isPageFull()"
-    class="btn"
+    class="btn secondary next-btn"
     @click="loadNextPage()"
   >
     Show more posts
@@ -53,3 +53,11 @@ function loadNextPage() {
   }
 }
 </script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.next-btn {
+  margin-bottom: $block-outer-padding;
+}
+</style>

src/components/Subscription.vue

@@ -257,23 +257,6 @@ async function onCancelSubscription() {
 @import "../styles/mixins";
 @import "../styles/theme";
 
-.btn.primary {
-  background-color: $btn-background-hover-color;
-  color: $btn-text-hover-color;
-
-  &:hover {
-    background-color: $block-background-color;
-    color: $btn-text-color;
-  }
-}
-
-.btn.secondary {
-  &:hover {
-    background-color: $block-background-color;
-    color: $btn-text-color;
-  }
-}
-
 .subscription {
   display: flex;
   flex-direction: column;

src/components/SubscriptionSetup.vue

@@ -223,7 +223,7 @@ async function onWithdrawReceived() {
   gap: $block-inner-padding / 2;
 
   input {
-    border: 1px solid $btn-background-hover-color;
+    border: 1px solid $btn-background-color;
     border-radius: $btn-border-radius;
   }
 }

src/styles/_mixins.scss

@@ -108,14 +108,13 @@
 
 @mixin block-btn {
   .btn {
-    background-color: $btn-background-hover-color;
+    background-color: $btn-background-color;
     border: 1px solid transparent;
-    color: $btn-text-hover-color;
+    box-shadow: none;
 
     &:hover {
       background-color: transparent;
-      border: 1px solid $btn-text-color;
-      color: $btn-text-color;
+      border: 1px solid $btn-background-color;
     }
   }
 }

src/styles/_theme.scss

@@ -15,14 +15,16 @@ $link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brig
 $error-color: #FF4D4D;
 
 $background-color: #f3f2ed;
-$btn-background-color: #CCCBC6;
-$btn-background-hover-color: $text-color;
-$btn-text-color: $text-color;
-$btn-text-colorizer: $text-colorizer;
-$btn-text-hover-color: #fff;
-$btn-text-hover-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%);
+$btn-background-color: $text-color;
+$btn-background-hover-color: #fff;
+$btn-text-color: #fff;
+$btn-text-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%);
+$btn-text-hover-color: $text-color;
+$btn-text-hover-colorizer: $text-colorizer;
 $btn-border-radius: 8px;
 $btn-shadow: 2px 5px 10px -5px #B7B5B5;
+$btn-secondary-background-color: #CCCBC6;
+$btn-secondary-text-color: $text-color;
 
 $block-border-radius: 15px;
 $block-background-color: #fff;

src/views/AboutPublic.vue

@@ -59,7 +59,7 @@ export default class AboutPublicPage extends Vue {
   top: $body-padding;
 
   img {
-    filter: $btn-text-colorizer;
+    filter: $text-colorizer;
     width: 40px;
   }
 }

src/views/LandingPage.vue

@@ -340,7 +340,7 @@ button {
     justify-content: center;
 
     img {
-      filter: $btn-text-hover-colorizer;
+      filter: $btn-text-colorizer;
       height: 1em;
     }
 

src/views/NotificationList.vue

@@ -70,7 +70,7 @@
       </div>
       <button
         v-if="isPageFull()"
-        class="btn"
+        class="btn secondary next-btn"
         @click="loadNextPage()"
       >
         Show more notifications
@@ -176,4 +176,8 @@ async function loadNextPage() {
     white-space: nowrap;
   }
 }
+
+.next-btn {
+  margin-bottom: $block-outer-padding;
+}
 </style>

src/views/PostOverlay.vue

@@ -166,7 +166,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
     width: $page-width;
 
     img {
-      filter: $btn-text-colorizer;
+      filter: $text-colorizer;
       width: 40px;
     }
   }

src/views/Profile.vue

@@ -480,7 +480,7 @@ $avatar-size: 170px;
   }
 
   .badge {
-    border: 1px solid $btn-text-color;
+    border: 1px solid $btn-background-color;
     border-radius: $btn-border-radius;
     font-size: 14px;
     line-height: 30px;

src/views/ProfileDirectory.vue

@@ -11,7 +11,7 @@
       </router-link>
       <button
         v-if="isPageFull()"
-        class="btn"
+        class="btn secondary next-btn"
         @click="loadNextPage()"
       >
         Show more profiles
@@ -82,4 +82,8 @@ export default class ProfileDirectory extends Vue {
 .profile-list-item {
   color: $text-color;
 }
+
+.next-btn {
+  margin-bottom: $block-outer-padding;
+}
 </style>

src/views/ProfileForm.vue

@@ -307,8 +307,4 @@ export default class ProfileForm extends Vue {
     filter: $link-hover-colorizer;
   }
 }
-
-button[type="submit"] {
-  box-shadow: $btn-shadow;
-}
 </style>