update top bar

src/layout/MainLayout/Header/index.js

@@ -104,94 +104,94 @@ function Header(props) {
     isGLDLoggedIn() ?
       <div id="adminContent">
         <li>
-          <Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 1 }} >Dashboard</Typography></Link>
+          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >Dashboard</Typography></Link>
         </li>
         <li>
-          <Link className="application" to='/application/search'><Typography variant={"headerTitle1"} sx={{ ml: 1 }}>Application</Typography></Link>
+          <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }}variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
         </li>
         <li>
-          <Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Proof</Typography></Link>
+          <Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Proof</Typography></Link>
         </li>
         <li>
-          <Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}} /></Link>
           <ul className='dropdown'>
             <li>
-              <Link className="payment" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment Record</Typography></Link>            
+              <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment Record</Typography></Link>
             </li>
             <li>
-              <Link className="downloadXML" onClick={getXML()} ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Download XML</Typography></Link>
+              <Link className="downloadXML" onClick={getXML()} ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Download XML</Typography></Link>
             </li>
             <li>
-              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Create DN</Typography></Link>
+              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Create DN</Typography></Link>
             </li>
             <li>
-              <Link className="demandNote" to='/paymentPage/demandNote' ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Demand Note</Typography></Link>
+              <Link className="demandNote" to='/paymentPage/demandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Demand Note</Typography></Link>
             </li>
           </ul>
         </li>
         <li>
-          <Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon /></Link>
+          <Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/></Link>
           <ul className='dropdown'>
             <li>
-              <Link className="userSearchview" to='/userSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (GLD)</Typography></Link>
+              <Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>Users (GLD)</Typography></Link>
             </li>
             <li>
-              <Link className="indUser" to='/indUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Individual)</Typography></Link>
+              <Link className="indUser" to='/indUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>Users (Individual)</Typography></Link>
             </li>
             <li>
-              <Link className="orgUser" to='/orgUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Users (Organisation)</Typography></Link>
+              <Link className="orgUser" to='/orgUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Users (Organisation)</Typography></Link>
             </li>
             <li>
-              <Link className="org" to='/org'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Organisation</Typography></Link>
+              <Link className="org" to='/org'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1 }}>Organisation</Typography></Link>
             </li>
             <li>
-              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>User Group</Typography></Link>
+              <Link className="usergroupSearchview" to='/usergroupSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2,mt: 1, mb: 1}}>User Group</Typography></Link>
             </li>
 
           </ul>
         </li>
         <li>
-          <Link className="emailTemplate" to='/emailTemplate'><Typography variant={"headerTitle1"} sx={{ ml: 0 }}>Email Template</Typography></Link>
+          <Link className="emailTemplate" to='/emailTemplate'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 0 }}>Email Template</Typography></Link>
         </li>
         {/* <li>
-          <Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Logout</Typography></Link>
+          <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Logout</Typography></Link>
         </li> */}
       </div>
       :
       <div id="individualUserContent">
         <li>
-          <Link className="dashboard" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>主頁</Typography></Link>
+          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>主頁</Typography></Link>
         </li>
         <li>
-          <Link className="myDocumet" to='/publicNotice'><Typography variant={"headerTitle1"} sx={{ ml: 0.5 }}>我的公共啟事</Typography></Link>
+          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 0.5 }}>我的公共啟事</Typography></Link>
         </li>
         <li>
-          <Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link>
+          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link>
         </li>
         <li>
           {isPrimaryLoggedIn() ?
             <>
-              <Link className="paymentRecord"><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
+              <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
               <ul className='dropdown'>
                 <li>
-                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
+                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
                 </li>
                 <li>
-                  <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>繳款通知記錄</Typography></Link>
+                  <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>繳款通知記錄</Typography></Link>
                 </li>
               </ul>
             </>
             :
-            <Link className="manageOrgUser" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
+            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
           }
         </li>
         <li>
-          <Link className="userSetting" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon /></Link>
+          <Link className="userSetting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/></Link>
           {isPrimaryLoggedIn() ?
             <ul className='dropdown'>
 
               <li>
-                <Link className="manageOrgUser" to='setting/manageUser'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>公司/機構用戶記錄</Typography></Link>
+                <Link className="manageOrgUser" to='setting/manageUser'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>公司/機構用戶記錄</Typography></Link>
               </li>
             </ul>
             :
@@ -199,7 +199,7 @@ function Header(props) {
           }
         </li>
         {/* <li>
-          <Link className="logout" onClick={handleLogout}><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登出</Typography></Link>
+          <Link className="logout" onClick={handleLogout}><Typography variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>登出</Typography></Link>
         </li> */}
       </div>
   );
@@ -207,10 +207,10 @@ function Header(props) {
   const logoutContent = (
     <div>
       <li>
-        <Link className="login" to='/login'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>登入</Typography></Link>
+        <Link className="login" to='/login'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>登入</Typography></Link>
       </li>
       <li>
-        <Link className="register" to='/register'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>申請</Typography></Link>
+        <Link className="register" to='/register'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>申請</Typography></Link>
       </li>
     </div>
   );

src/themes/typography.js

@@ -12,6 +12,11 @@ const Typography = (fontFamily) => ({
     fontSize: '1.175rem',
     lineHeight: 1.4
   },
+  pnspsHeaderTitle: {
+    fontSize: '1.15rem',
+    fontWeight: 600,
+    lineHeight: 1.5
+  },
   h1: {
     fontWeight: 600,
     fontSize: '2.5rem',