@rh-support/troubleshoot 2.7.0 → 2.7.10

package/lib/esm/scss/_main.scss

@@ -81,6 +81,17 @@ div.support-grid-case-details.support-case {
                     }
                 }
             }
+            .grid-aside-content-inner-div {
+                margin: 0px !important;
+            }
+
+            .card-heading {
+                margin-bottom: 0px;
+            }
+
+            #case-details-top-recommendations-pagination-bottom-pagination {
+                justify-content: space-between;
+            }
         }
     }
 
@@ -168,10 +179,12 @@ div.support-grid-case-details.support-case {
             min-height: 75vh;
             width: 100%;
             background-color: #f0f0f0;
+            border-radius: 0 0 0 16px;
 
             .grid-main-section {
                 padding: 1rem;
                 background-color: #fff;
+                border-radius: 0 0 0 16px;
 
                 .case-overview-header {
                     padding: 0.5rem;
@@ -193,13 +206,13 @@ div.support-grid-case-details.support-case {
                             }
                         }
 
-                        .pf-v5-c-switch {
+                        .pf-v6-c-switch {
                             display: -ms-flexbox;
                             display: flex;
                             align-items: center;
                         }
 
-                        .pf-v5-c-switch__label {
+                        .pf-v6-c-switch__label {
                             padding-left: 0.6rem;
                             font-size: 15px;
 
@@ -224,7 +237,7 @@ div.support-grid-case-details.support-case {
                             font-size: initial;
                         }
 
-                        .pf-v5-c-button {
+                        .pf-v6-c-button {
                             font-size: 15px;
                             margin-left: auto;
 
@@ -258,6 +271,7 @@ div.support-grid-case-details.support-case {
                     justify-content: space-between;
                     -ms-flex-wrap: wrap;
                     flex-wrap: wrap;
+                    border-radius: 8px;
 
                     & > * {
                         margin: 9px;
@@ -303,6 +317,7 @@ div.support-grid-case-details.support-case {
                 }
 
                 .case-overview-secondary {
+                    border-radius: 8px;
                     .form-group {
                         margin-bottom: 0;
                     }
@@ -313,7 +328,7 @@ div.support-grid-case-details.support-case {
                 }
 
                 @media (min-width: 768px) {
-                    padding: 2rem 1.8rem;
+                    padding: 1rem 1.8rem;
 
                     .case-overview-header {
                         padding: 0;
@@ -326,7 +341,7 @@ div.support-grid-case-details.support-case {
                             -ms-flex-pack: justify;
                             justify-content: space-between;
 
-                            .pf-v5-c-switch {
+                            .pf-v6-c-switch {
                                 margin-left: auto;
                             }
 
@@ -398,16 +413,16 @@ div.support-grid-case-details.support-case {
             }
 
             .sidebar-header {
-                background-color: #e0e0e0;
-                border-top: 1px solid #ccc;
-                border-bottom: 1px solid #ccc;
+                background-color: var(pf-t--color--white);
+                border-bottom: 1px solid var(--pf-t--global--border--color--100);
 
                 button {
                     display: -ms-flexbox;
                     display: flex;
                     align-items: center;
                     width: 100%;
-                    padding: 1.8rem 1.5rem;
+                    padding: 0.5rem;
+                    margin-bottom: 16px;
                     font-weight: 500;
 
                     span {
@@ -427,16 +442,14 @@ div.support-grid-case-details.support-case {
 
             &.sidebar-collapsed {
                 button:first-of-type {
-                    margin-bottom: 0.4rem;
-                    padding: 1.8rem 1.5rem;
-                    background-color: #dedede;
-                    border-top: 1px solid #ccc;
-                    border-bottom: 1px solid #ccc;
+                    padding: 0.5rem;
+                    margin-bottom: 1rem;
                 }
 
                 button.sidebar-section-toggle-btn {
-                    padding: 1.6rem 1.5rem;
+                    padding: 0.5rem;
                     color: #494c50;
+                    margin-bottom: 1rem;
 
                     &:hover,
                     &:focus {
@@ -466,7 +479,7 @@ div.support-grid-case-details.support-case {
             }
         }
 
-        .pf-v5-c-expandable-section__toggle {
+        .pf-v6-c-expandable-section__toggle {
             width: 100%;
             text-align: left;
             background-color: #f0f0f0;
@@ -476,8 +489,8 @@ div.support-grid-case-details.support-case {
         }
 
         button:not(.close),
-        button:not(.pf-v5-c-expandable-section__toggle),
-        .pf-v5-c-button,
+        button:not(.pf-v6-c-expandable-section__toggle),
+        .pf-v6-c-button,
         .btn.btn-app {
             font-size: 14px;
         }
@@ -514,8 +527,6 @@ div.support-grid-case-details.support-case {
             padding: 0.6rem 1rem;
             font-size: 15px;
             font-weight: 900;
-            background-color: #676b6f; //#025C76
-            border: 1px solid #676b6f;
             color: #fff;
 
             a {
@@ -531,12 +542,15 @@ div.support-grid-case-details.support-case {
 
         .card-body {
             padding: 1.1rem;
-            border: 1px solid #ededed;
+            border-bottom: 1px solid var(--pf-t--global--border--color--100);
+            border-left: 1px solid var(--pf-t--global--border--color--100);
+            border-right: 1px solid var(--pf-t--global--border--color--100);
+            border-radius: 0 0 4px 4px;
 
             & > *:last-child {
                 margin-bottom: 0;
 
-                &.pf-v5-c-pagination {
+                &.pf-v6-c-pagination {
                     -ms-flex-pack: justify;
                     justify-content: space-between;
                 }
@@ -566,10 +580,10 @@ div.support-grid-case-details.support-case {
                 }
             }
 
-            .pf-v5-c-pagination {
+            .pf-v6-c-pagination {
                 padding: 0.2rem;
 
-                .pf-v5-c-pagination-nav {
+                .pf-v6-c-pagination-nav {
                     align-items: center;
                 }
             }
@@ -591,6 +605,15 @@ div.support-grid-case-details.support-case {
     }
 }
 
+.post-comment-reply-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
+    background: var(--pf-t--global--background--color--secondary--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+}
+
 .text-danger {
     color: #c9190b !important;
 }
@@ -642,9 +665,13 @@ mark {
 }
 
 .list-icons .recommendation-header .list-icon {
-    margin-left: -2.5rem;
-    padding-top: 4px;
-    padding-bottom: 0;
+    padding-top: var(--pf-t--global--spacer--xs);
+    padding-bottom: var(--pf-t--global--spacer--xs);
+    margin-left: -2rem;
+}
+
+.list-icons li:last-child {
+    margin-bottom: 0;
 }
 
 // pinning feature - can't be overly specific here
@@ -653,18 +680,20 @@ mark {
     font-weight: 600;
 
     .pinned-resource {
-        color: var(--pf-v5-global--primary-color--100);
+        color: var(--pf-t--global--text--color--link--default);
     }
 
-    button:hover[title='Link'] {
+    button:hover[title='Link'] svg {
         color: #6ca100;
     }
 
     button[title='Unlink'] {
-        color: #6ca100;
+        svg {
+            color: #6ca100;
+        }
 
-        &:hover {
-            color: var(--pf-v5-global--danger-color--100);
+        &:hover svg {
+            color: var(pf-t--global--icon--color--status--danger--default);
         }
     }
 }
@@ -679,13 +708,13 @@ mark {
     margin-bottom: 0;
 }
 
-#se-solution-engine .pf-v5-c-alert.ea-rule-alert {
+#se-solution-engine .pf-v6-c-alert.ea-rule-alert {
     padding: 0px;
     box-shadow: 0px 0px;
     border: 0px;
 }
 
-div.pf-v5-c-alert.ea-rule-alert > div.pf-v5-c-alert__description > p {
+div.pf-v6-c-alert.ea-rule-alert > div.pf-v6-c-alert__description > p {
     margin-bottom: 0;
 }
 
@@ -699,6 +728,20 @@ div.pf-v5-c-alert.ea-rule-alert > div.pf-v5-c-alert__description > p {
     overflow: visible;
 }
 
+#case-details-aside-solutions .pf-v6-c-accordion__expandable-content-body {
+    padding: 0;
+}
+
+#case-details-aside-content {
+    .card {
+        border-radius: 1px;
+    }
+
+    .card-heading {
+        color: var(pf-t--color--white);
+    }
+}
+
 .anchor-tag-link-pl {
     padding-left: 0px;
     font-size: 14px;
@@ -727,7 +770,7 @@ div.defaultViewCheckbox {
     grid-gap: 0px;
 }
 
-div.defaultViewCheckbox label.pf-v5-c-check__label {
+div.defaultViewCheckbox label.pf-v6-c-check__label {
     line-height: 1rem;
 }
 
@@ -750,19 +793,43 @@ p.pref-case-popover-text {
     }
 }
 
+.support-types-card {
+    border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
+
+    &.pf-m-selected {
+        border: var(--pf-t--global--border--width--box--clicked) solid var(--pf-t--global--border--color--clicked);
+    }
+}
+
 .support-types-invalid {
-    border: 1px solid var(--pf-v5-global--danger-color--100) !important;
+    border: 1px solid #c9190b;
 }
 
 .submit-case-header-container {
-    padding: 25px 0px 25px 25px;
-    background-color: var(--pf-v5-global--disabled-color--300);
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: var(--global-border-radius-medium, 16px);
+    background: var(--chart-global-fill-color-100, #f2f2f2);
+}
 
-    .submit-page-title {
-        display: flex;
-        flex-direction: row;
-        color: var(--pf-v5-global--success-color--100);
-    }
+.view-case-button {
+    color: #ffffff !important;
+}
+.submit-page-title {
+    display: flex !important;
+    align-items: center !important;
+}
+.submitCase-action-list {
+    display: inline-flex;
+    padding: 24px 0px;
+    align-items: center;
+    gap: 16px;
+}
+.submit-page-title .pf-v6-c-content h1 {
+    margin: 0 !important;
+    display: inline !important;
 }
 
 .rules-modal-items > h2 {
@@ -777,7 +844,7 @@ div.case-details-ref-number {
     }
     margin-bottom: 0 !important;
 }
-div.submit-case-header-container > p.kicker.kicker-sm.pf-v5-u-mb-sm > a.case-link-disabled {
+div.submit-case-header-container > p.kicker.kicker-sm.pf-v6-u-mb-sm > a.case-link-disabled {
     pointer-events: none;
     a:link {
         color: #151515 !important;
@@ -787,7 +854,7 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-v5-u-mb-sm > a.case-lin
     }
 }
 
-.pf-v5-c-skeleton {
+.pf-v6-c-skeleton {
     background-color: #f5f5f5;
     position: absolute;
 }
@@ -795,52 +862,39 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-v5-u-mb-sm > a.case-lin
 .pf-m-circle {
     border-radius: 50%;
 }
-.pf-v5-c-wizard__nav-link {
+.pf-v6-c-wizard__nav-link {
     font-size: 15px;
 }
-.pf-v5-c-wizard__nav-link.pf-m-current {
-    font-weight: 600;
-}
-
-.pf-v5-c-wizard__nav ol {
-    margin-top: 15px;
-    margin-left: 10px;
+.pf-v6-c-wizard__nav-link-main {
+    width: 100%;
 }
 
-.pf-v5-c-wizard__nav ol li {
-    margin-right: 0;
-    margin-bottom: 2.5rem;
-    padding: 0;
+.pf-v6-c-wizard__toggle-num,
+.pf-v6-c-wizard__nav-link::before {
+    height: 24px;
+    width: 24px;
+    flex-shrink: 0;
 }
 
-.pf-v5-c-wizard__footer {
+.pf-v6-c-wizard__footer {
     display: flex !important;
     align-items: center !important;
     position: sticky;
     bottom: 0px;
     border-top: 1px solid #d9d9d9;
     padding: 10px;
+    gap: 10px;
 
     /* Override buttons to match PF */
     .btn.btn-app,
     .btn-app[role='button'] {
         padding: 0.375rem 1rem;
-        border-radius: 4px;
+        border-radius: var(--global-border-radius-pill, 999px);
+        border: var(--global-border-width-regular, 1px) solid var(--global-border-color-brand-default, #06c);
     }
 }
 
-.pf-v5-c-wizard__footer::before {
-    content: '';
-    position: absolute;
-    top: -45px;
-    left: 0;
-    width: 100%;
-    bottom: 64px;
-    z-index: -1;
-    background: linear-gradient(to top, white, transparent);
-}
-
-.pf-v5-c-wizard__main {
+.pf-v6-c-wizard__main {
     padding: 0.8rem;
 }
 .wizard-aside-content {
@@ -848,13 +902,13 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-v5-u-mb-sm > a.case-lin
     position: sticky;
 }
 
-li.pf-v5-c-wizard__nav-item button.pf-m-disabled::before {
+li.pf-v6-c-wizard__nav-item button.pf-m-disabled::before {
     background-color: #f0f0f0;
 }
 
 .grid-wizard-aside-content {
-    background-color: #e7e7e7;
-    padding: 1rem;
+    border-left: 1px solid #c7c7c7;
+    padding: 1.5rem;
 }
 
 @media (max-width: 992px) {
@@ -881,11 +935,11 @@ li.pf-v5-c-wizard__nav-item button.pf-m-disabled::before {
     margin-left: auto !important;
 }
 
-svg.pf-v5-c-spinner.pf-m-md.export-csv-loader {
+svg.pf-v6-c-spinner.pf-m-md.export-csv-loader {
     --pf-v5-c-spinner--Color: var(--pf-v5-global--Color--200) !important;
 }
 
-svg.pf-v5-u-ml-xs.icon-size {
+svg.pf-v6-u-ml-xs.icon-size {
     width: 14px;
 }
 
@@ -929,21 +983,24 @@ svg.pf-v5-u-ml-xs.icon-size {
 }
 
 #case-details-handpicked-recommendations {
+    margin: 0;
+
     li {
         padding: 0;
     }
+
+    li:first-child {
+        margin-top: 0.5rem;
+    }
+
     li:not(:first-child) {
         .handpicked-resource {
-            margin-top: var(--pf-v5-global--spacer--lg);
+            margin-top: var(--pf-t--global--spacer--lg);
         }
     }
 }
 
 .handpicked-resource {
-    button {
-        padding: 0;
-        display: flex;
-    }
     .eval-icons span {
         color: var(--pf-v5-global--primary-color--200);
     }
@@ -956,36 +1013,61 @@ svg.pf-v5-u-ml-xs.icon-size {
     padding: 0.2rem;
 }
 
-#rh-support #rh-support-main .card.card-support .card-heading.case-detail-panel-card-heading {
-    background-color: var(--pf-v5-global--palette--black-600);
-    border: 1px solid var(--pf-v5-global--palette--black-600);
+#case-details-pinned-recommendations {
+    margin-bottom: 0;
+}
+
+.card-body-wrapper {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 0px 0px var(--global-border-radius-medium, 16px) var(--global-border-radius-medium, 16px);
+    border-right: 1px solid var(--global-border-color-default, #c7c7c7);
+    border-bottom: 1px solid var(--global-border-color-default, #c7c7c7);
+    border-left: 1px solid var(--global-border-color-default, #c7c7c7);
+    background: #fff;
+}
+
+.card-body-wrapper {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    border-radius: 0px 0px var(--global-border-radius-medium, 16px) var(--global-border-radius-medium, 16px);
+    border-right: 1px solid var(--global-border-color-default, #c7c7c7);
+    border-bottom: 1px solid var(--global-border-color-default, #c7c7c7);
+    border-left: 1px solid var(--global-border-color-default, #c7c7c7);
+    background: #fff;
 }
 
 .form-group {
     span.form-instructions-bold {
         font-weight: 600;
     }
-    a.pf-v5-c-button.pf-m-link.btn-choose-to-share {
-        --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
-        --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
-        --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
-        --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
+    a.pf-v6-c-button.pf-m-link.btn-choose-to-share {
+        --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
     }
 }
 
 .archived-clusters-checkbox {
-    .pf-v5-c-check__label {
+    .pf-v6-c-check__label {
         margin-bottom: 0;
         font-size: 16px;
     }
 }
 
 .openshift-cluster-id {
-    .pf-v5-c-select__menu {
+    .pf-v6-c-select__menu {
         padding-top: 5px;
         padding-bottom: 5px;
     }
-    .pf-v5-c-divider {
+    .pf-v6-c-divider {
         margin: 5px 0px !important;
     }
 }
@@ -993,7 +1075,7 @@ svg.pf-v5-u-ml-xs.icon-size {
 #rh-support {
     #rh-support-manage {
         .grid-main.manage {
-            .pf-v5-c-tabs__item {
+            .pf-v6-c-tabs__item {
                 a {
                     color: var(--pf-v5-global--palette--black-700);
                 }
@@ -1011,7 +1093,7 @@ svg.pf-v5-u-ml-xs.icon-size {
 .case-internal-status-selector-text,
 .get-support-severity-modal-text,
 .case-type-selector-text {
-    .pf-v5-c-menu-toggle__text {
+    .pf-v6-c-menu-toggle__text {
         width: 100% !important;
     }
 }
@@ -1025,7 +1107,7 @@ svg.pf-v5-u-ml-xs.icon-size {
         margin: 0 0 0 0;
     }
 
-    .pf-v5-c-check {
+    .pf-v6-c-check {
         padding-top: 2px;
         &__label {
             margin-top: 2px;
@@ -1038,18 +1120,18 @@ svg.pf-v5-u-ml-xs.icon-size {
         margin: 0;
         align-self: stretch;
     }
-    .pf-v5-c-clipboard-copy {
+    .pf-v6-c-clipboard-copy {
         flex: 1;
     }
 }
 .newFeatureModal {
     #new-feature-modal-checkbox {
-        margin-right: var(--pf-v5-global--spacer--xs);
+        margin-right: var(--pf-t--global--spacer--xs);
     }
 }
 
 .kt-question-help-icon {
-    font-size: var(--pf-v5-global--icon--FontSize--md);
+    font-size: var(--pf-t--global--icon--size--font--md);
 }
 
 .recommendation-box-tips {
@@ -1064,28 +1146,49 @@ svg.pf-v5-u-ml-xs.icon-size {
 
 .review-form {
     background-color: #e0e0e0 !important;
+    border-radius: 8px;
+}
+
+.ai-label-text {
+    color: #000000;
+    display: flex;
+    gap: 4px;
+}
+
+.loading-text {
+    color: #000000;
 }
 
 #DeepPurpleColorAILabel {
-    background-color: #6600cc !important; //deep purple override because not available in PF yet
+    display: inline-flex;
     position: relative;
-    display: inline-block;
     z-index: 1;
+    margin: 1px;
+    line-height: normal;
+    font-size: 14px;
+    height: 29px;
+    padding: 0 12px;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--Radius---pf-v5-global-BorderRadius--lg, 18px);
+    border: 1px solid var(--Purple---pf-v5-global--palette--purple-100, #cbc1ff);
+    background: var(--Purple---pf-v5-global--palette--purple-50, #f2f0fc);
 }
-#DeepPurpleColorAILabel .pf-v5-c-label__content {
+
+#DeepPurpleColorAILabel .pf-v6-c-label__content {
     color: #ffffff !important;
 }
 
 #DeepPurpleColorAILabel .pf-v5-svg {
-    margin: 0 10px 0 5px;
+    margin: 0 10px 0 5px !important;
 }
 
-#DeepPurpleColorAILabel .pf-v5-c-spinner__path {
-    stroke: white;
+#DeepPurpleColorAILabel .pf-v6-c-spinner__path {
+    stroke: black !important;
 }
 
-#DeepPurpleColorAILabel svg.pf-v5-c-spinner {
-    margin: 0 10px 0 5px;
+#DeepPurpleColorAILabel svg.pf-v6-c-spinner {
+    margin: 0 10px 0 5px !important;
 }
 
 .label-container-icon {
@@ -1095,14 +1198,25 @@ svg.pf-v5-u-ml-xs.icon-size {
     padding: 1px;
     border-radius: 20px;
     height: 32px;
+    margin-bottom: 18px;
 }
 
 .single-select-toggle-text {
-    span.pf-v5-c-menu-toggle__text {
+    span.pf-v6-c-menu-toggle__text {
         width: 100% !important;
     }
 }
 
+.no-cluster-id-reason-container {
+    .d-none {
+        display: none;
+    }
+
+    .text-input-wrapper {
+        width: 100%;
+    }
+}
+
 .gradient.label-container-icon::before {
     content: '';
     display: block;
@@ -1121,16 +1235,6 @@ svg.pf-v5-u-ml-xs.icon-size {
     transform-origin: top center;
 }
 
-#DeepPurpleColorAILabel {
-    background-color: #5e40be !important;
-    position: relative;
-    display: inline-block;
-    z-index: 1;
-    margin: 1px;
-    line-height: normal;
-    font-size: 14px;
-}
-
 @keyframes rotate {
     from {
         transform: rotate(0deg);
@@ -1159,3 +1263,77 @@ svg.pf-v5-u-ml-xs.icon-size {
 .card-header-bg {
     background-color: #006060 !important;
 }
+
+.mirrored {
+    transform: scaleX(-1);
+}
+
+.case-details-main {
+    gap: normal;
+
+    .pf-v6-c-expandable-section__content {
+        border-radius: 0 0 4px 4px;
+    }
+
+    .pf-v6-c-expandable-section__toggle {
+        padding: 0 !important;
+        border-radius: 4px 4px 0 0;
+        margin-bottom: -8px;
+
+        button {
+            display: flex;
+            justify-content: flex-start;
+            width: 100%;
+            color: var(--pf-t--color--black);
+            font-weight: 600;
+            padding: 16px;
+            padding: 1rem;
+        }
+    }
+}
+
+#rha-action-plan,
+#rha-case-notes {
+    min-height: 5rem;
+    resize: none !important;
+}
+
+.pf-v6-c-tab-content[aria-label='Private Notes'],
+.pf-v6-c-tab-content[aria-label='History'] {
+    padding: var(--pf-t--global--spacer--md);
+    background-color: var(--pf-t--color--white);
+    border-radius: 4px;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+#file-uploader-title {
+    margin-bottom: 0;
+}
+
+.file-upload-body {
+    padding-top: 0;
+}
+
+.article-recommendations-card h3 {
+    margin-bottom: 0;
+}
+
+.postcomment-submit:disabled {
+    color: var(--pf-v6-c-button--disabled--Color);
+}
+
+.remote-session-button:disabled {
+    color: var(--pf-v6-c-button--disabled--Color);
+}
+
+.send-notifications-add:disabled {
+    color: var(--pf-v6-c-button--disabled--Color) !important;
+}
+
+.aisure-message-card {
+    border-radius: var(--global-border-radius-medium, 16px);
+    background: #f4f4f4;
+}