From fddc20600d222d2d0ccac1721ef24a5d70137066 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 11 May 2020 00:19:00 +0300
Subject: [PATCH] Update style for mobile UI

---
 src/views/statuses/index.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/views/statuses/index.vue b/src/views/statuses/index.vue
index 1e8435ed..c2193363 100644
--- a/src/views/statuses/index.vue
+++ b/src/views/statuses/index.vue
@@ -8,10 +8,10 @@
     </div>
     <div class="statuses-header-container">
       <el-button-group>
-        <el-button plain>{{ $t('statuses.direct') }}: {{ statusVisibility.direct }}</el-button>
-        <el-button plain>{{ $t('statuses.private') }}: {{ statusVisibility.private }}</el-button>
-        <el-button plain>{{ $t('statuses.public') }}: {{ statusVisibility.public }}</el-button>
-        <el-button plain>{{ $t('statuses.unlisted') }}: {{ statusVisibility.unlisted }}</el-button>
+        <el-button plain class="direct-button">{{ $t('statuses.direct') }}: {{ statusVisibility.direct }}</el-button>
+        <el-button plain class="private-button">{{ $t('statuses.private') }}: {{ statusVisibility.private }}</el-button>
+        <el-button plain class="public-button">{{ $t('statuses.public') }}: {{ statusVisibility.public }}</el-button>
+        <el-button plain class="unlisted-button">{{ $t('statuses.unlisted') }}: {{ statusVisibility.unlisted }}</el-button>
       </el-button-group>
     </div>
     <div class="filter-container">
@@ -238,8 +238,26 @@ export default {
   .statuses-header-container {
     flex-direction: column;
     align-items: flex-start;
+    .el-button-group {
+      width: 100%;
+    }
     .el-button {
       padding: 10px 6.5px;
+      width: 50%;
+    }
+    .el-button-group>.el-button:first-child {
+      border-bottom-left-radius: 0;
+    }
+    .el-button-group>.el-button:not(:first-child):not(:last-child).private-button {
+      border-top-right-radius: 4px;
+    }
+    .el-button-group>.el-button:not(:first-child):not(:last-child).public-button {
+      border-bottom-left-radius: 4px;
+      border-top: white;
+    }
+    .el-button-group>.el-button:last-child {
+      border-top-right-radius: 0;
+      border-top: white;
     }
     .reboot-button {
       margin: 10px 0 0 0;