Skip to content

Commit 9e324bb

Browse files
komagataclaude
komagata
and
claude
committed
Companies ページを Fjord direction デザインで再実装
Claude Design から handoff された Fjord direction (深いティール + Zen Maru Gothic + M PLUS Rounded 1c の和文丸ゴシック基調) を Companies ページに 適用する。 - 視覚言語は当該ページ内に閉じる: - 全スタイルを CSS Modules (Companies.module.css) でスコープ化 - フォントは next/font/google を companies/layout.tsx で CSS 変数化し Companies ページのツリー配下にのみ提供 - 既存 DB スキーマ (id/name/website/memo) はそのまま流用し、設計に存在し 実 DB にない項目 (業種・所在 / 状況 / 公開求人数 / 進行中候補数 / 最終接触日) は "—" プレースホルダーで描画 - 検索ボックス / フィルタチップは UI のみ (機能未配線) 他ページ・グローバル CSS・Tailwind 設定には影響なし。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 3d2b771 commit 9e324bb

3 files changed

Lines changed: 484 additions & 88 deletions

File tree

‎src/app/companies/layout.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
1+
import { Zen_Maru_Gothic, M_PLUS_Rounded_1c } from "next/font/google";
12
import MultiLayout from "@components/layouts/MulitLayout";
23

