Clearning up UI for itemDetails and header.

src/TestHeader.js

@@ -4,16 +4,17 @@ function TestHeader() {
     return (
         <header>
             <div className="headerWrapper">
-            <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
-               <div className="navigation"><ul>
+                <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
+                <div className="navigation"><ul>
                     <li className="headerMenuItem"><a href=".">Builds</a></li>
                     <li className="headerMenuItem"><a href=".">Guides</a></li>
                     <li className="headerMenuItem"><a href=".">Blog</a></li>
-                    <li className="headerMenuItem"><a href=".">About</a></li>
-                </ul></div>
+                    <li className="headerMenuItem"><a href=".">About</a></li></ul>
+                    <section className="miniNav"><a href="."><span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
+                </div>
                 <div className="rightNav">
                     <section className="loginNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></section>
-                    <section className="miniNav"><a href="."><span>&#xb7;&#xb7;&#xb7;</span></a></section>
+                    <section className="miniNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /></a></section>
                 </div>
             </div>
         </header>

src/TestPanel.js

@@ -532,6 +532,8 @@ useEffect(()=>{
 <span className="aug">Augment</span>
 <div className="itemDetailsAugmentWrapper">
 
+<div><span>Precision III</span></div>
+<div></div>
 <div></div>
 <div></div>
 

src/style.css

@@ -91,6 +91,8 @@ header {
 	text-align: left;
 	margin: 0;
 	padding: 0 10px;
+	line-height: 50px;
+	height: 50px
 }
 .headerWrapper {
 	grid-area: 1 / span 3;
@@ -100,12 +102,12 @@ header {
 }
 header a {
 	display: block;
+	height: 50px
 }
 .logo {
 	font-family: "ngs2";
 	margin-right: auto;
 	font-size:24px;
-	line-height: 47px;
 	white-space: nowrap;
 }
 .logo span{
@@ -120,9 +122,6 @@ header a {
 }
 .navigation {
 	text-align: left;
-	font-size: 17px;
-	font-family: "ngs2";
-	line-height: 50px;
 }
 .navigation a {
 	padding: 0 15px;
@@ -132,13 +131,14 @@ header a {
 	border-color: rgba(255,255,255,0.13);
 	border-style: solid;
 	border-left-width: 1px;
+	font-size: 17px;
+	font-family: "ngs2";
 }
 .navigation li:last-child {
 	border-right-width: 1px;
 }
 .rightNav {
 	text-align: right;
-	line-height: 43px;
 }
 .rightNav a {
 	padding: 0 15px;
@@ -150,20 +150,14 @@ header a {
 }
 .dotMenu {
 	display: inline-block;
-	font-family: "Segoe UI Symbol";
 	font-size: 24px;
+	font-weight: 900;
+	letter-spacing: 2px;
 }
 .miniNav {
 	display: none;
-	grid-area: 2 / span 2;
-	line-height: 45px;
 	text-align: right;
 }
-.miniNav span {
-	display: inline-block;
-	font-family: "Segoe UI Symbol";
-	font-size: 24px;
-}
 @media screen and (max-width:860px) {
 	.navigation > ul, .loginNav {
 		display: none;
@@ -173,7 +167,6 @@ header a {
 	}
 }
 .box {
-	/*color: #97e2fc;*/
 	color:white;
 	background-clip: padding-box;
 	background-color: rgba(24, 36, 48, 0.66);
@@ -1535,7 +1528,7 @@ p.adminNav hr {
 .itemDetailsAugmentWrapper {
 	margin: 10px 0 0 0;
 	display: grid;
-	grid-template-columns: repeat(auto-fit,minmax(150px,200px));
+	grid-template-columns: repeat(auto-fit,minmax(100px,200px));
 	gap: 10px 30px;
 }
 .itemDetailsAugmentWrapper > div {
@@ -1543,6 +1536,13 @@ p.adminNav hr {
 	padding: 2px 10px;
 	border-radius: 0 10px 0 0;
 	height: 20px;
+	white-space: nowrap;
+	text-overflow:ellipsis;
+}
+.itemDetailsAugmentWrapper > div span:before {
+	content: "\00B7";
+	margin-right: 10px;
+	font-weight: 900;
 }
 .itemAbility {
 	grid-area: ability;