further improve ui contrast and consistency

Author: Shawn Erquhart

src/components/ControlPanel/ControlPane.css

@@ -14,7 +14,7 @@
     width: 100%;
     padding: 12px;
     margin: 0;
-    border: 2px solid rgb(230, 230, 230);
+    border: 2px solid var(--textFieldBorderColor);
     border-radius: var(--borderRadius);
     outline: 0;
     box-shadow: none;

src/components/EntryEditor/EntryEditor.css

@@ -54,5 +54,5 @@
 }
 
 .ProseMirror {
-  border: 2px solid rgb(230, 230, 230);
+  border: 2px solid var(--textFieldBorderColor);
 }

src/components/EntryListing/EntryListing.css

@@ -1,7 +1,5 @@
 .card {
-  flex-grow: 1;
-  flex-basis: 31%;
-  flex-basis: 300px;
+  flex: 0 300px;
   overflow: hidden;
   margin-bottom: 16px;
   margin-left: 16px;

src/components/UI/card/Card.css

@@ -1,9 +1,9 @@
 @import '../theme.css';
 
 .card {
-  composes: base container rounded depth;
+  composes: base container rounded;
   overflow: hidden;
-  border: 1px solid #f7f8f8;
+  border: 2px solid var(--textFieldBorderColor);
   transition: all .1s ease-in-out;
   transform: translateY(0);
   padding: 16px 24px;

src/components/UI/theme.css

@@ -17,12 +17,13 @@
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
   --backgroundAltColor: #232528;
-  --textFieldBorderColor: #e7e7e7;
+  --textFieldBorderColor: #e6e6e6;
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
   --highlightFGAltColor: #eee;
   --controlLabelColor: #8b8b8b;
   --controlBGColor: #fff;
+  --control
   --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
 }
@@ -40,10 +41,6 @@
   border-radius: var(--borderRadius);
 }
 
-.depth {
-  box-shadow: var(--dropShadow);
-}
-
 .clearfix:after {
   content: '';
   display: table;

src/components/Widgets/MarkdownControlElements/VisualEditor/index.css

@@ -1,9 +1,6 @@
 @import "../../../UI/theme";
 
 .editorControlBar {
-  background-color: var(--controlBGColor);
-  border-bottom: 1px solid var(--backgroundTertiaryColorDark);
-  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
   z-index: 1;
 }
 
@@ -70,8 +67,7 @@
     padding: 12px;
     border-radius: var(--borderRadius);
     overflow-x: auto;
-    border: 2px solid rgb(230, 230, 230);
-    border-top: 1px solid rgb(230, 230, 230);
+    border: 2px solid var(--textFieldBorderColor);
     min-height: 500px;
 
     & ul {