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

client/images/down-arrow.svg

@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
             </g>

client/images/up-arrow.svg

@@ -3,8 +3,8 @@
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
-    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+    <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
-        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
+        <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
             <g id="Icons" transform="translate(16.000000, 1063.000000)">
                 <polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
             </g>

client/modules/IDE/components/NewFileForm.jsx

@@ -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/modules/IDE/components/NewFolderForm.jsx

@@ -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/styles/abstracts/_variables.scss

@@ -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-background-color: $dark,
-    button-color: $darkest,
+    button-secondary-background-color: $medium-dark,
-    button-border-color: $middle-gray,
+    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-background-color: $dark,
-    button-color: $black,
+    button-secondary-background-color: $medium-dark,
-    button-border-color: $middle-gray,
+    button-color: $light,
+    button-border-color: $middle-dark,
     toolbar-button-color: $dark,
     toolbar-button-background-color: $medium-light,
     button-background-hover-color: $yellow,

client/styles/components/_editor.scss

@@ -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;
+  @include themify() {
-  height: 20px;
+    // @extend %button;
+    padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
+    border: 2px solid transparent;
+    &:hover {
+      border-color: getThemifyVariable("button-border-color");
+    }
 
+  }
+  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/components/_modal.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;