From e1383880d8429b558f675258ed572eb85717e0ef Mon Sep 17 00:00:00 2001
From: Dallas <dallas.nicol@gmail.com>
Date: Fri, 21 Jul 2023 10:52:53 -0500
Subject: [PATCH] :bug: (various): styling issues with pf-v5-m vs pf-m (#1177)

## Missing Pencil on tables

closes #1166

Also found several `pf-v5-m-` where the version should not be on the
modifiers. This affected many items, such as not adding the blue left
border to active menu items on the nav panel

Aside from removing the `-v5` from `pf-m` modifiers, for the table I
also removed the `inline-edit` div as it doesn't appear we are doing
inline edits and the styling for the inline-edit was basically just
being removed manually by the `enable` modifier.

should also closes #1165

<!--
## PR Title Prefix

Every **PR Title** should be prefixed with :text: to indicate its type.

- Breaking change: :warning: (`:warning:`)
- Non-breaking feature: :sparkles: (`:sparkles:`)
- Patch fix: :bug: (`:bug:`)
- Docs: :book: (`:book:`)
- Infra/Tests/Other: :seedling: (`:seedling:`)
- No release note: :ghost: (`:ghost:`)

For example, a pull request containing breaking changes might look like
`:warning: My pull request contains breaking changes`.

Since GitHub supports emoji aliases (ie. `:ghost:`), there is no need to
include
the emoji directly in the PR title -- **please use the alias**. It used
to be
the case that projects using emojis for PR typing had to include the
emoji
directly because GitHub didn't render the alias. Given that `:warning:`
is
easy enough to read as text, easy to parse in release tooling, and
rendered in
GitHub well, we prefer to standardize on the alias.

For more information, please see the Konveyor
[Versioning
Doc](https://github.com/konveyor/release-tools/blob/main/VERSIONING.md).
-->

---------

Signed-off-by: gitdallas <dallas.nicol@gmail.com>
---
 client/src/app/common/KeyDisplayToggle.tsx    |  2 +-
 client/src/app/components/target-card.tsx     |  2 +-
 .../__snapshots__/DefaultLayout.test.tsx.snap | 46 +++++++++----------
 .../src/app/layout/SidebarApp/SidebarApp.tsx  | 28 +++++------
 .../__snapshots__/SidebarApp.test.tsx.snap    | 12 ++---
 .../analysis-wizard/custom-rules.tsx          |  4 +-
 .../applications-table-analyze.tsx            | 24 +++++-----
 .../applications-table-assessment.tsx         | 24 +++++-----
 .../application-form/application-form.tsx     |  2 +-
 .../app/pages/external/jira/tracker-form.tsx  |  2 +-
 .../app-table-with-controls.tsx               |  2 +-
 .../horizontal-nav/horizontal-nav.tsx         |  2 +-
 12 files changed, 73 insertions(+), 77 deletions(-)

diff --git a/client/src/app/common/KeyDisplayToggle.tsx b/client/src/app/common/KeyDisplayToggle.tsx
index 1277b2903..f28dbe18f 100644
--- a/client/src/app/common/KeyDisplayToggle.tsx
+++ b/client/src/app/common/KeyDisplayToggle.tsx
@@ -16,7 +16,7 @@ const KeyDisplayToggle: React.FC<IKeyDisplayToggleProps> = ({
   onClick,
 }: IKeyDisplayToggleProps) => (
   <Button variant="link" aria-label={`Show/hide ${keyName}`} onClick={onClick}>
-    <span className="pf-v5-c-icon pf-v5-m-info">
+    <span className="pf-v5-c-icon pf-m-info">
       {isKeyHidden ? <EyeSlashIcon /> : <EyeIcon />}
     </span>
   </Button>
diff --git a/client/src/app/components/target-card.tsx b/client/src/app/components/target-card.tsx
index d5bf25d17..146d58792 100644
--- a/client/src/app/components/target-card.tsx
+++ b/client/src/app/components/target-card.tsx
@@ -124,7 +124,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
       onClick={handleCardClick}
       isSelectable={!!cardSelected}
       isSelected={isCardSelected}
-      className="pf-v5-l-stack pf-v5-l-stack__item pf-v5-m-fill"
+      className="pf-v5-l-stack pf-v5-l-stack__item pf-m-fill"
     >
       <CardBody>
         <Flex>
diff --git a/client/src/app/layout/DefaultLayout/tests/__snapshots__/DefaultLayout.test.tsx.snap b/client/src/app/layout/DefaultLayout/tests/__snapshots__/DefaultLayout.test.tsx.snap
index ac3bd1792..016c52de7 100644
--- a/client/src/app/layout/DefaultLayout/tests/__snapshots__/DefaultLayout.test.tsx.snap
+++ b/client/src/app/layout/DefaultLayout/tests/__snapshots__/DefaultLayout.test.tsx.snap
@@ -6,14 +6,14 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="pf-v5-c-page pf-v5-m-resize-observer pf-v5-m-breakpoint-default pf-v5-m-height-breakpoint-sm"
+        class="pf-v5-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm"
       >
         <div
           class="pf-v5-c-skip-to-content"
         >
           <a
             aria-disabled="false"
-            class="pf-v5-c-button pf-v5-m-primary"
+            class="pf-v5-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
@@ -35,7 +35,7 @@ Object {
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Global navigation"
-                class="pf-v5-c-button pf-v5-m-plain"
+                class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-1"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
@@ -71,7 +71,7 @@ Object {
             class="pf-v5-c-page__header-tools"
           >
             <div
-              class="pf-v5-c-page__header-tools-group pf-v5-m-hidden"
+              class="pf-v5-c-page__header-tools-group pf-m-hidden"
             >
               <div
                 class="pf-v5-c-page__header-tools-item"
@@ -79,7 +79,7 @@ Object {
                 <button
                   aria-disabled="false"
                   aria-label="about button"
-                  class="pf-v5-c-button pf-v5-m-plain"
+                  class="pf-v5-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-2"
                   data-ouia-component-type="PF5/Button"
                   data-ouia-safe="true"
@@ -97,7 +97,7 @@ Object {
                 class="pf-v5-c-page__header-tools-item"
               >
                 <div
-                  class="pf-v5-c-dropdown pf-v5-m-align-right"
+                  class="pf-v5-c-dropdown pf-m-align-right"
                   data-ouia-component-id="OUIA-Generated-Dropdown-1"
                   data-ouia-component-type="PF5/Dropdown"
                   data-ouia-safe="true"
@@ -106,7 +106,7 @@ Object {
                     aria-expanded="false"
                     aria-haspopup="true"
                     aria-label="Actions"
-                    class="pf-v5-c-dropdown__toggle pf-v5-m-plain"
+                    class="pf-v5-c-dropdown__toggle pf-m-plain"
                     id="pf-dropdown-toggle-id-0"
                     type="button"
                   >
@@ -131,7 +131,7 @@ Object {
         </header>
         <div
           aria-hidden="true"
-          class="pf-v5-c-page__sidebar pf-v5-m-collapsed"
+          class="pf-v5-c-page__sidebar pf-m-collapsed"
           id="page-sidebar"
         >
           <nav
@@ -211,7 +211,7 @@ Object {
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+                class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
                 data-ouia-component-id="OUIA-Generated-NavExpandable-1"
                 data-ouia-component-type="PF5/NavExpandable"
                 data-ouia-safe="true"
@@ -332,7 +332,7 @@ Object {
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+                class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
                 data-ouia-component-id="OUIA-Generated-NavExpandable-2"
                 data-ouia-component-type="PF5/NavExpandable"
                 data-ouia-safe="true"
@@ -421,7 +421,7 @@ Object {
                   />
                 </div>
                 <div
-                  class="pf-v5-c-drawer__panel pf-v5-m-resizable"
+                  class="pf-v5-c-drawer__panel pf-m-resizable"
                   hidden=""
                   id="page-drawer-content"
                   style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px;"
@@ -435,21 +435,21 @@ Object {
     <div>
       <ul
         aria-live="polite"
-        class="pf-v5-c-alert-group pf-v5-m-toast"
+        class="pf-v5-c-alert-group pf-m-toast"
         role="list"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="pf-v5-c-page pf-v5-m-resize-observer pf-v5-m-breakpoint-default pf-v5-m-height-breakpoint-sm"
+      class="pf-v5-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm"
     >
       <div
         class="pf-v5-c-skip-to-content"
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-v5-m-primary"
+          class="pf-v5-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
@@ -471,7 +471,7 @@ Object {
               aria-disabled="false"
               aria-expanded="false"
               aria-label="Global navigation"
-              class="pf-v5-c-button pf-v5-m-plain"
+              class="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
               data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
@@ -507,7 +507,7 @@ Object {
           class="pf-v5-c-page__header-tools"
         >
           <div
-            class="pf-v5-c-page__header-tools-group pf-v5-m-hidden"
+            class="pf-v5-c-page__header-tools-group pf-m-hidden"
           >
             <div
               class="pf-v5-c-page__header-tools-item"
@@ -515,7 +515,7 @@ Object {
               <button
                 aria-disabled="false"
                 aria-label="about button"
-                class="pf-v5-c-button pf-v5-m-plain"
+                class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="OUIA-Generated-Button-plain-2"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
@@ -533,7 +533,7 @@ Object {
               class="pf-v5-c-page__header-tools-item"
             >
               <div
-                class="pf-v5-c-dropdown pf-v5-m-align-right"
+                class="pf-v5-c-dropdown pf-m-align-right"
                 data-ouia-component-id="OUIA-Generated-Dropdown-1"
                 data-ouia-component-type="PF5/Dropdown"
                 data-ouia-safe="true"
@@ -542,7 +542,7 @@ Object {
                   aria-expanded="false"
                   aria-haspopup="true"
                   aria-label="Actions"
-                  class="pf-v5-c-dropdown__toggle pf-v5-m-plain"
+                  class="pf-v5-c-dropdown__toggle pf-m-plain"
                   id="pf-dropdown-toggle-id-0"
                   type="button"
                 >
@@ -567,7 +567,7 @@ Object {
       </header>
       <div
         aria-hidden="true"
-        class="pf-v5-c-page__sidebar pf-v5-m-collapsed"
+        class="pf-v5-c-page__sidebar pf-m-collapsed"
         id="page-sidebar"
       >
         <nav
@@ -647,7 +647,7 @@ Object {
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+              class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
               data-ouia-component-id="OUIA-Generated-NavExpandable-1"
               data-ouia-component-type="PF5/NavExpandable"
               data-ouia-safe="true"
@@ -768,7 +768,7 @@ Object {
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+              class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
               data-ouia-component-id="OUIA-Generated-NavExpandable-2"
               data-ouia-component-type="PF5/NavExpandable"
               data-ouia-safe="true"
@@ -857,7 +857,7 @@ Object {
                 />
               </div>
               <div
-                class="pf-v5-c-drawer__panel pf-v5-m-resizable"
+                class="pf-v5-c-drawer__panel pf-m-resizable"
                 hidden=""
                 id="page-drawer-content"
                 style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px;"
diff --git a/client/src/app/layout/SidebarApp/SidebarApp.tsx b/client/src/app/layout/SidebarApp/SidebarApp.tsx
index 5c0983c1c..5b275f6c1 100644
--- a/client/src/app/layout/SidebarApp/SidebarApp.tsx
+++ b/client/src/app/layout/SidebarApp/SidebarApp.tsx
@@ -109,7 +109,7 @@ export const SidebarApp: React.FC = () => {
             <NavItem>
               <NavLink
                 to={Paths.applications + search}
-                activeClassName="pf-v5-m-current"
+                activeClassName="pf-m-current"
               >
                 {t("sidebar.applicationInventory")}
               </NavLink>
@@ -117,13 +117,13 @@ export const SidebarApp: React.FC = () => {
             <NavItem>
               <NavLink
                 to={Paths.reports + search}
-                activeClassName="pf-v5-m-current"
+                activeClassName="pf-m-current"
               >
                 {t("sidebar.reports")}
               </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink to={Paths.controls} activeClassName="pf-v5-m-current">
+              <NavLink to={Paths.controls} activeClassName="pf-m-current">
                 {t("sidebar.controls")}
               </NavLink>
             </NavItem>
@@ -131,7 +131,7 @@ export const SidebarApp: React.FC = () => {
               <NavItem>
                 <NavLink
                   to={Paths.migrationWaves}
-                  activeClassName="pf-v5-m-current"
+                  activeClassName="pf-m-current"
                 >
                   {t("sidebar.migrationWaves")}
                 </NavLink>
@@ -140,14 +140,14 @@ export const SidebarApp: React.FC = () => {
             {FEATURES_ENABLED.dynamicReports ? (
               <>
                 <NavItem>
-                  <NavLink to={Paths.issues} activeClassName="pf-v5-m-current">
+                  <NavLink to={Paths.issues} activeClassName="pf-m-current">
                     {t("sidebar.issues")}
                   </NavLink>
                 </NavItem>
                 <NavItem>
                   <NavLink
                     to={Paths.dependencies}
-                    activeClassName="pf-v5-m-current"
+                    activeClassName="pf-m-current"
                   >
                     {t("sidebar.dependencies")}
                   </NavLink>
@@ -158,12 +158,12 @@ export const SidebarApp: React.FC = () => {
         ) : (
           <NavList title="Admin">
             <NavItem>
-              <NavLink to={Paths.general} activeClassName="pf-v5-m-current">
+              <NavLink to={Paths.general} activeClassName="pf-m-current">
                 {t("terms.general")}
               </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink to={Paths.identities} activeClassName="pf-v5-m-current">
+              <NavLink to={Paths.identities} activeClassName="pf-m-current">
                 {t("terms.credentials")}
               </NavLink>
             </NavItem>
@@ -176,7 +176,7 @@ export const SidebarApp: React.FC = () => {
               <NavItem>
                 <NavLink
                   to={Paths.repositoriesGit}
-                  activeClassName="pf-v5-m-current"
+                  activeClassName="pf-m-current"
                 >
                   Git
                 </NavLink>
@@ -184,7 +184,7 @@ export const SidebarApp: React.FC = () => {
               <NavItem>
                 <NavLink
                   to={Paths.repositoriesSvn}
-                  activeClassName="pf-v5-m-current"
+                  activeClassName="pf-m-current"
                 >
                   Subversion
                 </NavLink>
@@ -192,21 +192,21 @@ export const SidebarApp: React.FC = () => {
               <NavItem>
                 <NavLink
                   to={Paths.repositoriesMvn}
-                  activeClassName="pf-v5-m-current"
+                  activeClassName="pf-m-current"
                 >
                   Maven
                 </NavLink>
               </NavItem>
             </NavExpandable>
             <NavItem>
-              <NavLink to={Paths.proxies} activeClassName="pf-v5-m-current">
+              <NavLink to={Paths.proxies} activeClassName="pf-m-current">
                 Proxy
               </NavLink>
             </NavItem>
             <NavItem>
               <NavLink
                 to={Paths.migrationTargets}
-                activeClassName="pf-v5-m-current"
+                activeClassName="pf-m-current"
               >
                 Custom migration targets
               </NavLink>
@@ -219,7 +219,7 @@ export const SidebarApp: React.FC = () => {
                 isExpanded
               >
                 <NavItem>
-                  <NavLink to={Paths.jira} activeClassName="pf-v5-m-current">
+                  <NavLink to={Paths.jira} activeClassName="pf-m-current">
                     Jira
                   </NavLink>
                 </NavItem>
diff --git a/client/src/app/layout/SidebarApp/tests/__snapshots__/SidebarApp.test.tsx.snap b/client/src/app/layout/SidebarApp/tests/__snapshots__/SidebarApp.test.tsx.snap
index dcf93b0f7..0aea94bac 100644
--- a/client/src/app/layout/SidebarApp/tests/__snapshots__/SidebarApp.test.tsx.snap
+++ b/client/src/app/layout/SidebarApp/tests/__snapshots__/SidebarApp.test.tsx.snap
@@ -7,7 +7,7 @@ Object {
     <div>
       <div
         aria-hidden="false"
-        class="pf-v5-c-page__sidebar pf-v5-m-expanded"
+        class="pf-v5-c-page__sidebar pf-m-expanded"
         id="page-sidebar"
       >
         <nav
@@ -85,7 +85,7 @@ Object {
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+              class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
               data-ouia-component-id="OUIA-Generated-NavExpandable-1"
               data-ouia-component-type="PF5/NavExpandable"
               data-ouia-safe="true"
@@ -200,7 +200,7 @@ Object {
               </a>
             </li>
             <li
-              class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+              class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
               data-ouia-component-id="OUIA-Generated-NavExpandable-2"
               data-ouia-component-type="PF5/NavExpandable"
               data-ouia-safe="true"
@@ -270,7 +270,7 @@ Object {
   "container": <div>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-v5-m-expanded"
+      class="pf-v5-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <nav
@@ -348,7 +348,7 @@ Object {
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
             data-ouia-component-id="OUIA-Generated-NavExpandable-1"
             data-ouia-component-type="PF5/NavExpandable"
             data-ouia-safe="true"
@@ -463,7 +463,7 @@ Object {
             </a>
           </li>
           <li
-            class="pf-v5-c-nav__item pf-v5-m-expandable pf-v5-m-expanded"
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded"
             data-ouia-component-id="OUIA-Generated-NavExpandable-2"
             data-ouia-component-type="PF5/NavExpandable"
             data-ouia-safe="true"
diff --git a/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx b/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx
index 3f4ec16f1..a94fe6a07 100644
--- a/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx
+++ b/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx
@@ -187,7 +187,7 @@ export const CustomRules: React.FC<CustomRulesProps> = (props) => {
         },
         {
           title: (
-            <div className="pf-v5-c-inline-edit__action pf-v5-m-enable-editable">
+            <div className="pf-v5-c-inline-edit__action pf-m-enable-editable">
               <Button
                 id="remove-rule-button"
                 type="button"
@@ -268,7 +268,7 @@ export const CustomRules: React.FC<CustomRulesProps> = (props) => {
         <>
           <div className="line">
             <Toolbar
-              className="pf-v5-m-toggle-group-container"
+              className="pf-m-toggle-group-container"
               collapseListedFiltersBreakpoint="xl"
               clearAllFilters={handleOnClearAllFilters}
               clearFiltersButtonText="clear Filter"
diff --git a/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx b/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
index 5f14b96f2..6d391a432 100644
--- a/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
+++ b/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
@@ -317,20 +317,18 @@ export const ApplicationsTableAnalyze: React.FC = () => {
         },
         {
           title: (
-            <div className="pf-v5-c-inline-edit__action pf-v5-m-enable-editable">
-              <RBAC
-                allowedPermissions={applicationsWriteScopes}
-                rbacType={RBAC_TYPE.Scope}
+            <RBAC
+              allowedPermissions={applicationsWriteScopes}
+              rbacType={RBAC_TYPE.Scope}
+            >
+              <Button
+                type="button"
+                variant="plain"
+                onClick={() => openUpdateApplicationModal(item)}
               >
-                <Button
-                  type="button"
-                  variant="plain"
-                  onClick={() => openUpdateApplicationModal(item)}
-                >
-                  <PencilAltIcon />
-                </Button>
-              </RBAC>
-            </div>
+                <PencilAltIcon />
+              </Button>
+            </RBAC>
           ),
         },
       ],
diff --git a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
index 6b0a53a49..520976784 100644
--- a/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
+++ b/client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
@@ -377,20 +377,18 @@ export const ApplicationsTable: React.FC = () => {
         },
         {
           title: (
-            <div className="pf-v5-c-inline-edit__action pf-v5-m-enable-editable">
-              <RBAC
-                allowedPermissions={applicationsWriteScopes}
-                rbacType={RBAC_TYPE.Scope}
+            <RBAC
+              allowedPermissions={applicationsWriteScopes}
+              rbacType={RBAC_TYPE.Scope}
+            >
+              <Button
+                type="button"
+                variant="plain"
+                onClick={() => openUpdateApplicationModal(item)}
               >
-                <Button
-                  type="button"
-                  variant="plain"
-                  onClick={() => openUpdateApplicationModal(item)}
-                >
-                  <PencilAltIcon />
-                </Button>
-              </RBAC>
-            </div>
+                <PencilAltIcon />
+              </Button>
+            </RBAC>
           ),
         },
       ],
diff --git a/client/src/app/pages/applications/components/application-form/application-form.tsx b/client/src/app/pages/applications/components/application-form/application-form.tsx
index ad5e96519..b42cac532 100644
--- a/client/src/app/pages/applications/components/application-form/application-form.tsx
+++ b/client/src/app/pages/applications/components/application-form/application-form.tsx
@@ -658,7 +658,7 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
                 bodyContent={t("message.binaryPackaging")}
                 className="popover"
               >
-                <span className="pf-v5-c-icon pf-v5-m-info">
+                <span className="pf-v5-c-icon pf-m-info">
                   <QuestionCircleIcon />
                 </span>
               </Popover>
diff --git a/client/src/app/pages/external/jira/tracker-form.tsx b/client/src/app/pages/external/jira/tracker-form.tsx
index db090f22a..26d1c862f 100644
--- a/client/src/app/pages/external/jira/tracker-form.tsx
+++ b/client/src/app/pages/external/jira/tracker-form.tsx
@@ -297,7 +297,7 @@ export const TrackerForm: React.FC<TrackerFormProps> = ({
               bodyContent={t("message.insecureTracker")}
               className="popover"
             >
-              <span className={`${spacing.mlSm} pf-v5-c-icon pf-v5-m-info`}>
+              <span className={`${spacing.mlSm} pf-v5-c-icon pf-m-info`}>
                 <QuestionCircleIcon />
               </span>
             </Popover>
diff --git a/client/src/app/shared/components/app-table-with-controls/app-table-with-controls.tsx b/client/src/app/shared/components/app-table-with-controls/app-table-with-controls.tsx
index ff796869a..1740762e8 100644
--- a/client/src/app/shared/components/app-table-with-controls/app-table-with-controls.tsx
+++ b/client/src/app/shared/components/app-table-with-controls/app-table-with-controls.tsx
@@ -45,7 +45,7 @@ export const AppTableWithControls: React.FC<IAppTableWithControlsProps> = ({
       }}
     >
       <Toolbar
-        className="pf-v5-m-toggle-group-container"
+        className="pf-m-toggle-group-container"
         collapseListedFiltersBreakpoint="xl"
         clearAllFilters={toolbarClearAllFilters}
         clearFiltersButtonText={t("actions.clearAllFilters")}
diff --git a/client/src/app/shared/components/horizontal-nav/horizontal-nav.tsx b/client/src/app/shared/components/horizontal-nav/horizontal-nav.tsx
index 3e50bf282..3c58805e6 100644
--- a/client/src/app/shared/components/horizontal-nav/horizontal-nav.tsx
+++ b/client/src/app/shared/components/horizontal-nav/horizontal-nav.tsx
@@ -14,7 +14,7 @@ export const HorizontalNav: React.FC<HorizontalNavProps> = ({ navItems }) => {
             key={index}
             to={f.path}
             className="pf-v5-c-tabs__item"
-            activeClassName="pf-v5-m-current"
+            activeClassName="pf-m-current"
           >
             <li key={index} className="pf-v5-c-tabs__item">
               <button className="pf-v5-c-tabs__link">