Lots of fixes improving legibility, particularly with button borders

frontend/src/assets/scss/elementStyles.scss

@@ -58,7 +58,7 @@ b, strong {
 }
 
 .button {
-	border: 1px solid $color__gray--darker;
+	border: 1px solid $color__gray--darkest;
 	display: inline-block;
 	border-radius: 0.25rem;
 	text-align: center;
@@ -127,15 +127,14 @@ b, strong {
 		}
 	}
 
-	@at-root #{&}--orange {
-		border-color: $color__orange--primary;
-		&:hover { border-color: $color__orange--darker; }
-		&:active { border-color: $color__orange--darkest; }
-	}
 	@at-root #{&}--lightblue {
-		border-color: $color__lightblue--primary;
-		&:hover { border-color: $color__blue--primary; }
-		&:active { border-color: $color__blue--darker; }
+		border-color: $color__blue--primary;
+		box-shadow: 0 0 0px 1px $color__blue--primary inset;
+
+		&:hover, &:active {
+			border-color: $color__blue--darker;
+			box-shadow: 0 0 0px 1px $color__blue--darker inset;
+		}
 	}
 
 	@mixin filled_button($background, $border, $text: #fff) {

frontend/src/assets/scss/variables.scss

@@ -24,14 +24,13 @@ $color__green--primary: rgba(76, 175, 80, 0.86);
 $color__green--darker: #349238;
 $color__green--darkest: #1B5E20;
 
-$color__blue--primary: #1E88E5;
-$color__blue--darker: #1565C0;
+$color__blue--primary: #42A7FF;
+$color__blue--darker: #0079E5;
 $color__blue--darkest: #0D47A1;
 
 $color__red--primary: #e74860;
 $color__red--darker: #B71C1C;
 
-$color__lightblue--primary: #03A9F4;
 
 @keyframes flash {
 	0% {

frontend/src/components/InputEditorCore.vue

@@ -73,12 +73,15 @@
 				</p>
 				<fancy-input placeholder='Text for link' width='100%' v-model='linkText'></fancy-input>
 				<fancy-input placeholder='Web address for link' width='100%' v-model='linkURL'></fancy-input>
-				<button class='button' @click='addLink'>
-					OK
-				</button>
-				<button class='button' @click='setModalState("link", false)'>
-					Cancel
-				</button>
+
+				<div>
+					<button class='button button--modal button--borderless' @click='setModalState("link", false)'>
+						Cancel
+					</button>
+					<button class='button button--green button--modal' @click='addLink'>
+						Add link
+					</button>
+				</div>
 			</div>
 		</modal-window>
 

frontend/src/components/SearchBox.vue

@@ -42,7 +42,7 @@
 	@import '../assets/scss/elementStyles.scss';
 
 	.search_box {
-		border: thin solid $color__gray--darker;
+		border: thin solid $color__gray--darkest;
 		border-right: 0;
 		border-radius: 0.25rem;
 		outline: none;
@@ -66,11 +66,11 @@
 			@extend .button;
 
 			border: 0;
-			border-right: thin solid $color__gray--darker;
+			border-right: thin solid $color__gray--darkest;
 			border-radius: 0 0.125rem 0.125rem 0;
 
 			&:hover, &:active {
-				border-color: $color__gray--darker;
+				border-color: $color__gray--darkest;
 			}
 		}
 	}