Skip to content

Commit b0f5d2f

Browse files
danil-nizamovdanil-nizamov
authored
Merge pull request #2 from CodeSignal/improve-style
Improve style
2 parents 8969cb1 + 3a0afa2 commit b0f5d2f

File tree

4 files changed

+174
-45
lines changed

4 files changed

+174
-45
lines changed

‎app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@
152152
const toTbl = schema.tables.find(tt => tt.id === outgoingFK.to.table);
153153
const toCol = toTbl?.columns.find(cc => cc.id === outgoingFK.to.columns[0]);
154154
const toLabel = toTbl && toCol ? `${toTbl.name}.${toCol.name}` : '(unknown)';
155-
fkStatusText.textContent = `Foreign key → ${toLabel}`;
155+
fkStatusText.textContent = `FK → ${toLabel}`;
156156
btnRemoveFK.hidden = false;
157157
} else {
158158
fkStatusText.textContent = '';

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@
44
<meta charset="utf-8" />
55
<title>DB Schema Designer</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
710
<link rel="stylesheet" href="./style.css" />
811
</head>
912
<body>
1013
<header>
1114
<h1>DB Schema Designer</h1>
1215
<button id="btn-save-solution">Save solution</button>
1316
<div id="status">Ready</div>
14-
<button id="btn-help" class="as-button ghost">HELP</button>
17+
<button id="btn-help" class="as-button ghost">Help</button>
1518
</header>
1619

1720
<main class="layout">

‎solution.json‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
],
4242
"indexes": [],
4343
"position": {
44-
"x": 821,
45-
"y": 342
44+
"x": 603,
45+
"y": 125
4646
}
4747
},
4848
{
@@ -77,26 +77,14 @@
7777
"uniqueConstraints": [],
7878
"indexes": [],
7979
"position": {
80-
"x": 400,
81-
"y": 383
82-
}
83-
},
84-
{
85-
"id": "tbl_meow_jp8fv68",
86-
"name": "meow",
87-
"columns": [],
88-
"primaryKey": [],
89-
"uniqueConstraints": [],
90-
"indexes": [],
91-
"position": {
92-
"x": 484,
93-
"y": 262
80+
"x": 234,
81+
"y": 109
9482
}
9583
}
9684
],
9785
"foreignKeys": [
9886
{
99-
"id": "fk_orders_user",
87+
"id": "fk_a1cw4cy",
10088
"from": {
10189
"table": "tbl_orders",
10290
"columns": [
@@ -109,7 +97,7 @@
10997
"u_id"
11098
]
11199
},
112-
"onDelete": "CASCADE",
100+
"onDelete": "NO ACTION",
113101
"onUpdate": "NO ACTION"
114102
}
115103
]

‎style.css‎

Lines changed: 163 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/* Import Work Sans font */
2+
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
3+
14
/* Put these with your other :root vars */
25
:root {
36
/* header fills (light) */
@@ -17,8 +20,9 @@
1720
}
1821
}
1922

