Skip to content

Commit 6ac5426

Browse files
fzaninottofzaninotto
committed
Misc UI adjustments
1 parent f28d5a9 commit 6ac5426

20 files changed

+86
-58
lines changed

‎src/atomic-crm/activity/ActivityLogIterator.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Separator } from "@/components/ui/separator";
21
import { Fragment, useState } from "react";
2+
import { Separator } from "@/components/ui/separator";
3+
34
import {
45
COMPANY_CREATED,
56
CONTACT_CREATED,
@@ -28,7 +29,7 @@ export function ActivityLogIterator({
2829
const filteredActivities = activities.slice(0, activitiesDisplayed);
2930

3031
return (
31-
<div className="space-y-2">
32+
<div className="space-y-4">
3233
{filteredActivities.map((activity, index) => (
3334
<Fragment key={index}>
3435
<ActivityItem key={activity.id} activity={activity} />

‎src/atomic-crm/companies/CompanyAside.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Globe, Linkedin, Phone } from "lucide-react";
2+
import { useRecordContext } from "ra-core";
13
import {
24
EditButton,
35
ReferenceField,
@@ -7,8 +9,7 @@ import {
79
UrlField,
810
SelectField,
911
} from "@/components/admin";
10-
import { Globe, Linkedin, Phone } from "lucide-react";
11-
import { useRecordContext } from "ra-core";
12+
1213
import { AsideSection } from "../misc/AsideSection";
1314
import { SaleName } from "../sales/SaleName";
1415
import type { Company } from "../types";
@@ -23,7 +24,7 @@ export const CompanyAside = ({ link = "edit" }: CompanyAsideProps) => {
2324
if (!record) return null;
2425

2526
return (
26-
<div className="ml-4 w-[250px] min-w-[250px] space-y-4">
27+
<div className="hidden sm:block w-[250px] min-w-[250px] space-y-4">
2728
<div className="flex flex-row space-x-1">
2829
{link === "edit" ? (
2930
<EditButton label="Edit Company" />

‎src/atomic-crm/companies/CompanyCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { ReferenceManyField } from "@/components/admin";
2-
import { Card } from "@/components/ui/card";
31
import { DollarSign } from "lucide-react";
4-
import { useCreatePath, useListContext, useRecordContext } from "ra-core";
52
import { Link } from "react-router";
3+
import { useCreatePath, useListContext, useRecordContext } from "ra-core";
4+
import { ReferenceManyField } from "@/components/admin";
5+
import { Card } from "@/components/ui/card";
66

77
import { Avatar as ContactAvatar } from "../contacts/Avatar";
88
import type { Company } from "../types";
@@ -22,7 +22,7 @@ export const CompanyCard = (props: { record?: Company }) => {
2222
})}
2323
className="no-underline"
2424
>
25-
<Card className="h-[200px] flex flex-col justify-between p-4 transition-shadow shadow hover:bg-muted">
25+
<Card className="h-[200px] flex flex-col justify-between p-4 hover:bg-muted">
2626
<div className="flex flex-col items-center gap-1">
2727
<CompanyAvatar />
2828
<div className="text-center mt-1">

‎src/atomic-crm/companies/CompanyCreate.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { Form, useGetIdentity } from "ra-core";
1+
import { CreateBase, Form, useGetIdentity } from "ra-core";
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { CancelButton, SaveButton, FormToolbar } from "@/components/admin";
24

3-
import { CancelButton, Create } from "@/components/admin";
4-
import { SaveButton } from "@/components/admin";
5-
import { FormToolbar } from "@/components/admin";
65
import { CompanyInputs } from "./CompanyInputs";
76

87
export const CompanyCreate = () => {
98
const { identity } = useGetIdentity();
109
return (
11-
<Create
10+
<CreateBase
1211
redirect="show"
1312
transform={(values) => {
1413
// add https:// before website if not present
@@ -18,15 +17,23 @@ export const CompanyCreate = () => {
1817
return values;
1918
}}
2019
>
21-
<Form defaultValues={{ sales_id: identity?.id }}>
22-
<CompanyInputs />
23-
<FormToolbar>
24-
<div className="flex flex-row gap-2 justify-end">
25-
<CancelButton />
26-
<SaveButton label="Create Company" />
27-
</div>
28-
</FormToolbar>
29-
</Form>
30-
</Create>
20+
<div className="mt-2 flex lg:mr-72">
21+
<div className="flex-1">
22+
<Form defaultValues={{ sales_id: identity?.id }}>
23+
<Card>
24+
<CardContent>
25+
<CompanyInputs />
26+
<FormToolbar>
27+
<div className="flex flex-row gap-2 justify-end">
28+
<CancelButton />
29+
<SaveButton label="Create Company" />
30+
</div>
31+
</FormToolbar>
32+
</CardContent>
33+
</Card>
34+
</Form>
35+
</div>
36+
</div>
37+
</CreateBase>
3138
);
3239
};

‎src/atomic-crm/companies/CompanyEdit.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const CompanyEdit = () => (
1818
return values;
1919
}}
2020
>
21-
<div className="flex">
21+
<div className="mt-2 flex gap-8">
2222
<Form className="flex flex-1 flex-col gap-4 pb-2">
2323
<Card>
2424
<CardContent>

‎src/atomic-crm/companies/CompanyInputs.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const CompanyInputs = () => {
3030
return (
3131
<div className="flex flex-col gap-4 p-1">
3232
<CompanyDisplayInputs />
33-
<div className={`flex gap-4 ${isMobile ? "flex-col" : "flex-row"}`}>
34-
<div className="flex flex-col gap-8 flex-1">
33+
<div className={`flex gap-6 ${isMobile ? "flex-col" : "flex-row"}`}>
34+
<div className="flex flex-col gap-10 flex-1">
3535
<CompanyContactInputs />
3636
<CompanyContextInputs />
3737
</div>
@@ -63,6 +63,7 @@ const CompanyDisplayInputs = () => {
6363
className="w-full h-fit"
6464
validate={required()}
6565
helperText={false}
66+
placeholder="Company name"
6667
/>
6768
</div>
6869
);

‎src/atomic-crm/companies/CompanyShow.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { Button } from "@/components/ui/button";
2-
import { Card, CardContent } from "@/components/ui/card";
3-
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
41
import { formatDistance } from "date-fns";
52
import { UserPlus } from "lucide-react";
63
import {
@@ -16,6 +13,9 @@ import {
1613
useMatch,
1714
useNavigate,
1815
} from "react-router-dom";
16+
import { Button } from "@/components/ui/button";
17+
import { Card, CardContent } from "@/components/ui/card";
18+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
1919
import { ReferenceManyField, SortButton } from "@/components/admin";
2020

2121
import { ActivityLog } from "../activity/ActivityLog";
@@ -54,7 +54,7 @@ const CompanyShowContent = () => {
5454
if (isPending || !record) return null;
5555

5656
return (
57-
<div className="flex pb-2">
57+
<div className="mt-2 flex pb-2 gap-8">
5858
<div className="flex-1">
5959
<Card>
6060
<CardContent>
@@ -145,7 +145,7 @@ const ContactsIterator = () => {
145145
<RouterLink
146146
to={`/contacts/${contact.id}/show`}
147147
state={{ from: location.pathname }}
148-
className="flex items-center justify-between hover:bg-muted py-2 px-4 transition-colors"
148+
className="flex items-center justify-between hover:bg-muted py-2 transition-colors"
149149
>
150150
<div className="mr-4">
151151
<Avatar />

‎src/atomic-crm/contacts/ContactAside.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const ContactAside = ({ link = "edit" }: { link?: "edit" | "show" }) => {
2626
const record = useRecordContext<Contact>();
2727
if (!record) return null;
2828
return (
29-
<div className="ml-4 w-64 min-w-64 text-sm">
29+
<div className="hidden sm:block w-64 min-w-64 text-sm">
3030
<div className="mb-4 -ml-1">
3131
{link === "edit" ? (
3232
<EditButton label="Edit Contact" />

‎src/atomic-crm/contacts/ContactCreate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const ContactCreate = () => {
1717
tags: [],
1818
})}
1919
>
20-
<div className="mt-2 flex">
20+
<div className="mt-2 flex lg:mr-72">
2121
<div className="flex-1">
2222
<Form defaultValues={{ sales_id: identity?.id }}>
2323
<Card>

‎src/atomic-crm/contacts/ContactEdit.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ContactEditContent = () => {
1616
const { isPending, record } = useEditContext<Contact>();
1717
if (isPending || !record) return null;
1818
return (
19-
<div className="mt-2 flex">
19+
<div className="mt-2 flex gap-8">
2020
<Form className="flex flex-1 flex-col gap-4">
2121
<Card>
2222
<CardContent>

0 commit comments

Comments
 (0)