diff --git a/view-user/src/pages/index.tsx b/view-user/src/pages/index.tsx index 3fa9307e..d7338900 100644 --- 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 = () => { + ); }; diff --git a/view-user/src/styles/Home.module.css b/view-user/src/styles/Home.module.css index f2e877f9..166dad17 100644 --- 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;