Code-Box ( Code Sprite) with dark theme!

README.md

@@ -1,11 +1,10 @@
-# Code Box
+# CodeSprite
 
-A development platform where anyone can build websites using HTML, CSS and JS. And show off their work online.
+A Dark theme of Code-Box + updating every time!
 
 ![Banner](https://raw.githubusercontent.com/rohitdhas/code-box/main/public/banner.png)
 
 ## 🚧 Upcoming Features
 
 - Public/Private Codeboxes
 - Search users/codeboxes
-- Deploy Codebox

components/emptyState.jsx

@@ -12,6 +12,7 @@ export default function EmptyState({ toggleModal }) {
       text="Create New Project"
       icon="plus"
       intent="primary"
+      className="rounded-full"
     />
   );
 

components/navbar.jsx

@@ -24,12 +24,13 @@ export default function Nav({ getProjects, previewBtn, editBtn }) {
     />
   );
   return (
-    <Navbar style={{ backgroundColor: "#cfe9ff" }}>
+    <Navbar style={{ backgroundColor: "#E2DED0" }}>
       <NavbarGroup align={Alignment.LEFT}>
         <NavbarHeading style={{ fontSize: "1.5rem", fontWeight: "bold" }}>
-          CodeBox 👨‍💻
+          CodeSprite 👨‍💻
+
         </NavbarHeading>
-        <NavbarDivider style={{ backgroundColor: "#1e67a7" }} />
+        <NavbarDivider style={{ backgroundColor: "#647C90" }} />
         <Button
           className={Classes.MINIMAL}
           icon="home"
@@ -54,7 +55,7 @@ export default function Nav({ getProjects, previewBtn, editBtn }) {
             icon="eye-open"
             intent="warning"
             text="Full Screen Preview"
-            className="mr-2"
+            className="mr-2 rounded-full"
           />
         ) : (
           <></>
@@ -67,7 +68,7 @@ export default function Nav({ getProjects, previewBtn, editBtn }) {
             icon="edit"
             intent="warning"
             text="Edit Project"
-            className="mr-2"
+            className="mr-2 rounded-full"
           />
         ) : (
           <></>
@@ -80,6 +81,7 @@ export default function Nav({ getProjects, previewBtn, editBtn }) {
           icon="chevron-left"
           text="Sign Out 👋🏻"
           intent="danger"
+          className="rounded-full"
         />
       </NavbarGroup>
     </Navbar>

components/popup.jsx

@@ -77,13 +77,14 @@ export default function Popup({ ToggleButton, getProjects }) {
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Tooltip content="Close this popup.">
-              <Button onClick={handleClose}>Close</Button>
+              <Button className="rounded-full" onClick={handleClose}>Close</Button>
             </Tooltip>
             <Tooltip content="Create Project">
               <Button
                 loading={isLoading}
                 onClick={createProject}
                 intent="primary"
+                className="rounded-full"
               >
                 Create
               </Button>

lib/mongodb.js

@@ -1,23 +1,13 @@
 import { MongoClient } from "mongodb";
 
-const MONGODB_URI = process.env.MONGODB_URI;
-const MONGODB_DB = process.env.DB_NAME;
-
-// check the MongoDB URI
-if (!MONGODB_URI) {
-  throw new Error("Define the MONGODB_URI environmental variable");
-}
-
-// check the MongoDB DB
-if (!MONGODB_DB) {
-  throw new Error("Define the MONGODB_DB environmental variable");
-}
+const MONGODB_URI = "Ur mongoDB URL";
+const MONGODB_DB = "DB NAME";
+const COLLECTION_NAME = "users";
 
 let cachedClient = null;
 let cachedDb = null;
 
 export async function connectToDatabase() {
-  // check the cached.
   if (cachedClient && cachedDb) {
     // load from cache
     return {
@@ -32,12 +22,10 @@ export async function connectToDatabase() {
     useUnifiedTopology: true,
   };
 
-  // Connect to cluster
-  let client = new MongoClient(MONGODB_URI, opts);
+  const client = new MongoClient(MONGODB_URI, opts);
   await client.connect();
-  let db = client.db(MONGODB_DB);
+  const db = client.db(MONGODB_DB);
 
-  // set cache
   cachedClient = client;
   cachedDb = db;
 

pages/api/createProject.js

@@ -10,7 +10,7 @@ export default async function handler(req, res) {
     user: userId,
     createdAt: new Date(),
     html: `<div>
-    <h2>Welcome to codebox 🚀🔥</h2>
+    <h2>Welcome to CodeSprite 🚀🔥</h2>
 	<button>Click Me</button>
 </div>
     `,
@@ -21,6 +21,11 @@ export default async function handler(req, res) {
     flex-direction: column;
     align-items: center;
   }
+
+  body{
+    background-color: aliceblue;
+  }
+
 h2 {
     color: cornflowerblue;
   }

pages/index.js

@@ -52,7 +52,7 @@ export default function Home() {
     <div>
       <Head>
         <title>Home</title>
-        <meta name="description" content="Create new codebox to get started!" />
+        <meta name="description" content="Create new CodeSpace to get started!" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Nav getProjects={getProjects} />
@@ -65,9 +65,9 @@ export default function Home() {
             return (
               <Card
                 elevation={1}
-                className="w-[40%] mx-auto my-4 flex align items-center"
+                className="w-[40%] mx-auto my-8 flex align items-center rounded-2xl shadow-xl shadow-gray-800"
                 key={project._id}
-                style={{ backgroundColor: "#e6f3ff" }}
+                style={{ backgroundColor: "#E2DED0" }}
               >
                 <Card className="mr-6">
                   <Icon icon="code" size={30} intent="primary" />

pages/login.jsx

@@ -17,8 +17,8 @@ import { storeUser } from "../utils";
 export default function Login() {
   const [showPassword, setShowPassword] = useState(false);
   const [disabled, setDisabled] = useState(false);
-  const [email, setEmail] = useState("[email protected]");
-  const [password, setPassword] = useState("guest-pass");
+  const [email, setEmail] = useState("[email protected]");
+  const [password, setPassword] = useState("example");
   const [isLoading, setIsLoading] = useState(false);
 
   const router = useRouter();
@@ -72,7 +72,7 @@ export default function Login() {
       <Head>
         <title>Login</title>
       </Head>
-      <Card className="w-[400px]">
+      <Card className="shadow-2xl shadow-gray-900 rounded-3xl w-[400px]">
         <h2 className="text-2xl font-bold text-center">Log In 🔒</h2>
         <InputGroup
           large={true}
@@ -98,7 +98,7 @@ export default function Login() {
           text="Log In"
           large={true}
           onClick={login}
-          className="my-4 w-full font-bold"
+          className="my-4 w-full font-bold rounded-full"
           loading={isLoading}
         />
         <p className="text-center">

pages/preview/[id].jsx

@@ -25,7 +25,7 @@ export default function Preview() {
       router.push({ pathname: "/" });
     } else {
       const { name, html, css, js } = data;
-      document.title = `Codebox Preview - ${name}`;
+      document.title = `CodeSprite Preview - ${name}`;
       setSrcDoc(`
       <html>
         <body>${html}</body>

pages/project/[id].jsx

@@ -52,7 +52,7 @@ export default function Project() {
     if (isError) {
       router.push({ pathname: "/" });
     } else {
-      document.title = `Codebox - ${data.name}`;
+      document.title = `CodeSprite - ${data.name}`;
       setHTML(data.html);
       setCSS(data.css);
       setJS(data.js);
@@ -84,9 +84,11 @@ export default function Project() {
         />
       </div>
       <div className="m-4 border border-blue-300 rounded-md">
-        <span className="font-bold underline m-0 p-2 text-slate-800">
+        <div className="wht rounded-md m-4 border">
+        <span className="font-bold underline m-0 p-2 text-slate-800 white">
           Preview 🔥
         </span>
+        </div>
         <iframe
           srcDoc={srcDoc}
           title="output"

pages/signup.jsx

@@ -84,7 +84,7 @@ export default function Login() {
       <Head>
         <title>Sign Up</title>
       </Head>
-      <Card className="w-[400px]">
+      <Card className="shadow-2xl shadow-gray-900 rounded-3xl w-[400px]">
         <h2 className="text-2xl font-bold text-center">
           Create New Account 🎈
         </h2>
@@ -127,7 +127,7 @@ export default function Login() {
           text="Create Account"
           large={true}
           onClick={signup}
-          className="my-4 w-full"
+          className="my-4 w-full rounded-full"
           loading={isLoading}
         />
         <p className="text-center">

styles/globals.css

@@ -13,8 +13,23 @@ body {
   padding: 0;
   margin: 0;
   font-family: "Ubuntu", sans-serif;
+  background-color: #545454;
+  color: #757575;
+}
+
+.white{
+  color: #6a6a6a;
+}
+
+.wht{
+  background-color: white;
+  text-align: center;
 }
 
 * {
   box-sizing: border-box;
 }
+
+
+
+