20-
/* Variables mapped to the other app’s palette (light) */
23+
/* Variables mapped to the other app's palette (light) */
2124
:root {
25+
--font-work-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
2226
--bg: #ffffff; /* base background */
2327
--fg: rgb(24, 33, 57); /* text-primary */
2428
--muted: rgb(73, 85, 115); /* use secondary (clearer than ultra-muted) */
@@ -37,20 +41,20 @@
3741
/* Dark mode: override only color variables */
3842
@media (prefers-color-scheme: dark) {
3943
body {
40-
background: var(--bg); /* now uses the dark --bg (#1e2640) */
44+
background: var(--bg); /* now uses the dark --bg (#1d2740) */
4145
color: var(--fg); /* ensures text switches too */
4246
}
4347
:root {
44-
--bg: #1e2640;
48+
--bg: #1d2740; /* inactive background */
4549
--fg: #ffffff;
4650
--muted: rgb(193, 199, 215);
47-
--box: #26314c; /* surface (dark) */
51+
--box: #26314c; /* active (interactable zone) background */
4852
--stroke: rgba(193, 199, 215, 0.35);
4953
--key: #10b981;
5054
--fk: #38bdf8;
5155
--danger: #ef4444;
5256
--accent: #38bdf8;
53-
--canvas: #1e2640;
57+
--canvas: #1d2740; /* inactive background */
5458
--control-bg: #1f2937;
5559
--control-border: #94a3b8;
5660
--fk: #ffffff; /* arrows & markers turn white in dark theme */
@@ -61,7 +65,7 @@
6165
html,body{height:100%;margin:0}
6266

6367
body{
64-
font-family:"Work Sans","Work Sans Fallback",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
68+
font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6569
color:var(--fg);
6670
background:var(--bg)
6771
}
@@ -71,6 +75,13 @@
7175
border-bottom:1px solid var(--stroke);
7276
background:var(--box)
7377
}
78+
79+
/* Light theme navigation bar background */
80+
@media (prefers-color-scheme: light) {
81+
header {
82+
background: rgb(238, 239, 246);
83+
}
84+
}
7485
header h1{font-size:1.1rem;margin:0}
7586
#status{font-size:.9rem;color:var(--muted)}
7687

@@ -88,54 +99,173 @@
8899
border:1px solid #e2e8f0;
89100
border-radius:8px;padding:10px;margin-bottom:10px
90101
}
102+
103+
/* Header styles for card sections */
104+
.card h2 {
105+
font-size: 1.15rem;
106+
font-weight: 500;
107+
margin: 0.8rem 0 0.5rem 0;
108+
color: var(--fg);
109+
}
110+
111+
.card h3 {
112+
font-size: 1.05rem;
113+
font-weight: 500;
114+
margin: 0.6rem 0 0.4rem 0;
115+
color: var(--fg);
116+
}
91117
.row{display:flex;align-items:center;gap:.5rem}
92-
.row-between{display:flex;align-items:center;justify-content:space-between}
93-
label{display:flex;flex-direction:column;gap:.25rem;margin:.4rem 0}
94-
label.row{flex-direction:row;align-items:center;gap:.5rem}
118+
.row-between{display:flex;align-items:center;justify-content:flex-start;gap:1rem}
119+
120+
/* FK status text styling to fix alignment */
121+
#fk-status-text {
122+
flex: 0 1 auto;
123+
max-width: none;
124+
margin: 0;
125+
padding: 0;
126+
white-space: nowrap;
127+
overflow: hidden;
128+
text-overflow: ellipsis;
129+
}
130+
label{display:flex;flex-direction:column;gap:.25rem;margin:.8rem 0 .4rem 0}
131+
label.row{flex-direction:row;align-items:center;gap:.5rem;margin:.3rem 0}
95132

96133
/* Make controls use the tokens in both modes */
97134
input, select, button {
98135
padding: .5rem;
99-
border: 0.5px solid var(--control-border);
136+
border: 1px solid var(--control-border);
100137
border-radius: 6px;
101138
background: var(--control-bg);
102139
color: var(--fg);
103140
font: inherit;
104141
}
142+
143+
/* Input field specific styles (exclude checkboxes) */
144+
input:not([type="checkbox"]) {
145+
min-height: 3.75rem;
146+
max-height: 8.737499999999999rem;
147+
padding-left: 1rem;
148+
padding-right: 2.75rem;
149+
padding-top: 0.94975rem;
150+
padding-bottom: 0.94975rem;
151+
}
152+
153+
/* Select field specific styles to match inputs */
154+
select {
155+
min-height: 3.75rem;
156+
max-height: 8.737499999999999rem;
157+
padding-left: 1rem;
158+
padding-right: 2.75rem;
159+
padding-top: 0.94975rem;
160+
padding-bottom: 0.94975rem;
161+
}
162+
163+
input:not([type="checkbox"]):hover, select:hover {
164+
border-color: #26314c;
165+
}
166+
167+
input:not([type="checkbox"]):focus-visible, select:focus-visible {
168+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
169+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
170+
box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
171+
border-color: #377dff;
172+
}
105173
input[type="checkbox"]{padding:0}
106-
button{cursor:pointer;border-radius:.5rem}
174+
button{cursor:pointer;border-radius:.5rem;margin-top:.5rem}
175+
176+
/* Fix for FK remove button positioning */
177+
.row-between button {
178+
margin-top: 0;
179+
flex-shrink: 0;
180+
}
181+
182+
/* Ensure FK status wrapper takes full width */
183+
.row-between {
184+
width: 100%;
185+
}
107186

