[#73398] improve MystEditorGit styling on a light background

antmicro · Mar 3, 2025 · 79458ba · 79458ba
1 parent 5d6a4f1
commit 79458ba
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/myst-git/MystEditorGit.jsx b/src/myst-git/MystEditorGit.jsx
@@ -8,8 +8,11 @@ import Select from "./Select";
 import * as Y from "yjs";
 import CommitModal, { Popup } from "./CommitModal";
 import { useWatchChanges } from "./useWatchChanges";
+import { MystCSSVars } from "../styles/MystStyles";
 
-const MystContainer = styled.div`
+const MystContainer = styled(MystCSSVars)`
+  --text: black;
+  color: var(--text);
   display: grid;
   grid-template-columns: 300px 1fr;
   grid-template-rows: 100%;
@@ -30,7 +33,6 @@ const GitSidebar = styled.div`
 
   label {
     display: block;
-    color: white;
     margin-top: 24px;
     margin-bottom: 12px;
     font-weight: 600;
@@ -39,7 +41,6 @@ const GitSidebar = styled.div`
 `;
 
 const ChangeHistory = styled.div`
-  color: white;
   font-size: 12px;
   width: 100%;
 
@@ -61,7 +62,7 @@ const ChangeHistory = styled.div`
   button {
     cursor: pointer;
     background: white;
-    border: none;
+    border: 1px solid var(--icon-border);
     font-family: "Lato";
     font-weight: 600;
     display: flex;
@@ -388,7 +389,7 @@ const MystEditorGit = ({
   return (
     <div style="all: initial;">
       <StyleSheetManager target={props.parent}>
-        <MystContainer>
+        <MystContainer id="myst-git-container">
           <GitSidebar>
             <div>
               <label>Branch:</label>

diff --git a/src/myst-git/Select.jsx b/src/myst-git/Select.jsx
@@ -65,6 +65,7 @@ const Dropdown = styled.div`
   align-items: center;
   padding: 10px;
   border-radius: var(--border-radius);
+  border: 1px solid var(--icon-border);
 
   input {
     width: 100%;

diff --git a/src/styles/MystStyles.js b/src/styles/MystStyles.js
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const MystContainer = styled.div`
+export const MystCSSVars = styled.div`
   --border-radius: 5px;
   --black: #000;
   --gray-900: #333;
@@ -32,6 +32,9 @@ export const MystContainer = styled.div`
   --icon-color: var(--dark-violet);
   --separator: var(--gray-500);
   --alert: var(--blue-100);
+`;
+
+export const MystContainer = styled(MystCSSVars)`
   all: initial;
   font-family: "Lato", sans-serif;
   height: 100%;