bootstrap styling

template/static/stylesheets/app.css

@@ -1,3 +1,7 @@
+:root {
+  --color-primary: #007bff;
+}
+
 [v-cloak] {
   display: none !important;
 }
@@ -10,9 +14,18 @@ body {
   transition: none;
 }
 
+select.form-control {
+  -webkit-appearance: none;
+}
+
+select.form-control:not([multiple]):not([size]) {
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem;
+  padding-right: 1.2rem;
+}
+
 .form-control:focus {
-  border-color: #80bdff !important;
-  box-shadow: inset 0 0 0 2px #80bdff !important;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);
 }
 
 .btn:focus {
@@ -67,7 +80,7 @@ body {
 }
 
 .feed-item:active, .nav-select input:checked + .menu-item {
-  background-color: #007bff;
+  background-color: var(--color-primary);
   color: white;
 }
 
@@ -88,8 +101,7 @@ body {
   padding-right: 0;
 }
 
-.settings-dropdown .dropdown-menu {
-  width: 200px;
+.dropdown-menu {
   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.07);
 }
 
@@ -106,10 +118,27 @@ body {
   color: #dc3545!important;
 }
 
-.settings-header {
-  padding: .75rem 0 !important;
-}
-
 .modal-backdrop {
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+.nav-tabs .nav-link {
+  padding: .5rem 0;
+}
+
+.nav-tabs .nav-item + .nav-item {
+  margin-left: 1rem;
+}
+
+.nav-tabs .nav-link {
+  border: 0;
+  border-bottom: 3px solid transparent;
+  color: inherit;
+}
+
+.nav-tabs .nav-link.active {
+  color: inherit;
+  border-radius: 0 !important;
+  border-color: var(--color-primary);
+  background-color: transparent;
+}