108187
/* Dark-mode specifics */
109188
@media (prefers-color-scheme: dark) {
110-
/* 1) Sidebar “menus” (cards) should have no border in dark */
189+
/* 1) Sidebar "menus" (cards) should have no border in dark */
111190
.card { border: none; }
112191

113192
/* 2) Buttons should be dark with light-grey border */
114-
button { background: var(--control-bg); border-color: var(--control-border); }
193+
button {
194+
background: rgb(45 56 85 / 0.25);
195+
border-color: rgb(57 69 99);
196+
color: rgb(187 193 209);
197+
}
198+
199+
button:hover {
200+
background: rgb(73 85 115 / 0.25);
201+
color: rgb(215 218 230);
202+
}
115203

116-
/* Optional: make the danger button less blinding in dark */
204+
/* Update delete buttons to transparent red in dark mode */
117205
button.danger {
118-
background: rgba(239, 68, 68, 0.12);
119-
border-color: rgba(239, 68, 68, 0.45);
206+
background: rgba(239, 68, 68, 0.05);
207+
border-color: rgba(239, 68, 68, 0.6);
120208
color: var(--danger);
121209
}
122210

123-
/* 3) Inputs dark with grey default (placeholder) text */
211+
/* Save buttons keep existing dark mode styles (exclude help button) */
212+
button:not(.danger):not(.as-button) {
213+
background: rgba(250, 90, 90, 0.7);
214+
border-color: rgb(57 69 99);
215+
color: rgb(187 193 209);
216+
}
217+
218+
button:not(.danger):not(.as-button):hover {
219+
background: rgb(73 85 115 / 0.25);
220+
color: rgb(215 218 230);
221+
}
222+
223+
/* 3) Inputs and selects dark with grey default (placeholder) text */
224+
input:not([type="checkbox"]), select {
225+
background: rgb(23 32 55);
226+
color: #c1c7d7;
227+
border-color: transparent;
228+
}
229+
230+
input:not([type="checkbox"]):hover, select:hover {
231+
border-color: #26314c;
232+
}
233+
234+
input:not([type="checkbox"]):focus-visible, select:focus-visible {
235+
border-color: #377dff;
236+
}
237+
124238
input::placeholder,
125239
textarea::placeholder {
126240
color: var(--muted);
127241
opacity: 1; /* ensure consistent grey */
128242
}
129243
}
130244

131-
/* Danger button colors mapped to semantic tokens (no layout change) */
132-
button.danger{
133-
background:#fef2f2; /* error-bg */
134-
border-color:#fecaca; /* error-border */
135-
color:var(--danger)
245+
/* Danger button colors for light mode */
246+
@media (prefers-color-scheme: light) {
247+
button.danger{
248+
background:#ffe1e1; /* error-bg */
249+
border-color:#fecaca; /* error-border */
250+
color:var(--danger)
251+
}
252+
}
253+
254+
/* Save button styles for light mode (exclude help button) */
255+
button:not(.danger):not(.as-button) {
256+
background: rgba(148, 163, 184, 0.1); /* transparent grey */
257+
border-color: rgba(148, 163, 184, 0.3);
258+
color: var(--fg);
136259
}
137260

138-
hr{border:none;border-top:1px solid #e2e8f0;margin:10px 0}
261+
hr{border:none;border-top:0.5px solid rgb(238, 239, 246);margin:10px 0}
262+
263+
/* Dark mode section borders */
264+
@media (prefers-color-scheme: dark) {
265+
hr {
266+
border-top-color: #26314c;
267+
}
268+
}
139269

140270
text{font-size:12px;fill:var(--fg);dominant-baseline:middle}
141271
.table-title{font-weight:600}
@@ -173,7 +303,7 @@
173303
font-weight: 600;
174304
}
175305

176-
.table-header-bg { /* fill set in SVG */ }
306+
/* .table-header-bg - fill set in SVG */
177307

178308
/* --- help button alignment --- */
179309
.spacer { flex: 1; }
@@ -196,7 +326,15 @@
196326
border-color: #e2e8f0;
197327
}
198328
@media (prefers-color-scheme: dark) {
199-
.as-button.ghost { background: #2b3654; }
329+
.as-button.ghost {
330+
background: rgb(45 56 85 / 0.25);
331+
border-color: rgb(57 69 99);
332+
color: rgb(187 193 209);
333+
}
334+
.as-button.ghost:hover {
335+
background: rgb(73 85 115 / 0.25);
336+
color: rgb(215 218 230);
337+
}
200338
}
201339

202340
/* --- Help Modal Styles --- */

0 commit comments

Comments
 (0)