jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix lists in settings

Browse source
This commit is contained in:
sylenien 2022-08-24 15:22:17 +02:00
parent 957930c875
commit 19f4224519
12 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Client/Client.js
View file

@ -52,7 +52,7 @@ export default class Client extends React.PureComponent {
<div className={ styles.tabMenu }>
<PreferencesMenu activeTab={activeTab} />
</div>
<div className="bg-white w-full rounded-lg mx-4 my-6 p-5 border">
<div className="bg-white w-full rounded-lg mx-4 my-6 border">
{ activeTab && this.renderActiveTab() }
</div>
</div>

4
frontend/app/components/Client/CustomFields/CustomFields.js
View file

@ -66,14 +66,14 @@ function CustomFields(props) {
const { fields, loading } = props;
return (
<div>
<div className={styles.tabHeader}>
<div className={cn(styles.tabHeader, 'px-5 pt-5')}>
<h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
<div style={{ marginRight: '15px' }}>
<SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
</div>
<Button variant="primary" onClick={() => init()}>Add</Button>
</div>
<div className="text-base text-disabled-text flex items-center mt-3">
<div className="text-base text-disabled-text flex px-5 items-center mt-3">
<Icon name="info-circle-fill" className="mr-2" size={16} />
See additonal user information in sessions.
<a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">Learn more</a>

2
frontend/app/components/Client/CustomFields/ListItem.js
View file

@ -7,7 +7,7 @@ const ListItem = ({ field, onEdit, disabled }) => {
return (
<div
className={cn(
'border-b group last:border-none hover:bg-active-blue flex items-center justify-between p-3 cursor-pointer',
'border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer',
field.index === 0 ? styles.preDefined : '',
{
[styles.disabled]: disabled,

2
frontend/app/components/Client/Integrations/Integrations.tsx
View file

@ -73,7 +73,7 @@ function Integrations(props: Props) {
};
return (
<div className="mb-4">
<div className="mb-4 p-5">
{!hideHeader && <PageTitle title={<div>Integrations</div>} />}
{integrations.map((cat: any) => (
<div className="mb-2 border-b last:border-none py-3">

2
frontend/app/components/Client/Notifications/Notifications.js
View file

@ -21,7 +21,7 @@ function Notifications(props) {
};
return (
<div className={stl.wrapper}>
<div className="p-5">
<div className={stl.tabHeader}>{<h3 className={cn(stl.tabTitle, 'text-2xl')}>{'Notifications'}</h3>}</div>
<div className="">
<div className="text-lg font-medium">Weekly project summary</div>

4
frontend/app/components/Client/ProfileSettings/ProfileSettings.js
View file

@ -19,7 +19,7 @@ export default class ProfileSettings extends React.PureComponent {
render() {
const { account, isEnterprise } = this.props;
return (
<React.Fragment>
<div className="p-5">
<PageTitle title={<div>Account</div>} />
<div className="flex items-center">
<div className={styles.left}>
@ -106,7 +106,7 @@ export default class ProfileSettings extends React.PureComponent {
</div>
</>
)}
</React.Fragment>
</div>
);
}
}

7
frontend/app/components/Client/Sites/Sites.js
View file

@ -14,6 +14,7 @@ import ProjectKey from './ProjectKey';
import { useModal } from 'App/components/Modal';
import { getInitials } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import cn from 'classnames'
const STATUS_MESSAGE_MAP = {
[RED]: ' There seems to be an issue (please verify your installation)',
@ -67,7 +68,7 @@ class Sites extends React.PureComponent {
return (
<Loader loading={loading}>
<div className={stl.wrapper}>
<div className={stl.tabHeader}>
<div className={cn(stl.tabHeader, 'px-5 pt-5')}>
<PageTitle title={<div className="mr-4">Projects</div>} actionButton={<AddProjectButton isAdmin={isAdmin} />} />
<div className="flex ml-auto items-center">
@ -87,7 +88,7 @@ class Sites extends React.PureComponent {
size="small"
show={!loading && filteredSites.size === 0}
>
<div className="grid grid-cols-12 gap-2 w-full items-center border-b px-2 py-3 font-medium">
<div className="grid grid-cols-12 gap-2 w-full items-center px-5 py-3 font-medium">
<div className="col-span-4">Project Name</div>
<div className="col-span-4">Key</div>
<div className="col-span-4"></div>
@ -95,7 +96,7 @@ class Sites extends React.PureComponent {
{filteredSites.map((_site) => (
<div
key={_site.key}
className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3 last:border-none"
className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-t px-5 py-3"
>
<div className="col-span-4">
<div className="flex items-center">

2
frontend/app/components/Client/Users/UsersView.tsx
View file

@ -37,7 +37,7 @@ function UsersView(props: Props) {
return (
<div>
<div className="flex items-center justify-between">
<div className="flex items-center justify-between px-5 pt-5">
<PageTitle
title={
<div>

2
frontend/app/components/Client/Users/components/UserList/UserList.tsx
View file

@ -54,7 +54,7 @@ function UserList(props: Props) {
show={!loading && length === 0}
>
<div className="mt-3 rounded bg-white">
<div className="grid grid-cols-12 p-3 border-b font-medium">
<div className="grid grid-cols-12 py-3 px-5 font-medium">
<div className="col-span-5">Name</div>
<div className="col-span-3">Role</div>
{!isOnboarding && <div className="col-span-2">Created On</div>}

2
frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
View file

@ -24,7 +24,7 @@ interface Props {
function UserListItem(props: Props) {
const { user, editHandler = () => {}, generateInvite = () => {}, copyInviteCode = () => {}, isEnterprise = false, isOnboarding = false } = props;
return (
<div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
<div className="grid grid-cols-12 py-4 px-5 border-t items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
<div className="col-span-5">
<span className="mr-2">{user.name}</span>
{isEnterprise && <AdminPrivilegeLabel user={user} />}

2
frontend/app/components/Client/Webhooks/ListItem.js
View file

@ -5,7 +5,7 @@ import { Button } from 'UI';
const ListItem = ({ webhook, onEdit, onDelete }) => {
return (
<div className="border-b group last:border-none hover:bg-active-blue flex items-center justify-between p-3 cursor-pointer" onClick={onEdit}>
<div className="border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer" onClick={onEdit}>
<div>
<span>{webhook.name}</span>
<div className={styles.endpoint}>{webhook.endpoint}</div>

4
frontend/app/components/Client/Webhooks/Webhooks.js
View file

@ -43,13 +43,13 @@ function Webhooks(props) {
return (
<div>
<div className={styles.tabHeader}>
<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>
</div>
<div className="text-base text-disabled-text flex items-center mt-3">
<div className="text-base text-disabled-text flex items-center mt-3 px-5">
<Icon name="info-circle-fill" className="mr-2" size={16} />
Leverage webhooks to push OpenReplay data to other systems.
</div>