changes

Author: hmdroh

apps/web/app/globals.css

@@ -1,9 +1,81 @@
-@import 'tailwindcss';
-@import '@repo/tailwind-config';
-@import '@repo/web-ui/styles.css';
-
-.preview-right-panel{
-    @media (max-width: 768px) {
-        margin-top: 10px;
-    }
+@import "tailwindcss";
+@import "@repo/tailwind-config";
+@import "@repo/web-ui/styles.css";
+.preview-left-panel input,
+.preview-left-panel textarea,
+.preview-left-panel select {
+  background-color: rgb(255, 255, 255);
+  color: rgb(4, 36, 59);
+}
+.preview-left-panel {
+  border: 1px solid rgb(118, 118, 118);
+  background-color: #00ddff;
+  color: rgb(255, 255, 255);
+  padding: 10px;
+  width: 100%;
+  max-height: 90vh;
+  max-width: 300px;
+  overflow: scroll;
+  @media (max-width: 768px) {
+    max-width: 100%;
+  }
+}
+
+.preview-heading {
+  color: #193243;
+  font-weight: bold;
+  font-size: 2em;
+  @media (max-width: 600px) {
+    font-size: 1.6em;
+  }
+}
+.stats-info {
+  background-color: #000000;
+  color: white;
+  display: inline-block;
+  margin-right: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  user-select: none;
+  pointer-events: none;
+  margin-bottom: 4px;
+}
+
+.preview-right-panel {
+  position: relative;
+  border: 0.1rem solid rgb(0, 48, 63);
+  padding: 10px;
+  width: 100%;
+  overflow: scroll;
+  @media (max-width: 768px) {
+    margin-top: 10px;
+  }
+}
+.preview-container-drag {
+  border: 0.1rem solid rgb(5, 234, 255);
+  position: relative;
+}
+
+.stats-info-button {
+  margin-bottom: 4px;
+  background-color: #00ddff;
+  color: white;
+  display: inline-block;
+  margin-right: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+  cursor: pointer;
+  border: none;
+  user-select: none;
+}
+.stats-info-button:hover {
+  background-color: #242424;
+}
+
+.scaleTwoX {
+  transform: scale(2);
+  width: fit-content;
+  height: fit-content;
 }

apps/web/app/page.tsx

@@ -1,9 +1,12 @@
 "use client";
 import { MainHomeLayout } from "@repo/web-ui/layout";
-import { useState } from "react";
-import './page.module.css';
+import React, { useState } from "react";
+import "./page.module.css";
 import QuizMarkdownEditor from "../components/markdown-editor";
 import ChatgptEditor from "../components/chatgpt-editor";
+import GradientEditor from "../components/gradient-editor";
+import { CardSizeProvider } from "@repo/ui/context/CardSizeContext";
+
 const tabs = [
   {
     key: "markdown",
@@ -12,16 +15,24 @@ const tabs = [
   {
     key: "chatgpt",
     label: "ChatGPT Card",
-  },
+  }
+  // ,
+  // {
+  //   key: "gradient",
+  //   label: "Gradient Card",
+  // },
 ];
 
 export default function Home() {
   const [tab, setTab] = useState("markdown");
 
   return (
     <MainHomeLayout tab={tab} tabs={tabs} setTab={setTab}>
-      {tab === "markdown" ? <QuizMarkdownEditor /> : null}
-      {tab === "chatgpt" ? <ChatgptEditor /> : null}
+      <CardSizeProvider>
+        {tab === "markdown" ? <QuizMarkdownEditor /> : null}
+        {tab === "chatgpt" ? <ChatgptEditor /> : null}
+        {/* {tab === "gradient" ? <GradientEditor /> : null} */}
+      </CardSizeProvider>
     </MainHomeLayout>
   );
-}
+}