[feat] Add floating button

NUTFes · Nov 7, 2023 · 09903df · 09903df
1 parent 4ef39a7
commit 09903df
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/view-user/src/pages/index.tsx b/view-user/src/pages/index.tsx
@@ -7,6 +7,7 @@ import { Header, Modal, BingoResult, Button } from "@/components/common";
 import { useRouter } from "next/router";
 import { ja } from "./locales/ja";
 import { en } from "./locales/en";
+import { MdTranslate } from "react-icons/md";
 
 const Page: NextPage = () => {
   const { locale } = useRouter()
@@ -96,6 +97,11 @@ const Page: NextPage = () => {
         </div>
       </Header>
       <BingoResult bingoResultNumber={bingoNumbers} />
+      <Button size="null" shape="null" onClick={() => setIsOpened(true)}>
+        <div className={styles.iconButton}>
+          <MdTranslate size={35} />
+        </div>
+      </Button>
     </div>
   );
 };

diff --git a/view-user/src/styles/Home.module.css b/view-user/src/styles/Home.module.css
@@ -15,30 +15,19 @@
   flex-direction: column;
   gap: 0.5rem;
   color:#D95B7F;
-  font-size: clamp(3rem, calc(100vw / 20 ) , 5rem);
+  font-size: clamp(2.5rem, calc(100vw / 20 ) , 5rem);
 }
 
-.languageBlock p {
+.language {
+  display: flex;
+  justify-content: center;
   background-color: #07033E;
-}
-
-.btnOpen {
-  padding: 0.9em 2em;
-  border: 0.2rem solid #fff;
+  padding: 0.5rem 1.5rem;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0.2rem #333333;
-  background-color: #333333;
-  color: #fff;
-  font-weight: 600;
-  font-size: 1rem;
-  margin-right: 1rem;
-  white-space:nowrap;
 }
 
-.btnOpen:hover {
-  background-color: whitesmoke;
-  color: var(--primary);
-  transition: 0.25s;
+.languageBlock p {
+  background-color: #07033E;
 }
 
 .main {
@@ -61,6 +50,24 @@
   gap: 0.3rem;
 }
 
+.iconButton {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  width: 4.5rem;
+  height: 4.5rem;
+  color: #D95B7F;
+  border: solid 0.13rem #ffffffd5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: rgba(18, 36, 99, 1);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
 @media screen and (max-width: 900px) {
   .btnOpen {
     display: none;