thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: text overflow fix and border color update (#2769)

Browse Source 
* style: fix text overflow in:
* Issue activity
* Cycle and Module Select in Create Issue form
* Delete Module modal
* Join Project modal

* style: update assignee select border as per design.
This commit is contained in:
Prateek Shourya 2023-11-14 18:34:51 +05:30 committed by GitHub
parent b7757c6b1a
commit 1fe09d369f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/components/core/activity.tsx
View File

@ -51,7 +51,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
<RocketIcon size={12} color="#6b7280" />
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</Tooltip>
);
@ -271,10 +271,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -286,10 +286,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -301,10 +301,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -482,10 +482,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -497,10 +497,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.new_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);
@ -512,10 +512,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
>
{activity.old_value}
<RocketIcon size={12} color="#6b7280" />
<span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a>
</>
);

4
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -117,8 +117,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
) : (
<span
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
}}`}
noLabelBorder ? "" : " px-2.5 py-1 border-[0.5px] border-custom-border-300"
}`}
>
<User2 className="h-3 w-3" />
</span>

6
web/components/issues/select/cycle.tsx
View File

@ -55,9 +55,9 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedCycle ? (
<div className="flex items-center gap-1 text-custom-text-200">
<ContrastIcon className="h-3 w-3" />
<div className="truncate">{selectedCycle.name}</div>
<div className="flex items-center w-full gap-1 text-custom-text-200">
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
<div className="truncate max-w-[160px]">{selectedCycle.name}</div>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">

6
web/components/issues/select/module.tsx
View File

@ -55,9 +55,9 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedModule ? (
<div className="flex items-center gap-1 text-custom-text-200">
<DiceIcon className="h-3 w-3" />
<span className="truncate">{selectedModule.name}</span>
<div className="flex items-center w-full gap-1 text-custom-text-200">
<DiceIcon className="h-3 w-3 flex-shrink-0" />
<span className="truncate max-w-[160px]">{selectedModule.name}</span>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">

2
web/components/modules/delete-module-modal.tsx
View File

@ -102,7 +102,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
<div className="mt-2">
<p className="text-sm text-custom-text-200">
Are you sure you want to delete module-{" "}
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
<span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
data related to the module will be permanently removed. This action cannot be undone.
</p>
</div>

2
web/components/project/join-project-modal.tsx
View File

@ -73,7 +73,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
Join Project?
</Dialog.Title>
<p>
Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
Please click the &apos;Join Project&apos; button below to continue.
</p>
<div className="space-y-3" />