Merge pull request #30 from kc3hack/fix-frontend

Done

Author: toaru005

Backend/Workspace/Server.js

@@ -48,4 +48,4 @@ app.get(/.*/, (req, res) => {
     res.sendFile(path.join(__dirname, '..', 'Frontend', 'dist', 'index.html'));
 });
 
-app.listen(PORT, '0.0.0.0', () => { console.log(`Server running at https://localhost:${PORT}`)} );
+app.listen(PORT, '0.0.0.0', () => { console.log(`Server running at http://localhost:${PORT}`)} );

Frontend/src/Pages/Create/Create.css

@@ -10,6 +10,7 @@ body,
 #root {
     height: 100%;
     width: 100%;
+    overflow-x: hidden;
 }
 
 h1{
@@ -28,13 +29,15 @@ h2 {
 form {
     /*大きさ設定*/
     height: 100%;
+    overflow-x: hidden;
     width: 100%;
 }
 
 .CreateBackground {
     /*大きさ設定*/
     height: 100%;
     width: 100%;
+    overflow-x: hidden;
 
     /*背景設定*/
     background-color: #F3F4F8;
@@ -108,7 +111,7 @@ form {
     /*大きさ設定*/
     height: 90%;
     width: 100%;
-    overflow-y: auto;
+    overflow-x: hidden;
 
     /*位置設定*/
     display: flex;
@@ -117,24 +120,27 @@ form {
     align-items: center;
 
     /*余白設定*/
-    padding: 2%;
+    padding: 20px;
     gap: 2%;
 }
 
 .CreateRegister {
     /*大きさ設定*/
-    height: 85%;
-    width: 90%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 95%;
+    overflow-y: auto;
 
     /*位置設定*/
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
 
-    /*余白設定*/
-    padding-bottom: 5%;
+    /*余白設定*/ 
     gap: 5%;
+    padding-bottom: 10px;
+    padding-top: 10px;
 
     /*背景設定*/
     background-color: white;
@@ -144,23 +150,25 @@ form {
 
 .CreateInput {
     /*大きさ設定*/
-    width: 80%;
-    height: 40%;
+    width: 100%;
+    height: auto;
 
     /*位置設定*/
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: center; 
     align-items: center;
+    flex-wrap: wrap;
 
     /*余白設定*/
-    gap: 5%;
+    gap: 20px;
+    padding-bottom: 10px;
 }
 
 .CreateOneset {
     /*大きさ設定*/
-    width: 50%;
-    height: 100%;
+    width: 40%;
+    min-width: 250px;
 
     /*位置設定*/
     display: flex;
@@ -172,21 +180,29 @@ form {
     /*文字設定*/
     font-size: 30px;
     font-weight: bold;
+    color: #242B3C !important;
+
+    /*余白設定*/
+    padding-bottom: 5px;
 }
 
+
+
 .CreateImage {
     /*大きさ設定*/
     height: 100%;
+    max-width: 25%;
     object-fit: contain;
 }
 
 .CreateOneset input {
     /*大きさ設定*/
     width: 100%;
-    max-height: 100px;
+    min-height: 75px;
 
     /*文字設定*/
     font-size: 40px;
+    color: #242B3C !important;
 }
 
 .CreateFile{
@@ -215,18 +231,27 @@ form {
 
     /*背景設定*/
     background-color: #FBFBFD;
+
+    /*文字設定*/
+    color: #242B3C !important;
 }
 
 .CreateRegister button {
     /*大きさ設定*/
     width: 40%;
     height: 20%;
 
+    /*位置設定*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     /*文字設定*/
     font-size: 40px;
 }
 
 .CreateError {
     /*文字設定*/
     color: red;
-}
+}
+

Frontend/src/Pages/Create/Create.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import InputField from "../../Components/InputField/InputField";
 import ConfirmButton from "../../Components/ConfirmButton/ConfirmButton";
-import icon from "../../Components/Elements/icon.png";
 import image from "../../Components/Elements/image.png";
 
 function Create() {
@@ -52,8 +51,7 @@ function Create() {
             <div className="CreateBackground">
                 <div className="CreateTab">
                     <div className="CreateLeft">
-                        <img src={icon} className="CreateIcon" alt="ロゴ" />
-                        <button type="button" onClick={() => { navigate("/"); }} className="CreateButton">
+                        <button type="button" onClick={() => { navigate("/Home"); }} className="CreateButton">
                             <h1>ルーム作成</h1>
                         </button>
                     </div>
@@ -128,9 +126,9 @@ function Create() {
                         </div>
                         <ConfirmButton label="作成" onClick={() => {
                             if (!RoomName || !TokenName || !RoomIcon || !TokenIcon) {
-                                if (!RoomName || !TokenName) setTextError("必要事項を入力してください");
-                                if (!RoomIcon) setRoomIconError("画像を選択してください");
-                                if (!TokenIcon) setTokenIconError("画像を選択してください");
+                                if (!RoomName || !TokenName) setTextError("入力が必要です");
+                                if (!RoomIcon) setRoomIconError("画像が必要です");
+                                if (!TokenIcon) setTokenIconError("画像が必要です");
                                 return;
                             } else {
                                 HandleCreate();

Frontend/src/Pages/Home/Home.css

@@ -101,6 +101,7 @@ h2 {
     height: 100%;
     width: 100%;
     overflow-y: auto;
+    overflow-x: hidden;
 
     /*位置設定*/
     display: flex;
@@ -114,7 +115,7 @@ h2 {
 
 .HomeJoin {
     /*大きさ設定*/
-    min-height: 10%;
+    min-height: 80px;
     min-width: 400px;
     max-width: 100%;
 
@@ -127,6 +128,7 @@ h2 {
 
     /*余白設定*/
     padding: 1%;
+    padding-right: 5px;
     gap: 2%;
 
 }
@@ -135,6 +137,9 @@ h2 {
     /*位置設定*/
     display: flex;
     flex-direction: column;
+
+    /*大きさ設定*/
+    max-width: 70%;
 }
 
 .HomeField input {
@@ -156,6 +161,8 @@ h2 {
 
     /*余白設定*/
     gap: 5%;
+    padding-left: 10px;
+    padding-right: 10px;
 
 }
 

Frontend/src/Pages/Login/Login.css

@@ -106,12 +106,14 @@ form {
     /*大きさ設定*/
     height: 85%;
     width: 80%;
+    overflow-y: auto;
 
     /*位置設定*/
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
+    
 
     /*余白設定*/
     padding-bottom: 5%;
@@ -139,6 +141,7 @@ form {
     /*大きさ設定*/
     width: 100%;
     height: 45%;
+    min-height: 180px;
 
     /*余白設定*/
     padding: 5%;

Frontend/src/Pages/Login/Login.tsx

@@ -73,7 +73,7 @@ function Login() {
                         <ConfirmButton label="送信"
                             onClick={() => {
                                 if (userId === "" || password === "") {
-                                    setError("必要事項を入力してください");
+                                    setError("入力が必要です");
                                 } else {
                                     HandleLogin();
                                 }