visually align support and user menu

ComPlat · Nov 3, 2024 · aaecbca · aaecbca
1 parent 656c56f
commit aaecbca
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 62 deletions.
diff --git a/app/packs/src/components/navigation/SupportMenuButton.js b/app/packs/src/components/navigation/SupportMenuButton.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { Dropdown } from 'react-bootstrap';
 
 import UIStore from 'src/stores/alt/stores/UIStore';
 
@@ -27,28 +27,34 @@ export default function SupportMenuButton() {
   const hasVersions = version && Object.keys(version).length > 1;
 
   return (
-    <DropdownButton title="Info & Support" variant="light">
-      <ExternalItem title="Chemotion.net" href="https://www.chemotion.net" />
-      <ExternalItem title="Chemotion-Repository.net" href="https://www.chemotion-repository.net" />
-      <Dropdown.Divider />
-      <ExternalItem title="Search documentation" href="https://chemotion.net/search" />
-      <ExternalItem title="Helpdesk - Contact Us" href="https://chemotion.net/helpdesk" />
-      <ExternalItem title="Report an issue on Github" href="https://github.com/ComPlat/chemotion_ELN/issues" />
-      {hasVersions && (
-        <>
-          <Dropdown.Divider />
-          <Dropdown.ItemText className="d-flex flex-column text-muted">
-            {Object.entries(version).map(([k, v]) => (
-              <span key={k} className="d-flex justify-content-between">
-                <span>{k}:</span>
-                <span style={{ userSelect: 'text' }}>
-                  {k == 'version' ? v : v.substring(0, 8)}
+    <Dropdown>
+      <Dropdown.Toggle variant="light">
+        <i className="fa fa-info-circle me-1" />
+        Info & Support
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <ExternalItem title="Chemotion.net" href="https://www.chemotion.net" />
+        <ExternalItem title="Chemotion-Repository.net" href="https://www.chemotion-repository.net" />
+        <Dropdown.Divider />
+        <ExternalItem title="Search documentation" href="https://chemotion.net/search" />
+        <ExternalItem title="Helpdesk - Contact Us" href="https://chemotion.net/helpdesk" />
+        <ExternalItem title="Report an issue on Github" href="https://github.com/ComPlat/chemotion_ELN/issues" />
+        {hasVersions && (
+          <>
+            <Dropdown.Divider />
+            <Dropdown.ItemText className="d-flex flex-column text-muted">
+              {Object.entries(version).map(([k, v]) => (
+                <span key={k} className="d-flex justify-content-between">
+                  <span>{k}:</span>
+                  <span style={{ userSelect: 'text' }}>
+                    {k == 'version' ? v : v.substring(0, 8)}
+                  </span>
                 </span>
-              </span>
-            ))}
-          </Dropdown.ItemText>
-        </>
-      )}
-    </DropdownButton>
+              ))}
+            </Dropdown.ItemText>
+          </>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
   );
 }
diff --git a/app/packs/src/components/navigation/UserAuth.js b/app/packs/src/components/navigation/UserAuth.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import 'whatwg-fetch';
 import {
   Card,
-  NavDropdown,
+  Dropdown,
   Modal,
   Button,
   Table,
@@ -608,44 +608,50 @@ export default class UserAuth extends Component {
 
     return (
       <>
-        <NavDropdown title={currentUser.name} align="end" className="mx-2">
-          <NavDropdown.Item eventKey="1" href="/pages/settings">
-            Account &amp; Profile
-          </NavDropdown.Item>
-          {currentUser.is_templates_moderator && (
-            <NavDropdown.Item eventKey="2" href="/ketcher/common_templates">
-              Template Management
-            </NavDropdown.Item>
-          )}
-          <NavDropdown.Item eventKey="3" href="/users/edit">
-            Change Password
-          </NavDropdown.Item>
-          <NavDropdown.Item
-            onClick={this.handleAffiliationsShow}>
-            My Affiliations
-          </NavDropdown.Item>
-          <NavDropdown.Item onClick={this.handleShow}>My Groups & Devices</NavDropdown.Item>
-          <NavDropdown.Item onClick={this.handleLabelShow}>My Labels</NavDropdown.Item>
-          {/* <NavDropdown.Item onClick={this.handleSubscriptionShow}>My Subscriptions</NavDropdown.Item>
-                Disable for now as there is no subsciption channel yet (Paggy) */}
-          <NavDropdown.Item eventKey="7" href="/command_n_control">
-            My Devices
-          </NavDropdown.Item>
-          {currentUser.molecule_editor && (
-            <NavDropdown.Item eventKey="6" href="/molecule_moderator">
-              Molecule Moderator
-            </NavDropdown.Item>
-          )}
-          <NavDropdown.Item eventKey="12" href="/converter_admin">
-            Converter Profile
-          </NavDropdown.Item>
-          <NavDropdown.Item eventKey="8" href="/generic_elements_admin">Generic Designer</NavDropdown.Item>
-
-          <NavDropdown.Item onClick={() => UserActions.logout()}>
-            <i className="fa fa-sign-out me-1" />
-            Log out
-          </NavDropdown.Item>
-        </NavDropdown>
+        <Dropdown>
+          <Dropdown.Toggle variant="light">
+            <i className="fa fa-user me-1" />
+            {currentUser.name}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item eventKey="1" href="/pages/settings">
+              Account &amp; Profile
+            </Dropdown.Item>
+            {currentUser.is_templates_moderator && (
+              <Dropdown.Item eventKey="2" href="/ketcher/common_templates">
+                Template Management
+              </Dropdown.Item>
+            )}
+            <Dropdown.Item eventKey="3" href="/users/edit">
+              Change Password
+            </Dropdown.Item>
+            <Dropdown.Item
+              onClick={this.handleAffiliationsShow}>
+              My Affiliations
+            </Dropdown.Item>
+            <Dropdown.Item onClick={this.handleShow}>My Groups & Devices</Dropdown.Item>
+            <Dropdown.Item onClick={this.handleLabelShow}>My Labels</Dropdown.Item>
+            {/* <Dropdown.Item onClick={this.handleSubscriptionShow}>My Subscriptions</Dropdown.Item>
+                  Disable for now as there is no subsciption channel yet (Paggy) */}
+            <Dropdown.Item eventKey="7" href="/command_n_control">
+              My Devices
+            </Dropdown.Item>
+            {currentUser.molecule_editor && (
+              <Dropdown.Item eventKey="6" href="/molecule_moderator">
+                Molecule Moderator
+              </Dropdown.Item>
+            )}
+            <Dropdown.Item eventKey="12" href="/converter_admin">
+              Converter Profile
+            </Dropdown.Item>
+            <Dropdown.Item eventKey="8" href="/generic_elements_admin">Generic Designer</Dropdown.Item>
+
+            <Dropdown.Item onClick={() => UserActions.logout()}>
+              <i className="fa fa-sign-out me-1" />
+              Log out
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
 
         {this.renderModal()}
         {this.renderAffiliations()}