Renamed CSS

project-koku · Aug 26, 2024 · 214fc64 · 214fc64
1 parent a0b2af4
commit 214fc64
Show file tree

Hide file tree

Showing 117 changed files with 458 additions and 515 deletions.
diff --git a/src/components/drawers/exports/exports.styles.ts b/src/components/drawers/exports/exports.styles.ts
@@ -1,4 +1,4 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
+import global_background_color_100 from '@patternfly/react-tokens/dist/js/global_background_color_100';
 import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg';
 import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
 import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
@@ -18,12 +18,12 @@ export const styles = {
     alignItems: 'center',
   },
   pagination: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: global_background_color_100.value,
     paddingBottom: global_spacer_md.value,
     paddingTop: global_spacer_md.value,
   },
   toolbarContainer: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: global_background_color_100.value,
     paddingBottom: global_spacer_md.value,
     paddingTop: global_spacer_md.value,
   },

diff --git a/src/components/drawers/exports/exportsTable.styles.ts b/src/components/drawers/exports/exportsTable.styles.ts
@@ -1,23 +1,23 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_danger_color_200 from '@patternfly/react-tokens/dist/js/global_danger_color_200';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/js/global_FontSize_sm';
+import global_background_color_100 from '@patternfly/react-tokens/dist/js/global_background_color_100';
+import global_color_status_danger_200 from '@patternfly/react-tokens/dist/js/global_color_status_danger_200';
+import global_font_size_sm from '@patternfly/react-tokens/dist/js/global_font_size_sm';
 import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
 import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl';
 import type React from 'react';
 
 export const styles = {
   emptyState: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: global_background_color_100.value,
     display: 'flex',
     justifyContent: 'center',
     paddingTop: global_spacer_xl.value,
     width: '100%',
   },
   failed: {
-    color: global_danger_color_200.value,
+    color: global_color_status_danger_200.value,
   },
   failedButton: {
-    fontSize: global_FontSize_sm.value,
+    fontSize: global_font_size_sm.value,
   },
   failedHeader: {
     marginLeft: global_spacer_md.value,

diff --git a/src/components/drawers/exports/exportsTable.tsx b/src/components/drawers/exports/exportsTable.tsx
@@ -138,7 +138,11 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
     }
 
     return (
-      <EmptyState  headingLevel="h5" icon={PlusCircleIcon}  titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}>
+      <EmptyState
+        headingLevel="h5"
+        icon={PlusCircleIcon}
+        titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
+      >
         <EmptyStateBody>{intl.formatMessage(messages.exportsEmptyState)}</EmptyStateBody>
         <EmptyStateFooter>
           <Button variant="primary" onClick={onClose}>
@@ -177,7 +181,8 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
                 }
                 bodyContent={<div>{intl.formatMessage(messages.exportsFailedDesc)}</div>}
               >
-                <Button icon={content}
+                <Button
+                  icon={content}
                   className={className}
                   innerRef={componentRef}
                   style={styles.failedButton}

diff --git a/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts b/src/routes/components/charts/costExplorerChart/costExplorerChart.styles.ts
@@ -1,19 +1,19 @@
 import { chart_color_blue_300 } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
-import { chart_color_cyan_300 } from '@patternfly/react-tokens/dist/js/chart_color_cyan_300';
-import { chart_color_gold_300 } from '@patternfly/react-tokens/dist/js/chart_color_gold_300';
 import { chart_color_green_300 } from '@patternfly/react-tokens/dist/js/chart_color_green_300';
 import { chart_color_orange_300 } from '@patternfly/react-tokens/dist/js/chart_color_orange_300';
 import { chart_color_purple_300 } from '@patternfly/react-tokens/dist/js/chart_color_purple_300';
