{/* */}
{/* */}
{/* */}
{/* */}
-
+
);
diff --git a/src/rendered/components/GitStatusBadge/GitStatusBadge.styles.ts b/src/rendered/components/GitStatusBadge/GitStatusBadge.styles.ts
deleted file mode 100644
index c5ea85e..0000000
--- a/src/rendered/components/GitStatusBadge/GitStatusBadge.styles.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const Root = styled.div`
- display: flex;
- user-select: none;
-`;
-
-export const Wrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-left: 4px;
- text-align: center;
-`;
-
-export const Count = styled.div`
- font-size: 10px;
- font-weight: 300;
- text-align: left;
-`;
diff --git a/src/rendered/components/GitStatusBadge/GitStatusBadge.tsx b/src/rendered/components/GitStatusBadge/GitStatusBadge.tsx
index fefcfb4..cdcae0d 100644
--- a/src/rendered/components/GitStatusBadge/GitStatusBadge.tsx
+++ b/src/rendered/components/GitStatusBadge/GitStatusBadge.tsx
@@ -1,8 +1,6 @@
import { Icon, type IconName, type Intent, Tooltip } from '@blueprintjs/core';
import { type FC, type JSX } from 'react';
-import { Count, Wrapper } from './GitStatusBadge.styles';
-
type Props = {
count: number;
icon: IconName;
@@ -19,14 +17,14 @@ export const GitStatusBadge: FC{count}
+
{!collapsed &&
projects.map((project) => (
@@ -130,7 +140,7 @@ export const GroupCollapse: FC = ({ collapsed, group, index, onClick, pro
project={project}
/>
))}
-
-
+
+
);
};
diff --git a/src/rendered/components/Project/components/PullRequest/PullRequest.styles.ts b/src/rendered/components/Project/components/PullRequest/PullRequest.styles.ts
deleted file mode 100644
index 9f0d23c..0000000
--- a/src/rendered/components/Project/components/PullRequest/PullRequest.styles.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Colors } from '@blueprintjs/core';
-import { readableColor } from 'polished';
-import styled, { css } from 'styled-components';
-
-export const Root = styled.div`
- display: flex;
- position: relative;
- align-items: center;
- justify-content: space-between;
- min-height: 20px;
- padding: 6px 15px 6px 20px;
- background-color: ${Colors.LIGHT_GRAY4};
- margin: 2px 0px;
-
- & + & {
- margin-top: 0;
- }
-
- &:first-child {
- padding-top: 10px;
- }
-
- @media (prefers-color-scheme: dark) {
- background-color: ${Colors.DARK_GRAY2};
- }
-`;
-
-export const MainBlock = styled.div`
- overflow: hidden;
- display: flex;
- text-align: left;
- justify-content: start;
- gap: 15px;
- align-items: center;
- /* width: 430px; */
-`;
-
-export const Title = styled.div`
- overflow: hidden;
- font-size: 13px;
- display: flex;
- flex-direction: column;
-`;
-
-export const TitleMain = styled.div`
- display: flex;
- align-items: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-bottom: 2px;
- gap: 8px;
-`;
-
-export const TitleDescription = styled.div`
- display: flex;
- align-items: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin-top: -1px;
- font-size: 12px;
- font-weight: 300;
-
- @media (prefers-color-scheme: dark) {
- color: ${Colors.GRAY3};
- }
-`;
-
-export const BotTag = styled.div`
- border-radius: 4px;
- border: 1px solid ${Colors.BLACK};
- padding: 1px 3px;
- font-size: 10px;
- color: ${Colors.BLACK};
-
- @media (prefers-color-scheme: dark) {
- color: ${Colors.GRAY3};
- border: 1px solid ${Colors.GRAY3};
- }
-`;
-
-export const PullLabel = styled.div<{ $bgColor: string }>(
- ({ $bgColor }) => css`
- border-radius: 4px;
- background-color: #${$bgColor};
- padding: 1px 4px;
- font-size: 12px;
- color: ${readableColor(`#${$bgColor}`)};
- `
-);
-
-export const Avatar = styled.img`
- width: 30px;
- height: 30px;
- border-radius: 50%;
- object-fit: cover;
-`;
diff --git a/src/rendered/components/Project/components/PullRequest/PullRequest.tsx b/src/rendered/components/Project/components/PullRequest/PullRequest.tsx
index 8dc452b..356ba5a 100644
--- a/src/rendered/components/Project/components/PullRequest/PullRequest.tsx
+++ b/src/rendered/components/Project/components/PullRequest/PullRequest.tsx
@@ -1,10 +1,9 @@
import { Button } from '@blueprintjs/core';
+import { readableColor } from 'polished';
import { type FC } from 'react';
import { timeAgo } from 'rendered/utils/timeAgo';
import { type Pull } from 'types/gitHub';
-import { Avatar, BotTag, MainBlock, PullLabel, Root, Title, TitleDescription, TitleMain } from './PullRequest.styles';
-
type Props = {
pull: Pull;
};
@@ -17,39 +16,50 @@ export const PullRequest: FC
+ 
-
- <TitleMain>
+ <div className="overflow-hidden text-sm flex flex-col">
+ <div className="flex items-center overflow-hidden text-ellipsis whitespace-nowrap mb-0.5 gap-2">
{draft && '[DRAFT] '}
- {user.type === 'Bot' && <BotTag>bot</BotTag>}
+
+ {user.type === 'Bot' && (
+ <div className="rounded border border-black px-1 py-0.5 text-xs text-black dark:text-blueprint-gray3 dark:border-blueprint-gray3">
+ bot
+ </div>
+ )}
+
{title}
- {labels.map((label) => (
- <PullLabel
- $bgColor={label.color}
+ {labels.map((label: { color: string; id: string; name: string }) => (
+ <div
+ className="rounded px-1 py-0.5 text-xs"
key={label.id}
+ style={{
+ backgroundColor: `#${label.color}`,
+ color: readableColor(`#${label.color}`)
+ }}
>
{label.name}
- </PullLabel>
+ </div>
))}
- </TitleMain>
+ </div>
- <TitleDescription>
+ <div className="flex items-center overflow-hidden whitespace-nowrap text-ellipsis -mt-0.5 text-xs font-light dark:text-blueprint-gray3">
#{number} opened {timeAgo(created_at)} by {user.login.replace('[bot]', '')}
- </TitleDescription>
-
-
+
+
+
-
+
-
+
- <TitleMain>
+ <div className="overflow-hidden text-sm flex flex-col">
+ <div className="overflow-hidden text-ellipsis whitespace-nowrap">
<b>{name}</b>
{': '}
{event !== 'workflow_dispatch' ? event : 'manual'}
@@ -36,16 +34,18 @@ export const Workflow: FC<Props> = ({ run }) => {
{' (#'}
{run_number}
{')'}
- </TitleMain>
+ </div>
- <TitleDescription>{display_title}</TitleDescription>
-
-
+
+
+ {display_title}
+
+
{isEmpty && pulls.length < 1 && (
-
+
+ <div className="opacity-0 absolute -top-2.5 left-4 bg-blueprint-light-gray2 dark:bg-black rounded-xl py-0.5 px-2 text-xs text-black dark:text-white group-hover:opacity-100 transition-opacity duration-200">
<span>Pull requests ({aliases[pullType]})</span>
-
+
-
No pull request were found
-
+
)}
{pulls.map((pull) => (
@@ -81,22 +80,22 @@ export const usePulls = (project: Project) => {
/>
))}
-
{pullTypes.map((type) => (
- setPullType(type)}
>
{aliases[type]}
-
+
))}
-
+
);
};
diff --git a/src/rendered/components/ThemeSelector/ThemeSelector.styles.ts b/src/rendered/components/ThemeSelector/ThemeSelector.styles.ts
deleted file mode 100644
index 0dbcdd3..0000000
--- a/src/rendered/components/ThemeSelector/ThemeSelector.styles.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Colors } from '@blueprintjs/core';
-import styled, { css } from 'styled-components';
-
-export const Root = styled.div`
- width: 420px;
- display: flex;
- justify-content: space-between;
- margin: 0 auto 20px;
-`;
-
-export const ThemeButton = styled.div<{ $active?: boolean }>(
- ({ $active: active }) => css`
- text-align: center;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 4px;
- font-size: 13px;
-
- img {
- overflow: hidden;
- display: block;
- border-radius: 11px;
- width: 120px;
- border: 3px solid transparent;
- object-fit: cover;
- border-color: ${active ? Colors.BLUE3 : 'transparent'};
- }
- `
-);
diff --git a/src/rendered/components/ThemeSelector/ThemeSelector.tsx b/src/rendered/components/ThemeSelector/ThemeSelector.tsx
index aaf42a5..b6f0f58 100644
--- a/src/rendered/components/ThemeSelector/ThemeSelector.tsx
+++ b/src/rendered/components/ThemeSelector/ThemeSelector.tsx
@@ -3,36 +3,53 @@ import { useDarkMode } from 'rendered/hooks/useDarkMode';
import themeAuto from './assets/img/theme-auto.png';
import themeDark from './assets/img/theme-dark.png';
import themeLight from './assets/img/theme-light.png';
-import { Root, ThemeButton } from './ThemeSelector.styles';
export const ThemeSelector = () => {
const { setTheme, themeSource } = useDarkMode();
return (
-
{!projects.length && (
{
projects={group.projects}
/>
))}
-
-
+
+ setTheme('system')}
>
- 
+
+
- Auto
-
+ Dark
- Light
-