suuggested style changes

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,5 +1,5 @@
-@import './client/homebrew/navbar/navbar.less';
-
+@import '@sharedStyles/core.less';
+@navbarHeight: 29px;
 @viewerToolsHeight : 32px;
 
 .popups {

client/homebrew/navbar/navbar.jsx

@@ -37,11 +37,16 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 		}
 
 		return (
-			<Dropdown className='navItem' groupName={'File'} customTrigger={<>File</>} icon={null} key={'file'}>
-				<NewBrewNavItem />
-				<Dropdown className='navItem recent' groupName={'Recent Brews'} icon={'fas fa-history'} key={'recent'}>
-					<RecentNavItem brew={brew} pageName={pageName} />
-				</Dropdown>
+			<Dropdown groupName={'File'} customTrigger={<>File</>} icon={null} key={'file'}>
+				<li className="nav-section">
+					<Dropdown className='new' groupName={'Create new brews'} icon={'fas fa-plus-square'} key={'new'}>
+						<NewBrewNavItem />
+					</Dropdown>
+					<Dropdown className='recent' groupName={'Recent Brews'} icon={'fas fa-history'} key={'recent'}>
+						<RecentNavItem brew={brew} pageName={pageName} />
+					</Dropdown>
+				</li>
+				
 				<ShareNavItem brew={brew} disabled={!brew?.shareId} currentPage={currentPage} pageName={pageName} />
 				<li className='nav-section'>
 					<Nav.item icon={'fas fa-clone'} href={`/new/${brew?.shareId}`} disabled={!brew?.shareId}>
@@ -61,7 +66,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 
 	const renderEdit = ()=>{
 		return (
-			<Dropdown className='navItem' groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
+			<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
 				<li className='nav-section'>
 					<Nav.item icon={'fas fa-undo'} onClick={()=>editor?.undo()} kbd={`${mod} + z`} disabled={!editor}>
 						Undo
@@ -85,7 +90,7 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 	};
 
 	const renderHelp = ()=>{
-		return <Dropdown className='navItem' groupName={'Help'} customTrigger={<>Help</>} icon={null} key={'help'}>
+		return <Dropdown groupName={'Help'} customTrigger={<>Help</>} icon={null} key={'help'}>
 			<li className="nav-section">
 				<Nav.item icon='fab fa-discord' href='https://discord.com/invite/by3deKx' newTab={true} rel='noopener noreferrer'>Our Discord Server</Nav.item>
 				<Nav.item icon='fab fa-reddit' href='https://www.reddit.com/r/homebrewery' newTab={true} rel='noopener noreferrer'>Our Subreddit</Nav.item>
@@ -112,14 +117,14 @@ const Navbar = ({ children, brew, pageName, editor, title, currentPage, props })
 	return (
 		<nav>
 			<ul>
-				<li className='menu-wrapper navItem'>
-					<a href='/'>Home</a>
+				<li className='menu-wrapper'>
+					<a className=' navItem' href='/'>Home</a>
 				</li>
 				{renderFile()}
 				{renderEdit()}
 				{renderHelp()}
-				<li className="menu-wrapper navItem">
-					<a  href='/vault'>Vault</a>
+				<li className="menu-wrapper">
+					<a className='navItem' href='/vault'>Vault</a>
 				</li>
 				{navSlots.menu}
 			</ul>

client/homebrew/navbar/navbar.less

@@ -12,15 +12,16 @@
 	height: @navbarHeight;
 	font-size: 15px;
 	user-select:none;
+	accent-color: white;
 
-	.navItem {
+	.navItem, .menu-wrapper > .menu-item {
 		display: flex;
 		align-items: center;
 		justify-content: start;
+		gap:5px;
 		height: 100%;
 		padding: 5px;
 		cursor: pointer;
-		max-width: 220px;
 		text-wrap: pretty;
 
 		&:has(> button, > a) {
@@ -153,16 +154,7 @@
 			}
 		}
 		&.save {
-			width: 130px;
-			padding-left:30px;
-			display:grid;
-			place-items: stretch;
-			align-items: stretch;
-
-			i {
-				place-self:center;
-				left:10px;
-			}
+			padding-left:10px;
 			
 			&.neverSaved {
 				background-color: @orange;
@@ -194,24 +186,16 @@
 		&:not(.header):has(:popover-open) {
 			background: var(--activeTriggerColor);
 		}
-		&:has(> kbd) {
-			display: flex;
-			gap: 5px;
-			justify-content: space-between;
-		}
-
-		&:has( >i ){
-			padding-left: 25px;
-			position:relative;
-		}
 
 		i {
-			position:absolute;
-			left:5px;
+			width:20px;
+			display:grid;
+			place-content: center;
 
 			&.caret {
 				left:unset;
 				right:5px;
+				margin-left: auto;
 			}
 			&.fa-times {
 				position:relative;
@@ -294,7 +278,10 @@
 		
 		> .menu-wrapper {
 			height: 100%;
-			text-wrap: nowrap;
+			
+			>.navItem {
+				white-space: nowrap;
+			}
 
 			&:first-child > :is(button, a) {
 				padding-left: 15px;
@@ -309,13 +296,18 @@
 			font-size: 13px;
 			text-transform: capitalize;
 			min-width: 130px;
-			border: 1px solid #666;
-			border-top:1px solid currentColor;
+			border: 1px solid currentColor;
 
-			.navItem {
+
+			.menu-wrapper {
 				min-height: 2.2em;
-				padding-left: 25px;
-				
+			}
+			.navItem, .menu-wrapper > .menu-item {
+				min-height: 2.2em;
+				display:flex;
+				justify-content: flex-start;
+				align-items: center;
+
 				&.save {
 					width: 100%;
 				}
@@ -323,12 +315,10 @@
 				&.header {
 					padding-left:5px;
 					text-align: center;
+					background:#00ff0037;
 				}
 			}
 
-			>.navItem:last-child, .nav-section:last-child .navItem:last-child {
-				padding-bottom: 10px;
-			}
 			.nav-section:has(+ .header) {
 				padding-bottom:5px;
 			}
@@ -353,9 +343,7 @@
 		&:disabled {
 			color: #777;
 		}
-		display: grid;
 		cursor: pointer;
-		place-items: stretch;
 		height: 100%;
 		width: 100%;
 		padding: 5px 10px;
@@ -383,5 +371,6 @@
 		background: #222;
 		padding: 2px 5px;
 		border-radius: 5px;
+		margin-left:auto;
 	}
 }

client/homebrew/navbar/share.navitem.jsx

@@ -24,7 +24,7 @@ const getRedditLink = (brew)=>{
 
 export default ({ brew, disabled, currentPage, pageName })=>{
 	return (
-		<div className='nav-section'>
+		<li className='nav-section'>
 			<Nav.item icon='fas fa-code' href={`/source/${getShareId(brew)}`} disabled={disabled}>
 				View Raw Text
 			</Nav.item>
@@ -45,6 +45,6 @@ export default ({ brew, disabled, currentPage, pageName })=>{
 			<Nav.item icon={'fab fa-reddit-alien'} href={!disabled && getRedditLink(brew)} newTab rel='noopener noreferrer' disabled={disabled || pageName === 'sharePage'}>
 				post to reddit
 			</Nav.item>
-		</div>
+		</li>
 	);
 };

client/homebrew/pages/basePages/editorPage/editorPage.jsx

@@ -28,6 +28,8 @@ const SAVEKEY_PREFIX = 'HB_editor_defaultSave_';
 const SAVE_TIMEOUT                  = 10000;  //Autosave 10 seconds after last change
 const UNSAVED_WARNING_TIMEOUT       = 900000; //Warn user afer 15 minutes of unsaved changes
 const UNSAVED_WARNING_POPUP_TIMEOUT = 4000;   //Show the warning for 4 seconds
+const isMac = navigator.platform.toUpperCase().includes('MAC');
+const mod = isMac ? '⌘' : 'Ctrl';
 
 const EditorPage = (props)=>{
 	const {
@@ -377,9 +379,8 @@ const EditorPage = (props)=>{
 			<Navbar brew={currentBrew} editor={editorRef.current} pageName={pageName} title={pageTitle} account={global.account} currentPage={currentBrewRendererPageNum}>
 				<Navbar.File>
 					<Nav.item
-						className='save'
 						onClick={()=>trySave(true, true, saveGoogle)}
-						icon='fas fa-save'>
+						icon='fas fa-save' kbd={`${mod} + S`}>
 							save now
 					</Nav.item>
 					{(pageName == 'editPage') && renderAutoSaveButton()}