Merge pull request #151 from kento-yoshidu/132_Gacha

✨ #132 スタイルを微修正
kento-yoshidu · May 14, 2023 · cb54f6e · cb54f6e
2 parents e1157c1 + 9844797
commit cb54f6e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/components/gacha.tsx b/components/gacha.tsx
@@ -5,14 +5,17 @@ import Loading from "./loading"
 
 import styles from "../styles/gacha.module.css"
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCircleLeft } from "@fortawesome/free-solid-svg-icons"
+
 const Gacha = () => {
   const [form, setForm] = useState<number | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
   const handleClick = () => {
     new Promise((resolve) => {
       setIsLoading(true)
-      setForm(Math.ceil(Math.random() * 5))
+      setForm(Math.ceil(Math.random() * 6))
 
       setTimeout(() => {
         resolve("")
@@ -53,7 +56,10 @@ const Gacha = () => {
                   </Link>
                 )
                 : (
-                  <p className={styles.message}>ガチャを回してね</p>
+                  <p className={styles.message}>
+                    {/* @ts-ignore */}
+                    <FontAwesomeIcon icon={faCircleLeft} />
+                    ガチャを回してね</p>
                 )}
             </>
           )}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -54,7 +54,7 @@ const Home: NextPage = () => (
       </section>
 
       <section className={styles.section}>
-        <h2 className={styles.h2}>フォームガチャ（実装中👷‍♂️）</h2>
+        <h2 className={styles.h2}>フォームガチャ</h2>
 
         <Gacha />
 

diff --git a/styles/gacha.module.css b/styles/gacha.module.css
@@ -13,10 +13,12 @@
 }
 
 .button {
-  padding: 15px 30px;
+  padding: 12px 25px;
   border: 1px solid var(--border-color);
   border-radius: 3px;
   background-color: transparent;
+  font-size: 1.01rem;
+  font-family: inherit;
   cursor: pointer;
 }
 
@@ -59,9 +61,15 @@
   }
 }
 
+.message svg {
+  margin-right: 5px;
+  font-size: 1.05rem;
+  color: #555;
+}
+
 .link {
   padding: 8px 20px;
   border: 1px solid var(--border-color);
   color: #444;
   font-size: clamp(0.9rem, 1.35vw, 1.05rem);
-}
+}