morinoparty · Yahirrro · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/panda.config.ts b/panda.config.ts
@@ -7,7 +7,9 @@ export const textStyles = defineTextStyles({
   body: {
     description: "The body text style - used in paragraphs",
     value: {
-      fontFamily: "var(--font-poppins), var(--font-noto-sans-jp), Fluent Emoji Color",
+      fontFamily:
+        "'Satoshi-Variable', BlinkMacSystemFont, 'GenJyuuGothicLP', -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
+      fontVariationSettings: "'wght' 600",
       fontSize: {
         base: "sm",
         md: "md",
@@ -91,6 +93,23 @@ export default defineConfig({
     },
   },
 
+  globalFontface: {
+    "Satoshi-Variable": [
+      {
+        src: 'url("/assets/fonts/Satoshi-Variable.woff2") format("woff2"), url("/assets/fonts/Satoshi-Variable.woff") format("woff"), url("/assets/fonts/Satoshi-Variable..ttf") format("truetype")',
+        fontWeight: "400",
+        fontDisplay: "swap",
+        fontStyle: "normal",
+      },
+      {
+        src: 'url("/assets/fonts/Satoshi-Variable.woff2") format("woff2"), url("/assets/fonts/Satoshi-Variable.woff") format("woff"), url("/assets/fonts/Satoshi-Variable..ttf") format("truetype")',
+        fontWeight: "900",
+        fontDisplay: "swap",
+        fontStyle: "normal",
+      },
+    ],
+  },
+
   jsxFramework: "react",
   outdir: "styled-system",
 });
diff --git a/public/assets/fonts/Satoshi-Variable.eot b/public/assets/fonts/Satoshi-Variable.eot
diff --git a/public/assets/fonts/Satoshi-Variable.ttf b/public/assets/fonts/Satoshi-Variable.ttf
diff --git a/public/assets/fonts/Satoshi-Variable.woff b/public/assets/fonts/Satoshi-Variable.woff
diff --git a/public/assets/fonts/Satoshi-Variable.woff2 b/public/assets/fonts/Satoshi-Variable.woff2
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,6 +17,18 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja" suppressHydrationWarning>
+      <head>
+        <link
+          href="https://shogo82148.github.io/genjyuugothic-subsets/GenJyuuGothicL-P-Medium/GenJyuuGothicL-P-Medium.css"
+          type="text/css"
+          rel="stylesheet"
+        />
+        <link
+          href="https://shogo82148.github.io/genjyuugothic-subsets/GenJyuuGothicL-P-Bold/GenJyuuGothicL-P-Bold.css"
+          type="text/css"
+          rel="stylesheet"
+        />
+      </head>
       <body
         className={cx(
           css({

diff --git a/src/components/header/mobile-header.tsx b/src/components/header/mobile-header.tsx
@@ -7,9 +7,9 @@ export const MobileHeader = async () => {
     <div
       className={css({
         display: "flex",
-        height: "var(--sizes-header-height)",
         margin: "0 auto",
-        padding: "40px 0px",
+        pt: "calc(env(safe-area-inset-top) + 24px)",
+        pb: "24px",
         justifyContent: "space-between",
         alignItems: "center",
         flexShrink: 0,

diff --git a/src/components/header/status.tsx b/src/components/header/status.tsx
@@ -10,11 +10,7 @@ export const Status = async () => {
   const session = await auth();
 
   return (
-    <div
-      className={css({
-        height: "64px",
-      })}
-    >
+    <div className={css({})}>
       <div
         className={css({
           display: "flex",
@@ -40,13 +36,13 @@ const PlayerHead = async () => {
       <Menu.Trigger>
         <Image
           className={css({
-            width: "var(--sizes-header-height)",
-            height: "var(--sizes-header-height)",
             borderRadius: "lg",
+            width: "40px",
+            height: "40px",
           })}
           src={sessionData.user?.image ?? "https://crafthead.net/avatar/Steave" + "/128.png"}
-          width="50"
-          height="50"
+          width="40"
+          height="40"
           alt="logo"
         />
       </Menu.Trigger>

diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx
@@ -14,8 +14,8 @@ export const Logo = () => {
     >
       <Image
         className={css({
-          height: "var(--sizes-header-height)",
-          width: "var(--sizes-header-height)",
+          width: "44px",
+          height: "44px",
           fill: "red",
           aspectRatio: 1,
         })}

diff --git a/src/components/minecraft/player/player-drawer-content.tsx b/src/components/minecraft/player/player-drawer-content.tsx
@@ -43,7 +43,10 @@ const playerDrawer = sva({
   ],
   base: {
     root: {},
-    trigger: { flexShrink: 0 },
+    trigger: {
+      flexShrink: 0,
+      display: "flex",
+    },
     positioner: {},
     contentWrapper: {
       width: "100%",

diff --git a/src/components/top/join-player-info.tsx b/src/components/top/join-player-info.tsx
@@ -25,22 +25,21 @@ export const JoinPlayerInfo = async () => {
     <div
       className={css({
         display: "flex",
-        height: "128px",
-        padding: "16px",
+        px: "16px",
+        pt: "24px",
+        pb: "16px",
         flexDirection: "column",
         justifyContent: "space-between",
-        alignItems: "flex-start",
         flexShrink: 0,
-        gap: "16px",
-        border: "1px solid var(--colors-border-default)",
+        gap: "18px",
         borderRadius: "2xl",
         background: "#ffffff",
       })}
     >
       <div
         className={css({
           display: "flex",
-          alignItems: "flex-end",
+          alignItems: "center",
           justifyContent: "space-between",
           alignSelf: "stretch",
         })}
@@ -61,7 +60,28 @@ export const JoinPlayerInfo = async () => {
         <PlayerCount count={players.length} />
       </div>
 
-      <PlayerList players={players} />
+      <div
+        className={css({
+          width: "calc(100% + 32px)",
+          marginLeft: "-16px",
+          position: "relative",
+          "& > div": {
+            px: "16px",
+            _before: {
+              position: "absolute",
+              content: '""',
+              right: "0",
+              top: "0",
+              width: "16px",
+              height: "100%",
+              background: "linear-gradient(-90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%)",
+              zIndex: 1,
+            },
+          },
+        })}
+      >
+        <PlayerList players={players} />
+      </div>
     </div>
   );
 };

diff --git a/src/components/top/player-list.tsx b/src/components/top/player-list.tsx
@@ -12,7 +12,6 @@ export const PlayerList = ({ players }: { players: ServerPlayerData[] }) => {
         gap: "12px",
         flexShrink: 0,
         maxWidth: "100%",
-        minHeight: "48px",
         whiteSpace: "nowrap",
         alignItems: "center",
       })}