Merge pull request #46 from pulsate-dev/issue-45

feat: add LINE Seed JP
pulsate-dev · Aug 17, 2024 · 9673436 · 9673436
2 parents 3d4ac2f + b9546d0
commit 9673436
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 21 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,16 +1,17 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
 import "@radix-ui/themes/styles.css";
+import "../app/styles/font.css";
 import { Theme } from "@radix-ui/themes";
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
+        date: /Date$/i
+      }
+    }
   },
   decorators: [
     (Story) => {
@@ -19,8 +20,8 @@ const preview: Preview = {
           <Story />
         </Theme>
       );
-    },
-  ],
+    }
+  ]
 };
 
 export default preview;
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,27 +1,32 @@
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration
+} from "@remix-run/react";
 import "@radix-ui/themes/styles.css";
+import "./styles/font.css";
 import { Theme } from "@radix-ui/themes";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../i18n/config";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-    <head>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <Meta />
-      <Links />
-    </head>
-    <body>
-    <I18nextProvider i18n={i18n}>
-      <Theme>
-        {children}
-      </Theme>
-    </I18nextProvider>
-    <ScrollRestoration />
-    <Scripts />
-    </body>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <I18nextProvider i18n={i18n}>
+          <Theme>{children}</Theme>
+        </I18nextProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
     </html>
   );
 }

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -0,0 +1,86 @@
+import {
+  Box,
+  Button,
+  Card,
+  Flex,
+  Link,
+  TabNav,
+  Text,
+  TextField
+} from "@radix-ui/themes";
+
+export default function LoginPage() {
+  return (
+    <Box>
+      <Flex
+        align="center"
+        justify="center"
+        m="-2"
+        width="100vw"
+        height="100vh"
+        direction="column"
+        style={{
+          background: "#0f0e3b"
+        }}
+      >
+        <Flex
+          style={{
+            background: "var(--gray-9)",
+            borderRadius: "var(--radius-3)",
+            minWidth: "30%"
+          }}
+          direction="column"
+          gap="4"
+          p="4"
+        >
+          <Text size="6" weight="bold" style={{}}>
+            ログイン
+          </Text>
+          <Box>
+            <Text size="4" style={{}}>
+              ID/メールアドレス
+            </Text>
+            <TextField.Root />
+          </Box>
+          <Box>
+            <Text size="4" style={{}}>
+              パスワード
+            </Text>
+            <TextField.Root />
+          </Box>
+          <Button style={{ margin: "auto", maxWidth: "100px" }}>
+            ログイン
+          </Button>
+          <Link href="/register" style={{ margin: "auto" }}>
+            新規登録
+          </Link>
+        </Flex>
+      </Flex>
+      <footer
+        style={{ position: "absolute", bottom: 0, color: "var(--gray-1)" }}
+      >
+        <Flex gap="4">
+          <Text style={{ color: "var(--gray-1)" }}>Pulsate v0.1.0</Text>
+          <Link
+            href="https://pulsate.dev/about"
+            underline="always"
+            style={{
+              color: "var(--gray-1)"
+            }}
+          >
+            Pulsateについて
+          </Link>
+          <Link
+            href="https://github.com/pulsate-dev"
+            underline="always"
+            style={{
+              color: "var(--gray-1)"
+            }}
+          >
+            ソースコード
+          </Link>
+        </Flex>
+      </footer>
+    </Box>
+  );
+}
diff --git a/app/styles/font.css b/app/styles/font.css
@@ -0,0 +1,32 @@
+/*!
+ * "LINE Seed JP" licensed under the SIL Open Font License
+ * https://seed.line.me/
+ */
+
+@font-face {
+  font-family: 'LINE Seed JP';
+  font-weight: 300;
+  src: url("/assets/fonts/LINESeedJP_OTF_Th.woff2") format("woff2")
+}
+
+@font-face {
+  font-family: 'LINE Seed JP';
+  font-weight: 400;
+  src: url("/assets/fonts/LINESeedJP_OTF_Rg.woff2") format("woff2")
+}
+
+@font-face {
+  font-family: 'LINE Seed JP';
+  font-weight: 500;
+  src: url("/assets/fonts/LINESeedJP_OTF_Bd.woff2") format("woff2")
+}
+
+@font-face {
+  font-family: 'LINE Seed JP';
+  font-weight: 700;
+  src: url("/assets/fonts/LINESeedJP_OTF_Eb.woff2") format("woff2")
+}
+
+.radix-themes {
+  --default-font-family: 'LINE Seed JP', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+}
diff --git a/public/assets/fonts/LINESeedJP_OTF_Bd.woff2 b/public/assets/fonts/LINESeedJP_OTF_Bd.woff2
diff --git a/public/assets/fonts/LINESeedJP_OTF_Eb.woff2 b/public/assets/fonts/LINESeedJP_OTF_Eb.woff2
diff --git a/public/assets/fonts/LINESeedJP_OTF_Rg.woff2 b/public/assets/fonts/LINESeedJP_OTF_Rg.woff2
diff --git a/public/assets/fonts/LINESeedJP_OTF_Th.woff2 b/public/assets/fonts/LINESeedJP_OTF_Th.woff2