#944: Fix header bar alignment

unitaryfund · Feb 4, 2025 · 8216e95 · 8216e95
1 parent bfe1545
commit 8216e95
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/src/App.css b/src/App.css
@@ -81,6 +81,8 @@ textarea {
 
 .metriq-navbar-right {
   margin-top: 16px;
+  margin-left: auto; 
+  margin-right: 0;
 }
 
 .metriq-header {
@@ -126,10 +128,6 @@ textarea {
   /* justify-content: center;*/
 }
 
-.metriq-navbar-spacer {
-  width: 16px;
-}
-
 .metriq-navbar-social-icon {
   margin-top: 2px;
 }

diff --git a/src/components/AnonNavRight.js b/src/components/AnonNavRight.js
@@ -1,13 +1,17 @@
 import React from 'react'
 import { Button, Nav } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
+import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 import MainSearchBar from './MainSearchBar'
 
 const AnonNavRight = () =>
   <Nav className='ml-auto metriq-navbar metriq-navbar-right'>
+    <Nav.Link href='https://twitter.com/MetriqInfo' eventKey='8'> <FaTwitter color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
+      <Nav.Link href='http://discord.unitary.fund' eventKey='9'> <FaDiscord color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
+      <Nav.Link href='https://github.com/unitaryfund/metriq-app' eventKey='10'> <FaGithub color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
     <MainSearchBar />
-    <Nav.Link as={Link} to='/Login' eventKey='13'><Button variant='outline-light' className='metriq-navbar-button'>Log In</Button></Nav.Link>
-    <Nav.Link as={Link} to='/Login/AddSubmission' eventKey='14'><Button variant='primary' className='metriq-navbar-button submit-button'>Submit</Button></Nav.Link>
+    <Nav.Link as={Link} to='/Login' eventKey='11'><Button variant='outline-light' className='metriq-navbar-button'>Log In</Button></Nav.Link>
+    <Nav.Link as={Link} to='/Login/AddSubmission' eventKey='12'><Button variant='primary' className='metriq-navbar-button submit-button'>Submit</Button></Nav.Link>
   </Nav>
 
 export default AnonNavRight
diff --git a/src/components/AuthNavRight.js b/src/components/AuthNavRight.js
@@ -4,6 +4,7 @@ import axios from 'axios'
 import config from './../config'
 import ErrorHandler from './ErrorHandler'
 import { Link } from 'react-router-dom'
+import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 import MainSearchBar from './MainSearchBar'
 
 const handleOnClick = () => {
@@ -16,17 +17,20 @@ const handleOnClick = () => {
 
 const AuthNavRight = () =>
   <Nav className='ml-auto metriq-navbar metriq-navbar-right'>
+    <Nav.Link href='https://twitter.com/MetriqInfo' eventKey='8'> <FaTwitter color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
+      <Nav.Link href='http://discord.unitary.fund' eventKey='9'> <FaDiscord color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
+      <Nav.Link href='https://github.com/unitaryfund/metriq-app' eventKey='10'> <FaGithub color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
     <MainSearchBar />
     <NavDropdown title='Account' active='true' className='metriq-navbar-text' alignRight>
-      <NavDropdown.Item as={Link} to='/Profile' eventKey='15'><p className='font-weight-bold'>Settings</p></NavDropdown.Item>
-      <NavDropdown.Item as={Link} to='/AddSubmission' eventKey='16'><p className='font-weight-bold'>Add Submission</p></NavDropdown.Item>
-      <NavDropdown.Item as={Link} to='/MySubmissions' eventKey='17'><p className='font-weight-bold'>My Submissions</p></NavDropdown.Item>
-      <NavDropdown.Item as={Link} to='/Token' eventKey='18'><p className='font-weight-bold'>API Token</p></NavDropdown.Item>
-      <NavDropdown.Item as={Link} to='/Password' eventKey='19'><p className='font-weight-bold'>Change password</p></NavDropdown.Item>
+      <NavDropdown.Item as={Link} to='/Profile' eventKey='13'><p className='font-weight-bold'>Settings</p></NavDropdown.Item>
+      <NavDropdown.Item as={Link} to='/AddSubmission' eventKey='14'><p className='font-weight-bold'>Add Submission</p></NavDropdown.Item>
+      <NavDropdown.Item as={Link} to='/MySubmissions' eventKey='15'><p className='font-weight-bold'>My Submissions</p></NavDropdown.Item>
+      <NavDropdown.Item as={Link} to='/Token' eventKey='16'><p className='font-weight-bold'>API Token</p></NavDropdown.Item>
+      <NavDropdown.Item as={Link} to='/Password' eventKey='17'><p className='font-weight-bold'>Change password</p></NavDropdown.Item>
       <NavDropdown.Divider />
-      <NavDropdown.Item onClick={handleOnClick} eventKey='20'><p className='font-weight-bold'>Logout</p></NavDropdown.Item>
+      <NavDropdown.Item onClick={handleOnClick} eventKey='18'><p className='font-weight-bold'>Logout</p></NavDropdown.Item>
     </NavDropdown>
-    <Nav.Link as={Link} to='/AddSubmission' eventKey='14'><Button variant='primary' className='metriq-navbar-button submit-button'>Submit</Button></Nav.Link>
+    <Nav.Link as={Link} to='/AddSubmission' eventKey='19'><Button variant='primary' className='metriq-navbar-button submit-button'>Submit</Button></Nav.Link>
   </Nav>
 
 export default AuthNavRight
diff --git a/src/components/MainNavLeft.js b/src/components/MainNavLeft.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Nav, NavDropdown } from 'react-bootstrap'
 import { NavLink } from 'react-router-dom'
-import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa'
 
 const MainNavLeft = () => {
   return (
@@ -15,10 +14,6 @@ const MainNavLeft = () => {
       <Nav.Link as={NavLink} activeClassName='active-navlink' to='/Trends' className='metriq-navbar-text' eventKey='5'>Trends</Nav.Link>
       <Nav.Link as={NavLink} activeClassName='active-navlink' to='/Progress' className='metriq-navbar-text' eventKey='6'>Progress</Nav.Link>
       <Nav.Link as={NavLink} activeClassName='active-navlink' to='/Data' className='metriq-navbar-text' eventKey='7'>Data</Nav.Link>
-      <span className='metriq-navbar-spacer' />
-      <Nav.Link href='https://twitter.com/MetriqInfo' eventKey='15'> <FaTwitter color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
-      <Nav.Link href='http://discord.unitary.fund' eventKey='16'> <FaDiscord color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
-      <Nav.Link href='https://github.com/unitaryfund/metriq-app' eventKey='17'> <FaGithub color={`${'white'}`} size={25} className='metriq-navbar-social-icon' /> </Nav.Link>
     </Nav>
   )
 }