Fix profile and add gradient-primary-background

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue

@@ -162,7 +162,7 @@ export default {
 		height: 70px;
 		border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		background-color: var(--color-primary);
-		background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
+		background-image: var(--gradient-primary-background);
 
 		span {
 			bottom: 0;

apps/theming/lib/Themes/DefaultTheme.php

@@ -121,6 +121,8 @@ class DefaultTheme implements ITheme {
 			'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80),
 			'--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15),
 			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70),
+			// to use like this: background-image: var(--gradient-primary-background);
+			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%)',
 
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,

core/css/header.css

@@ -71,7 +71,7 @@
   z-index: 2000;
   height: 50px;
   background-color: var(--color-primary);
-  background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
+  background-image: var(--gradient-primary-background);
   box-sizing: border-box;
   justify-content: space-between;
 }

core/css/header.scss

@@ -51,7 +51,7 @@
 	z-index: 2000;
 	height: variables.$header-height;
 	background-color: var(--color-primary);
-	background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
+	background-image: var(--gradient-primary-background);
 	box-sizing: border-box;
 	justify-content: space-between;
 }

core/css/server.css

@@ -2288,7 +2288,7 @@ label.infield {
   z-index: 2000;
   height: 50px;
   background-color: var(--color-primary);
-  background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
+  background-image: var(--gradient-primary-background);
   box-sizing: border-box;
   justify-content: space-between;
 }

core/src/views/Profile.vue

@@ -312,6 +312,8 @@ $content-max-width: 640px;
 		position: sticky;
 		height: 190px;
 		top: -40px;
+		background-color: var(--color-primary);
+		background-image: var(--gradient-primary-background);
 
 		&__container {
 			align-self: flex-end;
@@ -576,6 +578,9 @@ $content-max-width: 640px;
 		display: flex;
 		justify-content: center;
 		gap: 0 4px;
+		a {
+			filter: var(--background-invert-if-dark);
+		}
 	}
 }