From 68964c2c8f2497b5793aab3fcb38abcb908093a6 Mon Sep 17 00:00:00 2001 From: Hamzat Victor Date: Wed, 23 Oct 2024 10:51:16 +0100 Subject: [PATCH 1/6] feat: add css syntax highlight --- frontend/lib/file-extension-to-language.json | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/lib/file-extension-to-language.json b/frontend/lib/file-extension-to-language.json index a959737..7aff12b 100644 --- a/frontend/lib/file-extension-to-language.json +++ b/frontend/lib/file-extension-to-language.json @@ -38,6 +38,7 @@ "csl": "xml", "cson": "coffeescript", "csproj": "xml", + "css":"css", "ct": "xml", "ctp": "php", "cxx": "cpp", From eb4e34cf103fad7ad6aa576ff064da8be467195c Mon Sep 17 00:00:00 2001 From: Hamzat Victor Date: Wed, 23 Oct 2024 10:51:50 +0100 Subject: [PATCH 2/6] feat: add light theme WIP --- .prettierignore | 2 +- frontend/app/globals.css | 23 ++ frontend/app/layout.tsx | 19 +- frontend/components/dashboard/newProject.tsx | 30 +-- frontend/components/editor/index.tsx | 243 ++++++++++-------- frontend/components/editor/navbar/index.tsx | 61 +++-- .../components/editor/terminals/terminal.tsx | 22 +- frontend/components/landing/index.tsx | 35 ++- frontend/components/ui/customButton.tsx | 5 +- .../theme-provider.tsx} | 2 +- frontend/components/ui/theme-switcher.tsx | 39 +++ 11 files changed, 302 insertions(+), 179 deletions(-) rename frontend/components/{layout/themeProvider.tsx => ui/theme-provider.tsx} (90%) create mode 100644 frontend/components/ui/theme-switcher.tsx diff --git a/.prettierignore b/.prettierignore index 4314ec3..df26bac 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,4 @@ -frontend/** +# frontend/** backend/ai/** backend/database/** backend/storage/** \ No newline at end of file diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 762a30d..15f1ccf 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -99,6 +99,29 @@ ); /* violet 900 -> bg */ } +.light .gradient-button-bg { + background: radial-gradient( + circle at top, + #262626 0%, + #f5f5f5 50% + ); /* Dark gray -> Light gray */ +} + +.light .gradient-button { + background: radial-gradient( + circle at bottom, + hsl(0, 10%, 25%) -10%, + #9d9d9d 50% + ); /* Light gray -> Almost white */ +} + +.light .gradient-button-bg > div:hover { + background: radial-gradient( + circle at bottom, + hsl(0, 10%, 25%) -10%, + #9d9d9d 80% + ); /* Light gray -> Almost white */ +} .inline-decoration::before { content: "Generate"; color: #525252; diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 70f5791..c93b647 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,13 +1,13 @@ -import type { Metadata } from "next" -import { GeistSans } from "geist/font/sans" -import { GeistMono } from "geist/font/mono" -import "./globals.css" -import { ThemeProvider } from "@/components/layout/themeProvider" -import { ClerkProvider } from "@clerk/nextjs" import { Toaster } from "@/components/ui/sonner" -import { Analytics } from "@vercel/analytics/react" -import { PreviewProvider } from "@/context/PreviewContext"; +import { ThemeProvider } from "@/components/ui/theme-provider" +import { PreviewProvider } from "@/context/PreviewContext" import { SocketProvider } from '@/context/SocketContext' +import { ClerkProvider } from "@clerk/nextjs" +import { Analytics } from "@vercel/analytics/react" +import { GeistMono } from "geist/font/mono" +import { GeistSans } from "geist/font/sans" +import type { Metadata } from "next" +import "./globals.css" export const metadata: Metadata = { title: "Sandbox", @@ -25,8 +25,7 @@ export default function RootLayout({ diff --git a/frontend/components/dashboard/newProject.tsx b/frontend/components/dashboard/newProject.tsx index b793fc2..012d385 100644 --- a/frontend/components/dashboard/newProject.tsx +++ b/frontend/components/dashboard/newProject.tsx @@ -3,16 +3,14 @@ import { Dialog, DialogContent, - DialogDescription, DialogHeader, DialogTitle, - DialogTrigger, } from "@/components/ui/dialog" -import Image from "next/image" -import { useState, useCallback, useEffect, useMemo } from "react" -import { set, z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" +import Image from "next/image" +import { useCallback, useEffect, useMemo, useState } from "react" import { useForm } from "react-hook-form" +import { z } from "zod" import { Form, @@ -31,23 +29,17 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select" -import { useUser } from "@clerk/nextjs" import { createSandbox } from "@/lib/actions" -import { useRouter } from "next/navigation" -import { - Loader2, - ChevronRight, - ChevronLeft, - Search, - SlashSquare, -} from "lucide-react" -import { Button } from "../ui/button" import { projectTemplates } from "@/lib/data" +import { useUser } from "@clerk/nextjs" +import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react" +import { useRouter } from "next/navigation" +import { Button } from "../ui/button" -import useEmblaCarousel from "embla-carousel-react" -import type { EmblaCarouselType } from "embla-carousel" -import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures" import { cn } from "@/lib/utils" +import type { EmblaCarouselType } from "embla-carousel" +import useEmblaCarousel from "embla-carousel-react" +import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures" const formSchema = z.object({ name: z .string() @@ -296,7 +288,7 @@ function SearchInput({