From 79b4da7e0afe773d161d2e50688dd31791efa1e1 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 17 Jul 2023 12:05:03 -0700
Subject: match vscode color theme

---
 extension/react-app/src/components/TextDialog.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'extension/react-app/src/components/TextDialog.tsx')

diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index 646d6846..cba3852d 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -1,7 +1,7 @@
 // Write a component that displays a dialog box with a text field and a button.
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { Button, buttonColor, secondaryDark, vscBackground } from ".";
+import { Button, secondaryDark, vscBackground, vscForeground } from ".";
 import { isMetaEquivalentKeyPressed } from "../util";
 
 const ScreenCover = styled.div`
@@ -21,13 +21,13 @@ const DialogContainer = styled.div`
 `;
 
 const Dialog = styled.div`
-  background-color: white;
+  color: ${vscForeground};
+  background-color: ${vscBackground};
   border-radius: 8px;
   padding: 8px;
   display: flex;
   flex-direction: column;
-  /* box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5); */
-  border: 2px solid ${buttonColor};
+  box-shadow: 0 0 10px 0 ${vscForeground};
   width: fit-content;
   margin: auto;
 `;
@@ -38,14 +38,16 @@ const TextArea = styled.textarea`
   padding: 8px;
   outline: 1px solid black;
   resize: none;
+  background-color: ${secondaryDark};
+  color: ${vscForeground};
 
   &:focus {
-    outline: 1px solid ${buttonColor};
+    outline: 1px solid ${vscForeground};
   }
 `;
 
 const P = styled.p`
-  color: black;
+  color: ${vscForeground};
   margin: 8px auto;
 `;
 
-- 
cgit v1.2.3-70-g09d2

