From e2e65b1bc0548931982314a8408e9ed7008409eb Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Sun, 26 Jul 2020 19:43:43 +0530
Subject: [PATCH] Polish UI elements and fix styling issues.

- Change global font to Inter.
- Introduce global top nav bar.
- Restyle form inputs to have inline labels.
- Restyle form inputs to have inline lengt counters.
- Override glitchy Buefy animations (sidebar, toast etc.)
- Fix tag alignment inside tables in responsive view.
- Refactor import page UI.
- Miscellaneous styling fixes.
- Add missing Fontello icons.
---
 README.md                                 |   3 +-
 frontend/fontello/config.json             |  84 ++++----
 frontend/public/index.html                |   2 +-
 frontend/src/App.vue                      | 158 ++++++++-------
 frontend/src/assets/buefy.scss            |   1 +
 frontend/src/assets/icons/fontello.css    |   3 +
 frontend/src/assets/icons/fontello.woff2  | Bin 6456 -> 6604 bytes
 frontend/src/assets/style.scss            | 225 ++++++++++++++++------
 frontend/src/components/ListSelector.vue  |   8 +-
 frontend/src/utils.js                     |   6 +-
 frontend/src/views/Campaign.vue           |  60 +++---
 frontend/src/views/Campaigns.vue          | 108 ++++++-----
 frontend/src/views/Import.vue             |  47 +++--
 frontend/src/views/ListForm.vue           |  12 +-
 frontend/src/views/Lists.vue              |  36 ++--
 frontend/src/views/Settings.vue           | 142 ++++++++------
 frontend/src/views/SubscriberBulkList.vue |   3 +-
 frontend/src/views/SubscriberForm.vue     |   9 +-
 frontend/src/views/Subscribers.vue        |  36 ++--
 frontend/src/views/TemplateForm.vue       |   4 +-
 frontend/src/views/Templates.vue          |  46 ++---
 21 files changed, 580 insertions(+), 413 deletions(-)

diff --git a/README.md b/README.md
index 6c87eb4..db55e59 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,10 @@ listmonk is a standalone, self-hosted, newsletter and mailing list manager. It i
 ### Installation and use
 
 - Download the [latest release](https://github.com/knadh/listmonk/releases) for your platform and extract the listmonk binary. For example: `tar -C $HOME/listmonk -xzf listmonk_$VERSION_$OS_$ARCH.tar.gz`
-- Navigate to the directory containing the binary (`cd $HOME/listmonk`) and run `./listmonk --new-config` to generate a sample `config.toml` and add your configuration (SMTP and Postgres DB credentials primarily).
+- Navigate to the directory containing the binary (`cd $HOME/listmonk`) and run `./listmonk --new-config` to generate a sample `config.toml` and add the DB configuration.
 - `./listmonk --install` to setup the DB.
 - Run `./listmonk` and visit `http://localhost:9000`.
+- Visit the `Settings` page to configure your instance.
 - Since there is no user auth yet, it's best to put listmonk behind a proxy like Nginx and setup basicauth on all endpoints except for the few endpoints that need to be public. Here is a [sample nginx config](https://github.com/knadh/listmonk/wiki/Production-Nginx-config) for production use.
 
 ### Configuration and customization
diff --git a/frontend/fontello/config.json b/frontend/fontello/config.json
index a3ec408..5c7bb56 100644
--- a/frontend/fontello/config.json
+++ b/frontend/fontello/config.json
@@ -440,6 +440,48 @@
         "content-save-outline"
       ]
     },
+    {
+      "uid": "80491c76df0c066833e0f8211903d37c",
+      "css": "minus",
+      "code": 59423,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M791 541H209V459H791V541Z",
+        "width": 1000
+      },
+      "search": [
+        "minus"
+      ]
+    },
+    {
+      "uid": "a7a02467d65aabd7cd61903ea3e855b6",
+      "css": "arrow-up",
+      "code": 59424,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M541 834H459V334L228.5 562.5 169.9 503.9 500 173.8 830.1 503.9 771.5 562.5 541 334V834Z",
+        "width": 1000
+      },
+      "search": [
+        "arrow-up"
+      ]
+    },
+    {
+      "uid": "a9b97a98d1427ca1c4f90b2f8f4f03c1",
+      "css": "arrow-down",
+      "code": 59425,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M459 166H541V666L771.5 437.5 830.1 496.1 500 826.2 169.9 496.1 228.5 437.5 459 666V166Z",
+        "width": 1000
+      },
+      "search": [
+        "arrow-down"
+      ]
+    },
     {
       "uid": "f4ad3f6d071a0bfb3a8452b514ed0892",
       "css": "vector-square",
@@ -1364,20 +1406,6 @@
         "arrow-collapse-all"
       ]
     },
-    {
-      "uid": "a9b97a98d1427ca1c4f90b2f8f4f03c1",
-      "css": "arrow-down",
-      "code": 983109,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M459 166H541V666L771.5 437.5 830.1 496.1 500 826.2 169.9 496.1 228.5 437.5 459 666V166Z",
-        "width": 1000
-      },
-      "search": [
-        "arrow-down"
-      ]
-    },
     {
       "uid": "578692c5a0b505985bf797ee8ebce545",
       "css": "arrow-down-thick",
@@ -1686,20 +1714,6 @@
         "arrow-top-left"
       ]
     },
-    {
-      "uid": "a7a02467d65aabd7cd61903ea3e855b6",
-      "css": "arrow-up",
-      "code": 983133,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M541 834H459V334L228.5 562.5 169.9 503.9 500 173.8 830.1 503.9 771.5 562.5 541 334V834Z",
-        "width": 1000
-      },
-      "search": [
-        "arrow-up"
-      ]
-    },
     {
       "uid": "00e74cb9bfa86a1b90b39d2d8132c3b1",
       "css": "arrow-up-thick",
@@ -12774,20 +12788,6 @@
         "minecraft"
       ]
     },
