Created a uniform menu for notes that works on mobile

Added list sorting
Added shared notes
Fixed some little bugs here and there

client/src/assets/semantic-helper.css

@@ -21,6 +21,14 @@
 	--text_color: #3d3d3d;
 	--outline_color: rgba(34,36,38,.15);
 	--border_color: rgba(34,36,38,.20);
+
+	/*Global purple menu styles */
+	--menu-border: #534c68;
+	--menu-background: #221f2b;
+}
+
+html {
+	scrollbar-width: none;
 }
 
 div.ui.basic.segment.no-fluf-segment {
@@ -28,7 +36,7 @@ div.ui.basic.segment.no-fluf-segment {
 	}
 
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
-body{
+body {
 	color: var(--text_color);
 	background-color: var(--background_color);
 	font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@@ -101,6 +109,77 @@ a:hover {
 	text-decoration: underline;
 }
 
+/*//
+//	Purple Global Menu
+//*/
+.note-menu {
+	width: 100%;
+	/*display: block;*/
+	display: inline-table;
+	background: var(--menu-background);
+	color: white;
+	/*overflow: hidden;*/
+	border: 1px solid var(--menu-border);
+	/*height: 50px;*/
+}
+.note-menu > .nm-button {
+	padding: 10px 15px;
+	cursor: pointer;
+	text-align: center;
+	box-sizing: border-box;
+	font-size: 1.2em;
+	vertical-align: middle;
+	/*height: 40px;*/
+	display: table-cell;
+	position: relative;
+}
+.nm-button i.icon {
+	margin: 0;
+}
+.nm-button span {
+	font-size: 0.9em;
+}
+.nm-button.right {
+	float: right;
+	border-left: 1px solid var(--menu-border);
+}
+.nm-button:hover {
+	background-color: #534c68;
+	color: white;
+}
+.nm-button + .nm-button {
+	border-left: 1px solid #534c68;
+}
+/*.shrink-icons-on-mobile.note-menu span {
+	display: none;
+}*/
+
+/* Shrink button text for mobile */
+@media only screen and (max-width: 740px) {
+	.note-menu .nm-button span {
+		font-size: 0.7em;
+		line-height: 0.4em;
+		margin-left: 0;
+	}
+	.nm-button i.icon {
+		width: 100%;
+	}
+	/*prevents buttons from being jammed into corners of round phones*/
+	.shrink-icons-on-mobile.note-menu {
+		padding: 0 20px;
+	}
+	.shrink-icons-on-mobile .nm-button {
+		padding: 2px 3px;
+	}
+	.shrink-icons-on-mobile .nm-button i.icon {
+		font-size: 0.7em;
+	}
+}
+
+/*//
+// Purple Global Menu 
+//*/
+
 .note-status-indicator {
 	position: absolute;
 	width: 100px;
@@ -117,16 +196,17 @@ a:hover {
 /* squire text styles */
 	.squire-box {
 		border: none;
-		height: calc(100% - 60px);
+		height: calc(100% - 69px);
 		box-sizing: border-box;
-		padding: 10px 15px 40px;
+		padding: 10px 15px 10px;
 		background: transparent;
 		overflow-x: scroll; 
 		/*color: var(--text_color);*/
 		font-size: 1.2em;
 		line-height: 1.5em;
 		word-wrap: break-word;
-		border-bottom: 1px solid #ccc;
+		/*border-bottom: 1px solid #ccc;*/
+		scrollbar-width: none;
 	}
 	/*Makes the first line real big */
 	.squire-box p:first-child {