Skip to content

Commit 4f213e2

Browse files
jlpereirajlpereira
committed
Clean up, unify style. Redefine spacing vars name
1 parent 5c9a38c commit 4f213e2

11 files changed

Lines changed: 264 additions & 318 deletions

File tree

‎app/assets/stylesheets/base/_tw_card.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
.tw-card {
2+
background-color: var(--bg-foreground);
3+
border-radius: var(--border-radius-medium);
4+
box-shadow: var(--panel-shadow);
5+
overflow: hidden;
6+
margin-bottom: var(--spacing-md);
7+
}
8+
9+
.tw-card-header {
10+
display: flex;
11+
align-items: center;
12+
gap: var(--spacing-xs);
13+
padding: var(--spacing-lg);
14+
border-bottom: 1px solid var(--panel-border-color);
15+
16+
> svg {
17+
width: 1.125rem;
18+
height: 1.125rem;
19+
}
20+
}
21+
22+
.tw-card-title {
23+
display: flex;
24+
align-items: center;
25+
gap: var(--spacing-xs);
26+
margin: 0;
27+
font-size: var(--font-size-base);
28+
font-weight: 600;
29+
30+
svg {
31+
width: 1.125rem;
32+
height: 1.125rem;
33+
}
34+
}
35+
36+
.tw-card-body {
37+
padding: var(--spacing-lg);
38+
}
39+
40+
.info-grid {
41+
display: grid;
42+
grid-template-columns: repeat(2, 1fr);
43+
gap: var(--spacing-xl);
44+
}
45+
46+
.info-item {
47+
display: flex;
48+
flex-direction: column;
49+
gap: var(--spacing-xxs);
50+
}
51+
52+
.info-label {
53+
color: var(--text-muted-color);
54+
font-size: var(--font-size-xs);
55+
text-transform: uppercase;
56+
letter-spacing: 0.05em;
57+
}
58+
59+
.info-value {
60+
font-size: var(--font-size-sm);
61+
62+
&.link {
63+
color: var(--color-link);
64+
text-decoration: none;
65+
}
66+
67+
&.muted {
68+
color: var(--text-muted-color);
69+
font-style: italic;
70+
}
71+
}
72+
73+
.token-container {
74+
display: flex;
75+
gap: var(--spacing-xs);
76+
}
77+
78+
.token-input {
79+
flex: 1;
80+
background-color: var(--bg-color);
81+
border: 1px solid var(--border-color);
82+
border-radius: var(--border-radius-medium);
83+
padding: var(--spacing-xs) var(--spacing-md);
84+
color: var(--text-color);
85+
font-family: monospace;
86+
font-size: var(--font-size-sm);
87+
}
88+
89+
.token-btn {
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
width: 36px;
94+
height: 36px;
95+
padding: var(--spacing-xs);
96+
background-color: var(--color-primary);
97+
border: 1px solid var(--color-primary);
98+
border-radius: var(--border-radius-medium);
99+
color: var(--color-on-primary);
100+
cursor: pointer;
101+
transition: background-color 0.2s;
102+
}
103+
104+
.token-warning {
105+
display: flex;
106+
align-items: center;
107+
gap: var(--spacing-xs);
108+
margin-top: var(--spacing-sm);
109+
padding: var(--spacing-xs) var(--spacing-sm);
110+
background-color: var(--color-soft-warning-bg);
111+
border: 1px solid var(--color-soft-warning-border);
112+
border-radius: var(--border-radius-medium);
113+
color: var(--color-warning);
114+
font-size: var(--font-size-sm);
115+
}
116+
117+
.code-block {
118+
max-height: 500px;
119+
min-height: 300px;
120+
padding: 0 var(--spacing-md);
121+
overflow: auto;
122+
background-color: var(--bg-foreground);
123+
border: 1px solid var(--border-color);
124+
border-radius: var(--border-radius-medium);
125+
color: var(--text-muted-color);
126+
font-size: var(--font-size-xs);
127+
white-space: pre;
128+
129+
* {
130+
white-space: pre-wrap;
131+
word-break: break-word;
132+
}
133+
}
134+
135+
@media (max-width: 768px) {
136+
.info-grid {
137+
grid-template-columns: 1fr;
138+
}
139+
}

‎app/assets/stylesheets/views/dashboard/dashboard.scss‎

Lines changed: 28 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
#dashboard {
2-
padding: 1rem 0;
3-
4-
.title {
5-
color: var(--text-color);
6-
justify-content: left;
7-
}
2+
padding: var(--spacing-md) 0;
83

94
.container {
105
max-width: 1280px;
@@ -14,7 +9,7 @@
149
.grid {
1510
display: grid;
1611
grid-template-columns: repeat(1, 1fr);
17-
gap: 1rem;
12+
gap: var(--spacing-md);
1813
}
1914

2015
@media (min-width: 768px) {
@@ -23,59 +18,25 @@
2318
}
2419
}
2520

