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

@@ -90,6 +90,11 @@ const useStyles = createUseStyles({
   uploadIcon: {
     marginLeft: '8px',
   },
+  tightPadding: {
+  '& th, & td': {
+    padding: '4px 8px',
+   }
+  },
 });
 
 export const perPageKey = 'contentListPerPage';
@@ -548,6 +553,7 @@ const ContentListTable = () => {
                   aria-label='Custom repositories table'
                   ouiaId='custom_repositories_table'
                   variant='compact'
+                  className={classes.tightPadding}
                 >
                   <Thead>
                     <Tr>

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/Pages/Templates/TemplatesTable/TemplatesTable.tsx

@@ -267,11 +267,11 @@ const TemplatesTable = () => {
                 <Tr>
                   {columnHeaders.map(({ title, width }, index) =>
                     title === 'Status' ? (
-                      <Th key={title + 'column'} width={width}>
+                      <Th key={title + 'column'} width={width} modifier='wrap'>
                         {title}
                       </Th>
                     ) : (
-                      <Th key={title + 'column'} width={width} sort={sortParams(index)}>
+                      <Th key={title + 'column'} width={width} modifier='wrap' sort={sortParams(index)}>
                         {title}
                       </Th>
                     ),

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';