CSS revision, changing layouts here and there

src/TestPanel.js

@@ -189,6 +189,7 @@ const [statPage,setStatPage] = useState(1)
 
 const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false)
 const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false)
+const [treePage,setTreePage] = useState(1)
 const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false)
 const [armorSelectWindowOpen,setArmorSelectWindowOpen] = useState(false)
 
@@ -301,10 +302,10 @@ useEffect(()=>{
       <div className="boxTitleBar">
       <h1>Current Effects</h1></div>
       <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
-      <h3>Effect Name</h3>
-      <ul className="infoBuffs">
-        {
-          effectPage===1?<><li>Food Boost Effect
+      {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
+      
+        
+          
             <ul>
               <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
               <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@@ -320,9 +321,9 @@ useEffect(()=>{
             <ul>
               <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
             </ul>
-          </li></>:<></>
+          </li></ul></>:<></>
+        
       }
-      </ul>
       </div>
       </div>
       <div className="containerB">
@@ -562,16 +563,17 @@ AUGMENT
 
 
 
-<Modal isOpen={classSkillTreeWindowOpen} onRequestClose={()=>{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
-
+      <Modal isOpen={classSkillTreeWindowOpen} onRequestClose={() => { setClassSkillTreeWindowOpen(false) }} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
         <div className="box skillTreeBox">
           <div className="boxTitleBar">
-            <h1>Ranger01</h1>
+            <h1>Class Skill Tree</h1>
             <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
           </div>
+          <PageControl pages={2} pageNames={[<><img alt="" src={DisplayIcon("/icons/class/ra.png")} /> Ranger</>, <><img alt="" src={DisplayIcon("/icons/class/fo.png")} /> Force</>, "Launcher", "Rod", "Talis"]} currentPage={treePage} setCurrentPage={setTreePage} />
+          {treePage === 1 ? <>
             <div className="skillTreeContainer customScrollbar">
-            <div style={{position:"relative"}}>
-              {<SkillTree style={{position:"absolute"}} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
+              <div style={{ position: "relative" }}>
+                {<SkillTree style={{ position: "absolute" }} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
                   gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY}
                   skillLines={skillTreeData} halflineheight={halflineheight}
                 />}
@@ -590,12 +592,15 @@ AUGMENT
                   <div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
                 </div>
               </div>
+            </div></> : <></>}
+            <div className="skillPoints">
+              <div>Your Skill Points<span>6</span></div>
+              <div>SP<span></span>0</div>
             </div>
-          <div className="skillPoints">Your Skill Points&emsp;&emsp;6&emsp;&emsp;&emsp;SP&emsp;&emsp;&emsp;&emsp;0</div>
             <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
-        </div>
           
-</Modal>
+        </div>
+      </Modal>
 
 <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
   pageNames={["All","Rifle","Launcher","Rod","Talis"]}

src/style.css

@@ -141,7 +141,6 @@ em {
 	justify-content: center;
 	gap: 10px;
 	margin: 0 10px;
-	max-width: calc(450 * 3);
 }
 .containerA{
 }
@@ -778,7 +777,7 @@ li.treeListSub:after {
 	text-align: center;
 	height: 148px;
 	position: relative;
-	margin: 0 10px 48px 0;
+	margin: 0 10px 96px 0;
 }
 .skillTreeGrid div:hover .skillButtons {
 	visibility: visible;
@@ -857,6 +856,18 @@ div.skillMaxed .skillAllocated {
 	padding: 16px 0 10px 0;
 	color: white;
 	font-size: 14pt;
+	display: grid;
+	grid-template-columns: repeat(auto-fit,292px);
+	justify-content: center;
+	gap: 10px;
+}
+.skillPoints div:first-child {
+	text-align: center;
+}
+.skillPoints div span {
+	display: inline-block;
+	width: calc(292px / 2);
+	text-align: center;
 }
 .skillConfirm {
 	justify-content: center;