26-
.panel {
27-
background: var(--bg-foreground);
28-
border-radius: var(--border-radius-medium);
29-
30-
overflow: hidden;
31-
box-shadow: var(--panel-shadow);
32-
}
33-
34-
.panel-header {
35-
padding: 0.5rem 1.5rem;
36-
border-bottom: 1px solid var(--panel-border-color);
37-
display: flex;
38-
align-items: center;
39-
gap: 0.75rem;
40-
}
41-
42-
.panel-header svg {
43-
width: 1.25rem;
44-
height: 1.25rem;
45-
}
46-
47-
.panel-title {
48-
font-size: 1rem;
49-
font-weight: 600;
50-
color: var(--text-color);
51-
}
52-
53-
.panel-content {
54-
padding: 1rem 1.5rem;
55-
}
56-
5721
.project-list {
5822
list-style: none;
5923
display: flex;
6024
flex-direction: column;
61-
gap: 0rem;
6225
}
6326

6427
.project-item {
65-
border-left: 4px solid transparent;
6628
display: flex;
6729
align-items: center;
6830
justify-content: space-between;
69-
70-
border-radius: 0.5rem;
71-
cursor: pointer;
31+
border-left: 4px solid transparent;
7232
border-radius: var(--border-radius-small);
73-
transition: all 0.2s;
33+
cursor: pointer;
34+
transition: background-color 0.2s, border-color 0.2s;
7435

7536
a {
76-
padding: 0.25rem 1rem;
7737
width: 100%;
78-
font-size: 0.875rem;
38+
padding: var(--spacing-xxs) var(--spacing-md);
39+
font-size: var(--font-size-sm);
7940
}
8041
}
8142

@@ -89,81 +50,69 @@
8950
font-weight: bold;
9051
}
9152

92-
.project-name {
93-
font-size: 0.875rem;
94-
font-weight: 500;
95-
}
96-
97-
.project-status {
98-
font-size: 0.75rem;
99-
padding: 0.25rem 0.5rem;
100-
border-radius: 9999px;
101-
font-weight: 500;
102-
}
103-
10453
.link-list {
10554
list-style: none;
10655
display: flex;
10756
flex-direction: column;
108-
gap: 0.5rem;
57+
gap: var(--spacing-xs);
10958
}
11059

11160
.link-item {
11261
display: flex;
11362
align-items: center;
114-
gap: 0.75rem;
115-
padding: 0.5rem 1rem;
116-
border-radius: 0.5rem;
117-
font-size: 0.875rem;
63+
gap: var(--spacing-xs);
64+
padding: var(--spacing-xs) var(--spacing-md);
65+
border-radius: var(--border-radius-small);
66+
font-size: var(--font-size-sm);
11867
text-decoration: none;
11968
transition: background-color 0.15s;
12069
}
12170

12271
.link-item span {
123-
font-size: 0.875rem;
72+
font-size: var(--font-size-sm);
12473
font-weight: 500;
12574
}
12675

127-
.info-grid {
76+
.info-list {
12877
display: flex;
12978
flex-direction: column;
130-
gap: 1rem;
79+
gap: var(--spacing-md);
13180
}
13281

133-
.info-item {
82+
.info-list-item {
13483
display: flex;
13584
justify-content: space-between;
13685
align-items: center;
137-
padding: 0.75rem 1rem;
86+
padding: var(--spacing-sm) var(--spacing-md);
13887
background-color: var(--bg-muted);
139-
border-radius: 0.5rem;
88+
border-radius: var(--border-radius-medium);
14089
}
14190

142-
.info-label {
143-
font-size: 0.875rem;
91+
.info-list-label {
92+
font-size: var(--font-size-sm);
14493
color: var(--text-color);
14594
}
14695

147-
.info-value {
148-
font-size: 0.875rem;
96+
.info-list-value {
97+
font-size: var(--font-size-sm);
14998
font-weight: 600;
15099
}
151100

152101
.badge {
153-
padding: 0.25rem 0.75rem;
102+
padding: var(--spacing-xxs) var(--spacing-sm);
154103
border-radius: 9999px;
155-
font-size: 0.75rem;
104+
font-size: var(--font-size-xs);
156105
font-weight: 600;
157106
text-transform: capitalize;
158107
}
159108

160109
.badge-development {
161-
background-color: #fef3c7;
162-
color: #92400e;
110+
background-color: var(--badge-yellow-bg);
111+
color: var(--badge-yellow-color);
163112
}
164113

165114
.badge-production {
166-
background-color: #dcfce7;
167-
color: #166534;
115+
background-color: var(--badge-green-bg);
116+
color: var(--badge-green-color);
168117
}
169118
}

‎app/assets/stylesheets/views/projects/show.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,6 @@
5151
margin-bottom: 4px;
5252
}
5353

54-
.btn {
55-
display: inline-flex;
56-
align-items: center;
57-
font-size: 0.75rem;
58-
gap: 8px;
59-
padding: 0.5rem 1rem;
60-
border: none;
61-
cursor: pointer;
62-
transition: background-color 0.2s, opacity 0.2s;
63-
}
64-
6554
.btn-full:last-child {
6655
margin-bottom: 0;
6756
}
@@ -112,13 +101,6 @@
112101
flex-direction: column;
113102
}
114103

115-
.profile-card-header {
116-
display: flex;
117-
align-items: center;
118-
gap: 8px;
119-
padding: 16px 20px 12px;
120-
}
121-
122104
.card-header-members {
123105
flex-wrap: wrap;
124106
justify-content: space-between;

0 commit comments

Comments
 (0)