3 files changed, 82 insertions, 8 deletions
diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss
index 11d155d54..99af9c982 100644
--- a/app/assets/stylesheets/accounts.scss
+++ b/app/assets/stylesheets/accounts.scss
@@ -173,7 +173,7 @@
   text-align: center;
   overflow: hidden;
 
-  a, .current, .page, .gap {
+  a, .current, .next, .prev, .page, .gap {
     font-size: 14px;
     color: $color5;
     font-weight: 500;
@@ -187,6 +187,7 @@
     border-radius: 100px;
     color: $color1;
     cursor: default;
+    margin: 0 10px;
   }
 
   .gap {
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 1c798f2f2..800c97a6b 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,6 +1,6 @@
 @import 'variables';
 
-.app-body{
+.app-body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
@@ -203,18 +203,29 @@
 }
 
 .compose-form__warning {
-  color: $color2;
+  color: darken($color3, 33%);
   margin-bottom: 15px;
-  border: 1px solid $color3;
+  background: $color3;
+  box-shadow: 0 2px 6px rgba($color8, 0.3);
   padding: 8px 10px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 400;
 
   strong {
-    color: $color5;
+    color: darken($color3, 33%);
     font-weight: 500;
   }
+
+  a {
+    color: darken($color3, 33%);
+    font-weight: 500;
+    text-decoration: underline;
+
+    &:hover, &:active, &:focus {
+      text-decoration: none;
+    }
+  }
 }
 
 .compose-form__modifiers {
@@ -1619,7 +1630,7 @@ a.status__content__spoiler-link {
 }
 
 .character-counter {
-  cursor: default; 
+  cursor: default;
   font-size: 16px;
 }
 
@@ -1667,7 +1678,7 @@ a.status__content__spoiler-link {
     font-size: 16px;
   }
 }
-    
+
 @import 'boost';
 
 button.icon-button i.fa-retweet {
@@ -1766,6 +1777,7 @@ button.icon-button.active i.fa-retweet {
   cursor: pointer;
   position: relative;
   z-index: 2;
+  outline: 0;
 
   &.active {
     box-shadow: 0 1px 0 rgba($color4, 0.3);
@@ -1781,6 +1793,10 @@ button.icon-button.active i.fa-retweet {
       display: none;
     }
   }
+
+  &:focus, &:active {
+    outline: 0;
+  }
 }
 
 .column-header__icon {
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index c6a8b5b02..890a00510 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -269,3 +269,60 @@ code {
     font-size: 14px;
   }
 }
+
+.table-form {
+  p {
+    max-width: 400px;
+    margin-bottom: 15px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  .warning {
+    max-width: 400px;
+    box-sizing: border-box;
+    background: rgba($color6, 0.5);
+    color: $color5;
+    text-shadow: 1px 1px 0 rgba($color8, 0.3);
+    box-shadow: 0 2px 6px rgba($color8, 0.4);
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 15px;
+
+    a {
+      color: $color5;
+      text-decoration: underline;
+
+      &:hover, &:focus, &:active {
+        text-decoration: none;
+      }
+    }
+
+    strong {
+      font-weight: 600;
+      display: block;
+      margin-bottom: 5px;
+
+      .fa {
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.action-pagination {
+  display: flex;
+  align-items: center;
+
+  .actions, .pagination {
+    flex: 1 1 auto;
+  }
+
+  .actions {
+    padding: 30px 0;
+    padding-right: 20px;
+    flex: 0 0 auto;
+  }
+}