3-
export default function DashboardLayout({
4+
const zenMaru = Zen_Maru_Gothic({
5+
subsets: ["latin"],
6+
weight: ["400", "500", "700", "900"],
7+
display: "swap",
8+
variable: "--font-zen-maru",
9+
});
10+
11+
const mPlus = M_PLUS_Rounded_1c({
12+
subsets: ["latin"],
13+
weight: ["400", "500", "700", "800"],
14+
display: "swap",
15+
variable: "--font-mplus-rounded",
16+
});
17+
18+
export default function CompaniesLayout({
419
children,
520
}: {
621
children: React.ReactNode;
722
}) {
8-
return MultiLayout({ children });
23+
return (
24+
<div className={`${zenMaru.variable} ${mPlus.variable}`}>
25+
<MultiLayout>{children}</MultiLayout>
26+
</div>
27+
);
928
}

‎src/components/Companies.module.css‎

Lines changed: 347 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,347 @@
1+
/* ===================================================================
2+
* Companies — Fjord direction
3+
* Scoped via CSS Modules. Tokens / classes are local-only;
4+
* they do not affect any other page.
5+
* =================================================================== */
6+
7+
.wrapper {
8+
--ink: #0B2426;
9+
--ink-2: #2B4448;
10+
--ink-3: #5E7679;
11+
--ink-4: #8FA2A4;
12+
13+
--glacier: #F4F8F8;
14+
--glacier-2: #EAF1F1;
15+
--paper: #FFFFFF;
16+
17+
--fjord: #0E4A50;
18+
--fjord-2: #0A363B;
19+
--mist: #6FA8AC;
20+
--moss: #2D6E5A;
21+
--amber: #B5772E;
22+
--berry: #9B3247;
23+
24+
--line: #D7E1E2;
25+
--line-soft: #E5ECEC;
26+
--focus: #6FA8AC;
27+
28+
--r-sm: 4px;
29+
--r: 6px;
30+
--r-lg: 8px;
31+
32+
--shadow-2: 0 1px 2px rgba(11,36,38,0.05), 0 12px 32px -16px rgba(11,36,38,0.16);
33+
34+
font-family: var(--font-zen-maru), var(--font-mplus-rounded), -apple-system,
35+
"Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
36+
font-weight: 500;
37+
color: var(--ink);
38+
background: var(--glacier);
39+
line-height: 1.6;
40+
min-height: 100%;
41+
-webkit-font-smoothing: antialiased;
42+
}
43+
44+
.inner {
45+
max-width: 1280px;
46+
margin: 0 auto;
47+
padding: 48px 56px 96px;
48+
}
49+
50+
/* ---- Page header ------------------------------------------------- */
51+
.pageHead {
52+
display: flex;
53+
align-items: flex-end;
54+
justify-content: space-between;
55+
gap: 24px;
56+
margin-bottom: 40px;
57+
}
58+
.tag {
59+
font-family: var(--font-mplus-rounded), monospace;
60+
font-size: 11.5px;
61+
font-weight: 700;
62+
color: var(--fjord);
63+
letter-spacing: 0.16em;
64+
text-transform: uppercase;
65+
margin-bottom: 8px;
66+
}
67+
.pageHead h1 {
68+
margin: 0;
69+
font-size: 38px;
70+
font-weight: 900;
71+
letter-spacing: -0.02em;
72+
color: var(--ink);
73+
}
74+
.sub {
75+
margin: 8px 0 0;
76+
font-size: 14.5px;
77+
color: var(--ink-3);
78+
line-height: 1.8;
79+
max-width: 48ch;
80+
}
81+
.actions {
82+
display: flex;
83+
gap: 8px;
84+
align-items: center;
85+
flex-shrink: 0;
86+
}
87+
88+
/* ---- Buttons ----------------------------------------------------- */
89+
.btn {
90+
display: inline-flex;
91+
align-items: center;
92+
gap: 8px;
93+
height: 40px;
94+
padding: 0 18px;
95+
border-radius: var(--r);
96+
border: 1px solid transparent;
97+
font-family: inherit;
98+
font-weight: 700;
99+
font-size: 13.5px;
100+
cursor: pointer;
101+
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
102+
text-decoration: none;
103+
white-space: nowrap;
104+
}
105+
.btnPrimary {
106+
background: var(--fjord);
107+
color: #fff;
108+
box-shadow: 0 6px 14px -8px rgba(14, 74, 80, 0.6);
109+
}
110+
.btnPrimary:hover {
111+
background: var(--fjord-2);
112+
}
113+
.btnGhost {
114+
background: var(--paper);
115+
border-color: var(--line);
116+
color: var(--ink-2);
117+
}
118+
.btnGhost:hover {
119+
border-color: var(--ink-4);
120+
color: var(--ink);
121+
}
122+
123+
/* ---- Toolbar (search + filter chips) ----------------------------- */
124+
.toolbar {
125+
display: flex;
126+
align-items: center;
127+
gap: 12px;
128+
flex-wrap: wrap;
129+
margin-bottom: 20px;
130+
}
131+
.search {
132+
max-width: 360px;
133+
flex: 1;
134+
position: relative;
135+
}
136+
.search input {
137+
width: 100%;
138+
height: 38px;
139+
padding: 0 12px 0 38px;
140+
background: var(--paper);
141+
border: 1px solid var(--line);
142+
border-radius: var(--r);
143+
font-family: inherit;
144+
font-weight: 500;
145+
font-size: 14px;
146+
color: var(--ink);
147+
transition: border-color 140ms ease, box-shadow 140ms ease;
148+
}
149+
.search input::placeholder {
150+
color: var(--ink-4);
151+
}
152+
.search input:focus {
153+
outline: none;
154+
border-color: var(--mist);
155+
box-shadow: 0 0 0 4px rgba(111, 168, 172, 0.18);
156+
}
157+
.searchIcon {
158+
position: absolute;
159+
left: 12px;
160+
top: 50%;
161+
transform: translateY(-50%);
162+
color: var(--ink-4);
163+
}
164+
.filterChip {
165+
display: inline-flex;
166+
align-items: center;
167+
gap: 6px;
168+
height: 32px;
169+
padding: 0 12px;
170+
border: 1px solid var(--line);
171+
background: var(--paper);
172+
border-radius: 999px;
173+
font-size: 12.5px;
174+
color: var(--ink-2);
175+
cursor: pointer;
176+
font-family: inherit;
177+
}
178+
.filterChip:hover {
179+
border-color: var(--ink-4);
180+
color: var(--ink);
181+
}
182+
.chipCaret {
183+
color: var(--ink-4);
184+
}
185+
186+
/* ---- Panel + table ----------------------------------------------- */
187+
.panel {
188+
background: var(--paper);
189+
border: 1px solid var(--line);
190+
border-radius: var(--r-lg);
191+
overflow: hidden;
192+
}
193+
.list {
194+
width: 100%;
195+
border-collapse: separate;
196+
border-spacing: 0;
197+
font-size: 13.5px;
198+
}
199+
.list thead th {
200+
text-align: left;
201+
padding: 12px 16px;
202+
font-size: 11.5px;
203+
font-weight: 700;
204+
letter-spacing: 0.08em;
205+
text-transform: uppercase;
206+
color: var(--ink-4);
207+
background: var(--glacier-2);
208+
border-bottom: 1px solid var(--line);
209+
font-family: var(--font-mplus-rounded), monospace;
210+
}
211+
.list thead th:first-child {
212+
border-top-left-radius: var(--r-lg);
213+
padding-left: 24px;
214+
}
215+
.list thead th:last-child {
216+
border-top-right-radius: var(--r-lg);
217+
padding-right: 24px;
218+
}
219+
.list tbody td {
220+
padding: 16px;
221+
border-bottom: 1px solid var(--line-soft);
222+
color: var(--ink);
223+
vertical-align: middle;
224+
}
225+
.list tbody td:first-child {
226+
padding-left: 24px;
227+
}
228+
.list tbody td:last-child {
229+
padding-right: 24px;
230+
}
231+
.list tbody tr:hover td {
232+
background: var(--glacier);
233+
}
234+
.list tbody tr:last-child td {
235+
border-bottom: 0;
236+
}
237+
.muted {
238+
color: var(--ink-3);
239+
font-size: 12.5px;
240+
}
241+
.right {
242+
text-align: right;
243+
}
244+
.num {
245+
font-variant-numeric: tabular-nums;
246+
font-family: var(--font-mplus-rounded), monospace;
247+
font-weight: 700;
248+
}
249+
250+
/* ---- Company cell ------------------------------------------------ */
251+
.coCell {
252+
display: flex;
253+
align-items: center;
254+
gap: 12px;
255+
}
256+
.coCell .logo {
257+
width: 36px;
258+
height: 36px;
259+
border-radius: var(--r);
260+
background: linear-gradient(135deg, var(--fjord), var(--mist));
261+
color: #fff;
262+
display: grid;
263+
place-items: center;
264+
font-weight: 700;
265+
font-family: var(--font-zen-maru), sans-serif;
266+
font-size: 14px;
267+
flex-shrink: 0;
268+
}
269+
.coName {
270+
font-weight: 800;
271+
letter-spacing: -0.01em;
272+
}
273+
.coSub {
274+
font-size: 12px;
275+
color: var(--ink-4);
276+
margin-top: 1px;
277+
}
278+
279+
/* ---- Status badge ------------------------------------------------ */
280+
.status {
281+
display: inline-flex;
282+
align-items: center;
283+
gap: 6px;
284+
padding: 3px 10px;
285+
border-radius: 999px;
286+
font-size: 11.5px;
287+
font-weight: 700;
288+
letter-spacing: 0.02em;
289+
font-family: var(--font-zen-maru), sans-serif;
290+
}
291+
.statusDot {
292+
width: 6px;
293+
height: 6px;
294+
border-radius: 50%;
295+
}
296+
.statusOpen {
297+
background: rgba(45, 110, 90, 0.1);
298+
color: var(--moss);
299+
}
300+
.statusOpen .statusDot {
301+
background: var(--moss);
302+
}
303+
.statusPaused {
304+
background: rgba(181, 119, 46, 0.12);
305+
color: var(--amber);
306+
}
307+
.statusPaused .statusDot {
308+
background: var(--amber);
309+
}
310+
.statusDraft {
311+
background: var(--glacier-2);
312+
color: var(--ink-3);
313+
}
314+
.statusDraft .statusDot {
315+
background: var(--ink-4);
316+
}
317+
318+
/* ---- Row icon button -------------------------------------------- */
319+
.rowActions {
320+
display: flex;
321+
gap: 6px;
322+
justify-content: flex-end;
323+
}
324+
.iconBtn {
325+
width: 30px;
326+
height: 30px;
327+
display: grid;
328+
place-items: center;
329+
background: transparent;
330+
border: 1px solid transparent;
331+
border-radius: var(--r);
332+
cursor: pointer;
333+
color: var(--ink-2);
334+
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
335+
}
336+
.iconBtn:hover {
337+
background: var(--paper);
338+
border-color: var(--line);
339+
color: var(--ink);
340+
}
341+
342+
/* ---- Focus ring -------------------------------------------------- */
343+
.wrapper :where(a, button, input):focus-visible {
344+
outline: 2px solid var(--focus);
345+
outline-offset: 2px;
346+
border-radius: var(--r-sm);
347+
}

0 commit comments

Comments
 (0)