-    {
-      "uid": "80491c76df0c066833e0f8211903d37c",
-      "css": "minus",
-      "code": 983924,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M791 541H209V459H791V541Z",
-        "width": 1000
-      },
-      "search": [
-        "minus"
-      ]
-    },
     {
       "uid": "4dae8d34e12ee29474c244f25a6cbc1c",
       "css": "minus-box",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 97699fe..6aa1ea1 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>frontend/favicon.png" />
-    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Inter:400,600" rel="stylesheet" />
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="<%= BASE_URL %>api/config.js"></script>
   </head>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f61a9f4..bf3f308 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,93 +1,103 @@
 <template>
   <div id="app">
-    <section class="sidebar">
-      <b-sidebar
-        type="is-white"
-        position="static"
-        mobile="reduce"
-        :fullheight="true"
-        :open="true"
-        :can-cancel="false"
-      >
-        <div>
+    <b-navbar :fixed-top="true">
+        <template slot="brand">
           <div class="logo">
-            <a href="/"><img class="full" src="@/assets/logo.svg"/></a>
-            <img class="favicon" src="@/assets/favicon.png"/>
-            <p class="is-size-7 has-text-grey version">{{ version }}</p>
+            <router-link :to="{name: 'dashboard'}">
+              <img class="full" src="@/assets/logo.svg"/>
+              <img class="favicon" src="@/assets/favicon.png"/>
+            </router-link>
           </div>
-          <b-menu :accordion="false">
-            <b-menu-list>
-              <b-menu-item :to="{name: 'dashboard'}" tag="router-link"
-                :active="activeItem.dashboard"
-                icon="view-dashboard-variant-outline" label="Dashboard">
-              </b-menu-item><!-- dashboard -->
+        </template>
+        <template slot="end">
+            <b-navbar-item tag="div"></b-navbar-item>
+        </template>
+    </b-navbar>
 
-              <b-menu-item :expanded="activeGroup.lists"
-                icon="format-list-bulleted-square" label="Lists">
-                <b-menu-item :to="{name: 'lists'}" tag="router-link"
-                  :active="activeItem.lists"
-                  icon="format-list-bulleted-square" label="All lists"></b-menu-item>
+    <div class="wrapper">
+      <section class="sidebar">
+        <b-sidebar
+          position="static"
+          mobile="reduce"
+          :fullheight="true"
+          :open="true"
+          :can-cancel="false"
+        >
+          <div>
+            <b-menu :accordion="false">
+              <b-menu-list>
+                <b-menu-item :to="{name: 'dashboard'}" tag="router-link"
+                  :active="activeItem.dashboard"
+                  icon="view-dashboard-variant-outline" label="Dashboard">
+                </b-menu-item><!-- dashboard -->
 
-                <b-menu-item :to="{name: 'forms'}" tag="router-link"
-                  :active="activeItem.forms"
-                  icon="newspaper-variant-outline" label="Forms"></b-menu-item>
-              </b-menu-item><!-- lists -->
+                <b-menu-item :expanded="activeGroup.lists"
+                  icon="format-list-bulleted-square" label="Lists">
+                  <b-menu-item :to="{name: 'lists'}" tag="router-link"
+                    :active="activeItem.lists"
+                    icon="format-list-bulleted-square" label="All lists"></b-menu-item>
 
-              <b-menu-item :expanded="activeGroup.subscribers"
-                icon="account-multiple" label="Subscribers">
-                <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
-                  :active="activeItem.subscribers"
-                  icon="account-multiple" label="All subscribers"></b-menu-item>
+                  <b-menu-item :to="{name: 'forms'}" tag="router-link"
+                    :active="activeItem.forms"
+                    icon="newspaper-variant-outline" label="Forms"></b-menu-item>
+                </b-menu-item><!-- lists -->
 
-                <b-menu-item :to="{name: 'import'}" tag="router-link"
-                  :active="activeItem.import"
-                  icon="file-upload-outline" label="Import"></b-menu-item>
-              </b-menu-item><!-- subscribers -->
+                <b-menu-item :expanded="activeGroup.subscribers"
+                  icon="account-multiple" label="Subscribers">
+                  <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
+                    :active="activeItem.subscribers"
+                    icon="account-multiple" label="All subscribers"></b-menu-item>
 
-              <b-menu-item :expanded="activeGroup.campaigns"
-                  icon="rocket-launch-outline" label="Campaigns">
-                <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
-                  :active="activeItem.campaigns"
-                  icon="rocket-launch-outline" label="All campaigns"></b-menu-item>
+                  <b-menu-item :to="{name: 'import'}" tag="router-link"
+                    :active="activeItem.import"
+                    icon="file-upload-outline" label="Import"></b-menu-item>
+                </b-menu-item><!-- subscribers -->
 
-                <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
-                  :active="activeItem.campaign"
-                  icon="plus" label="Create new"></b-menu-item>
+                <b-menu-item :expanded="activeGroup.campaigns"
+                    icon="rocket-launch-outline" label="Campaigns">
+                  <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
+                    :active="activeItem.campaigns"
+                    icon="rocket-launch-outline" label="All campaigns"></b-menu-item>
 
-                <b-menu-item :to="{name: 'media'}" tag="router-link"
-                  :active="activeItem.media"
-                  icon="image-outline" label="Media"></b-menu-item>
+                  <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
+                    :active="activeItem.campaign"
+                    icon="plus" label="Create new"></b-menu-item>
 
-                <b-menu-item :to="{name: 'templates'}" tag="router-link"
-                  :active="activeItem.templates"
-                  icon="file-image-outline" label="Templates"></b-menu-item>
-              </b-menu-item><!-- campaigns -->
+                  <b-menu-item :to="{name: 'media'}" tag="router-link"
+                    :active="activeItem.media"
+                    icon="image-outline" label="Media"></b-menu-item>
 
-              <b-menu-item :to="{name: 'settings'}" tag="router-link"
-                :active="activeItem.settings"
-                icon="cog-outline" label="Settings"></b-menu-item>
-            </b-menu-list>
-          </b-menu>
+                  <b-menu-item :to="{name: 'templates'}" tag="router-link"
+                    :active="activeItem.templates"
+                    icon="file-image-outline" label="Templates"></b-menu-item>
+                </b-menu-item><!-- campaigns -->
+
+                <b-menu-item :to="{name: 'settings'}" tag="router-link"
+                  :active="activeItem.settings"
+                  icon="cog-outline" label="Settings"></b-menu-item>
+              </b-menu-list>
+            </b-menu>
+          </div>
+        </b-sidebar>
+      </section>
+      <!-- sidebar-->
+
+      <!-- body //-->
+      <div class="main">
+        <div class="global-notices" v-if="serverConfig.needsRestart">
+          <div v-if="serverConfig.needsRestart" class="notification is-danger">
+            Settings have changed. Pause all running campaigns and restart the app
+             &mdash;
+            <b-button class="is-primary" size="is-small"
+              @click="$utils.confirm(
+                'Ensure running campaigns are paused. Restart?', reloadApp)">
+                Restart
+            </b-button>
+          </div>
         </div>
-      </b-sidebar>
-    </section>
-    <!-- sidebar-->
 
-    <!-- body //-->
-    <div class="main">
-      <div class="global-notices" v-if="serverConfig.needsRestart">
-        <div v-if="serverConfig.needsRestart" class="notification is-danger">
-          Settings have changed. Pause all running campaigns and restart the app
-           &mdash;
-          <b-button class="is-primary" size="is-small"
-            @click="$utils.confirm(
-              'Ensure running campaigns are paused. Restart?', reloadApp)">
-              Restart
-          </b-button>
-        </div>
+        <router-view :key="$route.fullPath" />
       </div>
-
-      <router-view :key="$route.fullPath" />
     </div>
 
     <b-loading v-if="!isLoaded" active>
diff --git a/frontend/src/assets/buefy.scss b/frontend/src/assets/buefy.scss
index 8e4c1bd..375b7f7 100644
--- a/frontend/src/assets/buefy.scss
+++ b/frontend/src/assets/buefy.scss
@@ -6,6 +6,7 @@
 @import "~bulma/sass/components/menu";
 @import "~bulma/sass/components/message";
 @import "~bulma/sass/components/modal";
+@import "~bulma/sass/components/navbar";
 @import "~bulma/sass/components/pagination";
 @import "~bulma/sass/components/tabs";
 @import "~bulma/sass/form/_all";
diff --git a/frontend/src/assets/icons/fontello.css b/frontend/src/assets/icons/fontello.css
index 63b6508..68d7378 100644
--- a/frontend/src/assets/icons/fontello.css
+++ b/frontend/src/assets/icons/fontello.css
@@ -71,3 +71,6 @@
 .mdi-chevron-right:before { content: '\e81c'; } /* '' */
 .mdi-chevron-left:before { content: '\e81d'; } /* '' */
 .mdi-content-save-outline:before { content: '\e81e'; } /* '' */
