Skip to content

Commit ee43560

Browse files
sametcodessametcodes
committed
style(#178): made some minor styling changes
1 parent a1f53cc commit ee43560

File tree

5 files changed

+38
-34
lines changed

5 files changed

+38
-34
lines changed

‎lib/@dsvgui/components/article/index.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
3232
const titleWidth =
3333
Math.max(
3434
...articles.map((article) =>
35-
getTextWidth(article.meta.title, { fontSize: 16 })
35+
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: "bold" })
3636
),
3737
400
3838
) + 20;
@@ -52,7 +52,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
5252

5353
const title = wrapText(
5454
article.meta.title,
55-
{ maxLineWidth: titleWidth, fontSize: 16 },
55+
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: "bold" },
5656
(line: string, index: number) => (
5757
<tspan key={index} x="0" dy={index === 0 ? 0 : 25}>
5858
{line}
@@ -92,7 +92,11 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
9292
>
9393
{wrapText(
9494
article.meta.description.replace(/\n/gm, " "),
95-
{ maxLineWidth: titleWidth, fontSize: 12, maxLines: 3 },
95+
{
96+
maxLineWidth: titleWidth - 20,
97+
fontSize: 12,
98+
maxLines: 3,
99+
},
96100
(line: string, index) => (
97101
<tspan key={index} x="0" dy={index === 0 ? 0 : 13}>
98102
{line}

‎lib/@dsvgui/components/line/index.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const randomPoints = (length: number) => {
2424
return points;
2525
};
2626

27-
export const Base: Story = {
27+
export const Minimal: Story = {
2828
args: {
2929
items: [
3030
{
@@ -36,7 +36,7 @@ export const Base: Story = {
3636
},
3737
};
3838

39-
export const ColoredLines: Story = {
39+
export const Colored: Story = {
4040
args: {
4141
items: [
4242
{
@@ -49,7 +49,7 @@ export const ColoredLines: Story = {
4949
},
5050
};
5151

52-
export const SecondaryTitle: Story = {
52+
export const WithSecondaryTitle: Story = {
5353
args: {
5454
items: [
5555
{
@@ -64,7 +64,7 @@ export const SecondaryTitle: Story = {
6464
},
6565
};
6666

67-
export const PeriodLabels: Story = {
67+
export const WithPeriodLabels: Story = {
6868
args: {
6969
items: [
7070
{

‎lib/@dsvgui/components/line/index.tsx

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Document } from "@/lib/@dsvgui";
2-
import { getTextWidth, hexToRgb } from "@/lib/@dsvgui/utils/index";
2+
import { getTextWidth, hexToRgb } from "@/lib/@dsvgui/utils";
33

44
type ILineItem = {
55
leftTitle?: string;
@@ -64,21 +64,21 @@ export const Line: React.FC<ILine> = ({ items }) => {
6464
const widths = items.map((item) => {
6565
const leftTitleWidth = getTextWidth(item.leftTitle || "", {
6666
fontSize: 22,
67-
ratio: 0.58,
67+
fontWeight: "bolder",
6868
});
6969
const leftSubtitleWidth = getTextWidth(item.leftSubtitle || "", {
7070
fontSize: 16,
71-
ratio: 0.57,
71+
fontWeight: "500",
7272
});
7373
const leftTitlesWidth = Math.max(leftTitleWidth, leftSubtitleWidth);
7474

7575
const rightTitleWidth = getTextWidth(item.rightTitle || "", {
7676
fontSize: 22,
77-
ratio: 0.58,
77+
fontWeight: "bolder",
7878
});
7979
const rightSubtitleWidth = getTextWidth(item.rightSubtitle || "", {
8080
fontSize: 16,
81-
ratio: 0.527,
81+
fontWeight: "500",
8282
});
8383
const rightTitlesWidth = Math.max(rightTitleWidth, rightSubtitleWidth);
8484

@@ -136,21 +136,14 @@ export const Line: React.FC<ILine> = ({ items }) => {
136136
strokeLinejoin="round"
137137
/>
138138
<g id="left">
139-
<text
140-
xmlSpace="preserve"
141-
fontFamily="Roboto"
142-
className="title"
143-
fontWeight="bolder"
144-
letterSpacing="0.5px"
145-
>
139+
<text xmlSpace="preserve" className="title" fontWeight="bolder">
146140
<tspan x="0" y="15">
147141
{item.leftTitle}
148142
</tspan>
149143
</text>
150144
<text
151145
fill="#555555"
152146
xmlSpace="preserve"
153-
fontFamily="Roboto"
154147
className="subtitle"
155148
fontWeight={500}
156149
>
@@ -162,16 +155,15 @@ export const Line: React.FC<ILine> = ({ items }) => {
162155
<g id="right">
163156
<text
164157
className={["title", `lineText_${index}`].join(" ")}
165-
fontWeight="700"
158+
fontWeight="bolder"
166159
>
167160
<tspan
168161
x={
169162
width -
170-
getTextWidth(item.rightTitle?.replace(/ /g, "") || "", {
163+
getTextWidth(item.rightTitle || "", {
171164
fontSize: 22,
172-
ratio: 0.5,
173-
}) -
174-
documentPadding / 2
165+
fontWeight: "bolder",
166+
})
175167
}
176168
y="15"
177169
>
@@ -180,14 +172,14 @@ export const Line: React.FC<ILine> = ({ items }) => {
180172
</text>
181173
<text
182174
className={["subtitle", `lineText_${index}`].join(" ")}
183-
fontWeight={300}
175+
fontWeight={500}
184176
>
185177
<tspan
186178
x={
187179
width -
188180
getTextWidth(item.rightSubtitle || "", {
189181
fontSize: 16,
190-
ratio: 0.5,
182+
fontWeight: "500",
191183
})
192184
}
193185
y="33"
@@ -204,19 +196,27 @@ export const Line: React.FC<ILine> = ({ items }) => {
204196

205197
{index !== 0 && (
206198
<rect
199+
className="divider"
207200
x="0"
208201
y={-rowGap / 2}
209202
width={width}
210203
height={1}
211204
rx={5}
212-
fill="#E4E4E4"
213205
/>
214206
)}
215207

216208
<defs>
217209
<style>{`
218210
.clabel{ fill: #999; font-size: 8px; }
219211
.lineText_${index}{ fill: ${item.lineColor} !important; }
212+
.subtitle.lineText_${index}{ fill: rgba(${hexToRgb(
213+
item.lineColor || "#000000",
214+
0.6
215+
).join(", ")}) !important; }
216+
.divider { fill: #E4E4E4; }
217+
@media (prefers-color-scheme: dark) {
218+
.divider { fill: #333333; }
219+
}
220220
`}</style>
221221
<linearGradient
222222
x1="0"

‎lib/@dsvgui/components/progress/index.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
22
import { Progress } from "./index";
33

44
import { AiOutlineCalendar } from "react-icons/ai";
5-
import { RxPieChart } from "react-icons/rx";
5+
import { HiChartBar } from "react-icons/hi";
66
import { VscIssues, VscGitPullRequest } from "react-icons/vsc";
77

88
const meta: Meta<typeof Progress> = {
@@ -18,7 +18,7 @@ export const Base: Story = {
1818
title: "Progress",
1919
percent: 55,
2020
metrics: [
21-
{ icon: RxPieChart, text: "%51 completed" },
21+
{ icon: HiChartBar, text: "%51 completed" },
2222
{ icon: AiOutlineCalendar, text: "Due by April 17, 2023" },
2323
{ icon: VscIssues, text: "7/19 issues solved" },
2424
{ icon: VscGitPullRequest, text: "8/10 PRs closed" },

‎platforms/github/view/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import getImageSize from "image-size";
1010
import qs from "qs";
1111

1212
import { AiFillGithub, AiOutlineCalendar } from "react-icons/ai";
13-
import { RxPieChart } from "react-icons/rx";
13+
import { HiChartBar } from "react-icons/hi";
1414
import { VscIssues, VscGitPullRequest } from "react-icons/vsc";
1515
import { SiGithubsponsors } from "react-icons/si";
1616

@@ -53,7 +53,7 @@ export const getRepositoryMilestone: ViewComponent = (result, config) => {
5353
"No due date";
5454

5555
const metrics: IProgress["metrics"] = [
56-
{ icon: RxPieChart, text: `%${percentInText} completed` },
56+
{ icon: HiChartBar, text: `%${percentInText} completed` },
5757
{ icon: AiOutlineCalendar, text: dueDate },
5858
{
5959
icon: VscIssues,
@@ -98,7 +98,7 @@ export const getPublicRepositoryMilestone: ViewComponent = (result, config) => {
9898
"No due date";
9999

100100
const metrics: IProgress["metrics"] = [
101-
{ icon: RxPieChart, text: `%${percentInText} completed` },
101+
{ icon: HiChartBar, text: `%${percentInText} completed` },
102102
{ icon: AiOutlineCalendar, text: dueDate },
103103
{
104104
icon: VscIssues,
@@ -124,7 +124,7 @@ export const getUserActiveSponsorGoal: ViewComponent = (result, config) => {
124124

125125
const metrics: IProgress["metrics"] = [
126126
{
127-
icon: RxPieChart,
127+
icon: HiChartBar,
128128
text: `%${user.sponsorsListing.activeGoal.percentComplete} reached`,
129129
},
130130
{

0 commit comments

Comments
 (0)