Merge pull request #32 from a-company-jp/feature/ui-update

UIの改修

Author: pirotyyy

public/LGTM_logo.png

@@ -1,26 +1,35 @@
-import Header from "./components/Header";
 import "./App.css";
+import "./font/LINESeedJP_OTF_Rg.woff";
+import "./font/LINESeedJP_OTF_Bd.woff";
+import "./font/LINESeedJP_OTF_Th.woff";
 import CardList from "./components/CardList";
-import SendImageButton from "./components/SendImageButton";
 import { UIProvider } from "@yamada-ui/react";
-import { Pagination } from "./components/Pagination";
 import { useState } from "react";
 import useLGTMFetch from "./hooks/useLGTMFetch";
-import Banner from "./components/Banner";
+import Sidebar from "./components/Sidebar";
 
 function App() {
-  const [activePage, setActivePage] = useState(1);
   const [uploaded, setUploaded] = useState(false);
+  const [activePage, setActivePage] = useState(1);
   const { LGTMUrls } = useLGTMFetch(activePage, uploaded, setUploaded);
 
+  const styles = {
+    container: "grid grid-cols-7 h-screen w-screen",
+    content:
+      "col-span-5 flex text-center justify-center max-h-full overflow-auto",
+  };
+
   return (
     <UIProvider>
-      <div className="App">
-        <Banner />
-        <Header />
-        <SendImageButton setUploaded={setUploaded} />
-        <CardList {...LGTMUrls} />
-        <Pagination activePage={activePage} setActivePage={setActivePage} />
+      <div className={styles.container} style={{ fontFamily: "regular" }}>
+        <Sidebar
+          className="col-span-2"
+          uploaded={uploaded}
+          setUploaded={setUploaded}
+        />
+        <div className={styles.content}>
+          <CardList {...LGTMUrls} />
+        </div>
       </div>
     </UIProvider>
   );

src/App.tsx

@@ -19,7 +19,6 @@ const Card = ({ imageUrl }: CardProps) => {
 
   // TODO: refactor css
   const styles = {
-    centering: "",
     card: "relative",
     linkWrapper: "group relative",
     image:
@@ -33,9 +32,16 @@ const Card = ({ imageUrl }: CardProps) => {
   };
 
   return (
-    <div className={`${styles.centering} ${styles.card}`}>
-      <button onClick={handleCopyClick} className={`${styles.linkWrapper}`}>
-        <img alt="LGTMの画像" src={imageUrl} className={`${styles.image}`} />
+    <div className="h-64 w-64 flex flex-col rounded bg-white shadow-lg">
+      <button
+        onClick={handleCopyClick}
+        className="group relative flex h-40 flex-grow items-center justify-center p-2"
+      >
+        <img
+          alt="LGTMの画像"
+          src={imageUrl}
+          className="max-h-48 max-w-100 transition-opacity group-hover:opacity-30"
+        />
         {isCopying ? (
           <div className={styles.checkCircleWrapper}>
             <FaRegCheckCircle

src/components/Card/index.tsx

@@ -1,23 +1,25 @@
 import React from "react";
 import Card, { CardProps } from "../Card";
+import { Pagination } from "@yamada-ui/react";
 
 type CardListProps = CardProps[];
 
 function CardList(props: CardListProps) {
   const cardDataArray = Object.values(props);
 
   const styles = {
-    grid: "grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8 md:grid-cols-2 md:gap-4 sm:grid-cols-2 sm:gap-4 mt-4 mx-6 lg:mx-36",
-    gridItem: "rounded-lg",
+    container: "flex flex-col",
+    grid: "grid grid-cols-3 gap-4",
   };
 
   return (
-    <div className={`${styles.grid}`}>
-      {cardDataArray.map((card) => (
-        <div className={`${styles.gridItem}`}>
+    <div className={styles.container}>
+      <div className={`${styles.grid} my-4`}>
+        {cardDataArray.map((card) => (
           <Card {...card} />
-        </div>
-      ))}
+        ))}
+      </div>
+      <Pagination total={10} />
     </div>
   );
 }

src/components/CardList/index.tsx

@@ -1,32 +1,33 @@
-'use client';
+"use client";
 
-import React from 'react';
-import InputImage from '../InputImage';
-import { useSendImage, IMAGE_ID } from '../../hooks/useSendImage';
+import React from "react";
+import InputImage from "../InputImage";
+import { useSendImage, IMAGE_ID } from "../../hooks/useSendImage";
 
 type SendImageButtonProps = {
   setUploaded: (uploaded: boolean) => void;
-  
 };
 
-const SendImageButton = ({ setUploaded }: SendImageButtonProps): JSX.Element => {
+const SendImageButton = ({
+  setUploaded,
+}: SendImageButtonProps): JSX.Element => {
   const { fileInputRef, rest, ref, selectFile } = useSendImage(setUploaded);
 
-  const style = {
-    container: "flex justify-center md:justify-end mt-4 md:mr-36",
-    btn: 'text-white bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-800 shadow-lg shadow-gray-500/50 dark:shadow-lg dark:shadow-gray-800/80 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2',
-  };
-
   return (
-    <div className={style.container}>
-      <button onClick={selectFile} role="presentation" type="button" className={`${style.btn}`}>
-        <p className="text-4xl">
-          ➕ New LGTM
-        </p>
-        <InputImage  fileInputRef={fileInputRef} refCallback={ref} id={IMAGE_ID} {...rest} />
-      </button>
-    </div>
-
+    <button
+      onClick={selectFile}
+      className="py-2 px-8 text-[#FF8C8C] bg-white rounded-3xl shadow border border-red-400"
+    >
+      <p className="text-3xl" style={{ fontFamily: "bold" }}>
+        + New LGTM
+      </p>
+      <InputImage
+        fileInputRef={fileInputRef}
+        refCallback={ref}
+        id={IMAGE_ID}
+        {...rest}
+      />
+    </button>
   );
 };
 

src/components/Header/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import Logo from "../atoms/Logo";
+import { Divider } from "@yamada-ui/react";
+import ButtonToGitHub from "../atoms/ButtonToGitHub";
+import CopyrightPolicyButton from "../atoms/CopyrightPolicyButton";
+import SendImageButton from "../SendImageButton";
+import useLGTMFetch from "../../hooks/useLGTMFetch";
+
+interface Props {
+  className: string;
+  uploaded: boolean;
+  setUploaded: (uploaded: boolean) => void;
+}
+
+const Sidebar = ({ className, uploaded, setUploaded }: Props) => {
+  const styles = {
+    container: "flex flex-col h-full justify-between shadow-lg",
+    top: "flex flex-col items-center text-center",
+    subTitle: "text-[#D9ACAC] font-bold",
+    divider: "my-8",
+    bottom: "flex justify-center my-8",
+  };
+
+  return (
+    <div className={className}>
+      <div className={styles.container}>
+        <div className={styles.top}>
+          <Logo />
+          <p className={styles.subTitle}>
+            Let's give team members awesome LGTM easily
+          </p>
+          <Divider className={styles.divider} width="80%" />
+          <ButtonToGitHub />
+          <CopyrightPolicyButton />
+        </div>
+        <div className={styles.bottom}>
+          <SendImageButton setUploaded={setUploaded} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/SendImageButton/index.tsx

@@ -1,35 +1,14 @@
 const ButtonToGitHub = (): JSX.Element => {
   const gitHubUrl = process.env.REACT_APP_GITHUB_URL;
 
-  const styles = {
-    btn: "inline-flex items-center justify-center gap-1.5 rounded-lg px-5 py-3 text-gray-500 transition hover:text-gray-700 focus:outline-none focus:ring",
-    text: "text-sm font-medium",
-  };
-
   return (
-    <a
-      href={gitHubUrl}
-      className={styles.btn}
-      type="button"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span className={styles.text}> GitHub Page </span>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-4 w-4"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="2"
+    <a href={gitHubUrl} target="_blank" rel="noopener noreferrer">
+      <span
+        className="text-2xl mb-2 hover:transition-all hover:font-bold"
+        style={{ fontFamily: "thin" }}
       >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-        />
-      </svg>
+        GitHub Page
+      </span>
     </a>
   );
 };

src/components/Sidebar/index.tsx

@@ -1,53 +1,62 @@
 import {
-    Modal,
-    ModalHeader,
-    ModalBody,
-    ModalFooter,
-    Button,
-    useDisclosure,
-    DiscList,
-    ListItem,
-  } from "@yamada-ui/react"
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  DiscList,
+  ListItem,
+} from "@yamada-ui/react";
 
 const CopyrightPolicyButton = () => {
-
-    const styles = {
-        btn: "block rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring"
-    }
-
-    const { isOpen, onOpen, onClose } = useDisclosure()
-
-    return (
-      <>
-        <button
-          className={styles.btn}
-          type="button"
-          onClick={onOpen}
-        >
-          Policies
-        </button>
-        <Modal isOpen={isOpen} onClose={onClose} style={{ backgroundColor: 'white' }} duration={0.4}>
-          <ModalHeader>免責事項&プライバシーポリシー</ModalHeader>
-
-          <ModalBody>
-            <DiscList>
-              <ListItem>サービスを利用して生成された画像に関する一切の責任はご利用者様に負担いただくものとします。ご利用者様が生成した画像に関し、第三者が損害を被った場合、運営者はご利用者様に代わっての責任は一切負いません。</ListItem>
-                  <ListItem>本サービスを利用して生成された画像はインターネット上に公開されます。元画像の著作権や関連法規に注意してください。公序良俗に反する画像や違法な画像を作成しないでください。これらの画像、その他運営者が不適切と判断した画像は予告無しに削除することがあります。</ListItem>
-                  <ListItem>過剰な数のリクエストを送信してサービスに負荷をかける行為はおやめください。</ListItem>
-                  <ListItem>その他、悪質な利用方法が確認された場合、特定のご利用者様を予告無しにアクセス禁止にすることがあります。</ListItem>
-                  <ListItem>プライバシーポリシー変更について当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。</ListItem>
-            </DiscList>
-          </ModalBody>
-
-
-          <ModalFooter>
-            <Button variant="ghost" onClick={onClose}>
-              とじる
-            </Button>
-          </ModalFooter>
-        </Modal>
-      </>
-    )
-}
-
-export default CopyrightPolicyButton
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <button
+        className="text-2xl hover:transition-all hover:font-bold"
+        style={{ fontFamily: "thin" }}
+        onClick={onOpen}
+      >
+        Policies
+      </button>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        style={{ backgroundColor: "white" }}
+        duration={0.4}
+      >
+        <ModalHeader>免責事項&プライバシーポリシー</ModalHeader>
+
+        <ModalBody>
+          <DiscList>
+            <ListItem>
+              サービスを利用して生成された画像に関する一切の責任はご利用者様に負担いただくものとします。ご利用者様が生成した画像に関し、第三者が損害を被った場合、運営者はご利用者様に代わっての責任は一切負いません。
+            </ListItem>
+            <ListItem>
+              本サービスを利用して生成された画像はインターネット上に公開されます。元画像の著作権や関連法規に注意してください。公序良俗に反する画像や違法な画像を作成しないでください。これらの画像、その他運営者が不適切と判断した画像は予告無しに削除することがあります。
+            </ListItem>
+            <ListItem>
+              過剰な数のリクエストを送信してサービスに負荷をかける行為はおやめください。
+            </ListItem>
+            <ListItem>
+              その他、悪質な利用方法が確認された場合、特定のご利用者様を予告無しにアクセス禁止にすることがあります。
+            </ListItem>
+            <ListItem>
+              プライバシーポリシー変更について当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。
+            </ListItem>
+          </DiscList>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button variant="ghost" onClick={onClose}>
+            とじる
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+
+export default CopyrightPolicyButton;