Skip to content

Commit 40fac57

Browse files
author
Roshan Jossy
committed
add darkmode classes to texts
1 parent 4c4a225 commit 40fac57

File tree

5 files changed

+104
-164
lines changed

5 files changed

+104
-164
lines changed

‎src/components/UserDetails/Badges/Badge.tsx

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
1-
import { graphql, useFragment } from "react-relay"
2-
import BadgeIcon from "./BadgeIcon"
3-
import Hexagon from "./Hexagon"
1+
import { graphql, useFragment } from 'react-relay'
2+
import BadgeIcon from './BadgeIcon'
3+
import Hexagon from './Hexagon'
44

5-
const Badge = ({badge}: any) => {
6-
const data = useFragment(
7-
graphql`
8-
fragment Badge_node on Badge {
9-
displayName
10-
progressPercentageToNextLevel
11-
currentLevel
12-
}
13-
`, badge
14-
)
5+
const Badge = ({ badge }: any) => {
6+
const data = useFragment(
7+
graphql`
8+
fragment Badge_node on Badge {
9+
displayName
10+
progressPercentageToNextLevel
11+
currentLevel
12+
}
13+
`,
14+
badge
15+
)
1516

16-
return (
17-
<div className="flex items-center ">
18-
<Hexagon size={60} color="red" >
19-
<BadgeIcon displayName={data.displayName} />
20-
</Hexagon>
21-
<div className=" ml-8">
22-
<span className="font-bold block">Level: {data.currentLevel}</span>
23-
<span className="text-sm block">524 lines to next level</span>
24-
<div className="progress-bar">
25-
<style jsx>
26-
{`
27-
.progress-bar {
28-
position: relative;
29-
height: 10px;
30-
width: 120px;
31-
background-color: #ccc;
32-
border-radius: 5px;
33-
box-shadow: inset 0.3em 0.3em 1em rgba(0,0,0,0.3);
34-
}
35-
.progress-bar:after {
36-
content: '';
37-
position: absolute;
38-
width: ${1.2 * data.progressPercentageToNextLevel}px;
39-
height: inherit;
40-
background-color: red;
41-
border-radius: 5px;
42-
}
43-
`}
44-
</style>
45-
</div>
46-
</div>
17+
return (
18+
<div className="flex items-center ">
19+
<Hexagon size={60} color="red">
20+
<BadgeIcon displayName={data.displayName} />
21+
</Hexagon>
22+
<div className=" ml-8 dark:text-gray-300">
23+
<span className="font-bold block">Level: {data.currentLevel}</span>
24+
<span className="text-sm block">524 lines to next level</span>
25+
<div className="progress-bar">
26+
<style jsx>
27+
{`
28+
.progress-bar {
29+
position: relative;
30+
height: 10px;
31+
width: 120px;
32+
background-color: #ccc;
33+
border-radius: 5px;
34+
box-shadow: inset 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
35+
}
36+
.progress-bar:after {
37+
content: '';
38+
position: absolute;
39+
width: ${1.2 * data.progressPercentageToNextLevel}px;
40+
height: inherit;
41+
background-color: red;
42+
border-radius: 5px;
43+
}
44+
`}
45+
</style>
4746
</div>
48-
)
47+
</div>
48+
</div>
49+
)
4950
}
5051

5152
export default Badge

‎src/components/UserDetails/Badges/CircularProgress.tsx

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/components/UserDetails/Bio.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ const Bio = ({ user }: BioProps) => {
3939
}
4040

4141
return (
42-
<p contentEditable={true} onInput={onChange} onBlur={onSubmit}>
42+
<p
43+
contentEditable={true}
44+
onInput={onChange}
45+
onBlur={onSubmit}
46+
className="dark:text-gray-300"
47+
>
4348
{data.bio}
4449
</p>
4550
)

‎src/components/UserDetails/UserDetails.tsx

Lines changed: 47 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,55 @@
1-
import { graphql, useFragment } from 'react-relay';
2-
import BadgeList from './Badges/BadgeList';
3-
import type {UserDetails_user$key} from '../../queries/__generated__/UserDetails_user.graphql';
4-
import { useState, ChangeEvent, FormEventHandler } from 'react';
5-
import Bio from './Bio';
1+
import { graphql, useFragment } from 'react-relay'
2+
import BadgeList from './Badges/BadgeList'
3+
import type { UserDetails_user$key } from '../../queries/__generated__/UserDetails_user.graphql'
4+
import { useState, ChangeEvent, FormEventHandler } from 'react'
5+
import Bio from './Bio'
66
import { GoIssueOpened } from '@react-icons/all-files/go/GoIssueOpened'
77
import { GoGitPullRequest } from '@react-icons/all-files/go/GoGitPullRequest'
88

99
type Props = {
10-
user: UserDetails_user$key,
11-
};
10+
user: UserDetails_user$key
11+
}
1212

