Reworked the overall style to a more modern look (#19)

* Reworked the Sign In style to match a more modern style

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* Adjust the register and forgot password page to the same style

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* Adjusted and fixed all buttons and styles to match the new layout

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

---------

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/application.postcss.css

@@ -9,6 +9,7 @@
 
 @import "components/form.css";
 @import "components/navigation.css";
+@import "components/session.css";
 @import "components/sidebar.css";
 @import "components/topics.css";
 @import "components/avatars.css";
@@ -17,4 +18,5 @@
 @import "components/notes.css";
 @import "components/activities.css";
 @import "components/profile.css";
+@import "components/settings.css";
 @import "components/stats.css";

app/assets/stylesheets/components/navigation.css

@@ -83,7 +83,7 @@
   text-decoration: none;
   font-weight: var(--font-weight-medium);
   padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--border-radius-md);
+  border-radius: 999px;
   transition: all var(--transition-fast);
   border: var(--border-width) solid transparent;
   display: inline-flex;
@@ -124,6 +124,7 @@
   color: var(--color-text-secondary);
   cursor: pointer;
   box-shadow: var(--shadow-sm);
+  border-radius: 999px;
 
   &:hover {
     background: var(--color-bg-hover);

app/assets/stylesheets/components/session.css

@@ -0,0 +1,171 @@
+.session-page {
+  min-height: calc(100vh - var(--nav-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
+  background: var(--color-bg-container);
+}
+
+.session-card {
+  width: 100%;
+  max-width: 420px;
+  padding: var(--spacing-12) var(--spacing-4);
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.session-title {
+  margin: 0 0 var(--spacing-8);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.session-text {
+  margin: 0 0 var(--spacing-6);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+}
+
+.session-oauth {
+  margin-bottom: var(--spacing-6);
+}
+
+.session-oauth-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-6);
+  border-radius: 999px;
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+.session-oauth-button:hover {
+  border-color: var(--color-primary-300);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.session-oauth-icon {
+  position: absolute;
+  left: var(--spacing-5);
+  display: inline-flex;
+  align-items: center;
+}
+
+.session-oauth-svg {
+  display: block;
+}
+
+.session-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  margin: var(--spacing-6) 0 var(--spacing-4);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.08em;
+}
+
+.session-divider::before,
+.session-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.session-form {
+  margin-top: var(--spacing-2);
+}
+
+.session-field {
+  margin-bottom: var(--spacing-4);
+}
+
+.session-input {
+  width: 100%;
+  padding: var(--spacing-4) var(--spacing-6);
+  border-radius: 999px;
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-input);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.session-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.session-actions {
+  margin-top: var(--spacing-6);
+}
+
+.session-submit {
+  width: 100%;
+  padding: var(--spacing-4);
+  border: none;
+  border-radius: 999px;
+  background: #d9480f;
+  color: #ffffff;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.session-submit:hover {
+  background: #bf3f0c;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.session-links {
+  margin-top: var(--spacing-6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-sm);
+}
+
+.session-hint {
+  display: block;
+  margin-top: var(--spacing-2);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+.session-link {
+  color: var(--color-text-link);
+  text-decoration: none;
+}
+
+.session-link:hover {
+  color: var(--color-text-link-hover);
+  text-decoration: underline;
+}
+
+@media (max-width: 480px) {
+  .session-card {
+    padding: var(--spacing-10) var(--spacing-2);
+  }
+
+  .session-title {
+    margin-bottom: var(--spacing-6);
+  }
+}

app/assets/stylesheets/components/settings.css

@@ -0,0 +1,133 @@
+.settings-page {
+  padding: var(--spacing-10) var(--spacing-6) var(--spacing-12);
+}
+
+.settings-page h1 {
+  font-size: var(--font-size-2xl);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-8);
+}
+
+.settings-section {
+  padding: var(--spacing-6) 0;
+  border-bottom: var(--border-width) solid var(--color-border);
+}
+
+.settings-section:last-child {
+  border-bottom: none;
+}
+
+.settings-section h2 {
+  margin-bottom: var(--spacing-4);
+  color: var(--color-text-primary);
+}
+
+.settings-warning {
+  margin-bottom: var(--spacing-4);
+  color: var(--color-warning-text);
+  background: var(--color-warning-bg);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.settings-page .form-group {
+  margin-bottom: var(--spacing-4);
+}
+
+.settings-page .form-group label {
+  display: block;
+  margin-bottom: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+.settings-page input[type="text"],
+.settings-page input[type="email"],
+.settings-page input[type="password"] {
+  width: 100%;
+  padding: var(--spacing-4) var(--spacing-6);
+  border-radius: 999px;
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-input);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.settings-page input[type="text"]:focus,
+.settings-page input[type="email"]:focus,
+.settings-page input[type="password"]:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.settings-page .button-primary,
+.settings-page .button-secondary,
+.settings-page .button-danger,
+.settings-page input[type="submit"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3) var(--spacing-6);
+  border-radius: 999px;
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  border: var(--border-width) solid transparent;
+  cursor: pointer;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
+}
+
+.settings-page .button-primary,
+.settings-page input[type="submit"].button-primary,
+.settings-page input[type="submit"]:not(.button-secondary):not(.button-danger) {
+  background: var(--color-bg-button);
+  color: var(--color-text-button);
+  border-color: var(--color-border);
+}
+
+.settings-page .button-primary:hover,
+.settings-page input[type="submit"].button-primary:hover,
+.settings-page input[type="submit"]:not(.button-secondary):not(.button-danger):hover {
+  background: #d9480f;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.settings-page .button-secondary {
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+  border-color: var(--color-border);
+}
+
+.settings-page .button-secondary:hover {
+  border-color: var(--color-primary-300);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.settings-page .button-danger {
+  background: var(--color-bg-button);
+  color: var(--color-text-button);
+  border-color: var(--color-border);
+}
+
+.settings-page .button-danger:hover {
+  background: #d9480f;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.settings-google-button {
+  gap: var(--spacing-3);
+}
+
+.settings-google-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.settings-google-svg {
+  display: block;
+}

app/assets/stylesheets/components/sidebar.css

@@ -8,6 +8,40 @@
   margin-bottom: var(--spacing-8);
 }
 
+.sidebar .search-input {
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 999px;
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-input);
+  font-size: var(--font-size-sm);
+  margin: 0 0 var(--spacing-3);
+}
+
+.sidebar .search-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.sidebar .search-button {
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 999px;
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+.sidebar .search-button:hover {
+  border-color: var(--color-primary-300);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
 .sidebar-section summary.sidebar-heading {
   list-style: none;
   display: block;