Merge branch 'root-colors' into 'main'

Root colors

See merge request !45

FullstackProsjekt/src/frontend/src/assets/main.css

+:root{
+    --all-background-color:#F2F2F2;
+
+    --sidebar-bd-color: #242F40;
+    --sidebar-item-hover: #CCA43B;
+    --sidebar-item-active: #CCA43B;
+
+    --field-placeholder: #b0b0b0;
+    --field-background: #E5E5E5;
+    --card-background: #d7d7d7;
+
+    --text-light-color: #d7d7d7;
+    --text-dark-color: #242F40;
+
+    --danger-color:#d2442b;
+    --danger-hover:#d9563e;
+
+    --safe-color: #242F40;
+    --safe-hover: #425575;
+    --safe-active: #425575;
+
+    --option-color: #CCA43B;
+    --option-hover: #eebf42;
+    --option-active: #D9C590;
+}
+
+
 body {
     font-family: monospace;
     margin: 0 0 0 28px;
-    background-color: #F2F2F2;
+    background-color: var(--all-background-color);
 }
 
 input {
     padding: 5px;
     border-radius: 5px;
     border: none;
-    background-color: #dedede;
     margin-bottom: 10px;
     font-family: monospace;
 }
 input::placeholder {
-    color: #b0b0b0;
+    color: var(--field-placeholder);
 }
 
 label {
@@ -38,7 +64,7 @@ select{
 }
 .course-col{
     flex-basis: 31%;
-    background: #d7d7d7;
+    background: var(--card-background);
     border-radius: 10px;
     margin-bottom: 5%;
     padding: 20px;
@@ -49,7 +75,7 @@ select{
     box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
 }
 .error-message{
-    color: #e53a1c;
+    color: var(--danger-color);
     padding: 10px;
     font-size: 16px;
     margin-bottom: 20px;
@@ -57,44 +83,50 @@ select{
 .play-btn{
     padding: 10px;
     text-decoration: none;
-    background-color: #242F40;
+    background-color: var(--safe-color);
     border-color: transparent;
-    color: #FFFFFF;
+    color: var(--text-light-color);
     border-radius: 10px;
 }
 .play-btn:hover {
-    background-color: #425575;
+    background-color: var(--safe-hover);
     transition: 0.4s ;
 }
 .play-btn:active{
-    background-color: #425575;
+    background-color: var(--safe-active);
     transition: 0.2s ;
 }
 .edit-btn{
     padding: 10px;
     text-decoration: none;
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     border-color: transparent;
     color: #242F40;
     border-radius: 10px;
     cursor: pointer;
 }
+.edit-btn:hover{
+    background-color: var(--option-hover);
+}
+.edit-btn:active{
+    background-color: var(--option-active);
+}
 .delete-btn{
     padding: 10px;
-    background-color: #cc513b;
+    background-color: var(--danger-color);
     border-color: transparent;
-    color: #242F40;
+    color: var(--text-dark-color);
     border-radius: 10px;
     font-family: monospace;
     cursor: pointer;
     text-decoration: none;
 }
 .delete-btn:hover{
-    background-color: #d9563e;
+    background-color: var(--danger-hover);
 
 }
 .add-Btn {
-    background-color: #242F40;
+    background-color: var(--safe-color);
     color: white;
     font-size: 16px;
     padding: 10px;
@@ -105,14 +137,14 @@ select{
 }
 .add-Btn:hover{
     cursor: pointer;
-    background-color: #2f3d54;
+    background-color: var(--safe-hover);
 }
 .add-Btn:active{
-    background-color: #425575;
+    background-color: var(--safe-active);
     transition: 0.2s ;
 }
 .save-Btn{
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     font-size: 24px;
     padding: 15px;
     border-radius: 20px;
@@ -121,7 +153,7 @@ select{
     cursor: pointer;
 }
 .close-btn{
-    background-color: #d2442b;
+    background-color: var(--danger-color);
     padding: 10px;
     border-radius: 5px;
     border-color: transparent;
@@ -132,10 +164,10 @@ select{
     color: white;
 }
 .close-btn:hover {
-    background-color: #e15238;
+    background-color: var(--danger-hover);
 }
 .submit-btn{
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     font-size: 20px;
     padding: 10px;
     border-radius: 5px;
@@ -147,12 +179,10 @@ select{
     height: 50px;
 }
 .submit-btn:hover{
-    background-color: #a67d0e;
-    color: white;
+    background-color: var(--option-hover);
 }
 .submit-btn:active{
-    background-color: #2D333B;
-    color: white;
+    background-color: var(--option-active);
 }
 
 @media (max-width: 700px){

FullstackProsjekt/src/frontend/src/components/TheWelcome.vue

@@ -80,7 +80,7 @@ export default {
 }
 .text-box{
 	width: 90%;
-	color: #fff;
+	color: var(--text-light-color);
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -93,12 +93,12 @@ export default {
 .text-box p{
 	margin: 10px 0 40px;
 	font-size: 20px;
-	color: #fff;
+	color: var(--text-light-color);
 }
 .hero-btn{
 	display: inline-block;
 	text-decoration: none;
-	color: #fff;
+	color: var(--text-light-color);
 	border: 1px solid #fff;
 	padding: 12px 34px;
 	font-size: 16px;
@@ -108,7 +108,7 @@ export default {
 }
 .hero-btn:hover{
 	border: 1px solid #CCA43B;
-	background: #CCA43B;
+	background: var(--option-hover);
 	transition: 1s;
 	color: #242F40;
 }
@@ -123,7 +123,7 @@ h1{
 	font-weight: 600;
 }
 p{
-	color: #0f1412;
+	color: var(--text-dark-color);
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 22px;
@@ -145,12 +145,12 @@ h3{
 	padding: 100px 0;
 }
 .cta h1{
-	color: #F2F2F2;
+	color: var(--text-light-color);
 	margin-bottom: 40px;
 	padding: 0;
 }
 .footer {
-	background-color: #242F40;
+	background-color: var(--sidebar-bd-color);
 	padding: 10px 0;
 	text-align: center;
 }
@@ -173,7 +173,7 @@ h3{
 	margin-right: 0;
 }
 .footer ul li a {
-	color: #fff;
+	color: var(--text-light-color);
 	text-decoration: none;
 }
 .footer ul li a:hover {

FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue

@@ -45,15 +45,11 @@ export default {
 
 
 <style>
-:root{
-	--sidebar-bd-color: #242F40;
-	--sidebar-item-hover: #CCA43B;
-	--sidebar-item-active: #CCA43B;
-}
+
 </style>
 <style scoped>
 .sidebar{
-	color: white;
+	color: var(--text-light-color);
 	background-color: var(--sidebar-bd-color);
 	float: left;
 	position: fixed;

FullstackProsjekt/src/frontend/src/views/AboutView.vue

@@ -118,21 +118,21 @@ li{
 }
 .card {
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-	margin: 8px auto; /* Center the cards horizontally */
+	margin: 8px auto;
 	padding: 10px;
-	max-width: 400px; /* Adjust the maximum width of the card */
+	max-width: 400px;
 }
 .about-section {
 	padding: 10vh 10vh 10vh 10vh;
 	text-align: center;
-	color: #ffffff;
+	color: var(--text-light-color);
 }
 .our-team{
-	color: #242F40;
+	color: var(--sidebar-bd-color);
 }
 .container {
 	padding: 0 16px;
-	color: #242F40;
+	color: var(--sidebar-bd-color);
 }
 .title {
 	color: grey;

FullstackProsjekt/src/frontend/src/views/FeedbackView.vue

@@ -95,7 +95,7 @@ export default {
 }
 .feedback {
 	text-align: center;
-	color: #242F40;
+	color: var(--text-dark-color);
 	border-color: transparent;
 	border-radius: 15px;
 	align-items: center;
@@ -113,7 +113,7 @@ export default {
 	border: none;
 	width: 50vh;
 	height: 15vh;
-	background-color: #E5E5E5;
+	background-color: var(--field-background);
 }
 .submit-section {
 	display: flex;

FullstackProsjekt/src/frontend/src/views/LoginView.vue

@@ -109,13 +109,13 @@ export default {
 	cursor: pointer;
 }
 #signUpLink {
-	color: #CCA43B;
+	color: var(--option-color);
 	padding: 10px;
 	font-size: 16px;
 	text-decoration: none;
 }
 #signUpLink:hover{
-	color: #242F40;
+	color: var(--option-hover);
 	transition: 0.3s;
 }
 .submit-section {

FullstackProsjekt/src/frontend/src/views/ProfileView.vue

@@ -150,7 +150,7 @@ export default {
 }
 .user-quizzes .quiz {
 	border: 1px solid #ccc;
-	background-color: #d7d7d7 ;
+	background-color: var(--field-placeholder) ;
 	border-radius: 5px;
 	padding: 10px;
 	margin-bottom: 10px;
@@ -165,10 +165,10 @@ export default {
 }
 .profile-options ul li a {
 	text-decoration: none;
-	color: #CCA43B;
+	color: var(--option-color);
 }
 .profile-options ul li a:hover{
-	color: #a2822e;
+	color: var(--option-hover);
 	text-decoration: underline;
 }
 .progress-tracking {