style: update border across workspace and project settings. (#2669)

* style: update border across workspace and project settings.

* update border width
This commit is contained in:
Prateek Shourya 2023-11-07 13:12:05 +05:30 committed by GitHub
parent d8c96536f0
commit 37bf465fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 35 additions and 35 deletions

View File

@ -29,7 +29,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
handleClose={() => setmonthModal(false)}
handleChange={handleChange}
/>
<div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
<div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
<div className="flex items-center justify-between">
<div className="flex items-start gap-3">
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@ -54,7 +54,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
{projectDetails?.archive_in !== 0 && (
<div className="ml-12">
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
<div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border-[0.5px] border-custom-border-200 gap-2 w-full">
<div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
<div className="w-1/2">
<CustomSelect

View File

@ -73,7 +73,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
handleChange={handleChange}
/>
<div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
<div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
<div className="flex items-center justify-between">
<div className="flex items-start gap-3">
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@ -100,7 +100,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
{projectDetails?.close_in !== 0 && (
<div className="ml-12">
<div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
<div className="flex flex-col rounded bg-custom-background-90 border-[0.5px] border-custom-border-200 p-2">
<div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
<div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
<div className="w-1/2">

View File

@ -54,7 +54,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
return (
<>
<div className="gap-2 p-4 border-b border-custom-border-200">
<div className="gap-2 p-4 border-b border-custom-border-100">
<div className="flex items-center justify-between">
<div>
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">

View File

@ -71,7 +71,7 @@ export const EstimatesList: React.FC = observer(() => {
data={projectStore.getProjectEstimateById(estimateToDelete!)}
/>
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
<section className="flex items-center justify-between py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Estimates</h3>
<div className="col-span-12 space-y-5 sm:col-span-7">
<div className="flex items-center gap-2">

View File

@ -53,7 +53,7 @@ const IntegrationGuide = () => {
{EXPORTERS_LIST.map((service) => (
<div
key={service.provider}
className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
>
<div className="flex items-start justify-between gap-4 w-full">
<div className="flex item-center gap-2.5">
@ -79,7 +79,7 @@ const IntegrationGuide = () => {
))}
</div>
<div>
<div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-200">
<div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-100">
<div className="flex gap-2 items-center">
<h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>

View File

@ -79,7 +79,7 @@ const IntegrationGuide = () => {
{IMPORTERS_EXPORTERS_LIST.map((service) => (
<div
key={service.provider}
className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
>
<div className="flex items-start gap-4">
<div className="relative h-10 w-10 flex-shrink-0">
@ -100,7 +100,7 @@ const IntegrationGuide = () => {
</div>
))}
<div>
<div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-200">
<div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-100">
<h3 className="flex gap-2 text-xl font-medium">
Previous Imports
<button

View File

@ -93,7 +93,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
return (
<div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
<div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
<div className="flex items-start gap-4">
<div className="h-10 w-10 flex-shrink-0">
<Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />

View File

@ -41,7 +41,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
return (
<Disclosure
as="div"
className="rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
className="rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
defaultOpen
>
{({ open }) => (
@ -95,7 +95,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
{labelChildren.map((child) => (
<div
key={child.id}
className="group flex items-center justify-between border-b border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
className="group flex items-center justify-between border-b-[0.5px] border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
>
<h5 className="flex items-center gap-3">
<span

View File

@ -25,7 +25,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
return (
<div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
<div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
<div className="flex items-center gap-3">
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"

View File

@ -76,7 +76,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
onClose={() => setSelectDeleteLabel(null)}
/>
<div className="flex items-center py-3.5 border-b border-custom-border-200 justify-between">
<div className="flex items-center py-3.5 border-b border-custom-border-100 justify-between">
<h3 className="text-xl font-medium">Labels</h3>
<Button variant="primary" onClick={newLabel} size="sm">
Add label

View File

@ -87,7 +87,7 @@ export const ProjectMemberList: React.FC = observer(() => {
}}
/>
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
<h4 className="text-xl font-medium">Members</h4>
<div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<Search className="h-3.5 w-3.5" />
@ -111,7 +111,7 @@ export const ProjectMemberList: React.FC = observer(() => {
<Loader.Item height="40px" />
</Loader>
) : (
<div className="divide-y divide-custom-border-200">
<div className="divide-y divide-custom-border-100">
{members.length > 0
? searchedMembers.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
: null}

View File

@ -83,7 +83,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
return (
<>
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Defaults</h3>
</div>

View File

@ -17,7 +17,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
const { projectDetails, handleDelete } = props;
return (
<Disclosure as="div" className="border-t border-custom-border-400">
<Disclosure as="div" className="border-t border-custom-border-100">
{({ open }) => (
<div className="w-full">
<Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">

View File

@ -96,7 +96,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
{PROJECT_FEATURES_LIST.map((feature) => (
<div
key={feature.property}
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 p-4"
>
<div className="flex items-start gap-3">
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">{feature.icon}</div>

View File

@ -56,7 +56,7 @@ export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
};
return (
<div className="group flex items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-3">
<div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-3">
<div className="flex items-center gap-3">
<StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
<div>

View File

@ -93,7 +93,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
handleDeleteState={() => setSelectDeleteState(state.id)}
/>
) : (
<div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
<div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
<CreateUpdateStateInline
onClose={() => {
setActiveGroup(null);

View File

@ -6,7 +6,7 @@ type Props = {
};
export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
<div className="flex items-start gap-3 py-3.5 border-b border-custom-border-200">
<div className="flex items-start gap-3 py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">{bannerName}</h3>
{description && (
<div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">

View File

@ -135,7 +135,7 @@ export const WorkspaceDetails: React.FC = observer(() => {
value={watch("logo")}
/>
<div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
<div className="flex gap-5 items-center pb-7 border-b border-custom-border-100">
<div className="flex flex-col gap-1">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
{watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
@ -265,7 +265,7 @@ export const WorkspaceDetails: React.FC = observer(() => {
</div>
</div>
{isAdmin && (
<Disclosure as="div" className="border-t border-custom-border-200">
<Disclosure as="div" className="border-t border-custom-border-100">
{({ open }) => (
<div className="w-full">
<Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">

View File

@ -37,7 +37,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
<>
{userActivity ? (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Activity</h3>
</div>
<div className={`flex flex-col gap-2 py-4 w-full`}>
@ -153,7 +153,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
</div>
</div>
</div>
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
<div className="text-sm text-custom-text-200 break-words">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span>

View File

@ -50,7 +50,7 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
<>
{userStore.currentUser ? (
<div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Preferences</h3>
</div>
<div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">

View File

@ -69,7 +69,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
return (
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Automations</h3>
</div>
<AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />

View File

@ -29,7 +29,7 @@ const FeaturesSettingsPage: NextPageWithLayout = () => {
return (
<section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Features</h3>
</div>
<ProjectFeaturesList />

View File

@ -10,7 +10,7 @@ import { NextPageWithLayout } from "types/app";
const StatesSettingsPage: NextPageWithLayout = () => (
<div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">States</h3>
</div>
<ProjectSettingStateList />

View File

@ -12,7 +12,7 @@ import { NextPageWithLayout } from "types/app";
const BillingSettingsPage: NextPageWithLayout = () => (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div>
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Billing & Plans</h3>
</div>
</div>

View File

@ -12,7 +12,7 @@ const ExportsPage: NextPageWithLayout = () => (
<AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<WorkspaceSettingLayout>
<div className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Exports</h3>
</div>
<ExportGuide />

View File

@ -10,7 +10,7 @@ import { NextPageWithLayout } from "types/app";
const ImportsPage: NextPageWithLayout = () => (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center py-3.5 border-b border-custom-border-200">
<div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Imports</h3>
</div>
<IntegrationGuide />

View File

@ -35,7 +35,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = () => {
/>
)}
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center justify-between gap-4 py-3.5 border-b-[0.5px] border-custom-border-200">
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
<h4 className="text-xl font-medium">Members</h4>
<div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<Search className="h-3.5 w-3.5" />