Skip to content

Commit

Permalink
feat(cora): Update login page styles to match coral (#2203)
Browse files Browse the repository at this point in the history
* feat(core): Simplify login page, change font
* feat(core): Make primary color same as coral
* feat(core): Remove ng scripts
* feat(core): Align styles with design
* fix(e2e): Use new button name
---------

Signed-off-by: Mathieu Anderson <[email protected]>
  • Loading branch information
Mathieu Anderson authored Jan 17, 2024
1 parent 6f47f18 commit 185bde0
Show file tree
Hide file tree
Showing 19 changed files with 11,899 additions and 7,187 deletions.
8 changes: 4 additions & 4 deletions core/src/main/java/io/aiven/klaw/service/EmailService.java
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ public class EmailService {
"https://klaw-project.io/wp-content/uploads/2021/01/KW-logo-gold-sm.png";

private static String headerString =
"<html><table style=\"height:40px;width:60%;background-color:#016BA7;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
"<html><table style=\"height:40px;width:60%;background-color:#0788d1;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "\t<tr>\n"
+ "\t\t\n"
+ "\t\t<td>\n"
Expand All @@ -43,20 +43,20 @@ public class EmailService {
+ "\t</tr>\n"
+ "</table><br>\n"
+ "\n"
+ "<table style=\"width:60%;color:#016BA7;text-align:left;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "<table style=\"width:60%;color:#0788d1;text-align:left;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "\t<tr>\n"
+ "\t\t<td>";

private static final String footerString =
"<br>\n"
+ "<table style=\"height:40px; width:60%;background-color:#016BA7;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "<table style=\"height:40px; width:60%;background-color:#0788d1;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "\t<tr>\n"
+ "\t\t<td>\n"
+ "\t\t\t© 2023 <a href=\"https://klaw-project.io\" style=\"color:white;\">www.klaw-project.io</a>\n"
+ "\t\t</td>\n"
+ "\t</tr>\n"
+ "</table>\n"
+ "<table style=\"height:40px; width:60%;background-color:#016BA7;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "<table style=\"height:40px; width:60%;background-color:#0788d1;color:white;text-align:center;font-family: Arial, Helvetica, sans-serif; margin-left: auto;margin-right: auto;\">\n"
+ "</table></html>";
@Autowired private JavaMailSender emailSender;

Expand Down
30 changes: 15 additions & 15 deletions core/src/main/resources/static/assets/css/colors/blue-dark.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700");
.preloader {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -141,7 +141,7 @@
/*Top bar standard green color 1E7589
*******************/
.topbar {
background: #016BA7; }
background: #0788d1; }
.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
display: none; }
.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
Expand Down Expand Up @@ -236,7 +236,7 @@ a.link:hover, a.link:focus {
.sidebar-nav {
background: #272c33; }
.sidebar-nav ul li a {
color: #016BA7; }
color: #0788d1; }
.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
color: #D22538;}/* other back ground color of logo on the menu*/
.sidebar-nav ul li a.active {
Expand All @@ -245,19 +245,19 @@ a.link:hover, a.link:focus {
color: #99abb4; }
.sidebar-nav > ul > li.active > a, .sidebar-nav > ul > li.active:hover > a {
color: #ffffff;
background: #016BA7; }
background: #0788d1; }
.sidebar-nav > ul > li.active > a i, .sidebar-nav > ul > li.active:hover > a i {
color: #ffffff; }
.sidebar-nav > ul > li.active > a:after, .sidebar-nav > ul > li.active:hover > a:after {
border-color: #fff; }
.sidebar-nav > ul > li > a.active i, .sidebar-nav > ul > li > a:hover i {
color: #016BA7; }
color: #0788d1; }
.sidebar-nav > ul > li > a i {
color: #016BA7; }
color: #0788d1; }
.sidebar-nav > ul > li > a.active {
font-weight: 400;
background: #fff;
color: #016BA7; }
color: #0788d1; }

.user-profile .profile-text a {
color: #798699 !important; }
Expand All @@ -275,33 +275,33 @@ a.link:hover, a.link:focus {


#userbackground {
width:200px;background-color:#016BA7;border:0;
width:200px;background-color:#0788d1;border:0;
}
#userbackground1 {
width:200px;background-color:#016BA7;border:0;
width:200px;background-color:#0788d1;border:0;
}
#grad1 {
background-color: #016BA7; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #016BA7, #016BA7);
background-color: #0788d1; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #0788d1, #0788d1);
}
#grad2 {
background-image: url("../../images/regbg1.jpg");
}
#grad3 {
background-color: #016BA7;
background-color: #0788d1;
}
/* new topic button color*/
#myBtn:hover {
background-color: #016BA7;
background-color: #0788d1;
}

.notificationbar {
margin: 0 auto;
width: 100%;
background-color: #016BA7;
background-color: #0788d1;
color: black;
text-align: center;
position: fixed;
font-size: 12px;
left: 0;
}
}
3 changes: 1 addition & 2 deletions core/src/main/resources/static/assets/css/colors/blue.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700");
.preloader {
width: 100%;
height: 100%;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700");
.preloader {
width: 100%;
height: 100%;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700");
.preloader {
width: 100%;
height: 100%;
Expand Down
89 changes: 58 additions & 31 deletions core/src/main/resources/static/assets/css/custom.css
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 0 auto;
}

#alertbarbulk {
visibility: hidden;
width: 100%;
left: 0;
background-color: #F96B58;
background-color: #f96b58;
color: #fff;
text-align: center;
position: fixed;
Expand All @@ -29,15 +29,15 @@

#successbar {
visibility: hidden;
width: 100%;
left: 0;
background-color: #016BA7;
color: #fff;
text-align: center;
position: fixed;
z-index: 1;
bottom: 30px;
font-size: 17px;
width: 100%;
left: 0;
background-color: #0788d1;
color: #fff;
text-align: center;
position: fixed;
z-index: 1;
bottom: 30px;
font-size: 17px;
}

#successbar.show {
Expand All @@ -50,7 +50,7 @@
visibility: hidden;
width: 100%;
left: 0;
background-color: #F96B58;
background-color: #f96b58;
color: #fff;
text-align: center;
position: fixed;
Expand All @@ -66,35 +66,62 @@
}

@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}


.notificationbar {
margin: 0 auto;
width: 100%;
background-color: #ADD8E6;
background-color: #add8e6;
color: black;
text-align: center;
position: fixed;
Expand All @@ -104,4 +131,4 @@

.header-logo {
height: 40px;
}
}
Loading

0 comments on commit 185bde0

Please sign in to comment.