Adjust styling of find setting switches, update button styling for new file and new folder form

Author: catarak

client/images/down-arrow.svg

@@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
             {...domOnlyProps(name)}
             ref={(element) => { this.fileName = element; }}
           />
-          <input type="submit" value="Add File" aria-label="add file" />
+          <input
+            type="submit"
+            value="Add File"
+            aria-label="add file"
+            className="new-file-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>

client/images/up-arrow.svg

@@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
             ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}
           />
-          <input type="submit" value="Add Folder" aria-label="add folder" />
+          <input
+            type="submit"
+            value="Add Folder"
+            aria-label="add folder"
+            className="new-folder-form__submit"
+          />
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>

client/modules/IDE/components/NewFileForm.jsx

@@ -46,6 +46,7 @@ $themes: (
     modal-button-color: $dark,
     background-color: $lighter,
     button-background-color: $light,
+    button-secondary-background-color: $medium-light,
     button-color: $black,
     button-border-color: $middle-light,
     toolbar-button-color: $p5js-pink,
@@ -119,9 +120,10 @@ $themes: (
     secondary-text-color: $medium-light,
     inactive-text-color: $middle-light,
     background-color: $darker,
-    button-background-color: $lightest,
-    button-color: $darkest,
-    button-border-color: $middle-gray,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
     toolbar-button-color: $p5js-pink,
     toolbar-button-background-color: $medium-dark,
     button-background-hover-color: $p5js-pink,
@@ -191,9 +193,10 @@ $themes: (
     secondary-text-color: $lighter,
     inactive-text-color: $light,
     background-color: $darker,
-    button-background-color: $white,
-    button-color: $black,
-    button-border-color: $middle-gray,
+    button-background-color: $dark,
+    button-secondary-background-color: $medium-dark,
+    button-color: $light,
+    button-border-color: $middle-dark,
     toolbar-button-color: $dark,
     toolbar-button-background-color: $medium-light,
     button-background-hover-color: $yellow,

client/modules/IDE/components/NewFolderForm.jsx

@@ -143,22 +143,30 @@ pre.CodeMirror-line {
 .CodeMirror-search-modifiers {
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .CodeMirror-regexp-button,
 .CodeMirror-case-button,
 .CodeMirror-word-button {
-  width: 20px;
-  height: 20px;
+  @include themify() {
+    // @extend %button;
+    padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
+    border: 2px solid transparent;
+    &:hover {
+      border-color: getThemifyVariable("button-border-color");
+    }
 
-  margin-left: #{10 / $base-font-size}rem;
+  }
+  width: #{35 / $base-font-size}rem;
+  height: #{35 / $base-font-size}rem;
+
+  & + & {
+    margin-left: #{10 / $base-font-size}rem;
+  }
 
   word-break: keep-all;
   white-space: nowrap;
-
-  @include themify() {
-    color: getThemifyVariable('inactive-text-color');
-  }
 }
 
 .CodeMirror-regexp-button .label,
@@ -169,7 +177,9 @@ pre.CodeMirror-line {
 
 [aria-checked="true"] {
   @include themify() {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable("heavy-text-color");
+    background-color: getThemifyVariable("button-secondary-background-color");
+    border-color: getThemifyVariable("button-border-color");
   }
 }
 

client/styles/abstracts/_variables.scss

@@ -45,6 +45,13 @@
   flex: 1;
 }
 
+input.new-file-form__submit,
+input.new-folder-form__submit {
+  @include themify() {
+    background-color: getThemifyVariable("button-secondary-background-color");
+  }
+}
+
 .modal__divider {
   text-align: center;
   margin: #{20 / $base-font-size}rem 0;