Skip to content

Commit cded2c9

Browse files
ImTheKaiImTheKai
authored
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>
1 parent e23211b commit cded2c9

11 files changed

Lines changed: 452 additions & 60 deletions

File tree

‎app/assets/stylesheets/application.postcss.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
@import "components/form.css";
1111
@import "components/navigation.css";
12+
@import "components/session.css";
1213
@import "components/sidebar.css";
1314
@import "components/topics.css";
1415
@import "components/avatars.css";
@@ -17,4 +18,5 @@
1718
@import "components/notes.css";
1819
@import "components/activities.css";
1920
@import "components/profile.css";
21+
@import "components/settings.css";
2022
@import "components/stats.css";

‎app/assets/stylesheets/components/navigation.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
text-decoration: none;
8484
font-weight: var(--font-weight-medium);
8585
padding: var(--spacing-2) var(--spacing-4);
86-
border-radius: var(--border-radius-md);
86+
border-radius: 999px;
8787
transition: all var(--transition-fast);
8888
border: var(--border-width) solid transparent;
8989
display: inline-flex;
@@ -124,6 +124,7 @@
124124
color: var(--color-text-secondary);
125125
cursor: pointer;
126126
box-shadow: var(--shadow-sm);
127+
border-radius: 999px;
127128

128129
&:hover {
129130
background: var(--color-bg-hover);

‎app/assets/stylesheets/components/session.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
.session-page {
2+
min-height: calc(100vh - var(--nav-height));
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
7+
background: var(--color-bg-container);
8+
}
9+
10+
.session-card {
11+
width: 100%;
12+
max-width: 420px;
13+
padding: var(--spacing-12) var(--spacing-4);
14+
border: none;
15+
background: transparent;
16+
box-shadow: none;
17+
}
18+
19+
.session-title {
20+
margin: 0 0 var(--spacing-8);
21+
font-size: var(--font-size-2xl);
22+
font-weight: var(--font-weight-semibold);
23+
color: var(--color-text-primary);
24+
}
25+
26+
.session-text {
27+
margin: 0 0 var(--spacing-6);
28+
color: var(--color-text-muted);
29+
font-size: var(--font-size-sm);
30+
line-height: var(--line-height-relaxed);
31+
}
32+
33+
.session-oauth {
34+
margin-bottom: var(--spacing-6);
35+
}
36+
37+
.session-oauth-button {
38+
position: relative;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
gap: var(--spacing-3);
43+
width: 100%;
44+
padding: var(--spacing-3) var(--spacing-6);
45+
border-radius: 999px;
46+
border: var(--border-width) solid var(--color-border);
47+
background: var(--color-bg-card);
48+
color: var(--color-text-primary);
49+
font-size: var(--font-size-sm);
50+
font-weight: var(--font-weight-medium);
51+
text-decoration: none;
52+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
53+
}
54+
55+
.session-oauth-button:hover {
56+
border-color: var(--color-primary-300);
57+
box-shadow: var(--shadow-sm);
58+
transform: translateY(-1px);
59+
}
60+
61+
.session-oauth-icon {
62+
position: absolute;
63+
left: var(--spacing-5);
64+
display: inline-flex;
65+
align-items: center;
66+
}
67+
68+
.session-oauth-svg {
69+
display: block;
70+
}
71+
72+
.session-divider {
73+
display: flex;
74+
align-items: center;
75+
gap: var(--spacing-4);
76+
margin: var(--spacing-6) 0 var(--spacing-4);
77+
color: var(--color-text-muted);
78+
font-size: var(--font-size-xs);
79+
letter-spacing: 0.08em;
80+
}
81+
82+
.session-divider::before,
83+
.session-divider::after {
84+
content: "";
85+
flex: 1;
86+
height: 1px;
87+
background: var(--color-border);
88+
}
89+
90+
.session-form {
91+
margin-top: var(--spacing-2);
92+
}
93+
94+
.session-field {
95+
margin-bottom: var(--spacing-4);
96+
}
97+
98+
.session-input {
99+
width: 100%;
100+
padding: var(--spacing-4) var(--spacing-6);
101+
border-radius: 999px;
102+
border: var(--border-width) solid var(--color-border);
103+
background: var(--color-bg-input);
104+
font-size: var(--font-size-sm);
105+
margin: 0;
106+
}
107+
108+
.session-input:focus {
109+
outline: none;
110+
border-color: var(--color-border-focus);
111+
box-shadow: var(--shadow-focus);
112+
}
113+
114+
.session-actions {
115+
margin-top: var(--spacing-6);
116+
}
117+
118+
.session-submit {
119+
width: 100%;
120+
padding: var(--spacing-4);
121+
border: none;
122+
border-radius: 999px;
123+
background: #d9480f;
124+
color: #ffffff;
125+
font-size: var(--font-size-sm);
126+
font-weight: var(--font-weight-semibold);
127+
cursor: pointer;
128+
transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
129+
}
130+
131+
.session-submit:hover {
132+
background: #bf3f0c;
133+
box-shadow: var(--shadow-sm);
134+
transform: translateY(-1px);
135+
}
136+
137+
.session-links {
138+
margin-top: var(--spacing-6);
139+
display: flex;
140+
flex-direction: column;
141+
align-items: center;
142+
gap: var(--spacing-2);
143+
font-size: var(--font-size-sm);
144+
}
145+
146+
.session-hint {
147+
display: block;
148+
margin-top: var(--spacing-2);
149+
color: var(--color-text-muted);
150+
font-size: var(--font-size-xs);
151+
}
152+
153+
.session-link {
154+
color: var(--color-text-link);
155+
text-decoration: none;
156+
}
157+
158+
.session-link:hover {
159+
color: var(--color-text-link-hover);
160+
text-decoration: underline;
161+
}
162+
163+
@media (max-width: 480px) {
164+
.session-card {
165+
padding: var(--spacing-10) var(--spacing-2);
166+
}
167+
168+
.session-title {
169+
margin-bottom: var(--spacing-6);
170+
}
171+
}

‎app/assets/stylesheets/components/settings.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
.settings-page {
2+
padding: var(--spacing-10) var(--spacing-6) var(--spacing-12);
3+
}
4+
5+
.settings-page h1 {
6+
font-size: var(--font-size-2xl);
7+
color: var(--color-text-primary);
8+
margin-bottom: var(--spacing-8);
9+
}
10+
11+
.settings-section {
12+
padding: var(--spacing-6) 0;
13+
border-bottom: var(--border-width) solid var(--color-border);
14+
}
15+
16+
.settings-section:last-child {
17+
border-bottom: none;
18+
}
19+
20+
.settings-section h2 {
21+
margin-bottom: var(--spacing-4);
22+
color: var(--color-text-primary);
23+
}
24+
25+
.settings-warning {
26+
margin-bottom: var(--spacing-4);
27+
color: var(--color-warning-text);
28+
background: var(--color-warning-bg);
29+
padding: var(--spacing-3) var(--spacing-4);
30+
border-radius: 999px;
31+
display: inline-flex;
32+
align-items: center;
33+
}
34+
35+
.settings-page .form-group {
36+
margin-bottom: var(--spacing-4);
37+
}
38+
39+
.settings-page .form-group label {
40+
display: block;
41+
margin-bottom: var(--spacing-2);
42+
color: var(--color-text-secondary);
43+
font-weight: var(--font-weight-medium);
44+
}
45+
46+
.settings-page input[type="text"],
47+
.settings-page input[type="email"],
48+
.settings-page input[type="password"] {
49+
width: 100%;
50+
padding: var(--spacing-4) var(--spacing-6);
51+
border-radius: 999px;
52+
border: var(--border-width) solid var(--color-border);
53+
background: var(--color-bg-input);
54+
font-size: var(--font-size-sm);
55+
margin: 0;
56+
}
57+
58+
.settings-page input[type="text"]:focus,
59+
.settings-page input[type="email"]:focus,
60+
.settings-page input[type="password"]:focus {
61+
outline: none;
62+
border-color: var(--color-border-focus);
63+
box-shadow: var(--shadow-focus);
64+
}
65+
66+
.settings-page .button-primary,
67+
.settings-page .button-secondary,
68+
.settings-page .button-danger,
69+
.settings-page input[type="submit"] {
70+
display: inline-flex;
71+
align-items: center;
72+
justify-content: center;
73+
padding: var(--spacing-3) var(--spacing-6);
74+
border-radius: 999px;
75+
font-weight: var(--font-weight-semibold);
76+
text-decoration: none;
77+
border: var(--border-width) solid transparent;
78+
cursor: pointer;
79+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
80+
}
81+
82+
.settings-page .button-primary,
83+
.settings-page input[type="submit"].button-primary,
84+
.settings-page input[type="submit"]:not(.button-secondary):not(.button-danger) {
85+
background: var(--color-bg-button);
86+
color: var(--color-text-button);
87+
border-color: var(--color-border);
88+
}
89+
90+
.settings-page .button-primary:hover,
91+
.settings-page input[type="submit"].button-primary:hover,
92+
.settings-page input[type="submit"]:not(.button-secondary):not(.button-danger):hover {
93+
background: #d9480f;
94+
box-shadow: var(--shadow-sm);
95+
transform: translateY(-1px);
96+
}
97+
98+
.settings-page .button-secondary {
99+
background: var(--color-bg-card);
100+
color: var(--color-text-primary);
101+
border-color: var(--color-border);
102+
}
103+
104+
.settings-page .button-secondary:hover {
105+
border-color: var(--color-primary-300);
106+
box-shadow: var(--shadow-sm);
107+
transform: translateY(-1px);
108+
}
109+
110+
.settings-page .button-danger {
111+
background: var(--color-bg-button);
112+
color: var(--color-text-button);
113+
border-color: var(--color-border);
114+
}
115+
116+
.settings-page .button-danger:hover {
117+
background: #d9480f;
118+
box-shadow: var(--shadow-sm);
119+
transform: translateY(-1px);
120+
}
121+
122+
.settings-google-button {
123+
gap: var(--spacing-3);
124+
}
125+
126+
.settings-google-icon {
127+
display: inline-flex;
128+
align-items: center;
129+
}
130+
131+
.settings-google-svg {
132+
display: block;
133+
}

‎app/assets/stylesheets/components/sidebar.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,40 @@
88
margin-bottom: var(--spacing-8);
99
}
1010

