From 8989e460f033f07b83603e7c308ff1da94b16a49 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 19 Jul 2022 13:43:51 +0200
Subject: [PATCH] fix(ui) - siteform loader, trash btn project exists check,
 IconButton replace

---
 .../Sites/AddProjectButton/AddUserButton.tsx      | 15 +++++++--------
 .../app/components/Client/Sites/NewSiteForm.js    | 10 ++++++----
 frontend/app/components/ui/Button/Button.tsx      |  9 ++++++++-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx b/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx
index 078122bb2..7371056fd 100644
--- a/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx
+++ b/frontend/app/components/Client/Sites/AddProjectButton/AddUserButton.tsx
@@ -1,29 +1,28 @@
 import React from 'react';
-import { Popup, IconButton } from 'UI';
+import { Popup, Button, IconButton } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
 const LIMIT_WARNING = 'You have reached site limit.';
 
-function AddProjectButton({ isAdmin = false, onClick }: any ) {
+function AddProjectButton({ isAdmin = false, onClick }: any) {
     const { userStore } = useStore();
     const limtis = useObserver(() => userStore.limits);
     const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
     return (
-        <Popup
-            content={ `${ !isAdmin ? PERMISSION_WARNING : (!canAddProject ? LIMIT_WARNING : 'Add a Project') }` }
-        >
-            <IconButton
+        <Popup content={`${!isAdmin ? PERMISSION_WARNING : !canAddProject ? LIMIT_WARNING : 'Add a Project'}`}>
+            <Button rounded={true} variant="outline" icon="plus" onClick={onClick} disabled={!canAddProject || !isAdmin}></Button>
+            {/* <IconButton
                 id="add-button"
                 disabled={ !canAddProject || !isAdmin }
                 circle
                 icon="plus"
                 outline
                 onClick={ onClick }
-            />
+            /> */}
         </Popup>
     );
 }
 
-export default AddProjectButton;
\ No newline at end of file
+export default AddProjectButton;
diff --git a/frontend/app/components/Client/Sites/NewSiteForm.js b/frontend/app/components/Client/Sites/NewSiteForm.js
index 57713d981..c6633b73b 100644
--- a/frontend/app/components/Client/Sites/NewSiteForm.js
+++ b/frontend/app/components/Client/Sites/NewSiteForm.js
@@ -12,7 +12,7 @@ import { confirm } from 'UI';
 	site: state.getIn([ 'site', 'instance' ]),
 	sites: state.getIn([ 'site', 'list' ]),
 	siteList: state.getIn([ 'site', 'list' ]),
-	loading: state.getIn([ 'site', 'save', 'loading' ]),
+	loading: state.getIn([ 'site', 'save', 'loading' ]) || state.getIn([ 'site', 'remove', 'loading' ]),
 }), {
 	save,
 	remove,
@@ -103,9 +103,11 @@ export default class NewSiteForm extends React.PureComponent {
 						>
 							{site.exists() ? 'Update' : 'Add'}
 						</Button>
-						<Button variant="text" type="button" plain onClick={() => this.remove(site)}>
-							<Icon name="trash" size="16" />
-						</Button>
+						{site.exists() && (
+							<Button variant="text" type="button" onClick={() => this.remove(site)}>
+								<Icon name="trash" size="16" />
+							</Button>
+						)}
 					</div>
 					{ this.state.existsError &&
 						<div className={ styles.errorMessage }>
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index 075d95b33..bc71be3a0 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -10,6 +10,7 @@ interface Props {
     type?: 'button' | 'submit' | 'reset';
     loading?: boolean;
     icon?: string;
+    rounded?: boolean;
     [x: string]: any;
 }
 export default (props: Props) => {
@@ -22,10 +23,12 @@ export default (props: Props) => {
         disabled = false,
         children,
         loading = false,
+        rounded = false,
         ...rest
     } = props;
 
-    const classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
+    let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
+
     if (variant === 'default') {
         classes.push('bg-white hover:bg-gray-lightest border border-gray-light');
     }
@@ -62,6 +65,10 @@ export default (props: Props) => {
         iconColor = 'red';
     }
 
+    if (rounded) {
+        classes = classes.map((c) => c.replace('rounded', 'rounded-full h-10 w-10 justify-center'));
+    }
+
     return (
         <button {...rest} type={type} className={cn(classes, className)}>
             {icon && <Icon className={cn({ 'mr-2': children })} name={icon} color={iconColor} size="16" />}