diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index f6eb1e87..a1dc41d5 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -3,8 +3,8 @@
-
-
+
+
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index a5a3fb18..c4a90f1d 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -3,8 +3,8 @@
-
-
+
+
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 1ff8bff4..aa173a50 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
{...domOnlyProps(name)}
ref={(element) => { this.fileName = element; }}
/>
-
+
{name.touched && name.error && {name.error}}
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index 70750394..765ebd06 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
ref={(element) => { this.fileName = element; }}
{...domOnlyProps(name)}
/>
-
+
{name.touched && name.error && {name.error}}
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index da4e8f18..3cc94503 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/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-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,
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index b9ec8bee..8042f929 100644
--- a/client/styles/components/_editor.scss
+++ b/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;
- 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");
}
}
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b4434..e59ef299 100644
--- a/client/styles/components/_modal.scss
+++ b/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;