フロントデザイン変更

jphacks · Oct 27, 2024 · 3b7e181 · 3b7e181
1 parent 8eada23
commit 3b7e181
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 18 deletions.
diff --git a/backend/public/stylesheets/style.css b/backend/public/stylesheets/style.css
@@ -1,8 +1,12 @@
 body {
   padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font:
+    14px "Lucida Grande",
+    Helvetica,
+    Arial,
+    sans-serif;
 }
 
 a {
-  color: #00B7FF;
+  color: #00b7ff;
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,10 +11,12 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.60",
     "@mui/material": "^6.1.5",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "sass": "^1.80.3",
     "socket.io-client": "^4.8.0"
   },

diff --git a/frontend/src/components/Header/Header.module.scss b/frontend/src/components/Header/Header.module.scss
@@ -1,3 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Modak&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap");
+
 .header {
   z-index: 1000;
   transition: all 0.3s ease-out;
@@ -12,6 +17,11 @@
   box-sizing: border-box;
   height: var(--header-height);
   padding: 8px 0 6px 0;
+  background: linear-gradient(
+    180deg,
+    rgb(212 225 255) 1%,
+    rgba(187, 187, 187, 0) 70.9%
+  );
   background-color: #f8f8f8;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
   opacity: 1;
@@ -20,12 +30,29 @@
 }
 
 .navigation {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   width: 100%;
-  padding: 0 !important;
+  padding: 0 30px !important;
+}
+
+.logo {
+  font-family: "Fontdiner Swanky", serif;
+  font-family: "Modak", system-ui;
+  font-family: "Michroma", sans-serif;
+  font-family: "Holtwood One SC", serif;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: bold;
+  font-weight: 400;
+  color: #1d9bf8;
+  text-shadow:
+    2px 2px 1px #ffe6d4,
+    3px 3px 0px rgb(86 49 0 / 34%);
 }
 
 .logoutButton {
   padding: 8px 0 6px 0;
+  zoom: 1.2;
 }
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -2,19 +2,21 @@
 
 import React from "react";
 import styles from "./Header.module.scss";
+import { ImExit } from "react-icons/im";
+
 export default function Header() {
   return (
     <header className={styles.header}>
       <div className={styles.navigationContainer}>
         <nav className={styles.navigation}>
-          <div className={styles.logo}>ls-chat</div>
-          <div className={styles.userNumber}>users</div>
-          <button
+          <span className={styles.logo}>What&apos;s up?</span>
+          <span className={styles.userNumber}>users</span>
+          <div
             className={styles.logoutButton}
             onClick={() => window.location.reload()}
           >
-            logout
-          </button>
+            <ImExit />
+          </div>
         </nav>
       </div>
     </header>

diff --git a/frontend/src/components/Modal/NestedModal.tsx b/frontend/src/components/Modal/NestedModal.tsx
@@ -74,7 +74,7 @@ export default function NestedModal({
             onClick={handleClose}
             disabled={name === ""}
           >
-            送信
+            接続
           </Button>
         </Box>
       </Modal>

diff --git a/frontend/src/components/SendForm/SendForm.module.scss b/frontend/src/components/SendForm/SendForm.module.scss
@@ -3,7 +3,8 @@
   min-height: 40px;
   margin: 3px auto 35px auto;
   input {
-    width: min(70vw, 400px);
-    margin-right: 5px;
+    width: min(80vw, 500px);
+    padding: 8px 8px 6px;
+    font-size: 18px;
   }
 }
diff --git a/frontend/src/components/SendForm/SendForm.tsx b/frontend/src/components/SendForm/SendForm.tsx
@@ -3,6 +3,8 @@
 import React, { useState } from "react";
 import { Socket } from "socket.io-client";
 import styles from "./SendForm.module.scss";
+import { IoIosSend } from "react-icons/io";
+import TextField from "@mui/material/TextField"; // TextFieldをインポート
 
 interface SendFormProps {
   socket: Socket;
@@ -21,18 +23,32 @@ export default function SendForm({ socket }: SendFormProps) {
 
   return (
     <div className={styles.sendForm}>
-      <input
-        type="text"
+      <TextField
         value={input}
         onChange={(e) => setInput(e.target.value)}
-        placeholder="Enter a message"
+        style={{ marginRight: "5px" }}
+        placeholder="メッセージを入力"
         onKeyPress={(e) => {
           if (e.key === "Enter") {
             sendMessage(); // Enterキーが押されたときにメッセージを送信
           }
         }}
+        fullWidth
+        variant="outlined"
+        margin="normal"
       />
-      <button onClick={sendMessage}>送信</button>
+      <div
+        onClick={sendMessage}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          zoom: 1.8,
+          marginTop: "5px",
+        }}
+      >
+        <IoIosSend />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
@@ -1,5 +1,5 @@
 :root {
-  --header-height: 6vh;
+  --header-height: 60px;
 }
 
 html {
@@ -13,7 +13,11 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
-  background: white;
+  background: linear-gradient(
+    0deg,
+    rgb(181, 239, 249) 10.5%,
+    rgb(254, 254, 254) 86.8%
+  );
 }
 
 main {