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 sriram veeraghanta
parent e96f059f65
commit 002dc7a5f3
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" 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"} {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> </a>
</Tooltip> </Tooltip>
); );
@ -271,10 +271,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );
@ -286,10 +286,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );
@ -301,10 +301,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );
@ -482,10 +482,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );
@ -497,10 +497,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );
@ -512,10 +512,10 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} <span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
</a> </a>
</> </>
); );

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

@ -117,8 +117,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
) : ( ) : (
<span <span
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${ 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" /> <User2 className="h-3 w-3" />
</span> </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())); query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedCycle ? ( const label = selectedCycle ? (
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center w-full gap-1 text-custom-text-200">
<ContrastIcon className="h-3 w-3" /> <ContrastIcon className="h-3 w-3 flex-shrink-0" />
<div className="truncate">{selectedCycle.name}</div> <div className="truncate max-w-[160px]">{selectedCycle.name}</div>
</div> </div>
) : ( ) : (
<div className="flex items-center gap-1 text-custom-text-300"> <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())); query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const label = selectedModule ? ( const label = selectedModule ? (
<div className="flex items-center gap-1 text-custom-text-200"> <div className="flex items-center w-full gap-1 text-custom-text-200">
<DiceIcon className="h-3 w-3" /> <DiceIcon className="h-3 w-3 flex-shrink-0" />
<span className="truncate">{selectedModule.name}</span> <span className="truncate max-w-[160px]">{selectedModule.name}</span>
</div> </div>
) : ( ) : (
<div className="flex items-center gap-1 text-custom-text-300"> <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"> <div className="mt-2">
<p className="text-sm text-custom-text-200"> <p className="text-sm text-custom-text-200">
Are you sure you want to delete module-{" "} 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. data related to the module will be permanently removed. This action cannot be undone.
</p> </p>
</div> </div>

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

@ -73,7 +73,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
Join Project? Join Project?
</Dialog.Title> </Dialog.Title>
<p> <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. Please click the &apos;Join Project&apos; button below to continue.
</p> </p>
<div className="space-y-3" /> <div className="space-y-3" />