Some minor improvements in UI (#1314)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
2021-05-13 20:34:19 +02:00 · 2021-05-13 20:34:19 +02:00 · bb8f73b1b2
parent 53eb939969
commit bb8f73b1b2
49 changed files with 38 additions and 42 deletions
--- a/docs/chart/logo_v2.png
+++ b/docs/chart/logo_v2.png
--- a/docs/screenshots/screenshot1.jpg
+++ b/docs/screenshots/screenshot1.jpg
--- a/docs/screenshots/screenshot2.jpg
+++ b/docs/screenshots/screenshot2.jpg
--- a/docs/screenshots/screenshot3.jpg
+++ b/docs/screenshots/screenshot3.jpg
--- a/docs/screenshots/screenshot4.jpg
+++ b/docs/screenshots/screenshot4.jpg
--- a/docs/screenshots/screenshot5.jpg
+++ b/docs/screenshots/screenshot5.jpg
--- a/docs/screenshots/screenshot6.jpg
+++ b/docs/screenshots/screenshot6.jpg
--- a/web/src/layout/common/Modal.tsx
+++ b/web/src/layout/common/Modal.tsx
@ -105,7 +105,6 @@ const Modal = (props: Props) => {
      <div
        className={classnames('modal', styles.modal, { [`${styles.active} d-block`]: openStatus })}
        role="dialog"
-        tabIndex={-1}
        aria-modal={openStatus}
      >
        <div
--- a/web/src/layout/common/SearchBar.tsx
+++ b/web/src/layout/common/SearchBar.tsx
@ -272,11 +272,11 @@ const SearchBar = (props: Props) => {
        {visibleDropdown && !isNull(packages) && (
          <div
            ref={dropdownRef}
-            className={`dropdown-menu dropdown-menu-left p-0 shadow-sm w-100 show ${styles.dropdown}`}
+            className={`dropdown-menu dropdown-menu-left p-0 shadow-sm w-100 show noFocus ${styles.dropdown}`}
            role="listbox"
            id="search-list"
-            tabIndex={0}
            aria-activedescendant={highlightedItem ? `sl-opt${highlightedItem}` : ''}
+            tabIndex={0}
            aria-roledescription="Packages list"
          >
            <HoverableItem onLeave={() => setHighlightedItem(null)}>
--- a/web/src/layout/controlPanel/snapshots/index.test.tsx.snap
+++ b/web/src/layout/controlPanel/snapshots/index.test.tsx.snap
@ -3,9 +3,10 @@
 exports[`ControlPanelView renders correctly 1`] = `
 <DocumentFragment>
  <main
-    class="d-flex flex-column flex-grow-1 position-relative"
+    class="d-flex flex-column flex-grow-1 position-relative noFocus"
    id="content"
    role="main"
+    tabindex="-1"
  >
    <div
      class="pt-3 position-relative navWrapper navWrapper"
--- a/web/src/layout/controlPanel/index.tsx
+++ b/web/src/layout/controlPanel/index.tsx
@ -129,7 +129,7 @@ const ControlPanelView = (props: Props) => {
  if (isNull(context)) return null;

  return (
-    <main role="main" className="d-flex flex-column flex-grow-1 position-relative" id="content">
+    <main role="main" className="d-flex flex-column flex-grow-1 position-relative noFocus" id="content" tabIndex={-1}>
      <div className={`pt-3 position-relative navWrapper ${styles.navWrapper}`}>
        <div className="container-lg px-sm-4 px-lg-0">
          <div className="px-xs-0 px-sm-3 px-lg-0 d-flex flex-column-reverse flex-sm-row justify-content-between align-items-end">
--- a/web/src/layout/controlPanel/members/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/members/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`Members Modal - members section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/members/snapshots/UserInvitation.test.tsx.snap
+++ b/web/src/layout/controlPanel/members/snapshots/UserInvitation.test.tsx.snap
@ -11,7 +11,6 @@ exports[`UserInvitation creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/organizations/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/organizations/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`OrganizationModal - organizations section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/organizations/snapshots/index.test.tsx.snap
+++ b/web/src/layout/controlPanel/organizations/snapshots/index.test.tsx.snap
@ -89,7 +89,6 @@ exports[`Organizations section index creates snapshot 1`] = `
        aria-modal="false"
        class="modal modal"
        role="dialog"
-        tabindex="-1"
      >
        <div
          class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/repositories/snapshots/BadgeModal.test.tsx.snap
+++ b/web/src/layout/controlPanel/repositories/snapshots/BadgeModal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`Badge Modal - repositories section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/repositories/snapshots/ClaimOwnershipModal.test.tsx.snap
+++ b/web/src/layout/controlPanel/repositories/snapshots/ClaimOwnershipModal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`Claim Repository Modal - repositories section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-xl"
--- a/web/src/layout/controlPanel/repositories/snapshots/DeletionModal.test.tsx.snap
+++ b/web/src/layout/controlPanel/repositories/snapshots/DeletionModal.test.tsx.snap
@ -13,7 +13,6 @@ exports[`Deletion modal Modal - packages section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/repositories/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/repositories/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`Repository Modal - repositories section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/repositories/snapshots/TransferModal.test.tsx.snap
+++ b/web/src/layout/controlPanel/repositories/snapshots/TransferModal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`Transfer Repository Modal - packages section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/settings/orgSettings/profile/snapshots/DeleteOrg.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/orgSettings/profile/snapshots/DeleteOrg.test.tsx.snap
@ -60,7 +60,6 @@ exports[`DeleteOrg creates snapshot 1`] = `
      aria-modal="false"
      class="modal modal"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/settings/userSettings/apiKeys/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/userSettings/apiKeys/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`APIKeyModal - API keys section creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/settings/userSettings/apiKeys/snapshots/index.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/userSettings/apiKeys/snapshots/index.test.tsx.snap
@ -92,7 +92,6 @@ exports[`API keys section index creates snapshot 1`] = `
            aria-modal="false"
            class="modal modal"
            role="dialog"
-            tabindex="-1"
          >
            <div
              class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`SubscriptionModal creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal"
--- a/web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/snapshots/index.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/snapshots/index.test.tsx.snap
@ -106,7 +106,6 @@ exports[`PackagesSection creates snapshot 1`] = `
            aria-modal="false"
            class="modal modal"
            role="dialog"
-            tabindex="-1"
          >
            <div
              class="modal-dialog modal-lg modal"
--- a/web/src/layout/controlPanel/settings/userSettings/subscriptions/repositories/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/userSettings/subscriptions/repositories/snapshots/Modal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`OptOutModal creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal"
--- a/web/src/layout/controlPanel/settings/webhooks/snapshots/LastNotificationsModal.test.tsx.snap
+++ b/web/src/layout/controlPanel/settings/webhooks/snapshots/LastNotificationsModal.test.tsx.snap
@ -44,7 +44,6 @@ exports[`Repository LastNotificationsModal - packages section creates snapshot 1
      aria-modal="false"
      class="modal modal"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable modalDialog"
--- a/web/src/layout/home/snapshots/ResetPasswordModal.test.tsx.snap
+++ b/web/src/layout/home/snapshots/ResetPasswordModal.test.tsx.snap
@ -11,7 +11,6 @@ exports[`ResetPasswordModal creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
@ -129,7 +128,6 @@ exports[`ResetPasswordModal creates snapshot 2`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/home/snapshots/UserConfirmation.test.tsx.snap
+++ b/web/src/layout/home/snapshots/UserConfirmation.test.tsx.snap
@ -11,7 +11,6 @@ exports[`UserConfirmation creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/home/snapshots/index.test.tsx.snap
+++ b/web/src/layout/home/snapshots/index.test.tsx.snap
@ -10,9 +10,10 @@ exports[`Home index creates snapshot 1`] = `
    >
      <div
        aria-label="Find, install and publisher Kubernetes packages"
-        class="display-4 text-center font-weight-light d-block d-xxl-flex justify-content-center mainTitle"
+        class="display-4 text-center font-weight-light d-block d-xxl-flex justify-content-center noFocus mainTitle"
        id="content"
        role="banner"
+        tabindex="-1"
      >
        Find, install and publish
        <br />
@ -131,7 +132,6 @@ exports[`Home index creates snapshot 1`] = `
                  aria-modal="false"
                  class="modal modal"
                  role="dialog"
-                  tabindex="-1"
                >
                  <div
                    class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/home/index.tsx
+++ b/web/src/layout/home/index.tsx
@ -65,8 +65,9 @@ const HomeView = (props: Props) => {
        <div
          role="banner"
          aria-label="Find, install and publisher Kubernetes packages"
-          className={`display-4 text-center font-weight-light d-block d-xxl-flex justify-content-center ${styles.mainTitle}`}
+          className={`display-4 text-center font-weight-light d-block d-xxl-flex justify-content-center noFocus ${styles.mainTitle}`}
          id="content"
+          tabIndex={-1}
        >
          Find, install and publish
          <br />
--- a/web/src/layout/navigation/snapshots/LogIn.test.tsx.snap
+++ b/web/src/layout/navigation/snapshots/LogIn.test.tsx.snap
@ -11,7 +11,6 @@ exports[`LogIn creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/navigation/snapshots/SignUp.test.tsx.snap
+++ b/web/src/layout/navigation/snapshots/SignUp.test.tsx.snap
@ -11,7 +11,6 @@ exports[`SignUp creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/notFound/index.tsx
+++ b/web/src/layout/notFound/index.tsx
@ -6,8 +6,9 @@ import styles from './NotFound.module.css';

 const NotFound = () => (
  <div
-    className={`p-5 d-flex flex-column align-items-center justify-content-center flex-grow-1 ${styles.content}`}
+    className={`p-5 d-flex flex-column align-items-center justify-content-center flex-grow-1 noFocus ${styles.content}`}
    id="content"
+    tabIndex={-1}
  >
    <TiWarningOutline className={`m-3 ${styles.icon}`} />
    <div className="h1 text-center mb-4">Error 404 - Page Not Found</div>
--- a/web/src/layout/package/Dependencies.tsx
+++ b/web/src/layout/package/Dependencies.tsx
@ -31,6 +31,7 @@ const Dependencies = (props: Props) => {
          key={`dependency_${index}`}
          className={`${styles.dependency} text-truncate pb-1`}
          data-testid="dependencyItem"
+          role="listitem"
        >
          <GoPackage className="text-muted mr-2 mb-0" />
          {dependency.name}
--- a/web/src/layout/package/Keywords.tsx
+++ b/web/src/layout/package/Keywords.tsx
@ -29,7 +29,9 @@ const Keywords = (props: Props) => {
  return (
    <div className="mb-3" role="list" aria-describedby="keywords-list">
      {isUndefined(props.keywords) || isNull(props.keywords) || props.keywords.length === 0 ? (
-        <p data-testid="keywords">-</p>
+        <p data-testid="keywords" role="listitem">
+          -
+        </p>
      ) : (
        <span data-testid="keywords">
          {cleanKeywords().map((keyword: string) => (
--- a/web/src/layout/package/RecommendedPackages/RecommendedPackages.module.css
+++ b/web/src/layout/package/RecommendedPackages/RecommendedPackages.module.css
@ -1,4 +1,6 @@
 .wrapper {
  background-color: var(--color-1-5);
  margin-top: -8px;
+  border-bottom: 1px solid var(--color-black-5);
+  border-top: 1px solid var(--color-black-5);
 }
--- a/web/src/layout/package/snapshots/CapabilityLevel.test.tsx.snap
+++ b/web/src/layout/package/snapshots/CapabilityLevel.test.tsx.snap
@ -56,7 +56,6 @@ exports[`CapabilityLevel creates snapshot 1`] = `
          aria-modal="false"
          class="modal modal"
          role="dialog"
-          tabindex="-1"
        >
          <div
            class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/package/snapshots/CapatabilityLevelInfoModal.test.tsx.snap
+++ b/web/src/layout/package/snapshots/CapatabilityLevelInfoModal.test.tsx.snap
@ -37,7 +37,6 @@ exports[`CapatabilityLevelInfoModal creates snapshot 1`] = `
      aria-modal="false"
      class="modal modal"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/package/snapshots/Dependencies.test.tsx.snap
+++ b/web/src/layout/package/snapshots/Dependencies.test.tsx.snap
@ -26,6 +26,7 @@ exports[`Dependencies creates snapshot 1`] = `
      <div
        class="dependency text-truncate pb-1"
        data-testid="dependencyItem"
+        role="listitem"
      >
        <svg
          class="text-muted mr-2 mb-0"
@ -53,6 +54,7 @@ exports[`Dependencies creates snapshot 1`] = `
      <div
        class="dependency text-truncate pb-1"
        data-testid="dependencyItem"
+        role="listitem"
      >
        <svg
          class="text-muted mr-2 mb-0"
--- a/web/src/layout/package/index.tsx
+++ b/web/src/layout/package/index.tsx
@ -776,7 +776,12 @@ const PackageView = (props: Props) => {

                  {!isNull(detail) && (
                    <>
-                      <div className={styles.mainContent} id="content" aria-label="Package detail">
+                      <div
+                        className={`noFocus ${styles.mainContent}`}
+                        id="content"
+                        tabIndex={-1}
+                        aria-label="Package detail"
+                      >
                        {isNull(detail.readme) || isUndefined(detail.readme) ? (
                          <div className={styles.noReadmeWrapper}>
                            <NoData>No README file available for this package</NoData>
--- a/web/src/layout/package/installation/snapshots/Modal.test.tsx.snap
+++ b/web/src/layout/package/installation/snapshots/Modal.test.tsx.snap
@ -59,7 +59,6 @@ exports[`HelmInstall creates snapshot 1`] = `
      aria-modal="true"
      class="modal modal active d-block"
      role="dialog"
-      tabindex="-1"
    >
      <div
        class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"
--- a/web/src/layout/package/readme/TOC.tsx
+++ b/web/src/layout/package/readme/TOC.tsx
@ -51,7 +51,7 @@ const TOC = (props: Props) => {
          data-testid="dropdownTOC"
          ref={dropdownRef}
          id="TOC-list"
-          className={`dropdown-menu dropdown-menu-left shadow-sm show p-0 ${styles.dropdown}`}
+          className={`dropdown-menu dropdown-menu-left shadow-sm noFocus show p-0 ${styles.dropdown}`}
          tabIndex={0}
          role="listbox"
          aria-roledescription="Table of content links"
--- a/web/src/layout/search/index.tsx
+++ b/web/src/layout/search/index.tsx
@ -512,7 +512,7 @@ const SearchView = (props: Props) => {
                  </NoData>
                ) : (
                  <>
-                    <div className="mb-2" id="content" aria-label="Packages list">
+                    <div className="mb-2 noFocus" id="content" tabIndex={-1} aria-label="Packages list">
                      <div className="row" role="list">
                        {searchResults.data.packages.map((item: Package) => (
                          <PackageCard
--- a/web/src/layout/starredPackages/snapshots/index.test.tsx.snap
+++ b/web/src/layout/starredPackages/snapshots/index.test.tsx.snap
@ -42,9 +42,10 @@ exports[`StarredPackagesView creates snapshot 1`] = `
          </div>
        </div>
        <div
-          class="row mx-auto mt-4 wrapper"
+          class="row mx-auto mt-4 noFocus wrapper"
          id="content"
          role="list"
+          tabindex="-1"
        />
      </div>
    </main>
--- a/web/src/layout/starredPackages/index.tsx
+++ b/web/src/layout/starredPackages/index.tsx
@ -55,7 +55,7 @@ const StarredPackagesView = () => {
            </div>
          </div>

-          <div className={`row mx-auto mt-4 ${styles.wrapper}`} role="list" id="content">
+          <div className={`row mx-auto mt-4 noFocus ${styles.wrapper}`} role="list" id="content" tabIndex={-1}>
            {!isUndefined(packages) && (
              <>
                {packages.length === 0 ? (
--- a/web/src/layout/stats/snapshots/index.test.tsx.snap
+++ b/web/src/layout/stats/snapshots/index.test.tsx.snap
@ -24,9 +24,10 @@ exports[`StatsView creates snapshot 1`] = `
      </div>
    </div>
    <main
-      class="container-lg px-sm-4 px-lg-0 py-5"
+      class="container-lg px-sm-4 px-lg-0 py-5 noFocus"
      id="content"
      role="main"
+      tabindex="-1"
    >
      <div
        class="flex-grow-1 position-relative"
--- a/web/src/layout/stats/index.tsx
+++ b/web/src/layout/stats/index.tsx
@ -268,7 +268,7 @@ const StatsView = () => {
    <div className="d-flex flex-column flex-grow-1 position-relative">
      {(isUndefined(stats) || isLoading) && <Loading />}

-      <main role="main" className="container-lg px-sm-4 px-lg-0 py-5" id="content">
+      <main role="main" className="container-lg px-sm-4 px-lg-0 py-5 noFocus" id="content" tabIndex={-1}>
        <div className="flex-grow-1 position-relative">
          <div className={`h2 text-secondary text-center ${styles.title}`}>Artifact Hub Stats</div>

--- a/web/src/themes/default.scss
+++ b/web/src/themes/default.scss
@ -25,7 +25,7 @@ $container-max-widths: (
@import './dark.scss';

 .text-muted {
-  color: #575e64 !important;
+  color: #636a6e !important;
 }

 .form-control:disabled,
@ -184,3 +184,7 @@ button {
 .custom-select {
  background: #fff url('/static/media/bootstrap/bt_select.svg') right 0.75rem center/8px 10px no-repeat;
 }
+
+.noFocus:focus {
+  outline: none !important;
+}