Fixed Header design and Enabled multilingual support for locale in ComplexCard

Author: ch00z00

frontend/src/components/common/molecules/Header.tsx

@@ -16,11 +16,11 @@ const HeaderWrapper = styled.header`
 const NavContainer = styled.div`
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 1rem; /* 16px */
+  padding: 0 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 4rem; /* 64px */
+  height: 4rem;
 `;
 
 const Logo = styled.h1`
@@ -49,11 +49,14 @@ const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
   return (
     <HeaderWrapper>
       <NavContainer>
-        <Logo>{t('headerTitle')}</Logo>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Button variant="primary" size="small" onClick={onAddNewComplex}>
-            {t('addNewComplexButton')}
-          </Button>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+          }}
+        >
+          <Logo>{t('headerTitle')}</Logo>
           <LanguageSwitcher>
             <Button
               size="small"
@@ -73,6 +76,11 @@ const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
             </Button>
           </LanguageSwitcher>
         </div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Button variant="primary" size="small" onClick={onAddNewComplex}>
+            + {t('addNewComplexButton')}
+          </Button>
+        </div>
       </NavContainer>
     </HeaderWrapper>
   );

frontend/src/components/complexes/organisms/ComplexCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 import type { Complex } from '../../../types/complex';
 import Button from '../../common/atoms/Button';
 
@@ -88,6 +89,7 @@ const ComplexCard: React.FC<ComplexCardProps> = ({
   onDelete,
   animationDelay,
 }) => {
+  const { t } = useTranslation();
   const formatDate = (dateString: string) => {
     const options: Intl.DateTimeFormatOptions = {
       year: 'numeric',
@@ -104,29 +106,32 @@ const ComplexCard: React.FC<ComplexCardProps> = ({
         <ContentText>{complex.content}</ContentText>
       </div>
       <div>
-        <MetaText>最終更新: {formatDate(complex.updated_at)}</MetaText>
+        <MetaText>
+          {t('lastUpdated')}
+          {formatDate(complex.updated_at)}
+        </MetaText>
         <ActionsWrapper>
           <Button
             variant="primary"
             size="small"
             onClick={() => onViewGoals(complex.id)}
             style={{ flexGrow: 1 }}
           >
-            目標を見る/設定
+            {t('viewSetGoalsButton')}
           </Button>
           <Button
             variant="secondary"
             size="small"
             onClick={() => onEdit(complex.id)}
           >
-            編集
+            {t('editButton')}
           </Button>
           <Button
             variant="danger"
             size="small"
             onClick={() => onDelete(complex.id)}
           >
-            削除
+            {t('deleteButton')}
           </Button>
         </ActionsWrapper>
       </div>

frontend/src/locales/en/translation.json

@@ -1,6 +1,6 @@
 {
   "headerTitle": "Re:Fuel",
-  "addNewComplexButton": "Register New Complex",
+  "addNewComplexButton": "Add",
   "complexesPageTitle": "Your Complexes",
   "complexesPageSubtitle": "Here you can review your registered complexes and take the first step to turn them into fuel for growth.",
   "loading": "Now Loading...",
@@ -11,5 +11,6 @@
   "viewSetGoalsButton": "View/Set Goals",
   "editButton": "Edit",
   "deleteButton": "Delete",
-  "deleteConfirmation": "Are you sure you want to delete Complex ID {{id}}?"
+  "deleteConfirmation": "Are you sure you want to delete Complex ID {{id}}?",
+  "lastUpdated": "Last updated: "
 }

frontend/src/locales/ja/translation.json

@@ -1,6 +1,6 @@
 {
   "headerTitle": "Re:Fuel",
-  "addNewComplexButton": "新しいコンプレックスを登録",
+  "addNewComplexButton": "追加",
   "complexesPageTitle": "あなたのコンプレックス",
   "complexesPageSubtitle": "ここでは、あなたが登録したコンプレックスを確認し、それらを成長の糧に変えるための第一歩を踏み出せます。",
   "loading": "読み込み中...",
@@ -11,5 +11,6 @@
   "viewSetGoalsButton": "目標を見る/設定",
   "editButton": "編集",
   "deleteButton": "削除",
-  "deleteConfirmation": "コンプレックスID {{id}} を本当に削除しますか？"
+  "deleteConfirmation": "コンプレックスID {{id}} を本当に削除しますか？",
+  "lastUpdated": "最終更新: "
 }