Added a background to the mobile code editor.

software-mansion · Sep 16, 2024 · 1da4f32 · 1da4f32
1 parent 7f89b2f
commit 1da4f32
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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
@@ -10,7 +10,9 @@ export default {
       },
       colors: {
         tameplum: {
+          20: '#F6F6FF',
           50: '#EFEFF9',
+          100: '#E2E2F0',
           600: '#757387',
           800: '#515061',
         },