+.mdi-minus:before { content: '\e81f'; } /* '' */
+.mdi-arrow-up:before { content: '\e820'; } /* '' */
+.mdi-arrow-down:before { content: '\e821'; } /* '' */
diff --git a/frontend/src/assets/icons/fontello.woff2 b/frontend/src/assets/icons/fontello.woff2
index fa4a81a9fdaa9f44fc14bb560c916463098a4fb3..843a5c42b6148a4805f68ee4d89f935bbd98a598 100644
GIT binary patch
literal 6604
zcmV;-88ha0Pew8T0RR9102#~x4*&oF05SXk02y%r0RR9100000000000000000000
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
K*Hd5t`j9eUf|I!b

literal 6456
zcmV-88OP>#Pew8T0RR9102w#{4*&oF05IeL02tl?0RR9100000000000000000000
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
SCwl_>cc0hGXzQ*3E8Ds^oOV0_

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
index 0e43896..9621036 100644
--- a/frontend/src/assets/style.scss
+++ b/frontend/src/assets/style.scss
@@ -1,14 +1,16 @@
 /* Import Bulma to set variables */
 @import "~bulma/sass/utilities/_all";
 
-$body-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
+$body-family: "Inter", "Helvetica Neue", sans-serif;
 $body-size: 15px;
+$background: $white-bis;
+$body-background-color: $white-bis;
 $primary: #7f2aff;
 $green: #4caf50;
 $turquoise: $green;
 $red: #ff5722;
 $link: $primary;
-$input-placeholder-color: $black-ter;
+$input-placeholder-color: $grey-light;
 
 $colors: map-merge($colors, (
     "turquoise": ($green, $green-invert),
@@ -77,35 +79,58 @@ section {
   }    
 }
 
+.box {
+  box-shadow: 0 0 2px $grey-lighter;
+}
 
 /* Two column sidebar+body layout */
 #app {
-  display: flex;
-  flex-direction: row;
   min-height: 100%;
-  
-  > .sidebar {
-    flex-shrink: 1;
-    box-shadow: 0 0 5px #eee;
-    border-right: 1px solid #eee;
-
-    .b-sidebar {
-      position: sticky;
-      top: 0px;
-    }
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    margin-top: 0px;
   }
-  > .main {
-    margin: 30px 30px 30px 45px;
+
+  .sidebar {
+    flex-shrink: 1;
+    box-shadow: 0 0 3px $grey-lighter;
+    background: $white;
+  }
+
+  .main {
+    background: $white;
+    margin-left: 15px;
+    padding: 30px;
     flex-grow: 1;
+    position: relative;
+  }
+}
+
+.navbar {
+  box-shadow: 0 0 3px $grey-lighter;
+}
+.navbar-brand {
+  padding: 0 0 0 25px;
+  .favicon {
+    display: none;
+  }
+  .full {
+    max-height: 20px;
+    margin-top: 12px;
+  }
+  .favicon {
+    margin-top: 8px;
   }
 }
 
 .b-sidebar {
-  .logo {
-    padding: 15px;
-  }
+  position: sticky;
+  top: 75px;
+
   .sidebar-content {
-    border-right: 1px solid #eee;
+    background: transparent;
   }
   .menu-list {
     .router-link-exact-active {
@@ -116,14 +141,14 @@ section {
       margin-right: 0;
     }
     > li {
-      margin-bottom: 15px;
+      margin-bottom: 10px;
+      a {
+        padding-left: 25px;
+      }
+    }
+    a {
+      border-radius: 0;
     }
-  }
-  .logo {
-    margin-bottom: 30px;
-  }
-  .favicon {
-    display: none;
   }
 }
 
@@ -181,10 +206,6 @@ section {
   display: none;
 }
 
-/* Toasts */
-.notices .toast {
-  animation: none;
-}
 
 /* Fix for button primary colour. */
 .button.is-primary {
@@ -198,11 +219,39 @@ section {
 }
 
 .autocomplete .dropdown-content {
-  background-color: $white-bis;
+  background-color: $white-ter;
 }
 
-.help {
-  color: $grey;
+.input, .taginput .taginput-container.is-focusable, .textarea {
+  box-shadow: inset 2px 2px 0px $white-ter;
+}
+
+/* Form fields */
+.field {
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+
+  .control {
+    position: relative;
+
+    .help.counter {
+      position: absolute;
+      top: -20px;
+      right: 0;
+    }
+  }
+
+  label {
+    color: $grey;
+  }
+
+  .help {
+    color: $grey-light;
+  }
+}
+.has-numberinput .field, .field.is-grouped {
+  margin-bottom: 0;
 }
 
 /* Tags */
@@ -267,6 +316,10 @@ section.dashboard {
     margin-bottom: 0.5rem;
   }
 
+  .counts .column {
+    padding: 30px;
+  }
+
   .level-item {
     background-color: $white-bis;
     padding: 30px;
@@ -296,6 +349,11 @@ section.lists {
   }
 }
 
+/* List selector */
+.list-tags {
+  margin-bottom: 1rem;
+}
+
 /* Subscribers page */
 .subscribers-controls {
   padding-bottom: 15px;
@@ -520,6 +578,40 @@ section.campaign {
   }
 }
 
+/* Vue animations */
+.slide-enter-active, .slide-leave-active {
+  transition: opacity 50ms;
+  max-height: none;
+}
+.slide-enter, .slide-leave-to {
+  transition: opacity 50ms;
+  opacity: 0;
+  max-height: none;
+}
+.slide-leave-active, .slide-leave-to {
+  transition: none;
+  display: none;  
+}
+
+
+/* Toasts */
+.notices {
+  @keyframes scale {
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: 1.3;
+    }
+    100% {
+      scale: 1;
+    }
+  }
+  .toast {
+    animation: scale 300ms ease-in-out;
+  }
+}
+
 @media screen and (max-width: 1450px) and (min-width: 769px) {
   section.campaigns {
     /* Fold the stats labels until the card view */
@@ -539,34 +631,57 @@ section.campaign {
 }
 
 @media screen and (max-width: 1023px) {
+  html, body {
+    overflow-x: auto;
+  }
+
+  #app .main {
+    margin-left: 5px;
+    padding: 30px 20px 30px 20px;
+  }
+
+  .navbar-brand {
+    .full {
+      display: none;
+    }
+    .favicon {
+      display: block;
+    }
+    padding-left: 10px;
+  }
+
+  .b-sidebar {
+    top: 30px;
+  }
+
   /* Hide sidebar menu captions on mobile */
   .b-sidebar .sidebar-content.is-mini-mobile {
-    .menu-list li {
-      margin-bottom: 30px;
+    .menu-list {
+      li {
+        margin-bottom: 30px;
 
-      span:nth-child(2) {
-        display: none;
+        span:nth-child(2) {
+          display: none;
+        }
+        .icon.is-small {
+          scale: 1.4;
+        }
       }
-      .icon.is-small {
-        scale: 1.4;
-      }
-    }
-    .logo {
-      text-align: center;
-      .full {
-        display: none;
-      }
-      .favicon {
-        display: block;
-      }
-      .version {
-        display: none;
+      > li {
+        a {
+          padding-left: 15px;
+        }
       }
     }
   }
 
-  #app > .content {
-    margin: 15px;
+  td .tags {
+    display: block;
+    text-align: right;
+
+    .tag:not(:last-child) {
+      margin-right: 0;
+    }
   }
 }
 
@@ -574,4 +689,4 @@ section.campaign {
   section.dashboard label {
     min-width: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ListSelector.vue b/frontend/src/components/ListSelector.vue
index 68de3a7..59a5717 100644
--- a/frontend/src/components/ListSelector.vue
+++ b/frontend/src/components/ListSelector.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="field">
-    <b-field :label="label  + (selectedItems ? ` (${selectedItems.length})` : '')">
-      <div :class="classes">
+      <div :class="['list-tags', ...classes]">
         <b-taglist>
           <b-tag v-for="l in selectedItems"
             :key="l.id"
@@ -13,9 +12,10 @@
           </b-tag>
         </b-taglist>
       </div>
-    </b-field>
 
-    <b-field :message="message">
+    <b-field :message="message"
+      :label="label  + (selectedItems ? ` (${selectedItems.length})` : '')"
+      label-position="on-border">
       <b-autocomplete
         :placeholder="placeholder"
         clearable
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 582f4ea..bfd188b 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -63,7 +63,7 @@ export default class utils {
   // UI shortcuts.
   static confirm = (msg, onConfirm, onCancel) => {
     Dialog.confirm({
-      scroll: 'keep',
+      scroll: 'clip',
       message: !msg ? 'Are you sure?' : msg,
       onConfirm,
       onCancel,
@@ -72,7 +72,7 @@ export default class utils {
 
   static prompt = (msg, inputAttrs, onConfirm, onCancel) => {
     Dialog.prompt({
-      scroll: 'keep',
+      scroll: 'clip',
       message: msg,
       confirmText: 'OK',
       inputAttrs: {
@@ -91,7 +91,7 @@ export default class utils {
       message: msg,
       type: !typ ? 'is-success' : typ,
       queue: false,
-      duration: duration || 3000,
+      duration: duration || 2000,
     });
   };
 }
diff --git a/frontend/src/views/Campaign.vue b/frontend/src/views/Campaign.vue
index 767bc35..7ebf441 100644
--- a/frontend/src/views/Campaign.vue
+++ b/frontend/src/views/Campaign.vue
@@ -33,22 +33,22 @@
     <b-loading :active="loading.campaigns"></b-loading>
 
     <b-tabs type="is-boxed" :animated="false" v-model="activeTab">
-      <b-tab-item label="Campaign" icon="rocket-launch-outline">
+      <b-tab-item label="Campaign" label-position="on-border" icon="rocket-launch-outline">
         <section class="wrap">
           <div class="columns">
             <div class="column is-7">
               <form @submit.prevent="onSubmit">
-                <b-field label="Name">
+                <b-field label="Name" label-position="on-border">
                   <b-input :maxlength="200" :ref="'focus'" v-model="form.name" :disabled="!canEdit"
                     placeholder="Name" required></b-input>
                 </b-field>
 
-                <b-field label="Subject">
+                <b-field label="Subject" label-position="on-border">
                   <b-input :maxlength="200" v-model="form.subject" :disabled="!canEdit"
                     placeholder="Subject" required></b-input>
                 </b-field>
 
-                <b-field label="From address">
+                <b-field label="From address" label-position="on-border">
                   <b-input :maxlength="200" v-model="form.fromEmail" :disabled="!canEdit"
                     placeholder="Your Name <noreply@yoursite.com>" required></b-input>
                 </b-field>
@@ -62,34 +62,40 @@
                   placeholder="Lists to send to"
                 ></list-selector>
 
-                <b-field label="Template">
+                <b-field label="Template" label-position="on-border">
                   <b-select placeholder="Template" v-model="form.templateId"
                     :disabled="!canEdit" required>
                     <option v-for="t in templates" :value="t.id" :key="t.id">{{ t.name }}</option>
                   </b-select>
                 </b-field>
 
-                <b-field label="Tags">
+                <b-field label="Tags" label-position="on-border">
                   <b-taginput v-model="form.tags" :disabled="!canEdit"
                     ellipsis icon="tag-outline" placeholder="Tags"></b-taginput>
                 </b-field>
                 <hr />
 
-                <b-field label="Send later?">
-                    <b-switch v-model="form.sendLater" :disabled="!canEdit"></b-switch>
-                </b-field>
-
-                <b-field v-if="form.sendLater" label="Send at">
-                  <b-datetimepicker
-                    v-model="form.sendAtDate"
-                    :disabled="!canEdit"
-                    placeholder="Date and time"
-                    icon="calendar-clock"
-                    :timepicker="{ hourFormat: '24' }"
-                    :datetime-formatter="formatDateTime"
-                    horizontal-time-picker>
-                  </b-datetimepicker>
-                </b-field>
+                <div class="columns">
+                  <div class="column is-2">
+                    <b-field label="Send later?">
+                        <b-switch v-model="form.sendLater" :disabled="!canEdit"></b-switch>
+                    </b-field>
+                  </div>
+                  <div class="column">
+                    <br />
+                    <b-field v-if="form.sendLater">
+                      <b-datetimepicker
+                        v-model="form.sendAtDate"
+                        :disabled="!canEdit"
+                        placeholder="Date and time"
+                        icon="calendar-clock"
+                        :timepicker="{ hourFormat: '24' }"
+                        :datetime-formatter="formatDateTime"
+                        horizontal-time-picker>
+                      </b-datetimepicker>
+                    </b-field>
+                  </div>
+                </div>
                 <hr />
 
                 <b-field v-if="isNew">
@@ -267,11 +273,7 @@ export default Vue.extend({
       return new Promise((resolve) => {
         this.$api.updateCampaign(this.data.id, data).then((d) => {
           this.data = d;
-          this.$buefy.toast.open({
-            message: `'${d.name}' ${typMsg}`,
-            type: 'is-success',
-            queue: false,
-          });
+          this.$utils.toast(`'${d.name}' ${typMsg}`);
           resolve();
         });
       });
@@ -327,11 +329,7 @@ export default Vue.extend({
     } else {
       const intID = parseInt(id, 10);
       if (intID <= 0 || Number.isNaN(intID)) {
-        this.$buefy.toast.open({
-          message: 'Invalid campaign',
-          type: 'is-danger',
-          queue: false,
-        });
+        this.$utils.toast('Invalid campaign');
         return;
       }
 
diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue
index 3210080..0d18831 100644
--- a/frontend/src/views/Campaigns.vue
+++ b/frontend/src/views/Campaigns.vue
@@ -116,59 +116,61 @@
             </b-table-column>
 
             <b-table-column class="actions" width="13%" align="right">
-              <a href="" v-if="canStart(props.row)"
-                @click.prevent="$utils.confirm(null,
-                  () => changeCampaignStatus(props.row, 'running'))">
-                <b-tooltip label="Start" type="is-dark">
-                  <b-icon icon="rocket-launch-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" v-if="canPause(props.row)"
-                @click.prevent="$utils.confirm(null,
-                  () => changeCampaignStatus(props.row, 'paused'))">
-                <b-tooltip label="Pause" type="is-dark">
-                  <b-icon icon="pause-circle-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" v-if="canResume(props.row)"
-                @click.prevent="$utils.confirm(null,
-                  () => changeCampaignStatus(props.row, 'running'))">
-                <b-tooltip label="Send" type="is-dark">
-                  <b-icon icon="rocket-launch-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" v-if="canSchedule(props.row)"
-                @click.prevent="$utils.confirm(`This campaign will start automatically at the
-                    scheduled date and time. Schedule now?`,
-                      () => changeCampaignStatus(props.row, 'scheduled'))">
-                <b-tooltip label="Schedule" type="is-dark">
-                  <b-icon icon="clock-start" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" @click.prevent="previewCampaign(props.row)">
-                <b-tooltip label="Preview" type="is-dark">
-                  <b-icon icon="file-find-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" @click.prevent="$utils.prompt(`Clone campaign`,
-                      { placeholder: 'Campaign name', value: `Copy of ${props.row.name}`},
-                      (name) => cloneCampaign(name, props.row))">
-                <b-tooltip label="Clone" type="is-dark">
-                  <b-icon icon="file-multiple-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" v-if="canCancel(props.row)"
-                @click.prevent="$utils.confirm(null,
-                  () => changeCampaignStatus(props.row, 'cancelled'))">
-                <b-tooltip label="Cancel" type="is-dark">
-                  <b-icon icon="trash-can-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" v-if="canDelete(props.row)"
-                @click.prevent="$utils.confirm(`Delete '${props.row.name}'?`,
-                  () => deleteCampaign(props.row))">
-                  <b-icon icon="trash-can-outline" size="is-small" />
-              </a>
+              <div>
+                <a href="" v-if="canStart(props.row)"
+                  @click.prevent="$utils.confirm(null,
+                    () => changeCampaignStatus(props.row, 'running'))">
+                  <b-tooltip label="Start" type="is-dark">
+                    <b-icon icon="rocket-launch-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" v-if="canPause(props.row)"
+                  @click.prevent="$utils.confirm(null,
+                    () => changeCampaignStatus(props.row, 'paused'))">
+                  <b-tooltip label="Pause" type="is-dark">
+                    <b-icon icon="pause-circle-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" v-if="canResume(props.row)"
+                  @click.prevent="$utils.confirm(null,
+                    () => changeCampaignStatus(props.row, 'running'))">
+                  <b-tooltip label="Send" type="is-dark">
+                    <b-icon icon="rocket-launch-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" v-if="canSchedule(props.row)"
+                  @click.prevent="$utils.confirm(`This campaign will start automatically at the
+                      scheduled date and time. Schedule now?`,
+                        () => changeCampaignStatus(props.row, 'scheduled'))">
+                  <b-tooltip label="Schedule" type="is-dark">
+                    <b-icon icon="clock-start" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" @click.prevent="previewCampaign(props.row)">
+                  <b-tooltip label="Preview" type="is-dark">
+                    <b-icon icon="file-find-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" @click.prevent="$utils.prompt(`Clone campaign`,
+                        { placeholder: 'Campaign name', value: `Copy of ${props.row.name}`},
+                        (name) => cloneCampaign(name, props.row))">
+                  <b-tooltip label="Clone" type="is-dark">
+                    <b-icon icon="file-multiple-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" v-if="canCancel(props.row)"
+                  @click.prevent="$utils.confirm(null,
+                    () => changeCampaignStatus(props.row, 'cancelled'))">
+                  <b-tooltip label="Cancel" type="is-dark">
+                    <b-icon icon="trash-can-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" v-if="canDelete(props.row)"
+                  @click.prevent="$utils.confirm(`Delete '${props.row.name}'?`,
+                    () => deleteCampaign(props.row))">
+                    <b-icon icon="trash-can-outline" size="is-small" />
+                </a>
+              </div>
             </b-table-column>
         </template>
         <template slot="empty" v-if="!loading.campaigns">
diff --git a/frontend/src/views/Import.vue b/frontend/src/views/Import.vue
index ca97785..4899a69 100644
--- a/frontend/src/views/Import.vue
+++ b/frontend/src/views/Import.vue
@@ -7,22 +7,34 @@
     <section v-if="isFree()" class="wrap-small">
       <form @submit.prevent="onSubmit" class="box">
         <div>
-          <b-field label="Mode">
-            <div>
-              <b-radio v-model="form.mode" name="mode"
-                native-value="subscribe">Subscribe</b-radio>
-              <b-radio v-model="form.mode" name="mode"
-                native-value="blacklist">Blacklist</b-radio>
+          <div class="columns">
+            <div class="column">
+              <b-field label="Mode">
+                <div>
+                  <b-radio v-model="form.mode" name="mode"
+                    native-value="subscribe">Subscribe</b-radio>
+                  <b-radio v-model="form.mode" name="mode"
+                    native-value="blacklist">Blacklist</b-radio>
+                </div>
+              </b-field>
             </div>
-          </b-field>
-
-          <b-field v-if="form.mode === 'subscribe'"
-            label="Overwrite?"
-            message="Overwrite name and attribs of existing subscribers?">
-            <div>
-              <b-switch v-model="form.overwrite" name="overwrite" />
+            <div class="column">
+              <b-field v-if="form.mode === 'subscribe'"
+                label="Overwrite?"
+                message="Overwrite name and attribs of existing subscribers?">
+                <div>
+                  <b-switch v-model="form.overwrite" name="overwrite" />
+                </div>
+              </b-field>
             </div>
-          </b-field>
+            <div class="column">
+              <b-field label="CSV delimiter" message="Default delimiter is comma."
+                class="delimiter">
+                <b-input v-model="form.delim" name="delim"
+                  placeholder="," maxlength="1" required />
+              </b-field>
+            </div>
+          </div>
 
           <list-selector v-if="form.mode === 'subscribe'"
             label="Lists"
@@ -33,13 +45,8 @@
             :all="lists.results"
           ></list-selector>
           <hr />
-          <b-field label="CSV delimiter" message="Default delimiter is comma."
-            class="delimiter">
-            <b-input v-model="form.delim" name="delim"
-              placeholder="," maxlength="1" required />
-          </b-field>
 
-          <b-field label="CSV or ZIP file">
+          <b-field label="CSV or ZIP file" label-position="on-border">
             <b-upload v-model="form.file" drag-drop expanded required>
               <div class="has-text-centered section">
                 <p>
diff --git a/frontend/src/views/ListForm.vue b/frontend/src/views/ListForm.vue
index 781810b..4344bed 100644
--- a/frontend/src/views/ListForm.vue
+++ b/frontend/src/views/ListForm.vue
@@ -2,21 +2,21 @@
   <form @submit.prevent="onSubmit">
     <div class="modal-card content" style="width: auto">
       <header class="modal-card-head">
+        <p v-if="isEditing" class="has-text-grey-light is-size-7">
+          ID: {{ data.id }} / UUID: {{ data.uuid }}
+        </p>
         <b-tag v-if="isEditing" :class="[data.type, 'is-pulled-right']">{{ data.type }}</b-tag>
         <h4 v-if="isEditing">{{ data.name }}</h4>
         <h4 v-else>New list</h4>
 
-        <p v-if="isEditing" class="has-text-grey is-size-7">
-          ID: {{ data.id }} / UUID: {{ data.uuid }}
-        </p>
       </header>
       <section expanded class="modal-card-body">
-        <b-field label="Name">
+        <b-field label="Name" label-position="on-border">
           <b-input :maxlength="200" :ref="'focus'" v-model="form.name"
             placeholder="Name" required></b-input>
         </b-field>
 
-        <b-field label="Type"
+        <b-field label="Type" label-position="on-border"
           message="Public lists are open to the world to subscribe
                    and their names may appear on public pages such as the subscription
                    management page.">
@@ -26,7 +26,7 @@
           </b-select>
         </b-field>
 
-        <b-field label="Opt-in"
+        <b-field label="Opt-in" label-position="on-border"
           message="Double opt-in sends an e-mail to the subscriber asking for
                    confirmation. On Double opt-in lists, campaigns are only sent to
                    confirmed subscribers.">
diff --git a/frontend/src/views/Lists.vue b/frontend/src/views/Lists.vue
index 290a198..07f6570 100644
--- a/frontend/src/views/Lists.vue
+++ b/frontend/src/views/Lists.vue
@@ -22,6 +22,7 @@
             </b-table-column>
 
             <b-table-column field="type" label="Type" sortable>
+              <div>
                 <b-tag :class="props.row.type">{{ props.row.type }}</b-tag>
                 {{ ' ' }}
                 <b-tag>
@@ -38,6 +39,7 @@
                     Send opt-in campaign
                   </b-tooltip>
                 </router-link>
+              </div>
             </b-table-column>
 
             <b-table-column field="subscriberCount" label="Subscribers" numeric sortable centered>
@@ -54,21 +56,23 @@
             </b-table-column>
 
             <b-table-column class="actions" align="right">
-              <router-link :to="`/campaign/new?list_id=${props.row.id}`">
-                <b-tooltip label="Send campaign" type="is-dark">
-                  <b-icon icon="rocket-launch-outline" size="is-small" />
-                </b-tooltip>
-              </router-link>
-              <a href="" @click.prevent="showEditForm(props.row)">
-                <b-tooltip label="Edit" type="is-dark">
-                  <b-icon icon="pencil-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="" @click.prevent="deleteList(props.row)">
-                <b-tooltip label="Delete" type="is-dark">
-                  <b-icon icon="trash-can-outline" size="is-small" />
-                </b-tooltip>
-              </a>
+              <div>
+                <router-link :to="`/campaign/new?list_id=${props.row.id}`">
+                  <b-tooltip label="Send campaign" type="is-dark">
+                    <b-icon icon="rocket-launch-outline" size="is-small" />
+                  </b-tooltip>
+                </router-link>
+                <a href="" @click.prevent="showEditForm(props.row)">
+                  <b-tooltip label="Edit" type="is-dark">
+                    <b-icon icon="pencil-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="" @click.prevent="deleteList(props.row)">
+                  <b-tooltip label="Delete" type="is-dark">
+                    <b-icon icon="trash-can-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+              </div>
             </b-table-column>
         </template>
 
@@ -78,7 +82,7 @@
     </b-table>
 
     <!-- Add / edit form modal -->
-    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="450">
+    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="600">
       <list-form :data="curItem" :isEditing="isEditing" @finished="formFinished"></list-form>
     </b-modal>
   </section>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 52d415d..221a99e 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -16,16 +16,16 @@
     <section class="wrap-small">
       <form @submit.prevent="onSubmit">
         <b-tabs type="is-boxed" :animated="false">
-          <b-tab-item label="General">
+          <b-tab-item label="General" label-position="on-border">
             <div class="items">
-              <b-field label="Logo URL"
+              <b-field label="Logo URL" label-position="on-border"
                 message="(Optional) full URL to the static logo to be displayed on
                         user facing view such as the unsubscription page.">
                 <b-input v-model="form['app.logo_url']" name="app.logo_url"
                     placeholder='https://listmonk.yoursite.com/logo.png' :maxlength="300" />
               </b-field>
 
-              <b-field label="Favicon URL"
+              <b-field label="Favicon URL" label-position="on-border"
                 message="(Optional) full URL to the static favicon to be displayed on
                         user facing view such as the unsubscription page.">
                 <b-input v-model="form['app.favicon_url']" name="app.favicon_url"
@@ -33,7 +33,7 @@
               </b-field>
 
               <hr />
-              <b-field label="Default 'from' email"
+              <b-field label="Default 'from' email" label-position="on-border"
                 message="(Optional) full URL to the static logo to be displayed on
                         user facing view such as the unsubscription page.">
                 <b-input v-model="form['app.from_email']" name="app.from_email"
@@ -41,7 +41,7 @@
                     pattern="(.+?)\s<(.+?)@(.+?)>" :maxlength="300" />
               </b-field>
 
-              <b-field label="Admin notification e-mails"
+              <b-field label="Admin notification e-mails" label-position="on-border"
                 message="Comma separated list of e-mail addresses to which admin
                         notifications such as import updates, campaign completion,
                         failure etc. should be sent.">
@@ -54,7 +54,7 @@
 
           <b-tab-item label="Performance">
             <div class="items">
-              <b-field label="Concurrency"
+              <b-field label="Concurrency" label-position="on-border"
                 message="Maximum concurrent worker (threads) that will attempt to send messages
                         simultaneously.">
                 <b-numberinput v-model="form['app.concurrency']"
@@ -62,7 +62,7 @@
                     placeholder="5" min="1" max="10000" />
               </b-field>
 
-              <b-field label="Message rate"
+              <b-field label="Message rate" label-position="on-border"
                 message="Maximum number of messages to be sent out per second
                         per worker in a second. If concurrency = 10 and message_rate = 10,
                         then up to 10x10=100 messages may be pushed out every second.
@@ -74,7 +74,7 @@
                     placeholder="5" min="1" max="100000" />
               </b-field>
 
-              <b-field label="Batch size"
+              <b-field label="Batch size" label-position="on-border"
                 message="The number of subscribers to pull from the databse in a single iteration.
                         Each iteration pulls subscribers from the database, sends messages to them,
                         and then moves on to the next iteration to pull the next batch.
@@ -85,7 +85,7 @@
                     placeholder="1000" min="1" max="100000" />
               </b-field>
 
-              <b-field label="Maximum error threshold"
+              <b-field label="Maximum error threshold" label-position="on-border"
                 message="The number of errors (eg: SMTP timeouts while e-mailing) a running
                         campaign should tolerate before it is paused for manual
                         investigation or intervention. Set to 0 to never pause.">
@@ -125,7 +125,7 @@
 
           <b-tab-item label="Media uploads">
             <div class="items">
-              <b-field label="Provider">
+              <b-field label="Provider" label-position="on-border">
                 <b-select v-model="form['upload.provider']" name="upload.provider">
                   <option value="filesystem">filesystem</option>
                   <option value="s3">s3</option>
@@ -133,14 +133,14 @@
               </b-field>
 
               <div class="block" v-if="form['upload.provider'] === 'filesystem'">
-                <b-field label="Upload path"
+                <b-field label="Upload path" label-position="on-border"
                   message="Path to the directory where media will be uploaded.">
                   <b-input v-model="form['upload.filesystem.upload_path']"
                       name="app.upload_path" placeholder='/home/listmonk/uploads'
                       :maxlength="200" />
                 </b-field>
 
-                <b-field label="Upload URI"
+                <b-field label="Upload URI" label-position="on-border"
                   message="Upload URI that's visible to the outside world.
                         The media uploaded to upload_path will be publicly accessible
                         under {root_url}/{}, for instance, https://listmonk.yoursite.com/uploads.">
@@ -150,43 +150,65 @@
               </div><!-- filesystem -->
 
               <div class="block" v-if="form['upload.provider'] === 's3'">
-                <b-field label="AWS access key">
-                  <b-input v-model="form['upload.s3.aws_access_key_id']"
-                      name="upload.s3.aws_access_key_id" :maxlength="200" />
-                </b-field>
-                <b-field label="AWS access secret">
-                  <b-input v-model="form['upload.s3.aws_secret_access_key']"
-                      name="upload.s3.aws_secret_access_key" type="password" :maxlength="200" />
-                </b-field>
-                <b-field label="Region">
-                  <b-input v-model="form['upload.s3.aws_default_region']"
-                      name="upload.s3.aws_default_region"
-                      :maxlength="200" placeholder="ap-south-1" />
-                </b-field>
-                <b-field label="Bucket">
-                  <b-input v-model="form['upload.s3.bucket']"
-                      name="upload.s3.bucket" :maxlength="200" placeholder="" />
-                </b-field>
-                <b-field label="Bucket path"
-                  message="Path inside the bucket to upload files. Default is /">
-                  <b-input v-model="form['upload.s3.bucket']"
-                      name="upload.s3.bucket_path" :maxlength="200" placeholder="/" />
-                </b-field>
-                <b-field label="Bucket type">
-                  <b-select v-model="form['upload.s3.bucket_type']"
-                    name="upload.s3.bucket_type">
-                    <option value="private">private</option>
-                    <option value="public">public</option>
-                  </b-select>
-                </b-field>
-                <b-field label="Upload expiry"
-                  message="(Optional) Specify TTL (in seconds) for the generated presigned URL.
-                          Only applicable for private buckets
-                          (s, m, h, d for seconds, minutes, hours, days).">
-                  <b-input v-model="form['upload.s3.expiry']"
-                    name="upload.s3.expiry"
-                    placeholder="14d" :pattern="regDuration" :maxlength="10" />
-                </b-field>
+                <div class="columns">
+                  <div class="column is-3">
+                    <b-field label="Region" label-position="on-border" expanded>
+                      <b-input v-model="form['upload.s3.aws_default_region']"
+                          name="upload.s3.aws_default_region"
+                          :maxlength="200" placeholder="ap-south-1" />
+                    </b-field>
+                  </div>
+                  <div class="column">
+                    <b-field grouped>
+                      <b-field label="AWS access key" label-position="on-border" expanded>
+                        <b-input v-model="form['upload.s3.aws_access_key_id']"
+                            name="upload.s3.aws_access_key_id" :maxlength="200" />
+                      </b-field>
+                      <b-field label="AWS access secret" label-position="on-border" expanded>
+                        <b-input v-model="form['upload.s3.aws_secret_access_key']"
+                            name="upload.s3.aws_secret_access_key" type="password"
+                            :maxlength="200" />
+                      </b-field>
+                    </b-field>
+                  </div>
+                </div>
+
+                <div class="columns">
+                  <div class="column is-3">
+                    <b-field label="Bucket type" label-position="on-border">
+                      <b-select v-model="form['upload.s3.bucket_type']"
+                        name="upload.s3.bucket_type" expanded>
+                        <option value="private">private</option>
+                        <option value="public">public</option>
+                      </b-select>
+                    </b-field>
+                  </div>
+                  <div class="column">
+                    <b-field grouped>
+                      <b-field label="Bucket" label-position="on-border" expanded>
+                        <b-input v-model="form['upload.s3.bucket']"
+                            name="upload.s3.bucket" :maxlength="200" placeholder="" />
+                      </b-field>
+                      <b-field label="Bucket path" label-position="on-border"
+                        message="Path inside the bucket to upload files. Default is /" expanded>
+                        <b-input v-model="form['upload.s3.bucket_path']"
+                            name="upload.s3.bucket_path" :maxlength="200" placeholder="/" />
+                      </b-field>
+                    </b-field>
+                  </div>
+                </div>
+                <div class="columns">
+                  <div class="column is-3">
+                    <b-field label="Upload expiry" label-position="on-border"
+                      message="(Optional) Specify TTL (in seconds) for the generated presigned URL.
+                              Only applicable for private buckets
+                              (s, m, h, d for seconds, minutes, hours, days)." expanded>
+                      <b-input v-model="form['upload.s3.expiry']"
+                        name="upload.s3.expiry"
+                        placeholder="14d" :pattern="regDuration" :maxlength="10" />
+                    </b-field>
+                  </div>
+                </div>
               </div><!-- s3 -->
             </div>
           </b-tab-item><!-- media -->
@@ -211,14 +233,14 @@
                   <div class="column" :class="{'disabled': !item.enabled}">
                     <div class="columns">
                       <div class="column is-8">
-                        <b-field label="Host"
+                        <b-field label="Host" label-position="on-border"
                           message="SMTP server's host address.">
                           <b-input v-model="item.host" name="host"
                             placeholder='smtp.yourmailserver.net' :maxlength="200" />
                         </b-field>
                       </div>
                       <div class="column">
-                        <b-field label="Port"
+                        <b-field label="Port" label-position="on-border"
                           message="SMTP server's port.">
                           <b-numberinput v-model="item.port" name="port" type="is-light"
                               controls-position="compact"
@@ -229,7 +251,7 @@
 
                     <div class="columns">
                       <div class="column is-2">
-                        <b-field label="Auth protocol">
+                        <b-field label="Auth protocol" label-position="on-border">
                           <b-select v-model="item.auth_protocol" name="auth_protocol">
                             <option value="none">none</option>
                             <option value="cram">cram</option>
@@ -240,12 +262,12 @@
                       </div>
                       <div class="column">
                         <b-field grouped>
-                          <b-field label="Username" expanded>
+                          <b-field label="Username" label-position="on-border" expanded>
                             <b-input v-model="item.username"
                               :disabled="item.auth_protocol === 'none'"
                               name="username" placeholder="mysmtp" :maxlength="200" />
                           </b-field>
-                          <b-field label="Password" expanded
+                          <b-field label="Password" label-position="on-border" expanded
                             message="Enter a value to change. Otherwise, leave empty.">
                             <b-input v-model="item.password"
                               :disabled="item.auth_protocol === 'none'"
@@ -259,7 +281,7 @@
 
                     <div class="columns">
                       <div class="column is-6">
-                        <b-field label="HELO hostname"
+                        <b-field label="HELO hostname" label-position="on-border"
                           message="Optional. Some SMTP servers require a FQDN in the hostname.
                                 By default, HELLOs go with 'localhost'. Set this if a custom
                                 hostname should be used.">
@@ -285,7 +307,7 @@
 
                     <div class="columns">
                       <div class="column is-3">
-                        <b-field label="Max. connections"
+                        <b-field label="Max. connections" label-position="on-border"
                           message="Maximum concurrent connections to the SMTP server.">
                           <b-numberinput v-model="item.max_conns" name="max_conns" type="is-light"
                               controls-position="compact"
@@ -293,7 +315,7 @@
                         </b-field>
                       </div>
                       <div class="column is-3">
-                        <b-field label="Retries"
+                        <b-field label="Retries" label-position="on-border"
                           message="The number of times a message should be retried
                                   if sending fails.">
                           <b-numberinput v-model="item.max_msg_retries" name="max_msg_retries"
@@ -303,7 +325,7 @@
                         </b-field>
                       </div>
                       <div class="column is-3">
-                        <b-field label="Idle timeout"
+                        <b-field label="Idle timeout" label-position="on-border"
                           message="Time to wait for new activity on a connection before closing
                                   it and removing it from the pool (s for second, m for minute).">
                           <b-input v-model="item.idle_timeout" name="idle_timeout"
@@ -311,7 +333,7 @@
                         </b-field>
                       </div>
                       <div class="column is-3">
-                        <b-field label="Wait timeout"
+                        <b-field label="Wait timeout" label-position="on-border"
                           message="Time to wait for new activity on a connection before closing
                                   it and removing it from the pool (s for second, m for minute).">
                           <b-input v-model="item.wait_timeout" name="wait_timeout"
@@ -341,7 +363,7 @@ import { models } from '../constants';
 export default Vue.extend({
   data() {
     return {
-      regDuration: '[0-9]+(ms|s|m|h)',
+      regDuration: '[0-9]+(ms|s|m|h|d)',
       isLoading: true,
 
       // formCopy is a stringified copy of the original settings against which
diff --git a/frontend/src/views/SubscriberBulkList.vue b/frontend/src/views/SubscriberBulkList.vue
index bd48250..c76f6d6 100644
--- a/frontend/src/views/SubscriberBulkList.vue
+++ b/frontend/src/views/SubscriberBulkList.vue
@@ -2,8 +2,7 @@
   <form @submit.prevent="onSubmit">
     <div class="modal-card" style="width: auto">
       <header class="modal-card-head">
-        <h4>Manage lists</h4>
-        <p>{{ numSubscribers }} subscriber(s) selected</p>
+        <h4 class="title is-size-5">Manage lists</h4>
       </header>
 
       <section expanded class="modal-card-body">
diff --git a/frontend/src/views/SubscriberForm.vue b/frontend/src/views/SubscriberForm.vue
index fc5175b..19e7186 100644
--- a/frontend/src/views/SubscriberForm.vue
+++ b/frontend/src/views/SubscriberForm.vue
@@ -12,16 +12,17 @@
         </p>
       </header>
       <section expanded class="modal-card-body">
-        <b-field label="E-mail">
+        <b-field label="E-mail" label-position="on-border">
           <b-input :maxlength="200" v-model="form.email" :ref="'focus'"
             placeholder="E-mail" required></b-input>
         </b-field>
 
-        <b-field label="Name">
+        <b-field label="Name" label-position="on-border">
           <b-input :maxlength="200" v-model="form.name" placeholder="Name"></b-input>
         </b-field>
 
-        <b-field label="Status" message="Blacklisted subscribers will never receive any e-mails.">
+        <b-field label="Status" label-position="on-border"
+          message="Blacklisted subscribers will never receive any e-mails.">
           <b-select v-model="form.status" placeholder="Status" required>
             <option value="enabled">Enabled</option>
             <option value="blacklisted">Blacklisted</option>
@@ -37,7 +38,7 @@
           :all="lists.results"
         ></list-selector>
 
-        <b-field label="Attributes"
+        <b-field label="Attributes" label-position="on-border"
           message='Attributes are defined as a JSON map, for example:
             {"job": "developer", "location": "Mars", "has_rocket": true}.'>
           <b-input v-model="form.strAttribs" type="textarea" />
diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue
index 57dad07..30c088d 100644
--- a/frontend/src/views/Subscribers.vue
+++ b/frontend/src/views/Subscribers.vue
@@ -140,22 +140,24 @@
             </b-table-column>
 
             <b-table-column class="actions" align="right">
-              <a :href="`/api/subscribers/${props.row.id}/export`">
-                <b-tooltip label="Download data" type="is-dark">
-                  <b-icon icon="cloud-download-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a :href="`/subscribers/${props.row.id}`"
-                @click.prevent="showEditForm(props.row)">
-                <b-tooltip label="Edit" type="is-dark">
-                  <b-icon icon="pencil-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href='' @click.prevent="deleteSubscriber(props.row)">
-                <b-tooltip label="Delete" type="is-dark">
-                  <b-icon icon="trash-can-outline" size="is-small" />
-                </b-tooltip>
-              </a>
+              <div>
+                <a :href="`/api/subscribers/${props.row.id}/export`">
+                  <b-tooltip label="Download data" type="is-dark">
+                    <b-icon icon="cloud-download-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a :href="`/subscribers/${props.row.id}`"
+                  @click.prevent="showEditForm(props.row)">
+                  <b-tooltip label="Edit" type="is-dark">
+                    <b-icon icon="pencil-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href='' @click.prevent="deleteSubscriber(props.row)">
+                  <b-tooltip label="Delete" type="is-dark">
+                    <b-icon icon="trash-can-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+              </div>
             </b-table-column>
         </template>
         <template slot="empty" v-if="!loading.subscribers">
@@ -170,7 +172,7 @@
     </b-modal>
 
     <!-- Add / edit form modal -->
-    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="750">
+    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="600">
       <subscriber-form :data="curItem" :isEditing="isEditing"
         @finished="querySubscribers"></subscriber-form>
     </b-modal>
diff --git a/frontend/src/views/TemplateForm.vue b/frontend/src/views/TemplateForm.vue
index d9ce783..141e640 100644
--- a/frontend/src/views/TemplateForm.vue
+++ b/frontend/src/views/TemplateForm.vue
@@ -11,12 +11,12 @@
             <h4 v-else>New template</h4>
         </header>
         <section expanded class="modal-card-body">
-            <b-field label="Name">
+            <b-field label="Name" label-position="on-border">
             <b-input :maxlength="200" :ref="'focus'" v-model="form.name"
                 placeholder="Name" required></b-input>
             </b-field>
 
-            <b-field label="Raw HTML">
+            <b-field label="Raw HTML" label-position="on-border">
             <b-input v-model="form.body" type="textarea" required />
             </b-field>
 
diff --git a/frontend/src/views/Templates.vue b/frontend/src/views/Templates.vue
index 580fec1..951e4b6 100644
--- a/frontend/src/views/Templates.vue
+++ b/frontend/src/views/Templates.vue
@@ -29,28 +29,30 @@
             </b-table-column>
 
             <b-table-column class="actions" align="right">
-              <a href="#" @click.prevent="previewTemplate(props.row)">
-                <b-tooltip label="Preview" type="is-dark">
-                  <b-icon icon="file-find-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a href="#" @click.prevent="showEditForm(props.row)">
-                <b-tooltip label="Edit" type="is-dark">
-                  <b-icon icon="pencil-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-             <a v-if="!props.row.isDefault" href="#"
-                @click.prevent="$utils.confirm(null, () => makeTemplateDefault(props.row))">
-                <b-tooltip label="Make default" type="is-dark">
-                  <b-icon icon="check-circle-outline" size="is-small" />
-                </b-tooltip>
-              </a>
-              <a v-if="!props.row.isDefault"
-                href="#" @click.prevent="$utils.confirm(null, () => deleteTemplate(props.row))">
-                <b-tooltip label="Delete" type="is-dark">
-                  <b-icon icon="trash-can-outline" size="is-small" />
-                </b-tooltip>
-              </a>
+              <div>
+                <a href="#" @click.prevent="previewTemplate(props.row)">
+                  <b-tooltip label="Preview" type="is-dark">
+                    <b-icon icon="file-find-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a href="#" @click.prevent="showEditForm(props.row)">
+                  <b-tooltip label="Edit" type="is-dark">
+                    <b-icon icon="pencil-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+               <a v-if="!props.row.isDefault" href="#"
+                  @click.prevent="$utils.confirm(null, () => makeTemplateDefault(props.row))">
+                  <b-tooltip label="Make default" type="is-dark">
+                    <b-icon icon="check-circle-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+                <a v-if="!props.row.isDefault"
+                  href="#" @click.prevent="$utils.confirm(null, () => deleteTemplate(props.row))">
+                  <b-tooltip label="Delete" type="is-dark">
+                    <b-icon icon="trash-can-outline" size="is-small" />
+                  </b-tooltip>
+                </a>
+              </div>
             </b-table-column>
         </template>