From 39a92a88bf463c345f2300724380355bd2be2b42 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Sun, 2 Jan 2022 15:00:31 +0900
Subject: [PATCH] Style top section style of battlesuit show page and weapon
 show page

---
 .../honkai3rd/battlesuits/[battlesuitId].tsx  | 39 +++++++++----------
 src/pages/honkai3rd/weapons/[weaponId].tsx    | 14 +++++--
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
index 64ad967d..66bae4ca 100644
--- a/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
+++ b/src/pages/honkai3rd/battlesuits/[battlesuitId].tsx
@@ -41,32 +41,31 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
 
         <Heading as='h1'>{battlesuit.name}</Heading>
 
+        <Box mb={3}>
+          <Box
+            sx={{
+              position: 'relative',
+              overflow: 'hidden',
+              width: '100%',
+              maxWidth: '600px',
+            }}
+          >
+            <Image
+              alt={battlesuit.name}
+              src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
+              width={600}
+              height={600}
+              layout='responsive'
+            />
+          </Box>
+        </Box>
+
         <Card
           sx={{
             overflow: 'hidden',
           }}
           mb={3}
         >
-          <Box sx={{ borderBottom: 'default' }}>
-            <Box
-              sx={{
-                margin: '0 auto',
-                position: 'relative',
-                overflow: 'hidden',
-                width: '100%',
-                maxWidth: '600px',
-              }}
-            >
-              <Image
-                alt={battlesuit.name}
-                src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
-                width={600}
-                height={600}
-                layout='responsive'
-              />
-            </Box>
-          </Box>
-
           <Box p={2} sx={{ borderBottom: 'default' }}>
             <PageLink
               href={{
diff --git a/src/pages/honkai3rd/weapons/[weaponId].tsx b/src/pages/honkai3rd/weapons/[weaponId].tsx
index 1e298d79..fbdd937c 100644
--- a/src/pages/honkai3rd/weapons/[weaponId].tsx
+++ b/src/pages/honkai3rd/weapons/[weaponId].tsx
@@ -5,6 +5,7 @@ import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
 import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import { capitalize } from '../../../lib/string'
 import {
   getWeaponById,
   listWeapons,
@@ -41,12 +42,17 @@ const WeaponShowPage = ({ weapon }: WeaponShowPageProps) => {
           />
         </Box>
 
-        <Box mb={3}>
-          <Box>{'⭐'.repeat(weapon.rarity)}</Box>
-          <Box>
+        <Card mb={3}>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            {capitalize(weapon.category)}
+          </Box>
+          <Box p={2} sx={{ borderBottom: 'default' }}>
+            {'⭐'.repeat(weapon.rarity)}
+          </Box>
+          <Box p={2}>
             ATK : {weapon.atk} / CRT : {weapon.crt}
           </Box>
-        </Box>
+        </Card>
 
         <Box>
           {weapon.skills.map((skill) => {