diff --git a/frontend/package.json b/frontend/package.json index a5e58f6a..9b635eaa 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png index 80100010..0ca8f02b 100644 Binary files a/frontend/public/favicon.png and b/frontend/public/favicon.png differ diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js index 931041ac..0d882775 100644 --- a/frontend/src/api/index.js +++ b/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, }); } diff --git a/frontend/src/assets/favicon.png b/frontend/src/assets/favicon.png index 80100010..0ca8f02b 100644 Binary files a/frontend/src/assets/favicon.png and b/frontend/src/assets/favicon.png differ diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png index a90d9ffa..4697ced9 100644 Binary files a/frontend/src/assets/logo.png and b/frontend/src/assets/logo.png differ diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg index 40380023..d3d36e75 100644 --- a/frontend/src/assets/logo.svg +++ b/frontend/src/assets/logo.svg @@ -1,131 +1 @@ - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss index 8d5bd00e..0a81ca9f 100644 --- a/frontend/src/assets/style.scss +++ b/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,19 +735,22 @@ section.campaign { /* Toasts */ .notices { - @keyframes scale { - 0% { - scale: 1; - } - 50% { - scale: 1.3; - } - 100% { - scale: 1; - } - } .toast { - animation: scale 300ms ease-in-out; + @extend .box; + border-left: 15px solid $grey; + border-radius: 3px; + padding: 20px; + + &.is-danger { + background: $white; + border-left-color: $red; + color: $grey-dark; + } + &.is-success { + background: $white; + border-left-color: $green; + color: $grey-dark; + } } } diff --git a/frontend/src/components/LogView.vue b/frontend/src/components/LogView.vue index b7de05bb..745e318c 100644 --- a/frontend/src/components/LogView.vue +++ b/frontend/src/components/LogView.vue @@ -5,7 +5,7 @@ diff --git a/frontend/src/constants.js b/frontend/src/constants.js index afe4f1cd..83a32eef 100644 --- a/frontend/src/constants.js +++ b/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)'; diff --git a/frontend/src/utils.js b/frontend/src/utils.js index 47e6b0f9..d102fe26 100644 --- a/frontend/src/utils.js +++ b/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, }); }; diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue index 47575f81..65a36410 100644 --- a/frontend/src/views/Campaigns.vue +++ b/frontend/src/views/Campaigns.vue @@ -124,7 +124,7 @@

- + {{ stats.rate.toFixed(0) }} / min @@ -192,8 +192,9 @@ - + diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue index 460eb51b..c3cb2d52 100644 --- a/frontend/src/views/Dashboard.vue +++ b/frontend/src/views/Dashboard.vue @@ -55,6 +55,9 @@

diff --git a/frontend/yarn.lock b/frontend/yarn.lock index ba45397f..e6d866cc 100644 --- a/frontend/yarn.lock +++ b/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" diff --git a/static/email-templates/base.html b/static/email-templates/base.html index 8dfcc01e..d1434083 100644 --- a/static/email-templates/base.html +++ b/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; diff --git a/static/email-templates/default.tpl b/static/email-templates/default.tpl index 82653b1d..72d5da96 100644 --- a/static/email-templates/default.tpl +++ b/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; diff --git a/static/public/static/favicon.png b/static/public/static/favicon.png index 80100010..0ca8f02b 100644 Binary files a/static/public/static/favicon.png and b/static/public/static/favicon.png differ diff --git a/static/public/static/logo.png b/static/public/static/logo.png index a90d9ffa..4697ced9 100644 Binary files a/static/public/static/logo.png and b/static/public/static/logo.png differ diff --git a/static/public/static/logo.svg b/static/public/static/logo.svg index e0be10f1..d3d36e75 100644 --- a/static/public/static/logo.svg +++ b/static/public/static/logo.svg @@ -1,135 +1 @@ - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/public/static/style.css b/static/public/static/style.css index c3c90125..813c9a25 100644 --- a/static/public/static/style.css +++ b/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 { diff --git a/static/public/templates/index.html b/static/public/templates/index.html index 3de651a0..507476c6 100644 --- a/static/public/templates/index.html +++ b/static/public/templates/index.html @@ -6,8 +6,6 @@ {{ .Data.Title }} - - {{ if ne .FaviconURL "" }} @@ -32,11 +30,9 @@ {{ define "footer" }} -
- -
+ {{ end }} diff --git a/static/public/templates/subscription-form.html b/static/public/templates/subscription-form.html index 67db7729..d49695f6 100644 --- a/static/public/templates/subscription-form.html +++ b/static/public/templates/subscription-form.html @@ -15,19 +15,15 @@

-
+
+

diff --git a/static/public/templates/subscription.html b/static/public/templates/subscription.html index f4e8a8e8..92369713 100644 --- a/static/public/templates/subscription.html +++ b/static/public/templates/subscription.html @@ -25,27 +25,19 @@

{{ L.T "public.privacyTitle" }}

{{ if .Data.AllowExport }}
-
- -
-
- -
- {{ L.T "public.privacyExportHelp" }} -
+ + +
+ {{ L.T "public.privacyExportHelp" }}
{{ end }} {{ if .Data.AllowWipe }}
-
- -
-
- -
- {{ L.T "public.privacyWipeHelp" }} -
+ + +
+ {{ L.T "public.privacyWipeHelp" }}
{{ end }}