Skip to content

Commit 094b981

Browse files
ImTheKaiImTheKai
committed
Adjusted and fixed all buttons and styles to match the new layout
Signed-off-by: Kai Wagner <[email protected]>
1 parent beb3d06 commit 094b981

File tree

6 files changed

+187
-4
lines changed

6 files changed

+187
-4
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@
1818
@import "components/notes.css";
1919
@import "components/activities.css";
2020
@import "components/profile.css";
21+
@import "components/settings.css";
2122
@import "components/stats.css";

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
text-decoration: none;
7373
font-weight: var(--font-weight-medium);
7474
padding: var(--spacing-2) var(--spacing-4);
75-
border-radius: var(--border-radius-md);
75+
border-radius: 999px;
7676
transition: all var(--transition-fast);
7777
border: var(--border-width) solid transparent;
7878
display: inline-flex;
@@ -113,6 +113,7 @@
113113
color: var(--color-text-secondary);
114114
cursor: pointer;
115115
box-shadow: var(--shadow-sm);
116+
border-radius: 999px;
116117

117118
&:hover {
118119
background: var(--color-bg-hover);

‎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;

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -465,13 +465,20 @@
465465
}
466466

467467
.mark-aware-button {
468-
padding: var(--spacing-2) var(--spacing-4);
468+
padding: var(--spacing-3) var(--spacing-4);
469469
border: var(--border-width) solid var(--color-border);
470470
background: var(--color-bg-card);
471-
border-radius: var(--border-radius-sm);
471+
border-radius: 999px;
472472
cursor: pointer;
473473
font-weight: var(--font-weight-medium);
474474
color: var(--color-text-primary);
475+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
476+
477+
&:hover {
478+
border-color: var(--color-primary-300);
479+
box-shadow: var(--shadow-sm);
480+
transform: translateY(-1px);
481+
}
475482

476483
&.secondary {
477484
background: var(--color-bg-hover);

‎app/views/settings/show.html.slim‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@
3030

3131
.settings-section
3232
h2 Connected accounts
33-
= link_to "Connect Google account", "/auth/google_oauth2?link=1", class: "button-primary", data: { turbo: false }
33+
= link_to "/auth/google_oauth2?link=1", class: "button-primary settings-google-button", data: { turbo: false } do
34+
span.settings-google-icon aria-hidden="true"
35+
svg.settings-google-svg width="18" height="18" viewBox="0 0 48 48"
36+
path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.6 32.6 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c11 0 20-9 20-20 0-1.3-.1-2.2-.4-3.5z"
37+
path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16.2 19 14 24 14c3 0 5.8 1.1 7.9 2.9l5.7-5.7C34.5 6.1 29.5 4 24 4 16.2 4 9.5 8.3 6.3 14.7z"
38+
path fill="#4CAF50" d="M24 44c5.1 0 9.9-1.9 13.5-5.1l-6.2-5.1C29.3 35.6 26.8 36.5 24 36.5c-5.1 0-9.4-3.4-11-8.1l-6.5 5C9.7 39.7 16.4 44 24 44z"
39+
path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-1.1 3.1-3.3 5.7-6.1 7.4l6.2 5.1C39.1 36.9 44 31.1 44 24c0-1.3-.1-2.2-.4-3.5z"
40+
span Connect Google account
3441

3542
- if @identities.any?
3643
table.email-table

0 commit comments

Comments
 (0)