chore: responsive and styling fixes (#3541)

This commit is contained in:
Ramesh Kumar Chandra 2024-02-02 14:49:42 +05:30 committed by GitHub
parent 662b497082
commit 2eab3b41a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 23 additions and 13 deletions

View file

@ -26,11 +26,11 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
placement="bottom-end"
closeOnSelect
>
{DURATION_FILTER_OPTIONS.map((option) => (
<CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
{option.label}
</CustomMenu.MenuItem>
))}
{DURATION_FILTER_OPTIONS.map((option) => (
<CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
{option.label}
</CustomMenu.MenuItem>
))}
</CustomMenu>
);
};

View file

@ -77,7 +77,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
})}
>
Issues
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl h-4 min-w-6 flex items-center text-center justify-center">
<span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
{totalIssues}
</span>
</h6>

View file

@ -9,6 +9,7 @@ import { WidgetLoader } from "components/dashboard/widgets";
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// types
import { TOverviewStatsWidgetResponse } from "@plane/types";
import { cn } from "helpers/common.helper";
export type WidgetProps = {
dashboardId: string;
@ -71,10 +72,18 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
[&>div:nth-child(2)>a>div]:lg:border-r
"
>
{STATS_LIST.map((stat) => (
<div className="w-full flex flex-col gap-2 hover:bg-custom-background-80 rounded-[10px]">
{STATS_LIST.map((stat, index) => (
<div
className={cn(
`w-full flex flex-col gap-2 hover:bg-custom-background-80`,
index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
)}
>
<Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
<div className={`relative flex justify-center items-center`}>
<div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
<div>
<h5 className="font-semibold text-xl">{stat.count}</h5>
<p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>