Fixing batch of minor appearance issues.

ReCodEx · Nov 27, 2024 · 4c0c2ca · 4c0c2ca
1 parent 71d5632
commit 4c0c2ca
Show file tree

Hide file tree

Showing 14 changed files with 128 additions and 126 deletions.
diff --git a/src/components/Assignments/SolutionsTable/SolutionsTableRow.js b/src/components/Assignments/SolutionsTable/SolutionsTableRow.js
@@ -61,7 +61,7 @@ const SolutionsTableRow = ({
     <tbody
       onClick={!selected && onSelect ? () => onSelect(id) : null}
       onDoubleClick={
-        !onSelect && doubleclickAction && (() => doubleclickAction(SOLUTION_DETAIL_URI_FACTORY(assignmentId, id)))
+        !onSelect && doubleclickAction ? () => doubleclickAction(SOLUTION_DETAIL_URI_FACTORY(assignmentId, id)) : null
       }>
       <tr
         id={id}

diff --git a/src/components/forms/Fields/TabbedArrayField.js b/src/components/forms/Fields/TabbedArrayField.js
@@ -54,31 +54,29 @@ class TabbedArrayField extends Component {
         {fields.length > 0 && (
           <Tab.Container id={id} defaultActiveKey={defaultIndex}>
             <Card className="mb-3">
-              <Card.Header>
-                <Nav variant="tabs" className="nav-tabs-custom" id="localized-texts">
-                  {indices.map((fieldIdx, tabIdx) => {
-                    const fieldData = fields.get(fieldIdx);
-                    return (
-                      <Nav.Item key={tabIdx}>
-                        <Nav.Link eventKey={tabIdx}>
-                          {renderTitle(fieldData)}
-                          {removableTabs && (
-                            <Confirm
-                              id={`${id}-remove-${fieldIdx}`}
-                              question={removeQuestion}
-                              onConfirmed={() => {
-                                fields.remove(fieldIdx);
-                                this.changeTab(Math.min(tabIdx, fields.length - 2));
-                              }}>
-                              <CloseIcon gapLeft={2} />
-                            </Confirm>
-                          )}
-                        </Nav.Link>
-                      </Nav.Item>
-                    );
-                  })}
-                </Nav>
-              </Card.Header>
+              <Nav variant="tabs" className="nav-tabs-custom px-2 pt-2" id="localized-texts">
+                {indices.map((fieldIdx, tabIdx) => {
+                  const fieldData = fields.get(fieldIdx);
+                  return (
+                    <Nav.Item key={tabIdx}>
+                      <Nav.Link eventKey={tabIdx} onClick={ev => ev.currentTarget.blur()}>
+                        {renderTitle(fieldData)}
+                        {removableTabs && (
+                          <Confirm
+                            id={`${id}-remove-${fieldIdx}`}
+                            question={removeQuestion}
+                            onConfirmed={() => {
+                              fields.remove(fieldIdx);
+                              this.changeTab(Math.min(tabIdx, fields.length - 2));
+                            }}>
+                            <CloseIcon gapLeft={2} />
+                          </Confirm>
+                        )}
+                      </Nav.Link>
+                    </Nav.Item>
+                  );
+                })}
+              </Nav>
 
               <Tab.Content>
                 {indices.map((fieldIdx, tabIdx) => {

diff --git a/src/components/forms/NiceCheckbox/NiceCheckbox.css b/src/components/forms/NiceCheckbox/NiceCheckbox.css
@@ -32,6 +32,5 @@
   vertical-align: top;
   margin: 0.1rem 0.5rem;
   white-space: normal;
-  font-weight: 700;
   line-height: 1.15;
 }
diff --git a/src/components/helpers/LocalizedTexts/LocalizedTexts.js b/src/components/helpers/LocalizedTexts/LocalizedTexts.js
@@ -31,23 +31,23 @@ const LocalizedTexts = ({ locales = [], noLocalesMessage = null }) => {
           }
           id="localized-texts">
           <Card className="mb-3">
-            <Card.Header>
-              <Nav
-                variant="tabs"
-                defaultActiveKey={
-                  localeTabs.find(({ locale }) => locale === lang) || localeTabs.length === 0
-                    ? lang
-                    : localeTabs[0].locale
-                }
-                className="nav-tabs-custom"
-                id="localized-texts">
-                {localeTabs.map(({ locale }) => (
-                  <Nav.Item key={locale}>
-                    <Nav.Link eventKey={locale}>{locale}</Nav.Link>
-                  </Nav.Item>
-                ))}
-              </Nav>
-            </Card.Header>
+            <Nav
+              variant="tabs"
+              defaultActiveKey={
+                localeTabs.find(({ locale }) => locale === lang) || localeTabs.length === 0
+                  ? lang
+                  : localeTabs[0].locale
+              }
+              className="nav-tabs-custom px-2 pt-2"
+              id="localized-texts">
+              {localeTabs.map(({ locale }) => (
+                <Nav.Item key={locale}>
+                  <Nav.Link eventKey={locale} onClick={ev => ev.currentTarget.blur()}>
+                    {locale}
+                  </Nav.Link>
+                </Nav.Item>
+              ))}
+            </Nav>
             <Tab.Content>
               {localeTabs.map(({ locale, text, link = '', studentHint = null }) => (
                 <Tab.Pane key={locale} eventKey={locale}>

diff --git a/src/components/layout/Header/Header.js b/src/components/layout/Header/Header.js
@@ -44,7 +44,7 @@ class Header extends Component {
               </a>
             </li>
             {fetchManyGroupsStatus && (
-              <li className="nav-item memberGroupsDropdownContainer">
+              <li className="nav-item memberGroupsDropdownContainer" data-bs-theme="light">
                 <FetchManyResourceRenderer
                   fetchManyStatus={fetchManyGroupsStatus}
                   loading={

diff --git a/src/components/layout/HeaderLanguageSwitching/HeaderLanguageSwitching.js b/src/components/layout/HeaderLanguageSwitching/HeaderLanguageSwitching.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { knownLocalesNames } from '../../../helpers/localizedData.js';
 
 const HeaderLanguageSwitching = ({ currentLang, availableLangs, setLang }) => (
-  <Dropdown as="li" align="end" className="nav-item">
+  <Dropdown as="li" align="end" className="nav-item" data-bs-theme="light">
     <Dropdown.Toggle as="a" id="dropdown-header-lang-switch" bsPrefix="nav-link">
       {currentLang}&nbsp;
     </Dropdown.Toggle>

diff --git a/src/components/layout/HeaderNotificationsDropdown/HeaderNotificationsDropdown.js b/src/components/layout/HeaderNotificationsDropdown/HeaderNotificationsDropdown.js
@@ -18,7 +18,7 @@ const HeaderNotificationsDropdown = ({
   newNotifications,
   oldNotifications,
 }) => (
-  <Dropdown as="li" align="end" navbar className="nav-item">
+  <Dropdown as="li" align="end" navbar className="nav-item" data-bs-theme="light">
     <Dropdown.Toggle as="a" id="dropdown-header-notifications" bsPrefix="nav-link">
       {newNotifications.size === 0 ? (
         <Icon icon={['far', 'bell']} />

diff --git a/src/components/layout/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.js b/src/components/layout/HeaderSystemMessagesDropdown/HeaderSystemMessagesDropdown.js
@@ -20,7 +20,7 @@ const HeaderSystemMessagesDropdown = ({
   acceptActiveMessages,
   unacceptActiveMessages,
 }) => (
-  <Dropdown as="li" align="end" navbar className="nav-item">
+  <Dropdown as="li" align="end" navbar className="nav-item" data-bs-theme="light">
     <Dropdown.Toggle as="a" id="dropdown-header-system-messages" bsPrefix="nav-link">
       <MailIcon />
       {systemMessages.length > 0 && (

diff --git a/src/components/layout/Sidebar/Sidebar.js b/src/components/layout/Sidebar/Sidebar.js
@@ -5,8 +5,9 @@ import { FormattedMessage } from 'react-intl';
 import { lruMemoize } from 'reselect';
 import { Link } from 'react-router-dom';
 
-import Admin from './Admin.js';
 import UserPanelContainer from '../../../containers/UserPanelContainer';
+import UserSwitchingContainer from '../../../containers/UserSwitchingContainer';
+
 import MenuTitle from '../../widgets/Sidebar/MenuTitle';
 import MenuItem from '../../widgets/Sidebar/MenuItem';
 import { LoadingIcon } from '../../icons';
@@ -15,6 +16,7 @@ import { isSupervisorRole, isEmpoweredSupervisorRole, isSuperadminRole } from '.
 import withLinks from '../../../helpers/withLinks.js';
 import { getExternalIdForCAS } from '../../../helpers/cas.js';
 import { getConfigVar } from '../../../helpers/config.js';
+import Admin from './Admin.js';
 
 import * as styles from './sidebar.less';
 
@@ -47,12 +49,12 @@ const Sidebar = ({
   return (
     <aside className={`app-sidebar bg-body-secondary shadow ${styles.mainSidebar}`} data-bs-theme="dark">
       <div className="sidebar-brand">
-        <Link to={HOME_URI} className="brand-link shadow me-5">
+        <Link to={HOME_URI} className="brand-link me-5">
           <>
             <img
               src={`${URL_PREFIX}/public/logo-bare.png`}
               alt="ReCodEx Logo"
-              className="pt-1 me-2 brand-image opacity-75 shadow"
+              className="pt-1 me-2 brand-image opacity-75"
             />
             <span className="brand-text">
               {pendingFetchOperations && (
@@ -66,7 +68,11 @@ const Sidebar = ({
         </Link>
       </div>
 
-      <div className="sidebar-wrapper" data-overlayscrollbars="host">
+      <div className="sticky-top shadow border-bottom bg-body-secondary py-2">
+        <UserPanelContainer small={small} />
+      </div>
+
+      <div className="sidebar-wrapper">
         <div data-overlayscrollbars-viewport="scrollbarHidden">
           <nav className="mt-2">
             {!user && (
@@ -94,7 +100,8 @@ const Sidebar = ({
 
             {Boolean(user) && (
               <>
-                <UserPanelContainer small={small} />
+                <UserSwitchingContainer open={true} />
+
                 <ul
                   className="nav nav-pills sidebar-menu flex-column"
                   data-lte-toggle="treeview"

diff --git a/src/components/widgets/Sidebar/UserPanel/UserPanel.js b/src/components/widgets/Sidebar/UserPanel/UserPanel.js
@@ -43,77 +43,75 @@ class UserPanel extends Component {
 
     return (
       <>
-        <div className="user-panel mt-2 pb-2 mb-2">
-          <div className="text-center text-light">
-            {small ? (
-              <AvatarContainer
-                avatarUrl={user.avatarUrl}
-                fullName={user.fullName}
-                firstName={user.name.firstName}
-                size={small ? 32 : 42}
-              />
-            ) : (
-              <UserName currentUserId={user.id} {...user} />
-            )}
-          </div>
+        <div className="text-center text-light">
+          {small ? (
+            <AvatarContainer
+              avatarUrl={user.avatarUrl}
+              fullName={user.fullName}
+              firstName={user.name.firstName}
+              size={small ? 32 : 42}
+            />
+          ) : (
+            <UserName currentUserId={user.id} {...user} />
+          )}
+        </div>
 
-          <div className="small text-center mt-1">
-            <Link to={EDIT_USER_URI_FACTORY(user.id)}>
-              <Icon icon="edit" className="text-warning" gapRight={!small} />
-              {!small && <FormattedMessage id="generic.settings" defaultMessage="Settings" />}
-            </Link>
+        <div className="small text-center mt-1">
+          <Link to={EDIT_USER_URI_FACTORY(user.id)}>
+            <Icon icon="edit" className="text-warning" gapRight={small ? 0 : 1} />
+            {!small && <FormattedMessage id="generic.settings" defaultMessage="Settings" />}
+          </Link>
 
-            {small && <br />}
+          {small && <br />}
 
+          <OverlayTrigger
+            placement="bottom"
+            overlay={
+              <Tooltip id="tokenExpiration">
+                <FormattedMessage id="app.badge.sessionExpiration" defaultMessage="Session expiration:" />{' '}
+                <FormattedRelativeTime
+                  value={(expiration - Date.now()) / 1000}
+                  numeric="auto"
+                  updateIntervalInSeconds={1000000}
+                />
+              </Tooltip>
+            }>
+            <a
+              href="#"
+              onClick={e => {
+                e.preventDefault();
+                logout();
+              }}>
+              <Icon icon="sign-out-alt" className="text-danger" gapLeft={small ? 0 : 2} gapRight={small ? 0 : 1} />
+              {!small && <FormattedMessage id="app.logout" defaultMessage="Logout" />}
+            </a>
+          </OverlayTrigger>
+          {small && <br />}
+          {isSuperadminRole(user.privateData.role) && (
             <OverlayTrigger
               placement="bottom"
               overlay={
-                <Tooltip id="tokenExpiration">
-                  <FormattedMessage id="app.badge.sessionExpiration" defaultMessage="Session expiration:" />{' '}
-                  <FormattedRelativeTime
-                    value={(expiration - Date.now()) / 1000}
-                    numeric="auto"
-                    updateIntervalInSeconds={1000000}
-                  />
+                <Tooltip id="effectiveRole">
+                  <FormattedMessage id="generic.effectiveRole" defaultMessage="Effective Role" />:{' '}
+                  {roleLabels[effectiveRole]}
                 </Tooltip>
               }>
               <a
                 href="#"
                 onClick={e => {
                   e.preventDefault();
-                  logout();
+                  this.openEffectiveRoleDialog();
                 }}>
-                <Icon icon="sign-out-alt" className="text-danger" gapLeft={small ? 0 : 3} gapRight={!small} />
-                {!small && <FormattedMessage id="app.logout" defaultMessage="Logout" />}
+                <UserRoleIcon
+                  role={effectiveRole}
+                  className="text-primary"
+                  gapLeft={small ? 0 : 2}
+                  gapRight={small ? 0 : 1}
+                />
+                {!small && <FormattedMessage id="generic.role" defaultMessage="Role" />}
               </a>
             </OverlayTrigger>
-            {small && <br />}
-            {isSuperadminRole(user.privateData.role) && (
-              <OverlayTrigger
-                placement="bottom"
-                overlay={
-                  <Tooltip id="effectiveRole">
-                    <FormattedMessage id="generic.effectiveRole" defaultMessage="Effective Role" />:{' '}
-                    {roleLabels[effectiveRole]}
-                  </Tooltip>
-                }>
-                <a
-                  href="#"
-                  onClick={e => {
-                    e.preventDefault();
-                    this.openEffectiveRoleDialog();
-                  }}>
-                  <UserRoleIcon
-                    role={effectiveRole}
-                    className="text-primary"
-                    gapLeft={small ? 0 : 3}
-                    gapRight={!small}
-                  />
-                  {!small && <FormattedMessage id="generic.role" defaultMessage="Role" />}
-                </a>
-              </OverlayTrigger>
-            )}
-          </div>
+          )}
         </div>
 
         {isSuperadminRole(user.privateData.role) && (

diff --git a/src/components/widgets/Sidebar/UserPanel/UserPanelFailed.js b/src/components/widgets/Sidebar/UserPanel/UserPanelFailed.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { FailedAvatar } from '../../Avatar';
 
 const UserPanelFailed = props => (
-  <div className="user-panel mt-2 pb-2 mb-2">
+  <>
     <div className="float-start me-2">
       <FailedAvatar {...props} />
     </div>
@@ -12,7 +12,7 @@ const UserPanelFailed = props => (
       <br />
       <FormattedMessage id="app.badge.failedLoadingInfo" defaultMessage="Please check your Internet connection." />
     </div>
-  </div>
+  </>
 );
 
 export default UserPanelFailed;
diff --git a/src/components/widgets/Sidebar/UserPanel/UserPanelLoading.js b/src/components/widgets/Sidebar/UserPanel/UserPanelLoading.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { LoadingAvatar } from '../../Avatar';
 
 const UserPanelLoading = props => (
-  <div className="user-panel mt-2 mb-2">
+  <>
     <div className="float-start me-3">
       <LoadingAvatar {...props} />
     </div>
@@ -12,7 +12,7 @@ const UserPanelLoading = props => (
         <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
       </p>
     </div>
-  </div>
+  </>
 );
 
 export default UserPanelLoading;
diff --git a/src/containers/App/recodex.css b/src/containers/App/recodex.css
@@ -126,6 +126,7 @@ table.table.tbody-hover tbody:hover th.selected {
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: rgba(128, 128, 128, 0.1);
+  padding: 0.5rem;
 }
 
 /*
@@ -142,6 +143,10 @@ table.table.tbody-hover tbody:hover th.selected {
   top: 0;
 }
 
+.sidebar-wrapper {
+  height: auto! important;
+}
+
 .img-circle { /* removed in 3.2->4.0 migration, back patch */
   border-radius:50%;
 }