Clean up images and css

Author: czezi

gui/public/logos/github_light_logo.svg

@@ -28,6 +28,7 @@
 :root {
   --foreground-rgb: #fff;
   --background-color: #000;
+  --container-background: #262626;
   --secondary-color: #888;
   --text-color: #fff;
   --error-color: #FF3E2D;

gui/src/app/_app.css

@@ -4,6 +4,7 @@ export default {
   superagiLogo: '/logos/superagi_logo.svg',
   superagiLogoRound: '/logos/superagi_logo_round.svg',
   supercoderImage: '/images/supercoder_image.svg',
+  githubLightLogo: '/logos/github_light_logo.svg',
   githubLogo: '/logos/github_logo.svg',
   frontendWorkbenchIconSelected: '/icons/selected/frontend_workbench.svg',
   backendWorkbenchIconSelected: '/icons/selected/backend_workbench.svg',

gui/src/app/imagePath.tsx

@@ -11,6 +11,7 @@ import CreateOrEditProjectBody from '@/components/HomeComponents/CreateOrEditPro
 import CustomLoaders from '@/components/CustomLoaders/CustomLoaders';
 import { SkeletonTypes } from '@/app/constants/SkeletonConstants';
 import CustomImage from '@/components/ImageComponents/CustomImage';
+import Image from 'next/image';
 
 export default function Projects() {
   const [openNewProjectModal, setOpenNewProjectModal] = useState<
@@ -82,9 +83,11 @@ export default function Projects() {
                       {project.project_repository && (
                         <div className="flex items-center">
                           <div className="-mt-1 mr-2 h-3.5 w-3.5">
-                            <svg viewBox="0 0 24 24" className="fill-current">
-                              <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" />
-                            </svg>
+                            <CustomImage
+                              className={'h-full w-full'}
+                              src={imagePath.githubLightLogo}
+                              alt={'github_logo'}
+                            />
                           </div>
                           <span className="secondary_color text-[11px] font-normal">
                             {project.project_repository.split('/').join(' / ')}

gui/src/app/projects/page.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styles from '../settings.module.css';
 import {
   deleteGithubIntegration,
   isGithubConnected,
 } from '@/api/DashboardService';
 import { API_BASE_URL } from '@/api/apiConfig';
+import GithubIntegrationSymbol from '@/components/IntegrationComponents/GithubIntegrationSymbol';
+import { Button } from '@nextui-org/react';
 
 async function redirectToGithubIntegration() {
   try {
@@ -40,15 +42,11 @@ const Integrations = () => {
         <h2 className="mb-4 text-xl font-semibold">Integrations</h2>
         <div>
           <div
-            className={`mb-3 flex items-center justify-between rounded-lg p-4 ${styles.integration_container}`}
+            className={`mb-3 flex items-center justify-between rounded-lg p-3 ${styles.integration_container}`}
           >
             <div className="flex items-center">
-              <div className="mr-4 h-10 w-10">
-                <svg viewBox="0 0 24 24" className="fill-current">
-                  <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" />
-                </svg>
-              </div>
-              <div>
+              <GithubIntegrationSymbol className="h-12 w-12 rounded-lg p-1.5" />
+              <div className="ml-3">
                 <h3 className="font-semibold text-white">GitHub</h3>
                 <p className="text-sm text-gray-400">
                   Integrate with GitHub to start working on your projects
@@ -58,12 +56,12 @@ const Integrations = () => {
             {isExternalGitIntegration === undefined ? (
               <></>
             ) : isExternalGitIntegration === false ? (
-              <button
+              <Button
                 onClick={() => redirectToGithubIntegration()}
                 className="rounded-md bg-white px-4 py-2 font-semibold text-black transition-colors"
               >
                 Connect
-              </button>
+              </Button>
             ) : (
               <button
                 onClick={() => deleteIntegration()}

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

@@ -1,3 +1,3 @@
 .integration_container {
-    background-color: #262628;
+    background-color: var(--container-background);
 }

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

@@ -98,18 +98,14 @@ export default function CreateOrEditProjectBody({
   async function redirectToGithubIntegration() {
     setIntegrationLoading(true);
     try {
-      const interval = setInterval(
-        async () => {
-          const gitIntegrated = await isGithubConnected();
-          if (gitIntegrated) {
-            setIsExternalGitIntegration(true);
-            setIntegrationLoading(false);
-            clearInterval(interval);
-          }
-        },
-        1000,
-        1000,
-      );
+      const interval = setInterval(async () => {
+        const gitIntegrated = await isGithubConnected();
+        if (gitIntegrated) {
+          setIsExternalGitIntegration(true);
+          setIntegrationLoading(false);
+          clearInterval(interval);
+        }
+      }, 1000);
       window.open(`${API_BASE_URL}/integrations/github/authorize`, '_blank');
     } catch (error) {
       console.error('Error: ', error);

gui/src/components/HomeComponents/CreateOrEditProjectBody.tsx

@@ -0,0 +1,21 @@
+import CustomImage from '@/components/ImageComponents/CustomImage';
+import imagePath from '@/app/imagePath';
+import React from 'react';
+
+export default function GithubIntegrationSymbol({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`flex items-center justify-center bg-white ${className}`}
+      {...props}
+    >
+      <CustomImage
+        className={'h-full w-full'}
+        src={imagePath.githubLogo}
+        alt={'github_logo'}
+      />
+    </div>
+  );
+}