11+
.sidebar .search-input {
12+
width: 100%;
13+
padding: var(--spacing-3) var(--spacing-4);
14+
border-radius: 999px;
15+
border: var(--border-width) solid var(--color-border);
16+
background: var(--color-bg-input);
17+
font-size: var(--font-size-sm);
18+
margin: 0 0 var(--spacing-3);
19+
}
20+
21+
.sidebar .search-input:focus {
22+
outline: none;
23+
border-color: var(--color-border-focus);
24+
box-shadow: var(--shadow-focus);
25+
}
26+
27+
.sidebar .search-button {
28+
width: 100%;
29+
padding: var(--spacing-3) var(--spacing-4);
30+
border-radius: 999px;
31+
border: var(--border-width) solid var(--color-border);
32+
background: var(--color-bg-card);
33+
color: var(--color-text-primary);
34+
font-weight: var(--font-weight-medium);
35+
cursor: pointer;
36+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
37+
}
38+
39+
.sidebar .search-button:hover {
40+
border-color: var(--color-primary-300);
41+
box-shadow: var(--shadow-sm);
42+
transform: translateY(-1px);
43+
}
44+
1145
.sidebar-section summary.sidebar-heading {
1246
list-style: none;
1347
display: block;

0 commit comments

Comments
 (0)