fix(ui): fix list action positions

frontend/app/components/Client/CustomFields/CustomFields.js

@@ -71,7 +71,7 @@ function CustomFields(props) {
                 <div style={{ marginRight: '15px' }}>
                     <SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
                 </div>
-                <Button variant="primary" onClick={() => init()}>Add</Button>
+                <Button className="ml-auto" variant="primary" onClick={() => init()}>Add</Button>
             </div>
             <div className="text-base text-disabled-text flex px-5 items-center my-3">
                 <Icon name="info-circle-fill" className="mr-2" size={16} />

frontend/app/components/Client/Sites/Sites.js

@@ -69,14 +69,15 @@ class Sites extends React.PureComponent {
             <Loader loading={loading}>
                 <div className={stl.wrapper}>
                     <div className={cn(stl.tabHeader, 'px-5 pt-5')}>
-                        <PageTitle title={<div className="mr-4">Projects</div>} actionButton={<AddProjectButton isAdmin={isAdmin} />} />
+                        <PageTitle title={<div className="mr-4">Projects</div>} actionButton={<TextLink icon="book" href="https://docs.openreplay.com/installation" label="Installation Docs" />} />
 
                         <div className="flex ml-auto items-center">
-                            <TextLink icon="book" className="mr-4" href="https://docs.openreplay.com/installation" label="Installation Docs" />
+                            <AddProjectButton isAdmin={isAdmin} />
+                            <div className="mx-2" />
                             <SiteSearch onChange={(value) => this.setState({ searchQuery: value })} />
                         </div>
                     </div>
-                    
+
                     <div className={stl.list}>
                     <NoContent
                         title={

frontend/app/components/Client/Users/UsersView.tsx

@@ -44,9 +44,10 @@ function UsersView(props: Props) {
                             Team <span className="color-gray-medium">{userCount}</span>
                         </div>
                     }
-                    actionButton={<AddUserButton isAdmin={isAdmin} onClick={() => editHandler(null)} />}
                 />
-                <div>
+                <div className="flex items-center">
+                    <AddUserButton isAdmin={isAdmin} onClick={() => editHandler(null)} />
+                    <div className="mx-2" />
                     <UserSearch />
                 </div>
             </div>

frontend/app/components/Client/Webhooks/Webhooks.js

@@ -46,7 +46,7 @@ function Webhooks(props) {
       <div className={cn(styles.tabHeader, 'px-5 pt-5')}>
         <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
         {/* <Button rounded={true} icon="plus" variant="outline" onClick={() => init()} /> */}
-        <Button variant="primary" onClick={() => init()}>Add</Button>
+        <Button className="ml-auto" variant="primary" onClick={() => init()}>Add</Button>
       </div>
 
       <div className="text-base text-disabled-text flex items-center my-3 px-5">

frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx

@@ -20,9 +20,11 @@ function AlertsView({ siteId, init }: IAlertsView) {
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Alerts" />
                 </div>
-                <Link to={withSiteId(alertCreate(), siteId)}><Button variant="primary" onClick={null}>Create</Button></Link>
-                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
-                    <AlertsSearch />
+                <div className="ml-auto flex items-center">
+                    <Link to={withSiteId(alertCreate(), siteId)}><Button variant="primary" onClick={null}>Create</Button></Link>
+                    <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
+                        <AlertsSearch />
+                    </div>
                 </div>
             </div>
             <div className="text-base text-disabled-text flex items-center px-6">

frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx

@@ -26,9 +26,11 @@ function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Dashboards" />
                 </div>
-                <Button variant="primary" onClick={onAddDashboardClick}>Create</Button>
-                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
-                    <DashboardSearch />
+                <div className="ml-auto flex items-center">
+                    <Button variant="primary" onClick={onAddDashboardClick}>Create</Button>
+                    <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
+                        <DashboardSearch />
+                    </div>
                 </div>
             </div>
             <div className="text-base text-disabled-text flex items-center px-6">

frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx

@@ -21,9 +21,11 @@ function MetricsView({ siteId }: Props) {
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
                 </div>
-                <Link to={'/metrics/create'}><Button variant="primary">Create</Button></Link>
-                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
-                    <MetricsSearch />
+                <div className="ml-auto flex items-center">
+                    <Link to={'/metrics/create'}><Button variant="primary">Create</Button></Link>
+                    <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
+                        <MetricsSearch />
+                    </div>
                 </div>
             </div>
             <div className="text-base text-disabled-text flex items-center px-6">