+import { chart_color_teal_300 } from '@patternfly/react-tokens/dist/js/chart_color_teal_300';
+import { chart_color_yellow_300 } from '@patternfly/react-tokens/dist/js/chart_color_yellow_300';
 
 export const chartStyles = {
   // See: https://github.com/project-koku/koku-ui/issues/241
   colorScale: [
     chart_color_blue_300.value,
-    chart_color_gold_300.value,
+    chart_color_yellow_300.value,
     chart_color_green_300.value,
     chart_color_purple_300.value,
     chart_color_orange_300.value,
-    chart_color_cyan_300.value,
+    chart_color_teal_300.value,
   ],
   yAxis: {
     axisLabel: {

diff --git a/src/routes/components/cluster/modal/clusterModal.tsx b/src/routes/components/cluster/modal/clusterModal.tsx
@@ -1,8 +1,6 @@
 import './clusterModal.scss';
 
-import {
-	Modal
-} from '@patternfly/react-core/deprecated';
+import { Modal } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';

diff --git a/src/routes/components/dataTable/dataTable.styles.ts b/src/routes/components/dataTable/dataTable.styles.ts
@@ -1,6 +1,6 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_disabled_color_100 from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
-import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
+import global_background_color_100 from '@patternfly/react-tokens/dist/js/global_background_color_100';
+import global_color_disabled_100 from '@patternfly/react-tokens/dist/js/global_color_disabled_100';
+import global_font_size_body_sm from '@patternfly/react-tokens/dist/js/global_font_size_body_sm';
 import global_spacer_3xl from '@patternfly/react-tokens/dist/js/global_spacer_3xl';
 import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm';
 import global_spacer_xs from '@patternfly/react-tokens/dist/js/global_spacer_xs';
@@ -17,7 +17,7 @@ export const styles = {
     minWidth: '50px',
   },
   emptyState: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: global_background_color_100.value,
     display: 'flex',
     justifyContent: 'center',
     paddingTop: global_spacer_3xl.value,
@@ -34,8 +34,8 @@ export const styles = {
     bottom: global_spacer_xs.value,
   },
   infoDescription: {
-    color: global_disabled_color_100.value,
-    fontSize: global_FontSize_xs.value,
+    color: global_color_disabled_100.value,
+    fontSize: global_font_size_body_sm.value,
   },
   lastItem: {
     textAlign: 'right',

diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx
@@ -353,7 +353,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
               </ToolbarToggleGroup>
             )}
             {actions && <ToolbarGroup>{actions}</ToolbarGroup>}
-            <ToolbarItem align={{ default: "alignEnd" }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignEnd' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/src/routes/components/dataToolbar/costCategoryValue.tsx b/src/routes/components/dataToolbar/costCategoryValue.tsx
@@ -146,14 +146,13 @@ class CostCategoryValueBase extends React.Component<CostCategoryValueProps, Cost
           />
         </InputGroupItem>
         <InputGroupItem>
-          <Button icon={<SearchIcon />}
+          <Button
+            icon={<SearchIcon />}
             isDisabled={isDisabled}
             variant={ButtonVariant.control}
             aria-label={intl.formatMessage(messages.filterByCostCategoryValueButtonAriaLabel)}
             onClick={evt => onCostCategoryValueInput(evt)}
-          >
-
-          </Button>
+          ></Button>
         </InputGroupItem>
       </InputGroup>
     );

diff --git a/src/routes/components/dataToolbar/dataToolbar.styles.ts b/src/routes/components/dataToolbar/dataToolbar.styles.ts
@@ -1,4 +1,4 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
+import global_background_color_100 from '@patternfly/react-tokens/dist/js/global_background_color_100';
 import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
 import type React from 'react';
 
@@ -7,7 +7,7 @@ export const styles = {
     marginRight: global_spacer_md.value,
   },
   toolbarContainer: {
-    backgroundColor: global_BackgroundColor_light_100.value,
+    backgroundColor: global_background_color_100.value,
     paddingBottom: global_spacer_md.value,
     paddingTop: global_spacer_md.value,
   },

diff --git a/src/routes/components/dataToolbar/dataToolbar.tsx b/src/routes/components/dataToolbar/dataToolbar.tsx
@@ -787,7 +787,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
                 {datePicker}
               </ToolbarGroup>
             )}