13-
const UserDetails = ({user}: Props)=> {
14-
const data = useFragment(
15-
graphql`
16-
fragment UserDetails_user on User {
17-
id
18-
handle
19-
avatar
20-
...Bio_user
21-
gitContributionStats {
22-
issues
23-
pullRequests
24-
}
25-
...BadgeList_user
26-
}
27-
`, user
28-
);
13+
const UserDetails = ({ user }: Props) => {
14+
const data = useFragment(
15+
graphql`
16+
fragment UserDetails_user on User {
17+
id
18+
handle
19+
avatar
20+
...Bio_user
21+
gitContributionStats {
22+
issues
23+
pullRequests
24+
}
25+
...BadgeList_user
26+
}
27+
`,
28+
user
29+
)
2930

30-
31-
32-
33-
return (<div className="flex flex-col items-center">
34-
<img className="rounded-md w-32" src={data.avatar} alt={data.handle} />
35-
<h1>
36-
@{data.handle}
37-
</h1>
38-
<Bio user={data}/>
39-
<div className="my-4 flex space-x-4">
40-
<span className="font-bold mb-2 flex">
41-
<span className="text-2xl mr-2">
42-
<GoIssueOpened />
43-
</span>
44-
{data.gitContributionStats.issues}
45-
</span>
46-
<span className="font-bold mr-4 flex">
47-
<span className="text-2xl mr-2">
48-
<GoGitPullRequest />
49-
</span>
50-
{data.gitContributionStats.pullRequests}
51-
</span>
52-
</div>
53-
<BadgeList user={data} />
31+
return (
32+
<div className="flex flex-col items-center">
33+
<img className="rounded-md w-32" src={data.avatar} alt={data.handle} />
34+
<h1 className="dark:text-gray-400">@{data.handle}</h1>
35+
<Bio user={data} />
36+
<div className="my-4 flex space-x-4 dark:text-gray-400">
37+
<span className="font-bold mb-2 flex">
38+
<span className="text-2xl mr-2">
39+
<GoIssueOpened />
40+
</span>
41+
{data.gitContributionStats.issues}
42+
</span>
43+
<span className="font-bold mr-4 flex">
44+
<span className="text-2xl mr-2">
45+
<GoGitPullRequest />
46+
</span>
47+
{data.gitContributionStats.pullRequests}
48+
</span>
49+
</div>
50+
<BadgeList user={data} />
5451
</div>
55-
)
56-
}
52+
)
53+
}
5754

58-
export default UserDetails
55+
export default UserDetails

‎src/components/issue/Issue.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ const Issue = ({ issue }: IssueProps) => {
3030
/>
3131
<div className="flex flex-col ml-4">
3232
<div className="">
33-
<span className="font-bold text-xl">{data.repository}</span>
33+
<span className="font-bold text-xl dark:text-gray-300">
34+
{data.repository}
35+
</span>
3436
</div>
3537
<div className="space-x-2">
3638
{data.labels.map((label) => (
3739
<span
3840
key={label}
39-
className="bg-blue-300 rounded-sm px-2 py-0.5"
41+
className="bg-blue-300 dark:bg-blue-900 dark:text-gray-300 rounded-sm px-2 py-0.5"
4042
>
4143
{label}
4244
</span>
@@ -46,7 +48,7 @@ const Issue = ({ issue }: IssueProps) => {
4648
</div>
4749
</a>
4850
<div className="mt-2">
49-
<span className="text-l">{data.title}</span>
51+
<span className="text-l dark:text-gray-300">{data.title}</span>
5052
</div>
5153
</div>
5254
)

0 commit comments

Comments
 (0)