Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Darken labels and fix col gap under profile #2567

Merged
merged 1 commit into from
Jun 10, 2022
Merged

Darken labels and fix col gap under profile #2567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/Components/Users/ProfileComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const LabelValueCard = (props: { children: React.ReactNode }) => (
<div className="sm:col-span-1">{props.children}</div>
);

export const ProfileLabel = (props: { text: string }) => (
<dt className="text-sm leading-5 font-medium text-gray-800">{props.text}</dt>
);

export const ProfileValue = (props: { text: string }) => (
<dd className="mt-1 text-sm leading-5 text-gray-900">{props.text || "-"}</dd>
);

export const ValueBadge = (props: { text: string }) => (
<dd className="mt-2 mb-1 badge badge-pill badge-primary text-sm leading-5 text-white">
{props.text}
</dd>
);
165 changes: 58 additions & 107 deletions src/Components/Users/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ import * as Notification from "../../Utils/Notifications.js";
import { checkIfLatestBundle } from "../../Utils/build-meta-info";
import LanguageSelector from "../../Components/Common/LanguageSelector";
import Switch from "@material-ui/core/Switch";
import {
ProfileLabel,
LabelValueCard,
ProfileValue,
ValueBadge,
} from "./ProfileComponents";

const Loading = loadable(() => import("../Common/Loading"));

Expand Down Expand Up @@ -329,118 +335,63 @@ export default function UserProfile() {
{!showEdit && (
<div className="px-4 py-5 sm:px-6 bg-white shadow overflow-hidden sm:rounded-lg m-2 rounded-lg">
<dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
<div className="sm:col-span-1">
<dt className="text-sm leading-5 font-medium text-gray-500">
Username
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.username || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Contact No
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.phone_number || "-"}
</dd>
</div>

<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Whatsapp No
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.alt_phone_number || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.email || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
First Name
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.first_name || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Last Name
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.last_name || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Age
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.age || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Verification Status
</dt>
{details.verified && (
<dd className="mt-2 mb-1 badge badge-pill badge-primary text-sm leading-5 text-white">
Verified
</dd>
)}
<LabelValueCard>
<ProfileLabel text="Username" />
<ProfileValue text={details.username} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Contact No" />
<ProfileValue text={details.phone_number} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Whatsapp No" />
<ProfileValue text={details.alt_phone_number} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Email address" />
<ProfileValue text={details.email} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="First Name" />
<ProfileValue text={details.first_name} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Last Name" />
<ProfileValue text={details.last_name} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Age" />
<ProfileValue text={details.age} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Verification Status" />
{details.verified && <ValueBadge text="Verified" />}
{!details.verified && (
<dd className="mt-2 mb-1 text-sm leading-5 text-gray-900">
Not Verified
</dd>
)}
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Access Level
</dt>
<dd className="mt-2 mb-1 badge badge-pill badge-primary text-sm leading-5 text-white">
{details.user_type || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Gender
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.gender || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
Local Body
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.local_body_object?.name || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
District
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.district_object?.name || "-"}
</dd>
</div>
<div className="sm:col-span-1 mb-2">
<dt className="text-sm leading-5 font-medium text-gray-500">
State
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900">
{details.state_object?.name || "-"}
</dd>
</div>
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Access Level" />
<ValueBadge text={details.user_type} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Gender" />
<ProfileValue text={details.gender} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="Local Body" />
<ProfileValue text={details.local_body_object?.name} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="District" />
<ProfileValue text={details.district_object?.name} />
</LabelValueCard>
<LabelValueCard>
<ProfileLabel text="State" />
<ProfileValue text={details.state_object?.name} />
</LabelValueCard>
</dl>
</div>
)}
Expand Down