Upgrade and refactor global theme.

- Change public and admin frontend primary colours.
- Change images.
- Refactor and fix styling on public pages.
- Remove CSS grid lib from public pages.
- Update Buefy and fix broken component styles (modal, toast).

frontend/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "buefy": "^0.9.7",
+    "buefy": "^0.9.10",
     "c3": "^0.7.20",
     "codeflask": "^1.4.1",
     "core-js": "^3.12.1",

frontend/src/api/index.js

@@ -67,6 +67,8 @@ http.interceptors.response.use((resp) => {
       message: msg,
       type: 'is-danger',
       queue: false,
+      position: 'is-top',
+      pauseOnHover: true,
     });
   }
 

frontend/src/assets/style.scss

@@ -5,10 +5,10 @@ $body-family: "Inter", "Helvetica Neue", sans-serif;
 $body-size: 15px;
 $background: $white-bis;
 $body-background-color: $white-bis;
-$primary: #7f2aff;
-$green: #4caf50;
+$primary: #0055d4;
+$green: #0db35e;
 $turquoise: $green;
-$red: #ff5722;
+$red: #FF5722;
 $link: $primary;
 $input-placeholder-color: $grey-light;
 $grey-lightest: #eaeaea;
@@ -27,8 +27,6 @@ $menu-item-active-color: $primary;
 
 /* Buefy */
 $modal-background-background-color: rgba(0, 0, 0, .30);
-$speed-slow: 25ms !default;
-$speed-slower: 50ms !default;
 
 /* Import full Bulma and Buefy */
 @import "~bulma";
@@ -92,14 +90,13 @@ section {
 }
 
 .box {
-  background: $white-bis;
-  box-shadow: 2px 2px 5px $white-ter;
-  border: 1px solid $grey-lightest;
-
-  hr {
+  background: $white;
+  box-shadow: 2px 2px 0 #f3f3f3;
+  border: 1px solid #eee;
+}
+  .box hr {
     background-color: #efefef;
   }
-}
 
 .page-header {
   min-height: 60px;
@@ -175,6 +172,11 @@ section {
   }
 }
 
