From 1da4f3244f63d9299d98ad35f8695fe09cb5f392 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Mon, 16 Sep 2024 17:11:42 +0200
Subject: [PATCH] Added a background to the mobile code editor.

---
 apps/typegpu-docs/src/components/ExampleLayout.tsx | 4 ++--
 apps/typegpu-docs/src/components/ExampleView.tsx   | 2 +-
 apps/typegpu-docs/tailwind.config.mjs              | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/typegpu-docs/src/components/ExampleLayout.tsx b/apps/typegpu-docs/src/components/ExampleLayout.tsx
index 24eae911..52648ec1 100644
--- a/apps/typegpu-docs/src/components/ExampleLayout.tsx
+++ b/apps/typegpu-docs/src/components/ExampleLayout.tsx
@@ -23,7 +23,7 @@ export function ExampleLayout() {
       <div className="md:hidden flex absolute top-4 left-4 z-50 gap-4 text-sm">
         {menuShownMobile ? null : (
           <button
-            className="bg-white rounded-[6.25rem] px-5 py-2.5 hover:bg-grayscale-20 border-grayscale-20 border-2"
+            className="bg-white rounded-[6.25rem] px-5 py-2.5 hover:bg-tameplum-20 border-tameplum-100 border-2"
             type="button"
             onClick={() => setMenuShownMobile(true)}
           >
@@ -33,7 +33,7 @@ export function ExampleLayout() {
 
         <button
           type="button"
-          className="bg-white rounded-[6.25rem] text-sm px-5 py-2.5 hover:bg-grayscale-20 border-grayscale-20 border-2"
+          className="bg-white rounded-[6.25rem] text-sm px-5 py-2.5 hover:bg-tameplum-20 border-tameplum-100 border-2"
           onClick={() => setCodeShown(!codeShown)}
         >
           {codeShown ? 'Preview' : 'Code'}
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index 64ed7649..7057db5a 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -185,7 +185,7 @@ export function ExampleView({ example, isPlayground = false }: Props) {
           </div>
 
           {codeEditorShowing ? (
-            <div className="absolute z-20 md:relative h-[calc(100%-2rem)] w-[calc(100%-2rem)] md:w-full md:h-full">
+            <div className="absolute bg-tameplum-50 z-20 md:relative h-[calc(100%-2rem)] w-[calc(100%-2rem)] md:w-full md:h-full">
               <div className="absolute inset-0">
                 <CodeEditor code={code} onCodeChange={handleCodeChange} />
               </div>
diff --git a/apps/typegpu-docs/tailwind.config.mjs b/apps/typegpu-docs/tailwind.config.mjs
index d991f406..8777de5c 100644
--- a/apps/typegpu-docs/tailwind.config.mjs
+++ b/apps/typegpu-docs/tailwind.config.mjs
@@ -10,7 +10,9 @@ export default {
       },
       colors: {
         tameplum: {
+          20: '#F6F6FF',
           50: '#EFEFF9',
+          100: '#E2E2F0',
           600: '#757387',
           800: '#515061',
         },