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

fix: font sizes and sidebar icons (#2461)

Browse Source 
* fix: font sizes

* fix: sidebar icons
This commit is contained in:
Aaryan Khandelwal 2023-10-17 15:59:11 +05:30 committed by GitHub
parent 732e33fefc
commit 4bd73630d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/tailwind-config-custom/tailwind.config.js
View File

@ -18,14 +18,19 @@ module.exports = {
theme: {
// scale down font sizes to 90% of default
fontSize: {
xs: "0.65rem",
sm: "0.7rem",
base: "0.8rem",
xl: "1rem",
"2xl": "1.25rem",
"3xl": "1.563rem",
"4xl": "1.953rem",
"5xl": "2.441rem",
xs: "0.675rem",
sm: "0.7875rem",
base: "0.9rem",
lg: "1.0125rem",
xl: "1.125rem",
"2xl": "1.35rem",
"3xl": "1.6875rem",
"4xl": "2.25rem",
"5xl": "2.7rem",
"6xl": "3.375rem",
"7xl": "4.05rem",
"8xl": "5.4rem",
"9xl": "7.2rem",
},
// scale down spacing to 90% of default
padding: {

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

@ -220,7 +220,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
}
>
<div className="flex items-center gap-1 w-full px-1">
<div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
<div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
{option && option.avatar ? (
<img
src={option.avatar}

2
web/components/labels/single-label-group.tsx
View File

@ -163,7 +163,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
<div className="flex items-center">
<button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
<X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
<X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
</div>

2
web/components/notifications/notification-popover.tsx
View File

@ -75,7 +75,7 @@ export const NotificationPopover = () => {
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
>
<Bell className="h-[18px] w-[18px]" />
<Bell className="h-4 w-4" />
{store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
{totalNotificationCount && totalNotificationCount > 0 ? (
store?.theme?.sidebarCollapsed ? (

4
web/components/pages/single-page-block.tsx
View File

@ -303,8 +303,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
{...provided.dragHandleProps}
>
<MoreVertical className="h-[18px]" />
<MoreVertical className="-ml-2.5 h-[18px]" />
<MoreVertical className="h-4" />
<MoreVertical className="-ml-2.5 h-4" />
</button>
<div
ref={actionSectionRef}

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

@ -390,7 +390,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
}}
>
<div className="text-sm">{option.label}</div>
<div className={`w-[18px] h-[18px] relative flex justify-center items-center`}>
<div className={`w-4 h-4 relative flex justify-center items-center`}>
{value.length > 0 && value.includes(option.key) && (
<Check className="h-5 w-5" />
)}

2
web/components/project/sidebar-list-item.tsx
View File

@ -298,7 +298,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className={`space-y-2 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
<Disclosure.Panel className={`space-y-1 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
{navigation(workspaceSlug as string, project?.id).map((item) => {
if (
(item.name === "Cycles" && !project.cycle_view) ||

10
web/components/project/sidebar-list.tsx
View File

@ -116,7 +116,7 @@ export const ProjectSidebarList: FC = observer(() => {
/>
<div
ref={containerRef}
className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
className={`h-full overflow-y-auto px-4 space-y-2 ${
isScrolled ? "border-t border-custom-sidebar-border-300" : ""
}`}
>
@ -125,7 +125,7 @@ export const ProjectSidebarList: FC = observer(() => {
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{orderedFavProjects && orderedFavProjects.length > 0 && (
<Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
<Disclosure as="div" className="flex flex-col" defaultOpen={true}>
{({ open }) => (
<>
{!isCollapsed && (
@ -133,7 +133,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure.Button
as="button"
type="button"
className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
>
Favorites
{open ? (
@ -190,7 +190,7 @@ export const ProjectSidebarList: FC = observer(() => {
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{orderedJoinedProjects && orderedJoinedProjects.length > 0 && (
<Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
<Disclosure as="div" className="flex flex-col" defaultOpen={true}>
{({ open }) => (
<>
{!isCollapsed && (
@ -198,7 +198,7 @@ export const ProjectSidebarList: FC = observer(() => {
<Disclosure.Button
as="button"
type="button"
className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
>
Projects
{open ? (

2
web/components/web-view/issue-attachments.tsx
View File

@ -189,7 +189,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
setAttachmentDeleteModal(true);
}}
>
<X className="w-[18px] h-[18px] text-custom-text-400" />
<X className="w-4 h-4 text-custom-text-400" />
</button>
)}
</div>

4
web/components/web-view/issue-link-list.tsx
View File

@ -115,7 +115,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
setSelectedLink(link.id);
}}
>
<Pencil className="w-[18px] h-[18px] text-custom-text-400" />
<Pencil className="w-4 h-4 text-custom-text-400" />
</button>
<button
type="button"
@ -123,7 +123,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
setDeleteSelected(link.id);
}}
>
<X className="w-[18px] h-[18px] text-custom-text-400" />
<X className="w-4 h-4 text-custom-text-400" />
</button>
</div>
)}

4
web/components/web-view/sub-issues.tsx
View File

@ -135,7 +135,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
setIssueSelectedForDelete(subIssue);
}}
>
<X className="w-[18px] h-[18px] text-custom-text-400" />
<X className="w-4 h-4 text-custom-text-400" />
</button>
</div>
))}
@ -146,7 +146,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
onClick={() => setIsBottomSheetOpen(true)}
className="flex items-center gap-x-1 mt-3"
>
<PlusIcon className="w-[18px] h-[18px] text-custom-text-400" />
<PlusIcon className="w-4 h-4 text-custom-text-400" />
<p className="text-sm text-custom-text-400">Add sub issue</p>
</button>
</div>

2
web/components/workspace/sidebar-menu.tsx
View File

@ -60,7 +60,7 @@ export const WorkspaceSidebarMenu = observer(() => {
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
>
{<link.Icon className="h-[18px] w-[18px]" />}
{<link.Icon className="h-4 w-4" />}
{!themeStore?.sidebarCollapsed && link.name}
</div>
</Tooltip>

2
web/pages/[workspaceSlug]/workspace-views/issues.tsx
View File

@ -12,7 +12,7 @@ const WorkspaceView = () => (
<WorkspaceAuthorizationLayout
breadcrumbs={
<div className="flex gap-2 items-center">
<CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
<CheckCircle className="h-4 w-4 stroke-[1.5]" />
<span className="text-sm font-medium">Workspace issues</span>
</div>
}