New buttons with project colors + small bugfix (#80)

Following the discussion on [#74](hmn/hmn#74), here are changes to the submit buttons so that they match theme/project color.

Border colors are set to match the button background.

I've also included a "bugfix" where the `editor-toolbar-button-background` parameter in the dark theme.css and variables.scss were missing the # sign.

I wasn't sure whether to remove the `form button` values from theme.css and variables.scss and left them, as I'm not sure they're used anywhere now

Reviewed-on: hmn/hmn#80
Co-authored-by: giggs <darkgiggsxx@gmail.com>
Co-committed-by: giggs <darkgiggsxx@gmail.com>

public/themes/dark/theme.css

@@ -270,7 +270,7 @@ pre, code, .codeblock {
   --landing-search-background-hover: #181818;
   --editor-toolbar-background: #282828;
   --editor-toolbar-border-color: #333;
-  --editor-toolbar-button-background: 282828;
+  --editor-toolbar-button-background: #282828;
   --editor-toolbar-button-background-hover: #333;
   --editor-toolbar-button-border-color: #333;
   --post-blockquote-border-color: #555;

src/rawdata/scss/_forms.scss

@@ -150,8 +150,8 @@ input, select, textarea {
   }
 
   @include usevar('color', 'form-button-color');
-  @include usevar('background-color', 'form-button-background');
+  @include usevar('background-color', 'theme-color');
-  @include usevar('border-color', 'form-button-border-color');
+  @include usevar('border-color', 'theme-color');
 
   border-width: 1px;
   border-style: solid;
@@ -163,7 +163,8 @@ input, select, textarea {
 
   &:hover {
     @include usevar('color', 'form-button-color-active');
-    @include usevar('background-color', 'form-button-background-active');
+    @include usevar('background-color', 'theme-color-dim');
+    @include usevar('border-color', 'theme-color-dim');
   }
 
   &.lite {

src/rawdata/scss/_forum.scss

@@ -54,6 +54,7 @@
   width: 40px;
   height: 40px;
   flex-shrink: 0;
+  object-fit: cover;
   border-radius: 100%;
   overflow: hidden;
   object-fit: cover;

src/rawdata/scss/themes/dark/_variables.scss

@@ -77,7 +77,7 @@ $vars: (
 
   editor-toolbar-background: #282828,
   editor-toolbar-border-color: #333,
-  editor-toolbar-button-background: 282828,
+  editor-toolbar-button-background: #282828,
   editor-toolbar-button-background-hover: #333,
   editor-toolbar-button-border-color: #333,
 

src/templates/src/project.css

@@ -38,11 +38,20 @@ header .content-title .subtitle {
     border-top-color: var(--theme-dim);
 }
 
-a, .thread:before, button, .button, input[type=button], input[type=submit] { 
+a, .thread:before, button, .button, input[type=button] { 
     color: {{ $linkColor }};
     color: var(--link-color);
 }
-a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover { 
+
+.submit, input[type=submit] {
+    color: white;
+}
+
+a.submit:hover, .submit:hover, input[type=submit]:hover {
+    color: white;
+}
+
+a:hover, button:hover, .button:hover, input[type=button]:hover { 
     color: {{ $linkHoverColor }};
     color: var(--link-hover-color);
 }

src/templates/src/project_edit.html

@@ -141,7 +141,7 @@
 						{{ if .Editing }}
 							<input type="submit" value="Save" />
 						{{ else }}
-							<a class="button" href="javascript:;" onclick="gotoTab('description');">Next</a>
+							<a class="button submit" href="javascript:;" onclick="gotoTab('description');">Next</a>
 						{{ end }}
 					</div>
 				</div>
@@ -196,7 +196,7 @@
 						{{ if .Editing }}
 							<input type="submit" value="Save" />
 						{{ else }}
-							<a class="button" href="javascript:;" onclick="gotoTab('assets');">Next</a>
+							<a class="button submit" href="javascript:;" onclick="gotoTab('assets');">Next</a>
 						{{ end }}
 					</div>
 				</div>

src/templates/src/user_profile.html

@@ -137,7 +137,7 @@
 				{{ end }}
 				{{ if .OwnProfile }}
 					{{ if .CanAddProject }}
-						<a href="{{ .NewProjectUrl }}" class="button pv2 ph3">Add New Project</a>
+						<a href="{{ .NewProjectUrl }}" class="button submit pv2 ph3">Add New Project</a>
 					{{ else }}
 						<span class="c--dim i">You have reached the maximum number of personal projects.</span>
 					{{ end }}