+/* Fix for sidebar jumping on modals */
+body.is-noscroll .b-sidebar {
+  top: 26px;
+}
+
 /* Global notices */
 .global-notices {
   margin-bottom: 30px;
@@ -297,7 +299,9 @@ section {
 }
 
 .input, .taginput .taginput-container.is-focusable, .textarea {
-  box-shadow: inset 2px 2px 0px $white-ter;
+  // box-shadow: inset 2px 2px 0px $white-ter;
+  box-shadow: 2px 2px 0 $white-ter;
+  border: 1px solid $grey-lighter;
 }
 
 /* Form fields */
@@ -317,11 +321,11 @@ section {
   }
 
   label {
-    color: $grey;
+    color: $grey-dark;
   }
 
   .help {
-    color: $grey-light;
+    color: $grey;
   }
 }
 .has-numberinput .field, .field.is-grouped {
@@ -363,21 +367,21 @@ section {
     box-shadow: 1px 1px 0 lighten($color, 37%);
   }
   &.public, &.running {
-    $color: #1890ff;
+    $color: $primary;
     color: $color;
     background: #e6f7ff;
     border: 1px solid lighten($color, 37%);
     box-shadow: 1px 1px 0 lighten($color, 25%);
   }
   &.finished, &.enabled {
-    $color: #50ab24;
+    $color: $green;
     color: $color;
     background: #f6ffed;
     border: 1px solid lighten($color, 45%);
     box-shadow: 1px 1px 0 lighten($color, 45%);
   }
   &.blocklisted, &.cancelled {
-    $color: #f5222d;
+    $color: $red;
     color: $color;
     background: #fff1f0;
     border: 1px solid lighten($color, 30%);
@@ -406,6 +410,11 @@ section.dashboard {
     margin-bottom: 0.5rem;
   }
 
+  .tile.notification {
+    @extend .box;
+    padding: 10px;
+  }
+
   .counts .column {
     padding: 30px;
   }
@@ -488,6 +497,9 @@ section.campaigns {
         border-bottom: 1px solid lighten(#1890ff, 30%);
       }
 
+      .spinner {
+        margin-left: 10px;
+      }
       .spinner .loading-overlay .loading-icon::after {
         border-bottom-color: lighten(#1890ff, 30%);
         border-left-color: lighten(#1890ff, 30%);
@@ -723,20 +735,23 @@ section.campaign {
 
 /* Toasts */
 .notices {
-  @keyframes scale {
-    0% {
-      scale: 1;
-    }
-    50% {
-      scale: 1.3;
+  .toast {
+    @extend .box;
+    border-left: 15px solid $grey;
+    border-radius: 3px;
+    padding: 20px;
+
+    &.is-danger {
+      background: $white;
+      border-left-color: $red;
+      color: $grey-dark;
     }
-    100% {
-      scale: 1;
+    &.is-success {
+      background: $white;
+      border-left-color: $green;
+      color: $grey-dark;
     }
   }
-  .toast {
-    animation: scale 300ms ease-in-out;
-  }
 }
 
 @media screen and (max-width: 1450px) and (min-width: 769px) {

frontend/src/components/LogView.vue

@@ -5,7 +5,7 @@
         <template v-for="(l, i) in lines">
           <span :set="line = splitLine(l)" :key="i" class="line">
             <span class="timestamp" :title="line.file">{{ line.timestamp }}</span>
-            <span class="message">{{ line.message }}</span>
+            <span class="log-message">{{ line.message }}</span>
           </span>
         </template>
       </div>

frontend/src/constants.js

@@ -29,7 +29,7 @@ export const storeKeys = Object.freeze({
 export const timestamp = 'ddd D MMM YYYY, hh:mm A';
 
 export const colors = Object.freeze({
-  primary: '#7f2aff',
+  primary: '#0055d4',
 });
 
 export const regDuration = '[0-9]+(ms|s|m|h|d)';

frontend/src/utils.js

@@ -84,7 +84,7 @@ export default class Utils {
   // UI shortcuts.
   confirm = (msg, onConfirm, onCancel) => {
     Dialog.confirm({
-      scroll: 'clip',
+      scroll: 'keep',
       message: !msg ? this.i18n.t('globals.messages.confirm') : msg,
       confirmText: this.i18n.t('globals.buttons.ok'),
       cancelText: this.i18n.t('globals.buttons.cancel'),
@@ -95,7 +95,7 @@ export default class Utils {
 
   prompt = (msg, inputAttrs, onConfirm, onCancel) => {
     Dialog.prompt({
-      scroll: 'clip',
+      scroll: 'keep',
       message: msg,
       confirmText: this.i18n.t('globals.buttons.ok'),
       cancelText: this.i18n.t('globals.buttons.cancel'),
@@ -115,7 +115,9 @@ export default class Utils {
       message: this.escapeHTML(msg),
       type: !typ ? 'is-success' : typ,
       queue: false,
-      duration: duration || 2000,
+      duration: duration || 3000,
+      position: 'is-top',
+      pauseOnHover: true,
     });
   };
 

frontend/src/views/Campaigns.vue

@@ -124,7 +124,7 @@
             </router-link>
           </p>
           <p title="Speed" v-if="stats.rate">
-            <label><b-icon icon="speedometer" size="is-small"></b-icon></label>
+            <label><b-icon icon="calendar-clock" size="is-small"></b-icon></label>
             <span class="send-rate">
               {{ stats.rate.toFixed(0) }} / min
             </span>
@@ -192,8 +192,9 @@
               <b-icon icon="cancel" size="is-small" />
             </b-tooltip>
           </a>
-          <a href="" @click.prevent="$utils.confirm($tc('campaigns.confirmDelete'),
-              () => deleteCampaign(props.row))" data-cy="btn-delete">
+          <a href=""
+            @click.prevent="$utils.confirm($t('campaigns.confirmDelete', { name: props.row.name }),
+            () => deleteCampaign(props.row))" data-cy="btn-delete">
               <b-icon icon="trash-can-outline" size="is-small" />
           </a>
         </div>

frontend/src/views/Dashboard.vue

@@ -55,6 +55,9 @@
                     <ul class="no is-size-7 has-text-grey">
                       <li v-for="(num, status) in counts.campaigns.byStatus" :key="status">
                         <label>{{ num }}</label> {{ status }}
+                        <span v-if="status === 'running'" class="spinner is-tiny">
+                          <b-loading :is-full-page="false" active />
+                        </span>
                       </li>
                     </ul>
                   </div>

frontend/yarn.lock

@@ -2571,12 +2571,12 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
-buefy@^0.9.7:
-  version "0.9.7"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.7.tgz#694e73fe0b32632a53d94c5ba9cfa4468363badd"
-  integrity sha512-Fli0ZjNDgtFtHm0LItWmfhNJ1oLjDwPzUWccvwXXoo2mADXaH8JQxyhY+drUuUV5/GMu5PtwqQSqPgZy942VZg==
+buefy@^0.9.10:
+  version "0.9.10"
+  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.10.tgz#17f64ee1ba43a145d1d3c56f45cba95e4e2975fa"
+  integrity sha512-xXEoy/NTgBNiIfBTCdHi2Vu5SJJdB046py6ekUvYuUgYwRvulySZksdecVNNWdfEVU8iD4esZaRbTLwCegFcVQ==
   dependencies:
-    bulma "0.9.2"
+    bulma "0.9.3"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
@@ -2617,10 +2617,10 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.2.tgz#340011e119c605f19b8ca886bfea595f1deaf23c"
-  integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==
+bulma@0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
+  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
 
 bytes@3.0.0:
   version "3.0.0"

static/email-templates/base.html

@@ -43,7 +43,7 @@
                 padding: 30px;
             }
             .button {
-                background: #7f2aff;
+                background: #0055d4;
                 color: #fff !important;
                 display: inline-block;
                 border-radius: 3px;
@@ -61,7 +61,7 @@
             }
 
             a {
-                color: #7f2aff;
+                color: #0055d4;
             }
                 a:hover {
                     color: #111;

static/email-templates/default.tpl

@@ -24,7 +24,7 @@
             }
 
             .button {
-                background: #7f2aff;
+                background: #0055d4;
                 border-radius: 3px;
                 text-decoration: none !important;
                 color: #fff !important;
@@ -54,7 +54,7 @@
             }
 
             a {
-                color: #7f2aff;
+                color: #0055d4;
             }
                 a:hover {
                     color: #111;

static/public/static/style.css

@@ -1,184 +1,6 @@
 * {
   box-sizing: border-box;
 }
-
-/* Flexit grid */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 10px;
-  box-sizing: border-box;
-}
-.row {
-  box-sizing: border-box;
-  display: flex;
-  flex: 0 1 auto;
-  flex-flow: row wrap;
-}
-.columns,
-.column {
-  box-sizing: border-box;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 1;
-  margin: 10px 0 10px 4%;
-}
-.column:first-child,
-.columns:first-child {
-  margin-left: 0;
-}
-.one {
-  max-width: 4.6666666667%;
-}
-.two {
-  max-width: 13.3333333333%;
-}
-.three {
-  max-width: 22%;
-}
-.four {
-  max-width: 30.6666666667%;
-}
-.five {
-  max-width: 39.3333333333%;
-}
-.six {
-  max-width: 48%;
-}
-.seven {
-  max-width: 56.6666666667%;
-}
-.eight {
-  max-width: 65.3333333333%;
-}
-.nine {
-  max-width: 74%;
-}
-.ten {
-  max-width: 82.6666666667%;
-}
-.eleven {
-  max-width: 91.3333333333%;
-}
-.twelve {
-  max-width: 100%;
-  margin-left: 0;
-}
-.column-offset-0 {
-  margin-left: 0;
-}
-.column-offset-1 {
-  margin-left: 8.33333333%;
-}
-.column-offset-2 {
-  margin-left: 16.66666667%;
-}
-.column-offset-3 {
-  margin-left: 25%;
-}
-.column-offset-4 {
-  margin-left: 33.33333333%;
-}
-.column-offset-5 {
-  margin-left: 41.66666667%;
-}
-.column-offset-6 {
-  margin-left: 50%;
-}
-.column-offset-7 {
-  margin-left: 58.33333333%;
-}
-.column-offset-8 {
-  margin-left: 66.66666667%;
-}
-.column-offset-9 {
-  margin-left: 75%;
-}
-.column-offset-10 {
-  margin-left: 83.33333333%;
-}
-.column-offset-11 {
-  margin-left: 91.66666667%;
-}
-.between {
-  justify-content: space-between;
-}
-.evenly {
-  justify-content: space-evenly;
-}
-.around {
-  justify-content: space-around;
-}
-.center {
-  justify-content: center;
-  text-align: center;
-}
-.start {
-  justify-content: flex-start;
-}
-.end {
-  justify-content: flex-end;
-}
-.top {
-  align-items: flex-start;
-}
-.bottom {
-  align-items: flex-end;
-}
-.middle {
-  align-items: center;
-}
-.first {
-  order: -1;
-}
-.last {
-  order: 1;
-}
-.vertical {
-  flex-flow: column wrap;
-}
-.row-align-center {
-  align-items: center;
-}
-.space-right {
-  margin-right: 10px;
-}
-.space-left {
-  margin-left: 10px;
-}
-.space-bottom {
-  margin-bottom: 10px;
-}
-.space-top {
-  margin-top: 10px;
-}
-@media screen and (max-width: 768px) {
-  .container {
-    overflow: auto;
-  }
-  .columns,
-  .column {
-    min-width: 100%;
-    margin: 10px 0;
-  }
-  .column-offset-0,
-  .column-offset-1,
-  .column-offset-2,
-  .column-offset-3,
-  .column-offset-4,
-  .column-offset-5,
-  .column-offset-6,
-  .column-offset-7,
-  .column-offset-8,
-  .column-offset-9,
-  .column-offset-10,
-  .column-offset-11 {
-    margin: unset;
-  }
-} /*# sourceMappingURL=dist/flexit.min.css.map */
-
 html, body {
   padding: 0;
   margin: 0;
@@ -188,11 +10,11 @@ body {
   background: #f9f9f9;
   font-family: "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 16px;
-  line-height: 28px;
+  line-height: 26px;
   color: #111;
 }
 a {
-  color: #7f2aff;
+  color: #0055d4;
 }
 a:hover {
   color: #111;
@@ -216,14 +38,17 @@ input[type="text"], input[type="email"], select {
   border: 1px solid #888;
   border-radius: 3px;
   width: 100%;
+  box-shadow: 2px 2px 0 #f3f3f3;
+  border: 1px solid #ddd;
+  font-size: 1em;
 }
   input:focus {
-    border-color: #7f2aff;
+    border-color: #0055d4;
   }
 
 .button {
-  background: #7f2aff;
-  padding: 15px 30px;
+  background: #0055d4;
+  padding: 10px 30px;
   border-radius: 3px;
   border: 0;
   cursor: pointer;
@@ -238,19 +63,22 @@ input[type="text"], input[type="email"], select {
 }
 .button.button-outline {
   background: #fff;
-  border: 1px solid #7f2aff;
-  color: #7f2aff;
+  border: 1px solid #0055d4;
+  color: #0055d4;
 }
 .button.button-outline:hover {
-  background-color: #7f2aff;
+  background-color: #0055d4;
   color: #fff;
 }
 
+.container {
+  margin: 60px auto 15px auto;
+  max-width: 550px;  
+}
+
 .wrap {
   background: #fff;
-  margin-top: 60px;
-  max-width: 600px;
-  padding: 45px;
+  padding: 40px;
   box-shadow: 2px 2px 0 #f3f3f3;
   border: 1px solid #eee;
 }
@@ -271,27 +99,33 @@ input[type="text"], input[type="email"], select {
   border-top: 1px solid #eee;
 }
 
+.row {
+  margin-bottom: 20px;
+}
 .form .lists {
   margin-top: 45px;
+  list-style-type: none;
+  padding: 0;
 }
   .form .nonce {
     display: none;
   }
 
-.footer {
+footer.container {
+  margin-top: 15px;
   text-align: center;
   color: #aaa;
   font-size: 0.775em;
   margin-top: 30px;
   margin-bottom: 30px;
 }
-.footer a {
-  color: #aaa;
-  text-decoration: none;
-}
-.footer a:hover {
-  color: #111;
-}
+  footer a {
+    color: #aaa;
+    text-decoration: none;
+  }
+  footer a:hover {
+    color: #111;
+  }
 
 @media screen and (max-width: 650px) {
   .wrap {

static/public/templates/index.html

@@ -6,8 +6,6 @@
 	<title>{{ .Data.Title }}</title>
 	<meta name="description" content="{{ .Data.Description }}" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-
-	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
 	<link href="/public/static/style.css" rel="stylesheet" type="text/css" />
 
 	{{ if ne .FaviconURL "" }}
@@ -32,11 +30,9 @@
 {{ define "footer" }}
 	</div>
 	
-	<div class="container">
-		<footer class="footer">
-			Powered by <a target="_blank" href="https://listmonk.app">listmonk</a>
-		</footer>
-	</div>
+	<footer class="container">
+		Powered by <a target="_blank" href="https://listmonk.app">listmonk</a>
+	</footer>
 </body>
 </html>
 {{ end }}

static/public/templates/subscription-form.html

@@ -15,19 +15,15 @@
                 <label>{{ L.T "public.subName" }}</label>
                 <input name="name" type="text" placeholder="{{ L.T "public.subName" }}" >
             </p>
-            <div class="lists">
+            <ul class="lists">
                 <h2>{{ L.T "globals.terms.lists" }}</h2>
                 {{ range $i, $l := .Data.Lists }}
-                    <div class="row">
-                        <div class="one column">
-                            <input checked="true" id="l-{{ $l.UUID}}" type="checkbox" name="l" value="{{ $l.UUID }}" >
-                        </div>
-                        <div class="eleven columns">
-                            <label for="l-{{ $l.UUID}}">{{ $l.Name }}</label>
-                        </div>
-                    </div>
+                    <li>
+                        <input checked="true" id="l-{{ $l.UUID}}" type="checkbox" name="l" value="{{ $l.UUID }}" >
+                        <label for="l-{{ $l.UUID}}">{{ $l.Name }}</label>
+                    </li>
                 {{ end }}
-            </div>
+            </ul>
             <p>
                 <button type="submit" class="button">{{ L.T "public.sub" }}</button>
             </p>

static/public/templates/subscription.html

@@ -25,27 +25,19 @@
         <h2>{{ L.T "public.privacyTitle" }}</h2>
         {{ if .Data.AllowExport }}
         <div class="row">
-            <div class="one columns">
-                <input id="privacy-export" type="radio" name="data-action" value="export" required />
-            </div>
-            <div class="ten columns">
-                <label for="privacy-export"><strong>{{ L.T "public.privacyExport" }}</strong></label>
-                <br />
-                {{ L.T "public.privacyExportHelp" }}
-            </div>
+            <input id="privacy-export" type="radio" name="data-action" value="export" required />
+            <label for="privacy-export"><strong>{{ L.T "public.privacyExport" }}</strong></label>
+            <br />
+            {{ L.T "public.privacyExportHelp" }}
         </div>
         {{ end }}
 
         {{ if .Data.AllowWipe }}
         <div class="row">
-            <div class="one columns">
-                <input id="privacy-wipe" type="radio" name="data-action" value="wipe" required />
-            </div>
-            <div class="ten columns">
-                <label for="privacy-wipe"><strong>{{ L.T "public.privacyWipe" }}</strong></label>
-                <br />
-                {{ L.T "public.privacyWipeHelp" }}
-            </div>
+            <input id="privacy-wipe" type="radio" name="data-action" value="wipe" required />
+            <label for="privacy-wipe"><strong>{{ L.T "public.privacyWipe" }}</strong></label>
+            <br />
+            {{ L.T "public.privacyWipeHelp" }}
         </div>
         {{ end }}
         <p>