-            <ToolbarItem align={{ default: "alignEnd" }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignEnd' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/src/routes/components/dataToolbar/tagValue.tsx b/src/routes/components/dataToolbar/tagValue.tsx
@@ -146,14 +146,13 @@ class TagValueBase extends React.Component<TagValueProps, TagValueState> {
           />
         </InputGroupItem>
         <InputGroupItem>
-          <Button icon={<SearchIcon />}
+          <Button
+            icon={<SearchIcon />}
             isDisabled={isDisabled}
             variant={ButtonVariant.control}
             aria-label={intl.formatMessage(messages.filterByTagValueButtonAriaLabel)}
             onClick={evt => onTagValueInput(evt)}
-          >
-
-          </Button>
+          ></Button>
         </InputGroupItem>
       </InputGroup>
     );

diff --git a/src/routes/components/dataToolbar/utils/actions.tsx b/src/routes/components/dataToolbar/utils/actions.tsx
@@ -38,10 +38,11 @@ export const getExportButton = ({
   return (
     <ToolbarItem
       gap={{
-        default: "gapNone",
+        default: 'gapNone',
       }}
     >
-      <Button icon={<ExportIcon />}
+      <Button
+        icon={<ExportIcon />}
         aria-label="Export data"
         isDisabled={isDisabled || isExportDisabled}
         onClick={onExportClicked}

diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx
@@ -89,14 +89,13 @@ export const getCategoryInput = ({
                 onKeyDown={evt => onCategoryInput(evt, categoryOption.key)}
                 size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length}
               />
-              <Button icon={<SearchIcon />}
+              <Button
+                icon={<SearchIcon />}
                 isDisabled={isDisabled && !_hasFilters}
                 variant={ButtonVariant.control}
                 aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: placeholderKey })}
                 onClick={evt => onCategoryInput(evt, categoryOption.key)}
-              >
-
-              </Button>
+              ></Button>
             </>
           )}
         </InputGroupItem>

diff --git a/src/routes/components/export/exportModal.tsx b/src/routes/components/export/exportModal.tsx
@@ -1,20 +1,18 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
 import {
-	Alert,
-	Button,
-	ButtonVariant,
-	Form,
-	FormGroup,
-	Grid,
-	GridItem,
-	HelperText,
-	HelperTextItem,
-	Radio,
-	TextInput
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  HelperText,
+  HelperTextItem,
+  Radio,
+  TextInput,
 } from '@patternfly/react-core';
-import {
-	Modal
-} from '@patternfly/react-core/deprecated';
+import { Modal } from '@patternfly/react-core/deprecated';
 import type { ReportPathsType, ReportType } from 'api/reports/report';
 import type { AxiosError } from 'axios';
 import { format } from 'date-fns';

diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx
@@ -26,7 +26,13 @@ class NoDataStateBase extends React.Component<NoDataStateProps, any> {
     const { detailsComponent, intl, showReload = true } = this.props;
 
     return (
-      <EmptyState  headingLevel="h5" icon={PlusCircleIcon}  titleText={intl.formatMessage(messages.noDataStateTitle)} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+      <EmptyState
+        headingLevel="h5"
+        icon={PlusCircleIcon}
+        titleText={intl.formatMessage(messages.noDataStateTitle)}
+        variant={EmptyStateVariant.lg}
+        className="pf-m-redhat-font"
+      >
         <EmptyStateBody>
           {intl.formatMessage(messages.noDataStateDesc)}
           {detailsComponent && <Bullseye style={styles.details}>{detailsComponent}</Bullseye>}

diff --git a/src/routes/components/page/noInstances/noInstancesState.tsx b/src/routes/components/page/noInstances/noInstancesState.tsx
@@ -1,8 +1,4 @@
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateVariant,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import messages from 'locales/messages';
 import React from 'react';
@@ -20,7 +16,13 @@ class NoInstancesStateBase extends React.Component<NoInstancesStateProps, any> {
     const { intl } = this.props;
 
     return (
-      <EmptyState  headingLevel="h1" icon={PlusCircleIcon}  titleText={intl.formatMessage(messages.noInstancesTitle)} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+      <EmptyState
+        headingLevel="h1"
+        icon={PlusCircleIcon}
+        titleText={intl.formatMessage(messages.noInstancesTitle)}
+        variant={EmptyStateVariant.lg}
+        className="pf-m-redhat-font"
+      >
         <EmptyStateBody>{intl.formatMessage(messages.noInstancesDesc)}</EmptyStateBody>
       </EmptyState>
     );

diff --git a/src/routes/components/page/noProviders/noProvidersState.tsx b/src/routes/components/page/noProviders/noProvidersState.tsx
@@ -82,7 +82,13 @@ class NoProvidersStateBase extends React.Component<NoProvidersStateProps, any> {
         icon = CostIcon;
     }
     return (
-      <EmptyState  headingLevel="h1" icon={icon ? icon : PlusCircleIcon}  titleText={intl.formatMessage(titleKey)} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+      <EmptyState
+        headingLevel="h1"
+        icon={icon ? icon : PlusCircleIcon}
+        titleText={intl.formatMessage(titleKey)}
+        variant={EmptyStateVariant.lg}
+        className="pf-m-redhat-font"
+      >
         <EmptyStateBody>
           {intl.formatMessage(descKey)}
           {detailsComponent && <Bullseye style={styles.details}>{detailsComponent}</Bullseye>}

diff --git a/src/routes/components/resourceTypeahead/resourceInput.tsx b/src/routes/components/resourceTypeahead/resourceInput.tsx
@@ -68,7 +68,8 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
           />
           {search && search.length && (
             <TextInputGroupUtilities>
-              <Button icon={<TimesIcon />}
+              <Button
+                icon={<TimesIcon />}
                 variant="plain"
                 onClick={handleOnClear}
                 aria-label={intl.formatMessage(messages.typeaheadAriaClear)}

diff --git a/src/routes/components/selectWrapper/selectTypeaheadWrapper.tsx b/src/routes/components/selectWrapper/selectTypeaheadWrapper.tsx
@@ -182,7 +182,8 @@ const SelectTypeaheadWrapper: React.FC<SelectTypeaheadWrapperProps> = ({
         />
         <TextInputGroupUtilities>
           {!!inputValue && (
-            <Button icon={<TimesIcon aria-hidden />}
+            <Button
+              icon={<TimesIcon aria-hidden />}
               variant="plain"
               onClick={handleOnClear}
               aria-label={intl.formatMessage(messages.selectClearAriaLabel)}

diff --git a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx
@@ -123,7 +123,7 @@ const EmptyFilterStateBase: React.FC<EmptyFilterStateProps> = ({
         ...(showMargin ? styles.containerMargin : {}),
       }}
     >
-      <EmptyState  headingLevel="h2"   titleText={intl.formatMessage(title)}>
+      <EmptyState headingLevel="h2" titleText={intl.formatMessage(title)}>
         {getItem()}
         <EmptyStateBody>{intl.formatMessage(subTitle)}</EmptyStateBody>
       </EmptyState>

diff --git a/src/routes/components/state/errorState/errorState.tsx b/src/routes/components/state/errorState/errorState.tsx
@@ -1,8 +1,4 @@
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateVariant,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
 import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon';
 import type { AxiosError } from 'axios';
@@ -27,7 +23,13 @@ const ErrorStateBase: React.FC<ErrorStateProps> = ({ error, icon = ErrorCircleOI
   }
 
   return (
-    <EmptyState  headingLevel="h5" icon={icon}  titleText={title} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+    <EmptyState
+      headingLevel="h5"
+      icon={icon}
+      titleText={title}
+      variant={EmptyStateVariant.lg}
+      className="pf-m-redhat-font"
+    >
       <EmptyStateBody>{subTitle}</EmptyStateBody>
     </EmptyState>
   );

diff --git a/src/routes/components/state/loadingState/loadingState.tsx b/src/routes/components/state/loadingState/loadingState.tsx
@@ -18,7 +18,7 @@ const LoadingStateBase: React.FC<LoadingStateProps> = ({
   heading = intl.formatMessage(messages.loadingStateTitle),
 }) => {
   return (
-    <EmptyState  headingLevel="h5"   titleText={heading} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+    <EmptyState headingLevel="h5" titleText={heading} variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
       <Spinner size="lg" />
       <EmptyStateBody>{body}</EmptyStateBody>
     </EmptyState>