Various minor style updates

This commit is contained in:
Sudheer Salavadi 2024-06-26 17:47:42 +05:30
parent 56a46b1ea5
commit 0064d6f111
18 changed files with 32 additions and 22 deletions

View file

@ -26,7 +26,7 @@ function Recordings(props: Props) {
};
return (
<div style={{ maxWidth: '1360px', margin: 'auto' }} className='bg-white rounded py-4 border h-screen overflow-y-scroll'>
<div style={{ maxWidth: '1360px', margin: 'auto' }} className='bg-white rounded-lg py-4 border h-screen overflow-y-scroll'>
<div className='flex items-center mb-4 justify-between px-6'>
<div className='flex items-baseline mr-3'>
<PageTitle title='Training Videos' />

View file

@ -29,7 +29,7 @@ function AuditView() {
}
return useObserver(() => (
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border">
<div className="flex items-center mb-4 px-5 pt-5">
<PageTitle title={
<div className="flex items-center">

View file

@ -68,7 +68,7 @@ function CustomFields(props) {
const { fields, loading } = props;
return (
<div className="p-5 bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border p-5 ">
<div className={cn(styles.tabHeader)}>
<h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
<div style={{ marginRight: '15px' }}>

View file

@ -108,7 +108,7 @@ function Integrations(props: Props) {
return (
<>
<div className='mb-4 p-5 bg-white rounded-lg border'>
<div className='bg-white rounded-lg border shadow-sm p-5 mb-4'>
{!hideHeader && <PageTitle title={<div>Integrations</div>} />}
<IntegrationFilters onChange={onChange} activeItem={activeFilter} filters={filters} />

View file

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

View file

@ -65,7 +65,7 @@ function Roles(props: Props) {
return (
<React.Fragment>
<Loader loading={loading}>
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border">
<div className={cn(stl.tabHeader, 'flex items-center')}>
<div className="flex items-center mr-auto px-5 pt-5">
<h3 className={cn(stl.tabTitle, 'text-2xl')}>Roles and Access</h3>

View file

@ -19,7 +19,7 @@ const connector = connect(mapStateToProps);
function SessionsListingSettings(props: Props) {
return (
<div className='bg-white rounded-lg p-5'>
<div className='bg-white rounded-lg border shadow-sm p-5'>
<PageTitle title={<div>Sessions Listing</div>} />
<div className='flex flex-col mt-4'>

View file

@ -111,7 +111,7 @@ const Sites = ({ loading, sites, user, init }: PropsFromRedux) => {
return (
<Loader loading={loading}>
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border">
<div className={cn(stl.tabHeader, 'px-5 pt-5')}>
<PageTitle
title={<div className="mr-4">Projects</div>}

View file

@ -36,7 +36,7 @@ function UsersView(props: Props) {
}, []);
return (
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border">
<div className="flex items-center justify-between px-5 pt-5">
<PageTitle
title={

View file

@ -44,7 +44,7 @@ function Webhooks() {
};
return (
<div className="p-5 bg-white rounded-lg">
<div className="bg-white rounded-lg shadow-sm border p-5">
<div className={cn(styles.tabHeader)}>
<h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
<Button className="ml-auto" variant="primary" onClick={() => init()}>Add Webhook</Button>

View file

@ -26,7 +26,7 @@ function AlertsView({ siteId }: IAlertsView) {
return unmount;
}, [history]);
return (
<div style={{ maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded py-4 border">
<div style={{ maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded-lg shadow-sm py-4 border">
<div className="flex items-center mb-4 justify-between px-6">
<div className="flex items-baseline mr-3">
<PageTitle title="Alerts" />

View file

@ -84,10 +84,10 @@ function DashboardList({siteId}: { siteId: string }) {
</Typography.Text>
: (
<div>
<Typography.Text className="mb-2 text-lg">
You haven't created any dashboards yet
<Typography.Text className="mb-2 text-xl font-medium">
Create your first dashboard.
</Typography.Text>
<div className="text-sm text-gray-500 mt-2">
{/* <div className="text-base text-gray-500">
A Dashboard is a collection of{' '}
<Tooltip
title={
@ -98,9 +98,15 @@ function DashboardList({siteId}: { siteId: string }) {
}
className="text-center"
>
<span className="underline decoration-dotted">Cards</span>
<span className="underline decoration-dotted">cards</span>
</Tooltip>{' '}
that can be shared across teams.
</div> */}
<div>
<div className="mb-2 text-lg text-gray-500 mt-2 leading-normal">
Organize your product and technical insights as cards in dashboards to see the bigger picture, <br/>take action and improve user experience.
</div>
</div>
<div className="my-4">

View file

@ -5,7 +5,7 @@ import Header from './Header';
function DashboardsView({history, siteId}: { history: any; siteId: string }) {
return (
<div style={{maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded py-4 border">
<div style={{maxWidth: '1360px', margin: 'auto'}} className="bg-white rounded-lg py-4 border shadow-sm">
<Header />
<DashboardList/>
</div>

View file

@ -9,7 +9,7 @@ interface Props {
}
function MetricsView({ siteId }: Props) {
return useObserver(() => (
<div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded pt-4 border">
<div style={{ maxWidth: '1360px', margin: 'auto' }} className="bg-white rounded-lg shadow-sm pt-4 border">
<MetricViewHeader siteId={siteId} />
<MetricsList siteId={siteId} />
</div>

View file

@ -104,11 +104,11 @@ function TestsTable() {
/>
</Modal>
<div className={'rounded bg-white border'}>
<div className={'bg-white rounded-lg shadow-sm border'}>
<div className={'flex items-center p-4 gap-2'}>
<Typography.Title level={4} style={{ marginBottom: 0 }}>
<h1 style={{ marginBottom: 0 }} className='text-2xl capitalize-first'>
Usability Tests
</Typography.Title>
</h1>
<div className={'ml-auto'} />
<Button type="primary" onClick={openModal}>
Create Usability Test

View file

@ -84,7 +84,7 @@ function LiveSessionList(props: Props) {
return (
<div>
<div className="bg-white p-3 rounded border">
<div className="bg-white p-3 rounded-lg border shadow-sm">
<div className="flex mb-6 justify-between items-center">
<div className="flex items-center">
<h3 className="text-2xl capitalize mr-2">

View file

@ -382,4 +382,8 @@ p {
border-radius: 3px;
resize: none;
background-color: #ffff;
}
.ant-menu-light .ant-menu-item-selected, :where(.css-dev-only-do-not-override).ant-menu-light>.ant-menu .ant-menu-item-selected{
background-color: #E6E9FA;
}

View file

@ -14,7 +14,7 @@ input.no-focus:focus {
}
.widget-wrapper {
@apply rounded border bg-white;
@apply rounded-lg shadow-sm border bg-white;
}
@layer base {