[WEB-579] style: scrollbar implementation (#3835)

* style: scrollbar added in profile summary and sidebar

* style: scrollbar added in modals

* style: scrollbar added in project setting screens

* style: scrollbar added in workspace and profile settings

* style: scrollbar added in dropdowns and filters
This commit is contained in:
Anmol Singh Bhatia 2024-03-06 14:18:19 +05:30 committed by GitHub
parent 4d0f641ee0
commit c06ef4d1d7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 41 additions and 31 deletions

View file

@ -45,7 +45,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
return (
<>
<PageHead title="Profile - Summary" />
<div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9">
<div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9 vertical-scrollbar scrollbar-md">
<ProfileStats userProfile={userProfile} />
<ProfileWorkload stateDistribution={stateDistribution} />
<div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">

View file

@ -26,7 +26,7 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
return (
<>
<PageHead title={pageTitle} />
<div className={`h-full w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
<div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
<EstimatesList />
</div>
</>

View file

@ -56,7 +56,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = observer(() => {
return (
<>
<PageHead title={pageTitle} />
<div className={`h-full w-full gap-10 overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
<div className={`w-full gap-10 overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center border-b border-custom-border-100 py-3.5">
<h3 className="text-xl font-medium">Integrations</h3>
</div>

View file

@ -19,7 +19,7 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
return (
<>
<PageHead title={pageTitle} />
<div className="h-full w-full gap-10 overflow-y-auto py-8 pr-9">
<div className="w-full gap-10 overflow-y-auto py-8 pr-9">
<ProjectSettingsLabelList />
</div>
</>

View file

@ -71,7 +71,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
<>
<PageHead title={pageTitle} />
<CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
<section className="h-full w-full overflow-y-auto py-8 pr-9">
<section className="w-full overflow-y-auto py-8 pr-9 ">
{tokens.length > 0 ? (
<>
<div className="flex items-center justify-between border-b border-custom-border-200 py-3.5">

View file

@ -70,7 +70,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
return (
<>
<PageHead title={pageTitle} />
<div className="h-full w-full overflow-hidden py-8 pr-9">
<div className="w-full overflow-y-auto py-8 pr-9">
<CreateWebhookModal
createWebhook={createWebhook}
clearSecretKey={clearSecretKey}

View file

@ -40,7 +40,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
<h3 className="text-xl font-medium">Activity</h3>
</div>
{userActivity ? (
<div className="flex h-full w-full flex-col gap-2 overflow-y-auto">
<div className="flex h-full w-full flex-col gap-2 overflow-y-auto vertical-scrollbar scrollbar-md">
<ul role="list" className="-mb-4">
{userActivity.results.map((activityItem: any) => {
if (activityItem.field === "comment") {

View file

@ -163,7 +163,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
)}
/>
<DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
<div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-10 md:pt-16 px-8 pb-8 lg:w-3/5">
<div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-10 md:pt-16 px-8 pb-8 lg:w-3/5 vertical-scrollbar scrollbar-md">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full flex-col gap-8">
<div className="relative h-44 w-full">

View file

@ -28,7 +28,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = () => {
return (
<>
<PageHead title="Profile - Email Preference" />
<div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
<div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8">
<EmailNotificationForm data={data} />
</div>
</>