Skip to content

Commit 361293e

Browse files
czeziczezi
committed
Clean up images and css
1 parent 33ed5f5 commit 361293e

File tree

12 files changed

+77
-30
lines changed

12 files changed

+77
-30
lines changed

‎gui/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"js-cookie": "^3.0.5",
2323
"monaco-editor": "^0.50.0",
2424
"next": "14.2.2",
25+
"next-themes": "^0.3.0",
2526
"react": "^18",
2627
"react-beautiful-dnd": "^13.1.1",
2728
"react-diff-view": "^3.2.1",

‎gui/public/logos/github_light_logo.svg

Lines changed: 5 additions & 0 deletions
Loading

‎gui/src/app/_app.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
:root {
2929
--foreground-rgb: #fff;
3030
--background-color: #000;
31+
--border-color: #313134;
32+
--container-background: #262626;
3133
--secondary-color: #888;
3234
--text-color: #fff;
3335
--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/providers.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
'use client';
22

33
import { NextUIProvider } from '@nextui-org/react';
4+
import { ThemeProvider as NextThemesProvider } from 'next-themes';
45

56
export function Providers({ children }: { children: React.ReactNode }) {
6-
return <NextUIProvider>{children}</NextUIProvider>;
7+
return (
8+
<NextUIProvider>
9+
<NextThemesProvider attribute="class" defaultTheme="dark">
10+
{children}
11+
</NextThemesProvider>
12+
</NextUIProvider>
13+
);
714
}

‎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: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,26 @@ interface CreateOrEditProjectBodyProps {
3838
const customStyles = {
3939
control: (provided) => ({
4040
...provided,
41+
borderRadius: '0.5rem',
4142
backgroundColor: '#1e1e1e',
4243
color: '#ffffff',
4344
borderColor: '#333333',
45+
boxShadow: 'none',
4446
'&:hover': {
4547
color: '#ffffff',
46-
borderColor: '#4a4a4a',
48+
borderColor: '#333333',
49+
boxShadow: 'none',
4750
},
4851
}),
52+
indicatorSeparator: (provided) => ({}),
4953
menu: (provided) => ({
5054
...provided,
5155
backgroundColor: '#1e1e1e',
5256
}),
53-
input: (styles) => ({ ...styles, color: '#ffffff' }),
57+
input: (styles) => ({
58+
...styles,
59+
color: '#ffffff',
60+
}),
5461
option: (provided, state) => ({
5562
...provided,
5663
backgroundColor: state.isFocused ? '#333333' : '#1e1e1e',
@@ -98,18 +105,14 @@ export default function CreateOrEditProjectBody({
98105
async function redirectToGithubIntegration() {
99106
setIntegrationLoading(true);
100107
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-
);
108+
const interval = setInterval(async () => {
109+
const gitIntegrated = await isGithubConnected();
110+
if (gitIntegrated) {
111+
setIsExternalGitIntegration(true);
112+
setIntegrationLoading(false);
113+
clearInterval(interval);
114+
}
115+
}, 1000);
113116
window.open(`${API_BASE_URL}/integrations/github/authorize`, '_blank');
114117
} catch (error) {
115118
console.error('Error: ', error);

‎gui/src/components/HomeComponents/create-project.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.integrate_github_container {
2-
background-color: #262628;
2+
background-color: var(--container-background);
33
border-radius: 0.5rem;
44
border-left: #a8a8a8 0.3rem solid;
55
}

‎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+
}

‎gui/yarn.lock

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5337,6 +5337,11 @@ natural-compare@^1.4.0:
53375337
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
53385338
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
53395339

5340+
next-themes@^0.3.0:
5341+
version "0.3.0"
5342+
resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"
5343+
integrity sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==
5344+
53405345
[email protected]:
53415346
version "14.2.2"
53425347
resolved "https://registry.yarnpkg.com/next/-/next-14.2.2.tgz#707311b5e4bf973ada2305233f322bdd0cd9d579"
@@ -6418,6 +6423,7 @@ [email protected]:
64186423
integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
64196424

64206425
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
6426+
name string-width-cjs
64216427
version "4.2.3"
64226428
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
64236429
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==

0 commit comments

Comments
 (0)