From d9dc000e8991c465a45c00584e3c82dc90e180d8 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Sat, 15 Oct 2022 23:14:51 +1300
Subject: [PATCH] UI: Theme changes

---
 server/ui-src/App.vue                         |  37 +++++-----
 .../ui-src/assets/_bootstrap_variables.scss   |   2 +-
 server/ui-src/assets/styles.scss              |  14 ++++
 server/ui-src/templates/Message.vue           |  68 +++++++++---------
 server/ui/favicon.svg                         |  50 +++++++++++++
 server/ui/index.html                          |   2 +-
 server/ui/mailpit.png                         | Bin 3044 -> 0 bytes
 server/ui/mailpit.svg                         |  51 ++++++++++++-
 8 files changed, 168 insertions(+), 56 deletions(-)
 create mode 100644 server/ui/favicon.svg
 delete mode 100644 server/ui/mailpit.png

diff --git a/server/ui-src/App.vue b/server/ui-src/App.vue
index 0ebdadb..df45da1 100644
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -505,34 +505,33 @@ export default {
 </script>
 
 <template>
-	<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light shadow-sm">
+	<div class="navbar navbar-expand-lg navbar-dark row flex-shrink-0 bg-primary text-white">
 		<div class="col-lg-2 col-md-3 d-none d-md-block">
-			<a class="navbar-brand" href="#" v-on:click="reloadMessages">
+			<a class="navbar-brand text-white" href="#" v-on:click="reloadMessages">
 				<img src="mailpit.svg" alt="Mailpit">
 				<span class="ms-2">Mailpit</span>
 			</a>
 		</div>
 
 		<div class="col col-md-9 col-lg-10" v-if="message">
-			<a class="btn btn-outline-secondary me-4 px-3" href="#" v-on:click="message=false"
-				title="Return to messages">
+			<a class="btn btn-outline-light me-4 px-3" href="#" v-on:click="message=false" title="Return to messages">
 				<i class="bi bi-arrow-return-left"></i>
 			</a>
-			<button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread">
+			<button class="btn btn-outline-light me-2" title="Mark unread" v-on:click="markUnread">
 				<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
 			</button>
-			<button class="btn btn-outline-secondary me-2" title="Delete message" v-on:click="deleteMessages">
+			<button class="btn btn-outline-light me-2" title="Delete message" v-on:click="deleteMessages">
 				<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
 			</button>
-			<a class="btn btn-outline-secondary float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext"
+			<a class="btn btn-outline-light float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext"
 				title="View next message">
 				<i class="bi bi-caret-right-fill"></i>
 			</a>
-			<a class="btn btn-outline-secondary ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'"
+			<a class="btn btn-outline-light ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'"
 				:href="'#'+messagePrev" title="View previous message">
 				<i class="bi bi-caret-left-fill"></i>
 			</a>
-			<a :href="'api/v1/message/' + message.ID + '/raw?dl=1'" class="btn btn-outline-secondary me-2 float-end"
+			<a :href="'api/v1/message/' + message.ID + '/raw?dl=1'" class="btn btn-outline-light me-2 float-end"
 				title="Download message">
 				<i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span>
 			</a>
@@ -551,7 +550,7 @@ export default {
 						<span class="btn btn-link position-absolute end-0 text-muted" v-if="search"
 							v-on:click="resetSearch"><i class="bi bi-x-circle"></i></span>
 					</div>
-					<button v-if="total" class="btn btn-outline-secondary" type="submit"><i
+					<button v-if="total" class="btn btn-outline-light" type="submit"><i
 							class="bi bi-search"></i></button>
 				</div>
 			</form>
@@ -562,7 +561,7 @@ export default {
 				<i class="bi bi-trash-fill"></i>
 			</button>
 
-			<button v-if="unread" class="btn btn-outline-primary float-start d-md-none" data-bs-toggle="modal"
+			<button v-if="unread" class="btn btn-outline-light float-start d-md-none" data-bs-toggle="modal"
 				data-bs-target="#MarkAllReadModal" title="Mark all read">
 				<i class="bi bi-check2-square"></i>
 			</button>
@@ -579,14 +578,14 @@ export default {
 			</span>
 			<span v-else>
 				<small>
-					<b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{
-					formatNumber(total) }}</b>
+					{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }} <small>of</small> {{
+					formatNumber(total) }}
 				</small>
-				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
+				<button class="btn btn-outline-light ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
 					v-if="!searching" :title="'View previous '+limit+' messages'">
 					<i class="bi bi-caret-left-fill"></i>
 				</button>
-				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching"
+				<button class="btn btn-outline-light" :disabled="!canNext" v-on:click="viewNext" v-if="!searching"
 					:title="'View next '+limit+' messages'">
 					<i class="bi bi-caret-right-fill"></i>
 				</button>
@@ -669,7 +668,7 @@ export default {
 
 		<div class="col-lg-10 col-md-9 mh-100 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" :class="message ? 'd-none':''" id="message-page">
-				<div class="list-group" v-if="items.length">
+				<div class="list-group my-2" v-if="items.length">
 					<a v-for="message in items" :href="'#'+message.ID"
 						v-on:click.ctrl="toggleSelected($event, message.ID)"
 						v-on:click.shift="selectRange($event, message.ID)"
@@ -740,7 +739,7 @@ export default {
 					This will permanently delete {{ formatNumber(total) }} message<span v-if="total > 1">s</span>.
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
 						v-on:click="deleteAll">Delete</button>
 				</div>
@@ -761,8 +760,8 @@ export default {
 					This will mark {{ formatNumber(unread) }} message<span v-if="unread > 1">s</span> as read.
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-					<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
+					<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-success" data-bs-dismiss="modal"
 						v-on:click="markAllRead">Confirm</button>
 				</div>
 			</div>
diff --git a/server/ui-src/assets/_bootstrap_variables.scss b/server/ui-src/assets/_bootstrap_variables.scss
index 1d3791f..d695d0e 100644
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -1,2 +1,2 @@
 $link-decoration: none;
-$primary: #3465b5;
+$primary: #2c3e50;
diff --git a/server/ui-src/assets/styles.scss b/server/ui-src/assets/styles.scss
index 674bb5a..bbedf79 100644
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -9,6 +9,7 @@
 
     .navbar-brand {
         color: #2d4a5d;
+        transition: all 0.2s;
 
         img {
             width: 40px;
@@ -24,6 +25,19 @@
     }
 }
 
+.navbar-brand {
+    span {
+        opacity: 0.8;
+        transition: all 0.5s;
+    }
+
+    &:hover {
+        span {
+            opacity: 1;
+        }
+    }
+}
+
 #loading {
     position: absolute;
     top: 0;
diff --git a/server/ui-src/templates/Message.vue b/server/ui-src/templates/Message.vue
index a6aa977..d09c752 100644
--- a/server/ui-src/templates/Message.vue
+++ b/server/ui-src/templates/Message.vue
@@ -28,7 +28,7 @@ export default {
 			handler(newQuestion) {
 				let self = this;
 				// delay 100ms to select first tab and add HTML highlighting (prev/next)
-				window.setTimeout(function() {
+				window.setTimeout(function () {
 					self.renderUI();
 				}, 100)
 			},
@@ -47,20 +47,20 @@ export default {
 			self.srcURI = 'api/v1/message/' + self.message.ID + '/raw';
 		});
 	},
-	
-	unmounted: function() {
+
+	unmounted: function () {
 		window.removeEventListener("resize", this.resizeIframes);
 	},
 
 	methods: {
-		renderUI: function() {
+		renderUI: function () {
 			let self = this;
 			// click the first non-disabled tab
 			document.querySelector('#nav-tab button:not([disabled])').click();
 			document.activeElement.blur(); // blur focus
 			document.getElementById('message-view').scrollTop = 0;
 
-			window.setTimeout(function(){
+			window.setTimeout(function () {
 				let p = document.getElementById('preview-html');
 
 				if (p) {
@@ -83,13 +83,13 @@ export default {
 			window.Prism.manual = true;
 			Prism.highlightAll();
 		},
-		
-		resizeIframe: function(el) {
+
+		resizeIframe: function (el) {
 			let i = el.target;
 			i.style.height = i.contentWindow.document.body.scrollHeight + 50 + 'px';
 		},
 
-		resizeIframes: function() {
+		resizeIframes: function () {
 			let h = document.getElementById('preview-html');
 			if (h) {
 				h.style.height = h.contentWindow.document.body.scrollHeight + 50 + 'px';
@@ -101,7 +101,7 @@ export default {
 			}
 		},
 
-		messageDate: function(d) {
+		messageDate: function (d) {
 			return moment(d).format('ddd, D MMM YYYY, h:mm a');
 		}
 	}
@@ -168,7 +168,8 @@ export default {
 			<div class="col-md-auto text-md-end mt-md-3">
 				<p class="text-muted small d-none d-md-block"><small>{{ messageDate(message.Date) }}</small></p>
 				<div class="dropdown mt-2" v-if="allAttachments(message)">
-					<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+					<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
+						aria-expanded="false">
 						Attachment<span v-if="allAttachments(message).length > 1">s</span>
 						({{ allAttachments(message).length }})
 					</button>
@@ -188,41 +189,40 @@ export default {
 
 		<nav>
 			<div class="nav nav-tabs my-3" id="nav-tab" role="tablist">
-				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-html" type="button" role="tab" aria-controls="nav-html"
-					aria-selected="true" v-if="message.HTML">HTML</button>
-				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
-					aria-selected="false" v-if="message.HTML">HTML Source</button>
-				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-plain-text" type="button" role="tab" aria-controls="nav-plain-text"
-					aria-selected="false" :class="message.HTML == '' ? 'show':''">Text</button>
-				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-raw" type="button" role="tab" aria-controls="nav-raw"
-					aria-selected="false">Raw</button>
+				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab" data-bs-target="#nav-html" type="button"
+					role="tab" aria-controls="nav-html" aria-selected="true" v-if="message.HTML">HTML</button>
+				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab" data-bs-target="#nav-html-source"
+					type="button" role="tab" aria-controls="nav-html-source" aria-selected="false"
+					v-if="message.HTML">HTML Source</button>
+				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab" data-bs-target="#nav-plain-text"
+					type="button" role="tab" aria-controls="nav-plain-text" aria-selected="false"
+					:class="message.HTML == '' ? 'show':''">Text</button>
+				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab" data-bs-target="#nav-raw" type="button"
+					role="tab" aria-controls="nav-raw" aria-selected="false">Raw</button>
 			</div>
 		</nav>
 		<div class="tab-content mb-5" id="nav-tabContent">
 			<div v-if="message.HTML != ''" class="tab-pane fade show" id="nav-html" role="tabpanel"
 				aria-labelledby="nav-html-tab" tabindex="0">
-				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML" v-on:load="resizeIframe"
-					seamless frameborder="0" style="width: 100%; height: 100%;">
+				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML"
+					v-on:load="resizeIframe" seamless frameborder="0" style="width: 100%; height: 100%;">
 				</iframe>
-				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+				<Attachments v-if="allAttachments(message).length" :message="message"
+					:attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-html-source" role="tabpanel"
-				aria-labelledby="nav-html-source-tab" tabindex="0" v-if="message.HTML">
+			<div class="tab-pane fade" id="nav-html-source" role="tabpanel" aria-labelledby="nav-html-source-tab"
+				tabindex="0" v-if="message.HTML">
 				<pre><code class="language-html">{{ message.HTML }}</code></pre>
 			</div>
-			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel"
-				aria-labelledby="nav-plain-text-tab" tabindex="0" :class="message.HTML == '' ? 'show':''">
+			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel" aria-labelledby="nav-plain-text-tab"
+				tabindex="0" :class="message.HTML == '' ? 'show':''">
 				<div class="text-view">{{ message.Text }}</div>
-				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+				<Attachments v-if="allAttachments(message).length" :message="message"
+					:attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab"
-				tabindex="0">
-				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe"
-					seamless frameborder="0" style="width: 100%; height: 300px;" id="message-src"></iframe>
+			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab" tabindex="0">
+				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe" seamless frameborder="0"
+					style="width: 100%; height: 300px;" id="message-src"></iframe>
 			</div>
 		</div>
 	</div>
diff --git a/server/ui/favicon.svg b/server/ui/favicon.svg
new file mode 100644
index 0000000..304b05d
--- /dev/null
+++ b/server/ui/favicon.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="460"
+   viewBox="0 0 132.292 121.708"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.80851684"
+     inkscape:cx="401.9706"
+     inkscape:cy="327.76064"
+     inkscape:window-width="1554"
+     inkscape:window-height="838"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z"
+     fill-opacity=".941"
+     fill="#2d4a5f"
+     id="path2"
+     style="fill:#415066;fill-opacity:1"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+  <path
+     d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z"
+     fill="#00b786"
+     id="path4"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+</svg>
diff --git a/server/ui/index.html b/server/ui/index.html
index 442c1f1..c5065cd 100644
--- a/server/ui/index.html
+++ b/server/ui/index.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
 	<meta name="referrer" content="no-referrer">
 	<meta name="robots" content="noindex, nofollow, noarchive">
-	<link rel="icon" href="mailpit.svg">
+	<link rel="icon" href="favicon.svg">
 	<title>Mailpit</title>
 	<link rel=stylesheet href="dist/app.css">
 </head>
diff --git a/server/ui/mailpit.png b/server/ui/mailpit.png
deleted file mode 100644
index dadbdd9562832ce3124e26b5aca19f63a75b187d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3044
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

diff --git a/server/ui/mailpit.svg b/server/ui/mailpit.svg
index 9c6cc4c..814a7c9 100644
--- a/server/ui/mailpit.svg
+++ b/server/ui/mailpit.svg
@@ -1 +1,50 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="460" viewBox="0 0 132.292 121.708" xmlns:v="https://vecta.io/nano"><path d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z" fill-opacity=".941" fill="#2d4a5f"/><path d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z" fill="#00b786"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="500"
+   height="460"
+   viewBox="0 0 132.292 121.708"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="mailpit.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.80851684"
+     inkscape:cx="401.35218"
+     inkscape:cy="327.76064"
+     inkscape:window-width="1554"
+     inkscape:window-height="838"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12.321 0l53.861 53.918L120.365 0zM5.155 9.025l60.842 59.673 61.211-59.489-.185 36.835L66.921 70.54l15.164 12.616-8.137 5.986-41.609.184c-4.838-.022-25.877-18.34-27.185-41.255z"
+     fill-opacity=".941"
+     fill="#2d4a5f"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+  <path
+     d="M78.385 72.049l53.907-21.679-8.031 57.318-11.845-9.132c-21.727 23.171-45.255 26.289-67.997 20.837S12.281 98.39 5.155 83.8-.67 53.116 2.843 38.769c1.13 10.511-1.313 16.316 6.38 33.612 6.31 11.399 14.413 20.417 25.89 24.956 13.9 6.195 32.247 3.357 41.701-3.039l14.24-12.156z"
+     fill="#00b786"
+     id="path4"
+     inkscape:export-filename="/mnt/apache/sandpit/go/mailpit/server/ui/mailpit.png"
+     inkscape:export-xdpi="12.29"
+     inkscape:export-ydpi="12.29" />
+</svg>