fix: css fix for key

closes #348
IQTLabs · May 30, 2019 · 91fbb40 · 91fbb40
1 parent d8a2e9c
commit 91fbb40
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -320,4 +320,8 @@ input[name=hideControls]:checked ~ .canvas {
 
 .key text {
   dominant-baseline: middle;
+}
+
+:global(.darkTheme) .key text {
+  fill: white;
 }
diff --git a/src/features/visualization/Visualization.module.css b/src/features/visualization/Visualization.module.css
@@ -18,13 +18,13 @@
   opacity: 1;
 }
 
-.viz :global(.viz-isChanged-fixed) circle {
+:global(.viz-isChanged-fixed) circle {
   fill:black;
   -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 
-:global(.darkTheme) .viz :global(.viz-isChanged-fixed) circle {
+:global(.darkTheme) :global(.viz-isChanged-fixed) circle {
   fill:white;
 }
 
@@ -52,7 +52,7 @@
   clip-path: polygon(0% 33%, 33% 33%, 33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%);
 }
 
-:global(.darkTheme) .viz :global(.viz-isAdded-fixed) circle {
+:global(.darkTheme) :global(.viz-isAdded-fixed) circle {
   fill: white;
   -webkit-clip-path: polygon(0% 33%, 33% 33%, 33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%);
   clip-path: polygon(0% 33%, 33% 33%, 33% 0%, 66% 0%, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0% 66%, 0% 33%);
@@ -82,7 +82,7 @@
   clip-path: polygon(0% 33%, 100% 33%, 100% 66%, 0% 66%);
 }
 
-:global(.darkTheme) .viz :global(.viz-isRemoved-fixed) circle {
+:global(.darkTheme) :global(.viz-isRemoved-fixed) circle {
   fill: white;
   -webkit-clip-path: polygon(0% 33%, 100% 33%, 100% 66%, 0% 66%);
   clip-path: polygon(0% 33%, 100% 33%, 100% 66%, 0% 66%);
@@ -356,4 +356,14 @@
 
 :global(.darkTheme) .viz :global(circle.viz-bg-circle){
   fill: rgb(130, 129, 129) !important;
+}
+
+.viz-change-icon-container .svg-icon {
+  color: black;
+  fill: black;
+}
+
+:global(.darkTheme) .viz-change-icon-container {
+  color: white;
+  fill: white;
 }