From b666bfc19769b1d45580c1f6f173557f04b98007 Mon Sep 17 00:00:00 2001
From: Max G <admin@internet.com>
Date: Sat, 18 Dec 2021 22:18:22 +0000
Subject: [PATCH] Bunch of changes and unfinished features. Just trying to keep
 everything up to date. This project is a mess. Don't worry. You are employed.

---
 applyProdDatabaseToDev.sh                     |   3 +-
 backupDatabase.sh                             |   2 +-
 client/src/assets/semantic-helper.css         |  54 ++++-
 client/src/assets/squire.js                   |  14 +-
 client/src/components/GlobalSiteMenu.vue      |  86 +++++---
 client/src/components/LoginFormComponent.vue  |  51 +++--
 client/src/components/LogoComponent.vue       |  28 ++-
 client/src/components/NoteInputPanel.vue      | 187 ++++++++----------
 .../src/components/NoteTitleDisplayCard.vue   |  13 +-
 .../src/components/SideSlideMenuComponent.vue |  12 +-
 client/src/pages/HomePage.vue                 | 159 ++++++++++++---
 client/src/pages/NotesPage.vue                |   5 +-
 client/src/pages/SettingsPage.vue             |   8 +-
 client/src/stores/mainStore.js                |   3 +-
 client/vue.config.js                          |  21 +-
 package-lock.json                             |   8 +-
 server/index.js                               |   4 +-
 server/models/User.js                         |   2 +-
 18 files changed, 443 insertions(+), 217 deletions(-)

diff --git a/applyProdDatabaseToDev.sh b/applyProdDatabaseToDev.sh
index 91e77c8..c0b1a64 100755
--- a/applyProdDatabaseToDev.sh
+++ b/applyProdDatabaseToDev.sh
@@ -10,7 +10,8 @@ echo '-------'
 # gzip -dk file.gz
 
 BACKUPDIR="/home/mab/databaseBackupSolidScribe"
-DEVDBPASS="Crama!Lama*Jamma###88383!!!!!345345956245i"
+#DEVDBPASS="Crama!Lama*Jamma###88383!!!!!345345956245i"
+DEVDBPASS="***REMOVED***"
 
 cd $BACKUPDIR
 
diff --git a/backupDatabase.sh b/backupDatabase.sh
index 9c67070..5463b07 100755
--- a/backupDatabase.sh
+++ b/backupDatabase.sh
@@ -9,7 +9,7 @@ NOW=$(date +"%Y-%m-%d_%H-%M")
 ssh mab@solidscribe.com -p 13328 "mysqldump --all-databases --single-transaction --user root -p***REMOVED***" > "backup-$NOW.sql"
 gzip "backup-$NOW.sql"
 
-cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
+# cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
 
 echo "Database Backup Complete on $NOW"
 
diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css
index f2ca033..8d8a050 100644
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@@ -43,6 +43,7 @@ html {
 	height:100%;
 	padding: 0;
 	margin: 0;
+	background: none;
 }
 a:hover {
 	text-decoration: underline;
@@ -80,9 +81,12 @@ div.ui.basic.segment.no-fluf-segment {
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
 body {
 	color: var(--text_color);
-	background-color: var(--body_bg_color);
+	background: none;
 	font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }
+#app {
+	background: var(--body_bg_color);
+}
 
 .ui.segment {
 	color: var(--text_color);
@@ -163,6 +167,9 @@ div.ui.basic.green.label {
 i.green.icon.icon.icon.icon {
 	color: var(--main-accent);
 }
+.button {
+	box-shadow: 2px 2px 4px -2px rgba(40, 40, 40, 0.89) !important;
+}
 .ui.green.buttons, .ui.green.button, .ui.green.button:hover {
 	background-color: var(--main-accent);
 }
@@ -176,6 +183,9 @@ i.green.icon.icon.icon.icon {
 .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column {
 	background-color: var(--main-accent);
 }
+.ui.green.header {
+	color: var(--main-accent);
+}
 
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
 
@@ -555,6 +565,10 @@ i.green.icon.icon.icon.icon {
 .ui.white.button {
 	background: #FFF;
 }
+.white.row {
+	background-color: rgba(255, 255, 255, 0.9);
+}
+
 .input-floating-button {
 	position: absolute;
 	top: 19px;
@@ -865,4 +879,42 @@ i.green.icon.icon.icon.icon {
 [data-position="right center"][data-tooltip]:after {
   -webkit-transform-origin: left center;
           transform-origin: left center;
+}
+
+
+.glint:after {
+	
+	content: '';
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+
+	width: 100%;
+	opacity: 0;
+	pointer-events: none;
+	z-index: 1;
+
+	background: linear-gradient(
+		130deg, 
+		rgba(255,255,255,0) 45%,
+		rgba(255,255,255,1) 50%,
+		var(--main-accent) 55%,
+		rgba(255,255,255,0) 60% 
+	);
+
+	animation: glint-animation 0.8s linear 1;
+	animation-delay: 0.9s;
+}
+
+@keyframes glint-animation {
+  0% {
+    left: -100%;
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/client/src/assets/squire.js b/client/src/assets/squire.js
index 219cbc9..29529ae 100644
--- a/client/src/assets/squire.js
+++ b/client/src/assets/squire.js
@@ -1265,7 +1265,9 @@ var keys = {
     37: 'left',
     39: 'right',
     46: 'delete',
+    191: '/',
     219: '[',
+    220: '\\',
     221: ']'
 };
 
@@ -3888,10 +3890,9 @@ var increaseBlockQuoteLevel = function ( frag ) {
 };
 
 var decreaseBlockQuoteLevel = function ( frag ) {
-    var root = this._root;
     var blockquotes = frag.querySelectorAll( 'blockquote' );
     Array.prototype.filter.call( blockquotes, function ( el ) {
-        return !getNearest( el.parentNode, root, 'BLOCKQUOTE' );
+        return !getNearest( el.parentNode, frag, 'BLOCKQUOTE' );
     }).forEach( function ( el ) {
         replaceWith( el, empty( el ) );
     });
@@ -4172,7 +4173,14 @@ proto._getHTML = function () {
 proto._setHTML = function ( html ) {
     var root = this._root;
     var node = root;
-    node.innerHTML = html;
+    var sanitizeToDOMFragment = this._config.sanitizeToDOMFragment;
+    if ( typeof sanitizeToDOMFragment === 'function' ) {
+        var frag = sanitizeToDOMFragment( html, false, this );
+        empty( node );
+        node.appendChild( frag );
+    } else {
+        node.innerHTML = html;
+    }
     do {
         fixCursor( node, root );
     } while ( node = getNextBlock( node, root ) );
diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue
index 65ffd98..0313339 100644
--- a/client/src/components/GlobalSiteMenu.vue
+++ b/client/src/components/GlobalSiteMenu.vue
@@ -7,6 +7,7 @@
 	}
 	.global-menu {
 		width: 155px;
+		/* background: #221f2b; */
 		background: #221f2b;
 		margin: 0;
 		padding: 0;
@@ -42,7 +43,8 @@
 
 		.menu-section {}
 		.menu-section + .menu-section {
-			border-top: 1px solid #534c68;
+			/* border-top: 1px solid #534c68; */
+			border-top: 1px solid #534c68e3;
 		}
 		.menu-button {
 			cursor: pointer;
@@ -73,21 +75,25 @@
 			/*color: var(--text_color);*/
 			/*width: 100%;*/
 			position: fixed;
-			top: 0;
+			bottom: 0;
 			left: 0;
 			right: 0;
 			z-index: 999;
 			background-color: var(--small_element_bg_color);
-			border-bottom: 1px solid;
-  			border-color: var(--border_color);
   			/*padding: 5px 1rem 5px;*/
   			display: flex;
 			justify-content: space-around;
 			width: 100vw;
+			border-top: 1px solid var(--dark_border_color);
+			display: flex;
+
+			margin: 0;
+			padding: 0;
 		}
 		.place-holder {
 			width: 100%;
-			height: 40px;
+			/*height: 40px;*/
+			height: 0;
 		}
 		.logo-display {
 			width: 27px;
@@ -106,17 +112,35 @@
 		}
 
 		.mobile-button {
-			display: inline-block;
-			font-size: 2em;
-			padding: 6px 3px 5px;
+			padding: 5px 0 0;
+			margin: 0;
 			cursor: pointer;
+			font-size: 0.6em;
+			color: var(--menu-text);
+			text-align: center;
+			flex-basis: 100%;
+			line-height: 1.8em;
+		}
+		.mobile-button + .mobile-button {
+			border-left: 1px solid var(--dark_border_color);
+		}
+		.mobile-button i {
+			font-size: 2em;
+			margin: 0 auto;
+			padding: 0;
+			width: 100%;
+		}
+		.mobile-button svg {
+			margin: 0 46% 0;
+			display: inline-block;
+			width: 15px;
+		}
+		.mobile-button:active, .mobile-button:focus, .mobile-button:hover {
+			text-decoration: none;
 		}
 		.mobile-button.active {
 			background-color: transparent;
 		}
-		.mobile-button i {
-			margin: 0;
-		}
 
 </style>
 
@@ -128,11 +152,24 @@
 		<!-- collapsed menu, appears as a bar  -->
 		<div class="top-menu-bar" v-if="(collapsed || mobile) && !menuOpen">
 
-			<div class="mobile-button">
-				<i class="green link bars icon" v-on:click="collapseMenu"></i>
+			<!-- logo -->
+			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
+				<logo class="logo-display" color="var(--main-accent)" />
+				Notes
+			</router-link>
+
+			<!-- new note -->
+			<div v-if="loggedIn" class="mobile-button">
+				<span v-if="!disableNewNote" @click="createNote">
+					<i class="green plus icon"></i>
+					New Note
+				</span>
+				<span v-if="disableNewNote">
+					<i class="grey plus icon"></i>
+					Working
+				</span>
 			</div>
 
-			<div class="mobile-button"></div>
 
 			<!-- open straight to note -->
 			<router-link 
@@ -141,6 +178,7 @@
 				class="mobile-button"
 				:to="`/notes/open/${$store.getters.totals['quickNote']}`">
 				<i class="green sticky note outline icon"></i>
+				Scratch Pad
 			</router-link>
 			
 			<!-- create new and redirect to new note id -->
@@ -150,27 +188,21 @@
 				exact-active-class="active" 
 				class="mobile-button">
 				<i class="green sticky note outline icon"></i>
+				Scratch Pad
 			</a>
 
-			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
-				<logo class="logo-display" color="var(--main-accent)" />
-			</router-link>
 
 			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/attachments">
 				<i class="green open folder outline icon"></i>
+				Files
 			</router-link>
 
-			<div class="mobile-button"></div>
+			<!-- menu -->
+			<div class="mobile-button">
+				<i class="green link bars icon" v-on:click="collapseMenu"></i>
+				Menu
+			</div>
 
-			<!-- mobile create note button -->
-			<span v-if="loggedIn">
-				<span v-if="!disableNewNote" @click="createNote" class="mobile-button">
-					<i class="green plus icon"></i>
-				</span>
-				<span v-if="disableNewNote" class="mobile-button">
-					<i class="grey plus icon"></i>
-				</span>
-			</span>
 
 		</div>
 
diff --git a/client/src/components/LoginFormComponent.vue b/client/src/components/LoginFormComponent.vue
index 6b5f6df..b9b2c92 100644
--- a/client/src/components/LoginFormComponent.vue
+++ b/client/src/components/LoginFormComponent.vue
@@ -22,15 +22,20 @@
 		</div>
 		<div class="sixteen wide field">
 			<div class="ui fluid buttons">
-				<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
-					<i class="power icon"></i>
-					Login
-				</div>
-				<div class="or"></div>
+				
+
 				<div v-on:click="register()" class="ui button">
 					<i class="plug icon"></i>
 					Sign Up
 				</div>
+
+				<div class="or"></div>
+
+				<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
+					<i class="power icon"></i>
+					Login
+				</div>
+				
 			</div>
 		</div>
 		<div class="sixteen wide column">
@@ -45,6 +50,26 @@
 
 	<!-- Thin form display  -->
 	<div v-if="thin" class="ui small form">
+
+		<div v-if="!require2FA" class="field"><!-- hide this field if someone is logging in with 2FA -->
+			<div class="ui grid">
+				<div class="ui sixteen wide center aligned column">
+					<div v-on:click="register()" class="ui green button">
+						<i class="plug icon"></i>
+						Sign Up Now!
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="field"><!-- hide this field if someone is logging in with 2FA -->
+			<div class="ui grid">
+				<div class="ui sixteen wide center aligned column">
+					Or Login
+				</div>
+			</div>
+		</div>
+
 		<div class="equal width fields">
 			<div class="field">
 				<div class="ui input">
@@ -61,13 +86,6 @@
 					<input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token">
 				</div>
 			</div>
-			<!-- hide this field if someone is logging in with 2FA -->
-			<div class="field" v-if="!require2FA">
-				<div v-on:click="register()" class="ui fluid green button">
-					<i class="plug icon"></i>
-					Sign Up
-				</div>
-			</div>
 			<div class="field">
 				<div v-on:click="login()" class="ui fluid button">
 					<i class="power icon"></i>
@@ -143,7 +161,14 @@
 			register(){
 
 				if( this.username.length == 0 || this.password.length == 0 ){
-					this.$bus.$emit('notification', 'Unable to Sign Up - Username and Password Required')
+
+					if(this.$route.name == 'LoginPage'){
+						this.$bus.$emit('notification', 'Both a Username and Password are Required')
+						return
+					}
+
+					//Login section
+					this.$router.push('/login')
 					return
 				}
 
diff --git a/client/src/components/LogoComponent.vue b/client/src/components/LogoComponent.vue
index 86f302d..bbbb492 100644
--- a/client/src/components/LogoComponent.vue
+++ b/client/src/components/LogoComponent.vue
@@ -32,22 +32,22 @@
 	       class="darken-accent"
 	       id="path3813-4"
 	       d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z"
-	       :style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
+	       :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path4563"
 	       d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z"
-	       :style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
+	       :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path4563-6"
 	       d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z"
-	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
+	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path3813-4-2"
 	       d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z"
-	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
+	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
 	  </g>
 	</svg>
 </template>
@@ -56,13 +56,28 @@
 
 	export default {
 		name: 'LoadingIcon',
-		props:[ 'color' ],
+		props:[ 
+			'color', // hex value for setting colorr
+			'stroke' // enable or disable stroke
+		],
 		data(){ 
 			return {
 				displayColor: '#21BA45', //Default green color
+				strokeWidth: '0.5',
+				strokeColor: 'none',
 			}
+		},
+		beforeCreate(){
+
+			
 		},
 		created(){
+
+			if(this.stroke){
+				this.strokeWidth = 0.4
+				this.strokeColor = 'rgba(0,0,0,0.9)'
+			}
+			
 			//Set color if passed
 			if(this.color){
 				this.displayColor = this.color
@@ -79,4 +94,7 @@
 		filter: saturate(145%);
 		-webkit-filter: saturate(145%);
 	}
+	g > path {
+		filter: drop-shadow(1px 1px 1px black);
+	}
 </style>
\ No newline at end of file
diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue
index 7a4d4af..f748149 100644
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@@ -7,14 +7,19 @@
 	>
 
 		<!-- Giant Edit Note Menu  -->
-		<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
+		<div class="edit-menu glint" :class="{ 'slide-out-top':(sizeDown == true) }">
 
 			<!-- edit spacer is disabled, it is helpful if menu gets bigger. It adds a left margin, starting the icons at the edge of the note  -->
 			<div class="edit-spacer"></div>
 
 			<div class="menu-top-half">
-				<div class="edit-button" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
-					<i class="close icon"></i>
+
+				<div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
+					<i class="icons">
+						<i class="grey save outline icon"></i>
+						<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
+						<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
+					</i>
 				</div>
 
 				<div class="edit-divide"></div>
@@ -65,9 +70,10 @@
 
 			<div class="menu-bottom-half">
 
+				<!--
 				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/table`)" data-tooltip="Insert Table" data-position="bottom center">
 					<i class="border all icon"></i>
-				</div>
+				</div> -->
 				
 				<div class="edit-button" v-on:click="insertDivide()" data-tooltip="Insert Divide" data-position="bottom center">
 					<i class="grip lines icon"></i>
@@ -86,9 +92,9 @@
 				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
 					<i class="paint brush icon"></i>
 				</div>
-				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center">
+				<!-- <div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center">
 					<i class="tags icon"></i>
-				</div>
+				</div> -->
 				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="bottom center">
 					<i class="image icon"></i>
 				</div>
@@ -116,17 +122,13 @@
 					<i class="purple bolt icon"></i>
 				</div> -->
 
-				<div class="edit-button" v-on:click=" hash=0; save() " :data-tooltip="`Save\n(CTRL + S)`" data-position="bottom center">
-					<i class="icons">
-						<i class="grey save outline icon"></i>
-						<i v-if="statusText == 'saved'" class="green small bottom left corner check icon"></i>
-						<i v-if="statusText == 'saving'" class="small purple bottom left corner double angle up icon"></i>
-					</i>
-				</div>
-
 				<div class="edit-button" v-if="diffsApplied > 0" :data-tooltip="`Unsaved Changes`" data-position="bottom center">
 					+{{ diffsApplied }}
 				</div>
+
+				<div class="edit-button ui" v-on:click="closeButtonAction()" :data-tooltip="`Close\n(ESC)`" data-position="bottom center">
+					<i class="green close icon"></i>
+				</div>
 				
 			</div>
 		</div>
@@ -156,9 +158,27 @@
 					@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
 					rows="1"
 					:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }"
-					v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input">
+					v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input glint">
 				</textarea>
 
+				<div class="large-close-button glint" v-on:click="closeButtonAction()">
+					<i class="fitted green close icon"></i>
+				</div>
+
+				<!-- little tags on the side, only show on desktop -->
+				<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
+					<span class="add-mini-tag" v-if="noteTags.length == 0">
+						<i class="tags icon"></i>Add Tags
+					</span>
+					<span v-for="tag in allTags" class="active-mini-tag" v-if="isTagOnNote(tag.id)">
+						#{{ tag.text }}
+					</span>
+					<span class="active-mini-tag" v-if="noteTags.length > 0">
+						+
+					</span>
+					
+				</div>
+
 				<!-- Squire Box -->
 				<div 
 					id="squire-id" 
@@ -171,20 +191,7 @@
 
 		</div>
 
-		<!-- little tags on the side, only show on desktop -->
-		<div class="note-mini-tag-area" :class="{ 'size-down':sizeDown }" v-if="!$store.getters.getIsUserOnMobile">
-			<span v-for="tag in allTags" class="subtle-tag active-mini-tag" v-if="isTagOnNote(tag.id)" v-on:click="removeTag(tag.id)">
-				<i class="tag icon"></i>
-				{{ tag.text }}
-			</span>
-			<span v-else class="subtle-tag" v-on:click="addTag(tag.text)">
-				<i class="plus icon"></i>
-				{{ tag.text }}
-			</span>
-			<span class="subtle-tag" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)">
-				<i class="plus icon"></i><i class="green tags icon"></i>Add Tag
-			</span>
-		</div>
+		
 
 		<!-- color picker -->
 		<color-tooltip 
@@ -304,10 +311,7 @@
 
 		<!-- Show side shades if user is on desktop only -->
 		<div class="full-focus-shade shade1"
-			:class="{ 'slide-out-left':sizeDown }"
-			v-on:click="closeButtonAction()"></div>
-		<div class="full-focus-shade shade2"
-			:class="{ 'slide-out-right':sizeDown }"
+			:class="{ 'fade-me-out':sizeDown }"
 			v-on:click="closeButtonAction()"></div>
 
 	</div>
@@ -360,8 +364,8 @@
 				saveDebounce: null, //Prevent save from being called numerous times quickly
 				updated: 'Never',
 				editDebounce: null,
-				emitChangeDebounce: null,
-				keyPressesCounter: 0, //Determen keys pressed between saves
+				textChangedDebounce: null,
+				keyPressesCounter: 0, //Determine keys pressed between saves
 				pinned: 0,
 				archived: 0,
 				attachmentCount: 0,
@@ -455,7 +459,7 @@
 			//Show loading for a minimum time
 			setTimeout(()=>{
 				this.forceShowLoading = false
-			}, 500)
+			}, 100)
 
 			// document.addEventListener('visibilitychange', this.checkForUpdatedNote)
 
@@ -598,14 +602,16 @@
 					this.editor.focus()
 					this.editor.moveCursorToEnd()
 
-					this.fetchNoteTags() //Don't load tags on mobile
 				}
+
+				//Load tags on mobile
+				this.fetchNoteTags()
 				
 
 				//Set up websockets after squire is set up
 				setTimeout(() => {
 					this.setupWebSockets()
-				}, 50)
+				}, 500)
 
 				this.editor.addEventListener('cursor', e => {
 
@@ -740,7 +746,7 @@
 			loadNote(noteId){
 
 				//Generate a random loading message
-				let mod = ['Gently','Calmly','Lovingly','Quickly','','','','','','','','','','','','','']
+				let mod = ['Gently','Calmly','Lovingly','Quickly','Diligently','','','','','','','','','','','','','','']
 				let doing = ['Loading','Loading','Getting','Fetching','Grabbing','Sequencing','Organizing','Untangling','Processing','Refining','Extracting','Fusing','Pruning','Expanding','Enlarging','Transfiguring','Quantizing','Ingratiating','Lumping']
 				let thing = ['Note','Note','Note','Note','Data','Text','Document','Algorithm','Buffer','Client','Download','File','Frame','Graphics','Hardware','HTML','Interface','Logic','Mainframe','Memory','Media','Nodes','Network','Chaos']
 
@@ -877,11 +883,11 @@
 				clearTimeout(this.editDebounce)
 				this.editDebounce = setTimeout(() => {
 					this.save()
-				}, 30 * 1000)
+				}, 5 * 1000)
 
 				//Save after x keystrokes
 				this.keyPressesCounter = (this.keyPressesCounter + 1)
-				if(this.keyPressesCounter > 125){
+				if(this.keyPressesCounter > 25){
 					this.keyPressesCounter = 0
 					this.save()
 				}
@@ -1075,6 +1081,19 @@
 
 <style type="text/css" scoped>
 
+	.large-close-button	{
+		position: absolute;
+		min-height: 55px;
+		top: 0px;
+		right: 0px;
+		font-size: 23px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 20px 0 10px;
+		cursor: pointer;
+	}
+
 	.full-focus-shade {
 		position: fixed;
 		top: 0;
@@ -1084,13 +1103,7 @@
 		background-color: var(--menu-accent);
 		z-index: 999;
 		cursor: pointer;
-		opacity: 0.88;
-	}
-	.shade1 {
-		left: 50%;
-	}
-	.shade2 {
-		right: 50%;
+		opacity: 0.9;
 	}
 
 	/* squire styles */
@@ -1105,6 +1118,7 @@
 		overflow-x: hidden;
 		scrollbar-width: none;
 		scrollbar-color: transparent transparent;
+		overscroll-behavior: contain;
 	}
 	.note-wrapper {
 		background-color: var(--small_element_bg_color);
@@ -1114,56 +1128,24 @@
 	}
 
 		.note-mini-tag-area {
-			position: fixed;
-			width: 120px;
-			left: calc(15% - 125px);
-			top: 46px;
-			bottom: 0;
-			height: calc(100vh - 55px);
-			z-index: 1000;
-			overflow-y: scroll;
-			scrollbar-width: none;
-			scrollbar-color: transparent transparent;
-		}
-		.note-mini-tag-area {
-			scrollbar-width: auto;
-			scrollbar-color: inherit inherit;
-		}
-		.subtle-tag {
-			display: inline-block;
 			width: 100%;
-			padding: 1px 1px 1px 5px;
-			margin: 0 0 0;
-			border: 1px solid transparent;
-			border-right: none;
-			border-radius: 3px;
-			background-color: transparent;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			transition: color ease 0.3s, background ease 0.3s;
-			font-size: 11px;
+			padding: 5px 15px 0 15px;
 			cursor: pointer;
-			opacity: 0;
-			text-transform:capitalize;
+
+			margin-left: auto;
+			margin-right: auto;
+			max-width: 1100px;
 		}
-		.note-mini-tag-area:hover .subtle-tag {
-			opacity: 1;
-		}
-		.note-mini-tag-area:hover .active-mini-tag {
-			background-color: var(--main-accent);
-			color: white;
-		}
-		.note-mini-tag-area:hover .subtle-tag:not(.active-mini-tag) {
-			border-right: none;
-			color: var(--text_color);
-			background-color: var(--body_bg_color);
-			opacity: 1;
+		.add-mini-tag {
+			color: var(--border_color);
 		}
 		.active-mini-tag {
-			opacity: 0.7;
-			background-color: var(--small_element_bg_color);
-			color: var(--text_color)
+			display: inline-block;
+			opacity: 0.9;
+			color: var(--main-accent);
+		}
+		.active-mini-tag + .active-mini-tag {
+			margin-left: 15px;
 		}
 
 
@@ -1195,12 +1177,6 @@
 		.menu-top-half, .menu-bottom-half {
 			display: inline-block;
 		}
-/*		.edit-spacer {
-			width: calc(15% - 10px);
-			display: inline-block;
-			height: 10px;
-			opacity: 0;
-		}*/
 		.edit-button {
 			background-color: var(--small_element_bg_color);
 			color: var(--menu-text);
@@ -1241,9 +1217,10 @@
 
 	.stealth-input {
 		width: 100%;
-		padding: 10px 15px 5px;
+		padding: 15px;
 		background-color: var(--small_element_bg_color );
 		border: none;
+		border-bottom: 2px solid var(--main-accent);
 		font-size: 1.7em;
 		color: var(--text_color);
 		caret-color: var(--main-accent);
@@ -1384,16 +1361,16 @@
 			}
 		}
 
-		.slide-out-left {
-			animation: slide-out-left 0.5s ease;
+		.fade-me-out {
+			animation: fade-me-out 0.5s ease;
 		}
 
-		@keyframes slide-out-left {
+		@keyframes fade-me-out {
 			0% {
-				left: 85%;
+				opacity: 1;
 			}
 			100% {
-				left: 150%;
+				opacity: 0;
 			}
 		}
 
diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue
index f080081..a2fae45 100644
--- a/client/src/components/NoteTitleDisplayCard.vue
+++ b/client/src/components/NoteTitleDisplayCard.vue
@@ -20,6 +20,11 @@
 				<span v-if="note.title.length > 0" 
 					class="big-text"><p>{{ note.title }}</p></span>
 
+				<span class="tags" v-if="note.tags">
+						<span  v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
+						<br>
+					</span>
+
 				<!-- Sub text display -->
 				<span v-if="note.subtext.length > 0"
 					class="small-text"
@@ -68,11 +73,6 @@
 			<!-- Toolbar on the bottom  -->
 			<div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
 				<div class="icon-bar">
-					
-					<span class="tags" v-if="note.tags">
-						<span  v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">{{ tag.split(':')[0] }}</span>
-						<br>
-					</span>
 
 					<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
 						{{$helpers.timeAgo( note.updated )}}
@@ -476,7 +476,6 @@
 	.little-tag {
 		font-size: 0.7em;
 		padding: 5px 5px;
-		border: 1px solid var(--border_color);
 		margin: 0 3px 5px 0;
 		border-radius: 3px;
 		white-space: nowrap;
@@ -486,6 +485,8 @@
 		line-height: 0.8em;
 		text-overflow: ellipsis;
 		float: left;
+		color: var(--main-accent);
+		opacity: 0.8;
 	}
 	.tiny-thumb-box {
 		max-height: 70px;
diff --git a/client/src/components/SideSlideMenuComponent.vue b/client/src/components/SideSlideMenuComponent.vue
index b7d6728..3210e1d 100644
--- a/client/src/components/SideSlideMenuComponent.vue
+++ b/client/src/components/SideSlideMenuComponent.vue
@@ -27,7 +27,7 @@
 		right: 0;
 		bottom: 0;
 		color: red;
-		/*background-color: rgba(0,0,0,0.5);*/
+		background-color: rgba(0,0,0,0.5);
 		/*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/
 		z-index: 1019;
 		overflow: hidden;
@@ -88,15 +88,17 @@
 
 			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
 
+				<!-- close menu on bottom  -->
+				<div class="note-menu">
+					<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
+				</div>
+
 				<!-- content of the editor  -->
 				<div class="slide-content">
 					<slot></slot>
 				</div>
 
-				<!-- close menu on bottom  -->
-				<div class="note-menu">
-					<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
-				</div>
+				
 
 			</div>
 			
diff --git a/client/src/pages/HomePage.vue b/client/src/pages/HomePage.vue
index 62766bc..a5ab63a 100644
--- a/client/src/pages/HomePage.vue
+++ b/client/src/pages/HomePage.vue
@@ -11,7 +11,24 @@
 		-moz-animation: fadeorama 16s ease infinite;
 		animation: fadeorama 16s ease infinite;
 		height: 350px;
+
+		text-shadow: 1px 1px 2px black;
 	}
+	.shine {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: none;
+	}
+	.spotlight {
+		background: rgba(255,255,255,0);
+		background: radial-gradient(circle at bottom, var(--main-accent) 0%, rgba(255,255,255,0) 60%);
+		z-index: 200;
+	}
+
 	.logo-display {
 		width: 140px;
 		height: auto;
@@ -24,10 +41,14 @@
 		font-size: 4rem;
 		text-align: center;
 	}
+	div#app div.lightly-padded.home-main div.ui.centered.vertically.divided.stackable.grid div.row.hero.fadeBg div.sixteen.wide.middle.aligned.center.column h2.massive-text svg.logo-display path {
+		stroke: black !important;
+		stroke-width: 1px !important;
+	}
 	.blinking {
 		animation:blinkingText 1.5s linear infinite;
 	}
-	@keyframes blinkingText{
+	@keyframes blinkingText {
 		0%{		opacity: 0.9;	}
 		50%{	opacity: 0;	}
 		100%{	opacity: 0.9;	}
@@ -101,10 +122,11 @@
 				<!-- <div class="one wide large screen only column"></div> -->
 
 				<!-- desktop column - large screen only -->
-				<div class="sixteen wide middle aligned center aligned column">
+				<div class="sixteen wide middle aligned center aligned column" style="z-index: 500;">
 
 					<h2 class="massive-text">
-						<img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
+						<!-- <img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo"> -->
+						<logo class="logo-display" color="var(--main-accent)" stroke="true" />
 						<br>
 						Solid Scribe
 					</h2>
@@ -118,6 +140,10 @@
 <!-- 				<div class="eight wide middle aligned left aligned column">
 					<img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim">
 				</div> -->
+
+				<div v-for="i in jewelFacets" class="shine" :style="shineStyle(i)" v-bind:key="i"></div>
+
+				<div class="shine spotlight"></div>
 				
 			</div>
 
@@ -145,6 +171,7 @@
 			<!-- Go to notes button  -->
 			<div class="row" v-if="$parent.loggedIn">
 				<div class="sixteen wide middle algined center aligned column">
+					<h3>You are already logged in</h3>
 					<router-link  class="ui huge green labeled icon button" to="/notes">
 						<i class="external alternate icon"></i>Go to Notes
 					</router-link>
@@ -164,10 +191,30 @@
 				</div>
 			</div>
 
+			<!-- theme selector -->
+			<div class="ui white row">
+				<div class="sixteen wide middle aligned column">
+					<div class="ui container">
+						<h2>
+							Pick your theme
+						</h2>
+						<h3 v-if="$parent.loggedIn">Go to settings to change theme</h3>
+						<div 
+							v-for="color in themeColors" 
+							v-bind:key="color"
+							class="ui small basic button"
+							:style="`background: linear-gradient(0deg, ${color} 4%, rgba(0,0,0,0) 5%);`"
+							v-on:click="setAccentColor(color)">
+							<logo style="width: 20px; height: auto;" :color="color" />
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<!-- Overview -->
 			<div class="middle aligned centered row">
 				<div class="six wide column">
-					<h2>Powerful text editing and privacy</h2>
+					<h2 class="ui dividing header">Powerful text editing and privacy</h2>
 					<h3>Easily edit, share and organize thousands of notes.</h3>
 					<h3>Feel safe knowing no one can read your notes but you.</h3>
 					<!-- <h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3> -->
@@ -183,42 +230,42 @@
 				<!-- note features  -->
 				<div class="six wide column">
 
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>App Features</h1>
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>App Features</h1>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey sticky note icon"></i>
 								<i class="bottom left corner teal plus icon"></i> 
 							</i>
-							Create as many notes as you want
+							Create a million notes!
 							<div class="sub header">Create unlimited notes up to 5,000,000 characters long.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey tags icon"></i> 
 								<i class="bottom left corner purple plus icon"></i> 
 							</i>
 							Tag Notes
-							<div class="sub header">Easily add and edit tags on notes then search or sort by tag.</div>
+							<div class="sub header">Add and edit tags on notes then search or sort by tag.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
 								<i class="bottom left corner orange font icon"></i> 
 							</i>
 							Search Note Text
-							<div class="sub header">Easily search all notes, files, links and tags.</div>
+							<div class="sub header">Search all notes, files, links and tags.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
@@ -229,7 +276,7 @@
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey cloud moon icon"></i> 
@@ -243,8 +290,8 @@
 
 				<!-- editing features  -->
 				<div class="six wide column">
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Editing Features</h1>
-					<h2 class="ui dividing header">
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Editing Features</h1>
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey list icon"></i> 
@@ -254,7 +301,7 @@
 							<div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey file icon"></i> 
@@ -264,7 +311,7 @@
 							<div class="sub header">Bold, Underline, Title, Add Links, Add Tables, Color Text, Color Background and more.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey file icon"></i> 
@@ -274,7 +321,7 @@
 							<div class="sub header">Color the background of notes and add colored icons to make them stand out.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey images icon"></i> 
@@ -284,7 +331,7 @@
 							<div class="sub header">Upload images to notes, add search text to the images to find them later.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey users icon"></i> 
@@ -301,8 +348,8 @@
 			<div class="middle aligned centered row">
 				<!-- privacy features -->
 				<div class="six wide column">
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Privacy Features</h1>
-					<h2 class="ui dividing header">
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Privacy Features</h1>
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey lock icon"></i> 
@@ -312,17 +359,17 @@
 							<div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
 								<i class="bottom left corner orange font icon"></i> 
 							</i>
 							Note Search is Encrypted
-							<div class="sub header">Easily search the contents of all your notes without compromising security.</div>
+							<div class="sub header">Search the contents of all your notes without compromising security.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey share alternate icon"></i> 
@@ -332,7 +379,7 @@
 							<div class="sub header">Shared notes are still encrypted, only readable by you and the shared users.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey tv icon"></i> 
@@ -442,7 +489,10 @@
 
 			<div v-if="true" class="middle aligned centered row">
 				<div class="six wide column">
-					<h2>Solid Scribe was created by one passionate developer</h2>
+					<h3>
+						<a target="_blank" href="https://www.maxg.cc">Solid Scribe was created by Max Gialanella</a>
+					</h3>
+					<p><a target="_blank" href="https://www.maxg.cc">Check out my Resume</a></p>
 					<p>
 						I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
 					</p>
@@ -450,9 +500,10 @@
 						If you want to give it a shot, feel free to make an account. There are no ads. None of this data is shared or public. I don't make any money.
 					</p>
 					<p>
-						If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i>
+						If you see anything broken or want to see a feature implemented; I'm open to suggestions. <i class="thumbs up icon"></i>
 					</p>
-					<p>If you want to help me out, I would love a small Bitcoin donation.</p>
+					<p>Email me at <a href="mailto:maxgialanella@pm.me">Max.Gialanella@pm.me</a></p>
+					<p>If you want to help me out with hosting this application, I would love a small Bitcoin donation.</p>
 					<p>
 						<a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank">
 							<img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG">
@@ -466,7 +517,7 @@
 			</div>
 
 			<div class="center aligned sixteen wide column">
-				<router-link to="/terms"></i>Solid Scribe Terms of Use</router-link>
+				<router-link to="/terms">Solid Scribe Terms of Use</router-link>
 			</div>
 
 
@@ -479,11 +530,27 @@ export default {
 	name: 'WelcomePage',
 	components: {
 		'login-form':require('@/components/LoginFormComponent.vue').default,
+		'logo':require('@/components/LogoComponent.vue').default,
 	},
 	data(){
 		return {
 			height: null,
 			realInformation: false,
+			jewelFacets: 15,
+			themeColors: [
+				'#21BA45', //Green
+				'#b5cc18', //Lime
+				'#00b5ad', //Teal
+				'#2185d0', //Blue
+				'#7128b9', //Violet
+				'#a333c8', // "Purple"
+				'#e03997', //Pink
+				'#db2828', //Red
+				'#f2711c', //Orange
+				'#fbbd08', //Yellow
+				'#767676', //Grey
+				'#303030', //Black-almost
+			],
 		}
 	},
 	beforeCreate(){
@@ -497,6 +564,40 @@ export default {
 		
 	},
 	methods: {
+		shineStyle(i){
+
+			const farMax = 95 //85
+			const farMin = 83
+
+			const farOut =  (Math.floor(Math.random() * (farMax - farMin + 1)) + farMin)
+
+			// const rotation = 360/this.jewelFacets
+			const rotMax = 360/this.jewelFacets
+			const rotMin = 320/this.jewelFacets
+			const rotation =  (Math.floor(Math.random() * (rotMax - rotMin + 1)) + rotMin)
+
+			let style = `
+				background: linear-gradient( 
+					${(i+1)*(rotation)}deg, 
+					rgba(255,255,255,0) ${farOut}%, 
+					rgba(255,255,255,0.1) ${farOut+1}%,
+					rgba(255,255,255,0.0) ${farOut+10}%
+					)
+				;`
+
+			// Remove whitespace - Make it 1 line
+			return style.replace(/\s+/g, '')
+		},
+		setAccentColor(color){
+
+			let root = document.documentElement
+			root.style.setProperty('--main-accent', color)
+			localStorage.setItem('main-accent', color)
+
+			if(!color || color == '#21BA45'){
+				localStorage.removeItem('main-accent')
+			}
+		},
 		showRealInformation(){
 
 			
diff --git a/client/src/pages/NotesPage.vue b/client/src/pages/NotesPage.vue
index 8971cf1..a2d4d64 100644
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="page-container">
+	<div class="page-container" v-on:scroll="onScroll">
 		
 		<div class="ui grid" ref="content">
 
@@ -367,6 +367,9 @@
 			}
 		},
 		methods: {
+			onScroll(e){
+			console.log('Scroll')
+		},
 			toggleTitleView(){
 				this.titleView = !this.titleView
 			},
diff --git a/client/src/pages/SettingsPage.vue b/client/src/pages/SettingsPage.vue
index e628f16..fd7eeeb 100644
--- a/client/src/pages/SettingsPage.vue
+++ b/client/src/pages/SettingsPage.vue
@@ -49,7 +49,7 @@
 		<div class="ui segment">
 			<div class="ui stackable grid">
 				<div class="six wide column">
-					<p>1. Enter Password and get QR</p>
+					<div class="ui tiny dividing header">1. Enter Password and get QR</div>
 					<div class="ui fluid action input">
 						<input type="password" placeholder="Current Password" v-model="password">
 
@@ -62,12 +62,12 @@
 					</div>
 				</div>
 				<div class="four wide column">
-					<p>2. Scan QR Code</p>
+					<div class="ui tiny dividing header">2. Scan QR Code</div>
 					<p v-if="qrCode == ''">(QR Code will appear here)</p>
-					<img v-if="qrCode != ''" :src="qrCode" alt="QR Code">
+					<img v-if="qrCode != ''" :src="qrCode" class="ui image" alt="QR Code">
 				</div>
 				<div class="six wide column">
-					<p>3. Verify with code</p>
+					<div class="ui tiny dividing header">3. Verify with code</div>
 					<div class="ui fluid action input" v-if="qrCode != ''">
 						<input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()">
 						<div class="ui green button">
diff --git a/client/src/stores/mainStore.js b/client/src/stores/mainStore.js
index c6c4135..c52192f 100644
--- a/client/src/stores/mainStore.js
+++ b/client/src/stores/mainStore.js
@@ -41,7 +41,8 @@ export default new Vuex.Store({
 					'menu-text': '#5e6268',
 				},
 				'black':{
-					'body_bg_color': '#0f0f0f',//'#000',
+					'body_bg_color': 'linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(23,12,46,1) 100%)',
+					//'#0f0f0f',//'#000',
 					'small_element_bg_color': '#000',
 					'text_color': '#FFF',
 					'dark_border_color': '#555',//'#ACACAC', //Lighter color to accent elemnts user can interact with
diff --git a/client/vue.config.js b/client/vue.config.js
index d7d6862..6754a10 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -1,13 +1,18 @@
 module.exports = {
-  pwa: {
+	pwa: {
     name: 'SolidScribe',
     iconPaths: {
-		favicon32: null,
-		favicon16: null,
-		appleTouchIcon: null,
-		maskIcon: null,
-		msTileImage: null,
-	}
+			favicon32: null,
+			favicon16: null,
+			appleTouchIcon: null,
+			maskIcon: null,
+			msTileImage: null,
+		},
+	},
+	devServer: {
+	    disableHostCheck: true,
+	    proxy: 'http://localhost:8081',
+	    public: 'marvin.local',
+	},
 
-  }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 89bd8c0..c95acd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -466,7 +466,7 @@
     "denque": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
-      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
+      "integrity": "sha1-Z0T/dkHBSMP4ppwwflEjXB9KN88="
     },
     "depd": {
       "version": "1.1.2",
@@ -798,7 +798,7 @@
     "generate-function": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
-      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "integrity": "sha1-8GlhdpDBDIaOc7hGV0Z2T5fDR58=",
       "requires": {
         "is-property": "^1.0.2"
       }
@@ -1100,7 +1100,7 @@
     "long": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+      "integrity": "sha1-mntxz7fTYaGU6lVSQckvdGjVvyg="
     },
     "lru-cache": {
       "version": "4.1.5",
@@ -1223,7 +1223,7 @@
     "named-placeholders": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.2.tgz",
-      "integrity": "sha512-wiFWqxoLL3PGVReSZpjLVxyJ1bRqe+KKJVbr4hGs1KWfTZTQyezHFBbuKj9hsizHyGV2ne7EMjHdxEGAybD5SA==",
+      "integrity": "sha1-zrH7/1C2szSStc8hTM9eOc7z0Og=",
       "requires": {
         "lru-cache": "^4.1.3"
       }
diff --git a/server/index.js b/server/index.js
index 8d99b34..677fa1a 100644
--- a/server/index.js
+++ b/server/index.js
@@ -212,7 +212,7 @@ io.on('connection', function(socket){
 
 
 http.listen(3001, function(){
-	// console.log('socket.io liseting on port 3001');
+	console.log('socket.io liseting on port 3001');
 });
 
 //Enable json body parsing in requests. Allows me to post data in ajax calls
@@ -299,7 +299,7 @@ app.use('/api/quick-note', quickNote)
 
 //Output running status
 app.listen(port, () => { 
-	// console.log(`Listening on port ${port}!`)
+	console.log(`Listening on port ${port}!`)
 })
 
 //
diff --git a/server/models/User.js b/server/models/User.js
index f723f97..f82edd0 100644
--- a/server/models/User.js
+++ b/server/models/User.js
@@ -9,7 +9,7 @@ const speakeasy = require('speakeasy')
 
 let User = module.exports = {}
 
-const version = '3.2.6'
+const version = '3.3.1'
 
 //Login a user, if that user does not exist create them
 //Issues login token