@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.1

package/lib/esm/scss/_main.scss

@@ -35,7 +35,7 @@ div.support-grid-case-details.support-case {
 
     .grid-aside {
         grid-area: aside;
-        background-color: #e7e7e7;
+        background-color: var(--pf-v5-global--palette--black-200);
         padding: 1rem;
         display: none;
 
@@ -193,13 +193,13 @@ div.support-grid-case-details.support-case {
                             }
                         }
 
-                        .pf-c-switch {
+                        .pf-v5-c-switch {
                             display: -ms-flexbox;
                             display: flex;
                             align-items: center;
                         }
 
-                        .pf-c-switch__label {
+                        .pf-v5-c-switch__label {
                             padding-left: 0.6rem;
                             font-size: 15px;
 
@@ -224,7 +224,7 @@ div.support-grid-case-details.support-case {
                             font-size: initial;
                         }
 
-                        .pf-c-button {
+                        .pf-v5-c-button {
                             font-size: 15px;
                             margin-left: auto;
 
@@ -326,7 +326,7 @@ div.support-grid-case-details.support-case {
                             -ms-flex-pack: justify;
                             justify-content: space-between;
 
-                            .pf-c-switch {
+                            .pf-v5-c-switch {
                                 margin-left: auto;
                             }
 
@@ -398,7 +398,7 @@ div.support-grid-case-details.support-case {
             }
 
             .sidebar-header {
-                background-color: #dedede;
+                background-color: #e0e0e0;
                 border-top: 1px solid #ccc;
                 border-bottom: 1px solid #ccc;
 
@@ -416,7 +416,7 @@ div.support-grid-case-details.support-case {
 
                     &:hover,
                     &:focus {
-                        background-color: darken(#dedede, 5%);
+                        background-color: --pf-v5-global--palette--black-300;
                     }
                 }
             }
@@ -466,7 +466,7 @@ div.support-grid-case-details.support-case {
             }
         }
 
-        .pf-c-expandable-section__toggle {
+        .pf-v5-c-expandable-section__toggle {
             width: 100%;
             text-align: left;
             background-color: #f0f0f0;
@@ -476,8 +476,8 @@ div.support-grid-case-details.support-case {
         }
 
         button:not(.close),
-        button:not(.pf-c-expandable-section__toggle),
-        .pf-c-button,
+        button:not(.pf-v5-c-expandable-section__toggle),
+        .pf-v5-c-button,
         .btn.btn-app {
             font-size: 14px;
         }
@@ -536,7 +536,7 @@ div.support-grid-case-details.support-case {
             & > *:last-child {
                 margin-bottom: 0;
 
-                &.pf-c-pagination {
+                &.pf-v5-c-pagination {
                     -ms-flex-pack: justify;
                     justify-content: space-between;
                 }
@@ -549,11 +549,6 @@ div.support-grid-case-details.support-case {
                 font-weight: 600;
             }
 
-            .result-body {
-                font-size: 13px;
-                word-break: break-word;
-            }
-
             .card-body ul {
                 list-style-type: none;
 
@@ -571,10 +566,10 @@ div.support-grid-case-details.support-case {
                 }
             }
 
-            .pf-c-pagination {
+            .pf-v5-c-pagination {
                 padding: 0.2rem;
 
-                .pf-c-pagination-nav {
+                .pf-v5-c-pagination-nav {
                     align-items: center;
                 }
             }
@@ -590,6 +585,10 @@ div.support-grid-case-details.support-case {
             }
         }
     }
+    .btn.btn-app.btn-link.case-reply-button {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
 }
 
 .text-danger {
@@ -650,41 +649,50 @@ mark {
 
 // pinning feature - can't be overly specific here
 .recommendation-header {
-    font-size: 15px;
+    font-size: 14px;
+    font-weight: 600;
+
+    .pinned-resource {
+        color: var(--pf-v5-global--primary-color--100);
+    }
 
-    button:hover[title='Pin'],
     button:hover[title='Link'] {
         color: #6ca100;
     }
 
-    button[title='Unpin'],
     button[title='Unlink'] {
         color: #6ca100;
 
         &:hover {
-            color: var(--pf-global--danger-color--100);
+            color: var(--pf-v5-global--danger-color--100);
         }
     }
 }
 
+.result-body {
+    font-size: 13px;
+    word-break: break-word;
+    color: black;
+}
+
 .form-group:last-child {
     margin-bottom: 0;
 }
 
-#se-solution-engine .pf-c-alert.ea-rule-alert {
+#se-solution-engine .pf-v5-c-alert.ea-rule-alert {
     padding: 0px;
     box-shadow: 0px 0px;
     border: 0px;
 }
 
-div.pf-c-alert.ea-rule-alert > div.pf-c-alert__description > p {
+div.pf-v5-c-alert.ea-rule-alert > div.pf-v5-c-alert__description > p {
     margin-bottom: 0;
 }
 
 .customer-view-switch-label {
     font-size: 15px;
     font-weight: 700;
-    color: var(--pf-global--palette--black-600);
+    color: #252525;
 }
 
 #case-details-aside-content[pfe-expanded] {
@@ -719,7 +727,7 @@ div.defaultViewCheckbox {
     grid-gap: 0px;
 }
 
-div.defaultViewCheckbox label.pf-c-check__label {
+div.defaultViewCheckbox label.pf-v5-c-check__label {
     line-height: 1rem;
 }
 
@@ -728,11 +736,11 @@ p.pref-case-popover-text {
 }
 
 .blueLock {
-    color: var(--pf-global--palette--blue-400);
+    color: var(--pf-v5-global--palette--blue-400);
 }
 
 .rrs-light-grey-text {
-    color: var(--pf-global--palette--black-600);
+    color: var(--pf-v5-global--palette--black-600);
 }
 
 .rsa-checkbox {
@@ -743,17 +751,17 @@ p.pref-case-popover-text {
 }
 
 .support-types-invalid {
-    border: 1px solid var(--pf-global--danger-color--100) !important;
+    border: 1px solid var(--pf-v5-global--danger-color--100) !important;
 }
 
 .submit-case-header-container {
     padding: 25px 0px 25px 25px;
-    background-color: var(--pf-global--disabled-color--300);
+    background-color: var(--pf-v5-global--disabled-color--300);
 
     .submit-page-title {
         display: flex;
         flex-direction: row;
-        color: var(--pf-global--success-color--100);
+        color: var(--pf-v5-global--success-color--100);
     }
 }
 
@@ -769,7 +777,7 @@ div.case-details-ref-number {
     }
     margin-bottom: 0 !important;
 }
-div.submit-case-header-container > p.kicker.kicker-sm.pf-u-mb-sm > a.case-link-disabled {
+div.submit-case-header-container > p.kicker.kicker-sm.pf-v5-u-mb-sm > a.case-link-disabled {
     pointer-events: none;
     a:link {
         color: #151515 !important;
@@ -779,7 +787,7 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-u-mb-sm > a.case-link-d
     }
 }
 
-.pf-c-skeleton {
+.pf-v5-c-skeleton {
     background-color: #f5f5f5;
     position: absolute;
 }
@@ -787,29 +795,31 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-u-mb-sm > a.case-link-d
 .pf-m-circle {
     border-radius: 50%;
 }
-.pf-c-wizard__nav-link {
+.pf-v5-c-wizard__nav-link {
     font-size: 15px;
 }
-.pf-c-wizard__nav-link.pf-m-current {
+.pf-v5-c-wizard__nav-link.pf-m-current {
     font-weight: 600;
 }
 
-.pf-c-wizard__nav ol {
+.pf-v5-c-wizard__nav ol {
     margin-top: 15px;
     margin-left: 10px;
 }
 
-.pf-c-wizard__nav ol li {
+.pf-v5-c-wizard__nav ol li {
     margin-right: 0;
     margin-bottom: 2.5rem;
     padding: 0;
 }
 
-.pf-c-wizard__footer {
+.pf-v5-c-wizard__footer {
+    display: flex !important;
+    align-items: center !important;
     position: sticky;
     bottom: 0px;
     border-top: 1px solid #d9d9d9;
-    padding: 1rem 1rem 0.5rem 2rem;
+    padding: 10px;
 
     /* Override buttons to match PF */
     .btn.btn-app,
@@ -819,7 +829,18 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-u-mb-sm > a.case-link-d
     }
 }
 
-.pf-c-wizard__main {
+.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 {
     padding: 0.8rem;
 }
 .wizard-aside-content {
@@ -827,7 +848,7 @@ div.submit-case-header-container > p.kicker.kicker-sm.pf-u-mb-sm > a.case-link-d
     position: sticky;
 }
 
-li.pf-c-wizard__nav-item button.pf-m-disabled::before {
+li.pf-v5-c-wizard__nav-item button.pf-m-disabled::before {
     background-color: #f0f0f0;
 }
 
@@ -848,13 +869,8 @@ li.pf-c-wizard__nav-item button.pf-m-disabled::before {
 
 .display-dashed {
     padding: 0.5rem;
-    border: 2px dashed var(--pf-global--palette--black-600);
-    background-color: var(--pf-global--palette--black-300);
-}
-.pf-c-wizard__footer {
-    display: flex !important;
-    align-items: center !important;
-    padding: 10px !important;
+    border: 2px dashed var(--pf-v5-global--palette--black-600);
+    background-color: var(--pf-v5-global--palette--black-300);
 }
 
 .main-nav-button {
@@ -865,11 +881,11 @@ li.pf-c-wizard__nav-item button.pf-m-disabled::before {
     margin-left: auto !important;
 }
 
-svg.pf-c-spinner.pf-m-md.export-csv-loader {
-    --pf-c-spinner--Color: var(--pf-global--Color--200) !important;
+svg.pf-v5-c-spinner.pf-m-md.export-csv-loader {
+    --pf-v5-c-spinner--Color: var(--pf-v5-global--Color--200) !important;
 }
 
-svg.pf-u-ml-xs.icon-size {
+svg.pf-v5-u-ml-xs.icon-size {
     width: 14px;
 }
 
@@ -877,3 +893,255 @@ svg.pf-u-ml-xs.icon-size {
     font-family: 'DejaVu Sans';
     src: url('https://access.redhat.com/chrome_themes/nimbus/fonts/unifont-15.0.06.ttf') format('truetype');
 }
+
+.case-type-section {
+    .case-type-category {
+        height: 75px;
+        padding: 0.5rem 1rem;
+        border: 1px solid #d9d9d9;
+        font-weight: 600;
+        line-height: 1.6;
+        background-color: var(--pf-v5-global--palette--black-150);
+        color: var(--pf-v5-global--primary-color--100);
+        word-break: break-word;
+        &.selected-case-type {
+            border-color: var(--pf-v5-global--primary-color--100);
+            background-color: #e6e6e6;
+        }
+
+        &:hover,
+        &:focus {
+            border-color: var(--pf-v5-global--primary-color--100);
+            background-color: #e6e6e6;
+        }
+
+        &:active {
+            border-color: var(--pf-v5-global--primary-color--100);
+        }
+    }
+}
+
+.badge-item {
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+    padding: 0 8px 0 8px;
+    border-radius: 10px;
+    color: black;
+}
+
+#case-details-handpicked-recommendations {
+    li {
+        padding: 0;
+    }
+    li:not(:first-child) {
+        .handpicked-resource {
+            margin-top: var(--pf-v5-global--spacer--lg);
+        }
+    }
+}
+
+.handpicked-resource {
+    button {
+        padding: 0;
+        display: flex;
+    }
+    .eval-icons span {
+        color: var(--pf-v5-global--primary-color--200);
+    }
+}
+
+#case-details-handpicked-recommendations-pagination-bottom-pagination,
+#case-details-pinned-recommendations-pagination-bottom-pagination {
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    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);
+}
+
+.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);
+    }
+}
+
+.archived-clusters-checkbox {
+    .pf-v5-c-check__label {
+        margin-bottom: 0;
+        font-size: 16px;
+    }
+}
+
+.openshift-cluster-id {
+    .pf-v5-c-select__menu {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    .pf-v5-c-divider {
+        margin: 5px 0px !important;
+    }
+}
+
+#rh-support {
+    #rh-support-manage {
+        .grid-main.manage {
+            .pf-v5-c-tabs__item {
+                a {
+                    color: var(--pf-v5-global--palette--black-700);
+                }
+            }
+        }
+    }
+}
+
+.case-internal-status-selector-div {
+    .pf-m-disabled {
+        background-color: var(--pf-v5-global--disabled-color--300);
+    }
+}
+
+.case-internal-status-selector-text,
+.get-support-severity-modal-text,
+.case-type-selector-text {
+    .pf-v5-c-menu-toggle__text {
+        width: 100%;
+    }
+}
+
+#cep-checkbox {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    #get-support-cep {
+        margin: 0 0 0 0;
+    }
+
+    .pf-v5-c-check {
+        padding-top: 2px;
+        &__label {
+            margin-top: 2px;
+        }
+    }
+}
+
+.sfdc-case-url-clipboard {
+    button {
+        margin: 0;
+        align-self: stretch;
+    }
+    .pf-v5-c-clipboard-copy {
+        flex: 1;
+    }
+}
+.newFeatureModal {
+    #new-feature-modal-checkbox {
+        margin-right: var(--pf-v5-global--spacer--xs);
+    }
+}
+
+.kt-question-help-icon {
+    font-size: var(--pf-v5-global--icon--FontSize--md);
+}
+
+.recommendation-box-tips {
+    li {
+        margin-top: 0px !important;
+    }
+}
+
+#get-support-severity-modal {
+    max-width: min-content;
+}
+
+#DeepPurpleColorAILabel {
+    background-color: #6600cc !important; //deep purple override because not available in PF yet
+    position: relative;
+    display: inline-block;
+    z-index: 1;
+}
+#DeepPurpleColorAILabel .pf-v5-c-label__content {
+    color: #ffffff !important;
+}
+
+#DeepPurpleColorAILabel .pf-v5-svg {
+    margin: 0 10px 0 5px;
+}
+
+#DeepPurpleColorAILabel .pf-v5-c-spinner__path {
+    stroke: white;
+}
+
+#DeepPurpleColorAILabel svg.pf-v5-c-spinner {
+    margin: 0 10px 0 5px;
+}
+
+.label-container-icon {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    padding: 1px;
+    border-radius: 20px;
+    height: 32px;
+}
+
+.gradient.label-container-icon::before {
+    content: '';
+    display: block;
+    background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(102, 102, 102, 0.75) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    height: 300px;
+    width: 20px;
+    position: absolute;
+    animation: rotate 5s linear infinite forwards;
+    top: 50%;
+    right: 45%;
+    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);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.cve-modal-fade-in-effect {
+    opacity: 0;
+    animation: cveModalfadeIn 0.3s forwards;
+}
+
+@keyframes cveModalfadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}