added OrgName to the Navbar (PalisadoesFoundation#525)

lakshz · Mar 3, 2023 · ea15e91 · ea15e91
1 parent af10ccc
commit ea15e91
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/src/components/AdminNavbar/AdminNavbar.module.css b/src/components/AdminNavbar/AdminNavbar.module.css
@@ -51,9 +51,9 @@ a {
 .logo > strong {
   text-decoration: none;
   line-height: 1.5rem;
-  margin-left: -5px;
+  margin-left: 10px;
   font-family: sans-serif;
-  font-size: 19px;
+  font-size: 24px;
   color: #707070;
 }
 .userimage {
@@ -206,3 +206,18 @@ a {
 .navbarBrandLogo {
   padding: 0;
 }
+
+.allOrgBtn {
+  margin-left: 10px;
+  background-color: #31bb6b;
+  padding: 5px 10px;
+  color: white;
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+.allOrgBtn:hover {
+  color: #fff;
+  background-color: #1e7e34;
+  border-color: #1c7430;
+}
diff --git a/src/components/AdminNavbar/AdminNavbar.tsx b/src/components/AdminNavbar/AdminNavbar.tsx
@@ -91,14 +91,22 @@ function AdminNavbar({ targets, url_1 }: NavbarProps): JSX.Element {
     window.location.replace('/orglist');
   }
 
+  let OrgName;
+  if (data) {
+    OrgName = data.organizations[0].name;
+  }
+
   return (
     <>
       <Navbar className={styles.navbarbg} expand="xl" fixed="top">
         <Navbar.Brand className={styles.navbarBrandLogo}>
-          <Link className={styles.logo} to="/orglist">
-            <img src={Logo} />
-            <strong>{t('talawa_portal')}</strong>
-          </Link>
+          <div className={styles.logo}>
+            <img
+              className={styles.roundedcircle}
+              src="https://via.placeholder.com/45x45"
+            />
+            <strong>{OrgName}</strong>
+          </div>
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="navbarScroll" />
         <Navbar.Collapse id="navbarScroll">
@@ -153,6 +161,9 @@ function AdminNavbar({ targets, url_1 }: NavbarProps): JSX.Element {
               );
             })}
           </Nav>
+          <Link className={styles.allOrgBtn} to="/orglist">
+            All Organizations
+          </Link>
           <Nav className="ml-auto ">
             <div className={styles.notificationIcon}>
               <IconButton
@@ -184,7 +195,7 @@ function AdminNavbar({ targets, url_1 }: NavbarProps): JSX.Element {
                   />
                 ) : (
                   <img
-                    src="https://via.placeholder.com/45x45"
+                    src={Logo}
                     className={styles.roundedcircle}
                     data-testid="navbarOrgImageAbsent"
                   />

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
@@ -9,6 +9,9 @@
 }
 .toporgname {
   font-size: 24px;
+  border-bottom: 3px solid #31bb6b;
+  color: #707070;
+  font-weight: 600;
 }
 .toporgloc {
   padding-top: 8px;
@@ -44,7 +47,6 @@
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
   width: 26%;
 }
 

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -82,7 +82,6 @@ function OrganizationDashboard(): JSX.Element {
     <>
       <AdminNavbar targets={targets} url_1={configUrl} />
       <Row className={styles.toporginfo}>
-        <p></p>
         <p className={styles.toporgname}>{data.organizations[0].name}</p>
         <p className={styles.toporgloc}>
           {t('location')} : {data.organizations[0].location}