Fix/epmrpp 92701 buttons have broken styles (#3982)

* EPMRPP-92701 || Create project and Invite user buttons have broken styles * EPMRPP-92701 || import icons from the ui kit * EPMRPP-92701 || update ui-kit * EPMRPP-92701 || fix button property
reportportal · Aug 23, 2024 · 08ee1d1 · 08ee1d1
1 parent 20704d0
commit 08ee1d1
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 26 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -25,7 +25,7 @@
     "@formatjs/intl-pluralrules": "1.3.9",
     "@formatjs/intl-relativetimeformat": "4.5.1",
     "@formatjs/intl-utils": "1.6.0",
-    "@reportportal/ui-kit": "^0.0.1-alpha.22",
+    "@reportportal/ui-kit": "^0.0.1-alpha.23",
     "axios": "1.6.4",
     "c3": "0.7.20",
     "chart.js": "2.9.4",

diff --git a/app/src/pages/organization/emptyPageState/emptyPageState.jsx b/app/src/pages/organization/emptyPageState/emptyPageState.jsx
@@ -26,7 +26,7 @@ export const EmptyPageState = ({
   hasPermission,
   label,
   description,
-  startIcon,
+  icon,
   buttonTitle,
   emptyIcon,
   onClick,
@@ -37,12 +37,7 @@ export const EmptyPageState = ({
       <span className={cx('label')}>{label}</span>
       <p className={cx('description')}>{description}</p>
       {hasPermission && (
-        <Button
-          variant={'primary'}
-          className={cx('button')}
-          startIcon={startIcon}
-          onClick={onClick}
-        >
+        <Button variant={'primary'} className={cx('button')} icon={icon} onClick={onClick}>
           {buttonTitle}
         </Button>
       )}
@@ -55,7 +50,7 @@ EmptyPageState.propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
   buttonTitle: PropTypes.string,
-  startIcon: PropTypes.element,
+  icon: PropTypes.element,
   onClick: PropTypes.func,
   emptyIcon: PropTypes.element.isRequired,
 };
@@ -65,6 +60,6 @@ EmptyPageState.defaultProps = {
   label: '',
   description: '',
   buttonTitle: '',
-  startIcon: null,
+  icon: null,
   onClick: () => {},
 };
diff --git a/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx b/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx
@@ -18,12 +18,11 @@ import { useSelector } from 'react-redux';
 import { canCreateProject } from 'common/utils/permissions';
 import classNames from 'classnames/bind';
 import Parser from 'html-react-parser';
-import { BubblesLoader } from '@reportportal/ui-kit';
+import { BubblesLoader, PlusIcon } from '@reportportal/ui-kit';
 import { useIntl } from 'react-intl';
 import { loadingSelector, projectsSelector } from 'controllers/organizations/projects/selectors';
 import { activeOrganizationLoadingSelector } from 'controllers/organizations/organization/selectors';
 import { ScrollWrapper } from 'components/main/scrollWrapper';
-import PlusIcon from 'common/img/plus-button-inline.svg';
 import { userRolesSelector } from 'controllers/pages';
 import { ProjectsPageHeader } from './projectsPageHeader';
 import { EmptyPageState } from '../emptyPageState';
@@ -63,7 +62,7 @@ export const OrganizationProjectsPage = () => {
                 hasPermission={hasPermission}
                 label={label}
                 description={description}
-                startIcon={PlusIcon}
+                icon={<PlusIcon />}
                 buttonTitle={buttonTitle}
                 emptyIcon={EmptyIcon}
               />

diff --git a/...src/pages/organization/organizationProjectsPage/projectsPageHeader/projectsPageHeader.jsx b/...src/pages/organization/organizationProjectsPage/projectsPageHeader/projectsPageHeader.jsx
@@ -19,12 +19,11 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import Parser from 'html-react-parser';
-import { Button } from '@reportportal/ui-kit';
+import { Button, PlusIcon } from '@reportportal/ui-kit';
 import classNames from 'classnames/bind';
 import { PROJECTS_PAGE } from 'controllers/pages';
 import searchIcon from 'common/img/newIcons/search-outline-inline.svg';
 import filterIcon from 'common/img/newIcons/filters-outline-inline.svg';
-import plusIcon from 'common/img/plus-button-inline.svg';
 import { Breadcrumbs } from 'componentLibrary/breadcrumbs';
 import { activeOrganizationSelector } from 'controllers/organizations/organization';
 import userIcon from './img/user-inline.svg';
@@ -83,7 +82,7 @@ export const ProjectsPageHeader = ({ hasPermission }) => {
             </div>
           )}
           {isNotEmpty && hasPermission && (
-            <Button variant={'text'} customClassName={cx('button')} startIcon={plusIcon}>
+            <Button variant={'ghost'} icon={<PlusIcon />}>
               {formatMessage(messages.createProject)}
             </Button>
           )}

diff --git a/...rc/pages/organization/organizationProjectsPage/projectsPageHeader/projectsPageHeader.scss b/...rc/pages/organization/organizationProjectsPage/projectsPageHeader/projectsPageHeader.scss
@@ -79,12 +79,6 @@
   }
 }
 
-.button {
-  border: $COLOR--topaz solid 1px;
-  height: 36px;
-  padding: 7px 16px;
-}
-
 .details {
   display: flex;
   height: 36px;