Skip to content

Commit 5aa1c6e

Browse files
czeziczezi
committed
Clean up images and css
1 parent 33ed5f5 commit 5aa1c6e

File tree

8 files changed

+51
-26
lines changed

8 files changed

+51
-26
lines changed

‎gui/public/logos/github_light_logo.svg

Lines changed: 5 additions & 0 deletions
Loading

‎gui/src/app/_app.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
:root {
2929
--foreground-rgb: #fff;
3030
--background-color: #000;
31+
--container-background: #262626;
3132
--secondary-color: #888;
3233
--text-color: #fff;
3334
--error-color: #FF3E2D;

‎gui/src/app/imagePath.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default {
44
superagiLogo: '/logos/superagi_logo.svg',
55
superagiLogoRound: '/logos/superagi_logo_round.svg',
66
supercoderImage: '/images/supercoder_image.svg',
7+
githubLightLogo: '/logos/github_light_logo.svg',
78
githubLogo: '/logos/github_logo.svg',
89
frontendWorkbenchIconSelected: '/icons/selected/frontend_workbench.svg',
910
backendWorkbenchIconSelected: '/icons/selected/backend_workbench.svg',

‎gui/src/app/projects/page.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import CreateOrEditProjectBody from '@/components/HomeComponents/CreateOrEditPro
1111
import CustomLoaders from '@/components/CustomLoaders/CustomLoaders';
1212
import { SkeletonTypes } from '@/app/constants/SkeletonConstants';
1313
import CustomImage from '@/components/ImageComponents/CustomImage';
14+
import Image from 'next/image';
1415

1516
export default function Projects() {
1617
const [openNewProjectModal, setOpenNewProjectModal] = useState<
@@ -82,9 +83,11 @@ export default function Projects() {
8283
{project.project_repository && (
8384
<div className="flex items-center">
8485
<div className="-mt-1 mr-2 h-3.5 w-3.5">
85-
<svg viewBox="0 0 24 24" className="fill-current">
86-
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
87-
</svg>
86+
<CustomImage
87+
className={'h-full w-full'}
88+
src={imagePath.githubLightLogo}
89+
alt={'github_logo'}
90+
/>
8891
</div>
8992
<span className="secondary_color text-[11px] font-normal">
9093
{project.project_repository.split('/').join(' / ')}

‎gui/src/app/settings/SettingsOptions/Integrations.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
'use client';
22

3-
import React, { useCallback, useEffect, useState } from 'react';
3+
import React, { useEffect, useState } from 'react';
44

55
import styles from '../settings.module.css';
66
import {
77
deleteGithubIntegration,
88
isGithubConnected,
99
} from '@/api/DashboardService';
1010
import { API_BASE_URL } from '@/api/apiConfig';
11+
import GithubIntegrationSymbol from '@/components/IntegrationComponents/GithubIntegrationSymbol';
12+
import { Button } from '@nextui-org/react';
1113

1214
async function redirectToGithubIntegration() {
1315
try {
@@ -40,15 +42,11 @@ const Integrations = () => {
4042
<h2 className="mb-4 text-xl font-semibold">Integrations</h2>
4143
<div>
4244
<div
43-
className={`mb-3 flex items-center justify-between rounded-lg p-4 ${styles.integration_container}`}
45+
className={`mb-3 flex items-center justify-between rounded-lg p-3 ${styles.integration_container}`}
4446
>
4547
<div className="flex items-center">
46-
<div className="mr-4 h-10 w-10">
47-
<svg viewBox="0 0 24 24" className="fill-current">
48-
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
49-
</svg>
50-
</div>
51-
<div>
48+
<GithubIntegrationSymbol className="h-12 w-12 rounded-lg p-1.5" />
49+
<div className="ml-3">
5250
<h3 className="font-semibold text-white">GitHub</h3>
5351
<p className="text-sm text-gray-400">
5452
Integrate with GitHub to start working on your projects
@@ -58,12 +56,12 @@ const Integrations = () => {
5856
{isExternalGitIntegration === undefined ? (
5957
<></>
6058
) : isExternalGitIntegration === false ? (
61-
<button
59+
<Button
6260
onClick={() => redirectToGithubIntegration()}
6361
className="rounded-md bg-white px-4 py-2 font-semibold text-black transition-colors"
6462
>
6563
Connect
66-
</button>
64+
</Button>
6765
) : (
6866
<button
6967
onClick={() => deleteIntegration()}

‎gui/src/app/settings/settings.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.integration_container {
2-
background-color: #262628;
2+
background-color: var(--container-background);
33
}

‎gui/src/components/HomeComponents/CreateOrEditProjectBody.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,14 @@ export default function CreateOrEditProjectBody({
9898
async function redirectToGithubIntegration() {
9999
setIntegrationLoading(true);
100100
try {
101-
const interval = setInterval(
102-
async () => {
103-
const gitIntegrated = await isGithubConnected();
104-
if (gitIntegrated) {
105-
setIsExternalGitIntegration(true);
106-
setIntegrationLoading(false);
107-
clearInterval(interval);
108-
}
109-
},
110-
1000,
111-
1000,
112-
);
101+
const interval = setInterval(async () => {
102+
const gitIntegrated = await isGithubConnected();
103+
if (gitIntegrated) {
104+
setIsExternalGitIntegration(true);
105+
setIntegrationLoading(false);
106+
clearInterval(interval);
107+
}
108+
}, 1000);
113109
window.open(`${API_BASE_URL}/integrations/github/authorize`, '_blank');
114110
} catch (error) {
115111
console.error('Error: ', error);

‎gui/src/components/IntegrationComponents/GithubIntegrationSymbol.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import CustomImage from '@/components/ImageComponents/CustomImage';
2+
import imagePath from '@/app/imagePath';
3+
import React from 'react';
4+
5+
export default function GithubIntegrationSymbol({
6+
className,
7+
...props
8+
}: React.HTMLAttributes<HTMLDivElement>) {
9+
return (
10+
<div
11+
className={`flex items-center justify-center bg-white ${className}`}
12+
{...props}
13+
>
14+
<CustomImage
15+
className={'h-full w-full'}
16+
src={imagePath.githubLogo}
17+
alt={'github_logo'}
18+
/>
19+
</div>
20+
);
21+
}

0 commit comments

Comments
 (0)