fix colors and column/input widths

Author: xbhouse

src/Pages/Repositories/AdminTaskTable/components/AdminTaskFilters.tsx

@@ -32,16 +32,12 @@ const useStyles = createUseStyles({
     marginLeft: '16px',
   },
   filter: {
-    width: '100%',
+    width: 'auto',
     maxWidth: 'unset',
   },
   filterDropdown: {
     width: 'fit-content',
   },
-  fullWidth: {
-    width: '100%',
-    maxWidth: 'unset',
-  },
 });
 
 const statusValues = ['Running', 'Failed', 'Completed', 'Canceled', 'Pending'];

src/Pages/Repositories/ContentListTable/ContentListTable.tsx

@@ -562,10 +562,10 @@ const ContentListTable = () => {
                         />
                       </Hide>
                       {columnHeaders.map((columnHeader, index) =>
-                        columnHeader === 'Status' ? (
-                          <Th key={columnHeader + 'column'}>{columnHeader}</Th>
+                        columnHeader=== 'Status' ? (
+                          <Th key={columnHeader + 'column'} modifier='wrap'>{columnHeader}</Th>
                         ) : (
-                          <Th key={columnHeader + 'column'} sort={sortParams(index)}>
+                          <Th key={columnHeader + 'column'} modifier='wrap' sort={sortParams(index)}>
                             {columnHeader}
                           </Th>
                         ),

src/Pages/Repositories/ContentListTable/components/ContentListFilters.tsx

@@ -52,7 +52,7 @@ const useStyles = createUseStyles({
     flexDirection: 'row',
   },
   fullWidth: {
-    width: '100%',
+    width: 'auto',
     maxWidth: 'unset',
   },
 });

src/Pages/Repositories/ContentListTable/components/SnapshotDetailsModal/Tabs/SnapshotErrataFilters.tsx

@@ -30,6 +30,10 @@ const useStyles = createUseStyles({
   ensureMinHeight: {
     flexFlow: 'column nowrap',
   },
+  fullWidth: {
+    width: 'auto',
+    maxWidth: 'unset',
+  },
 });
 
 interface Props {
@@ -102,6 +106,7 @@ export default function SnapshotErrataFilters({ isLoading, setFilterData, filter
             isDisabled={isLoading}
             id='search'
             ouiaId='filter_search'
+            className={classes.fullWidth}
             placeholder='Filter by name/synopsis'
             value={search}
             type='search'
@@ -116,10 +121,10 @@ export default function SnapshotErrataFilters({ isLoading, setFilterData, filter
             toggle={(toggleRef) => (
               <MenuToggle
                 ref={toggleRef}
-                // className={classes.menuToggle}
                 aria-label='filter type'
                 id='typeSelect'
                 ouiaId='filter_by_type'
+                className={classes.fullWidth}
                 onClick={() => setActionOpen((prev) => !prev)}
                 isDisabled={isLoading}
                 isExpanded={isActionOpen}
@@ -156,6 +161,7 @@ export default function SnapshotErrataFilters({ isLoading, setFilterData, filter
                 aria-label='filter severity'
                 id='severitySelect'
                 ouiaId='filter_by_severity'
+                className={classes.fullWidth}
                 onClick={() => setActionOpen((prev) => !prev)}
                 isDisabled={isLoading}
                 isExpanded={isActionOpen}
@@ -206,6 +212,7 @@ export default function SnapshotErrataFilters({ isLoading, setFilterData, filter
               aria-label='filterSelectionDropdown'
               id='filterSelectionDropdown'
               ouiaId='filter_type_toggle'
+              className={classes.fullWidth}
               onClick={() => setTypeFilterOpen((prev) => !prev)}
               isDisabled={isLoading}
               isExpanded={typeFilterOpen}

src/components/SeverityWithIcon/SeverityWithIcon.tsx

@@ -3,8 +3,8 @@ import { SecurityIcon } from '@patternfly/react-icons';
 import {
   c_alert_m_warning__icon_Color,
   c_alert_m_danger__icon_Color,
-  t_global_icon_color_300,
-  c_alert_m_info__icon_Color,
+  t_color_orange_50,
+  t_color_gray_50,
 } from '@patternfly/react-tokens';
 
 import { createUseStyles } from 'react-jss';
@@ -16,13 +16,13 @@ const useStyles = (color: string) => {
       finalColor = c_alert_m_danger__icon_Color.value;
       break;
     case 'important':
-      finalColor = t_global_icon_color_300.value;
+      finalColor = t_color_orange_50.value;
       break;
     case 'moderate':
       finalColor = c_alert_m_warning__icon_Color.value;
       break;
     case 'low':
-      finalColor = c_alert_m_info__icon_Color.value;
+      finalColor = t_color_gray_50.value;
       break;
     default:
       break;

src/components/StatusText/StatusText.tsx

@@ -1,15 +1,15 @@
 import { createUseStyles } from 'react-jss';
 import {
   t_global_color_status_danger_100,
-  t_global_color_status_info_100,
+  t_color_blue_70,
   t_global_color_status_success_100,
   t_global_color_status_warning_100,
 } from '@patternfly/react-tokens';
 
 const red = t_global_color_status_danger_100.value;
 const green = t_global_color_status_success_100.value;
 const gold = t_global_color_status_warning_100.value;
-const blue = t_global_color_status_info_100.value;
+const blue = t_color_blue_70.value;
 
 interface Props {
   color: 'red' | 'green' | 'gold' | 'blue';