diff --git a/web/app/chat/page.tsx b/web/app/chat/page.tsx index b6ced666..66a344ed 100644 --- a/web/app/chat/page.tsx +++ b/web/app/chat/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { Typography } from "@mui/material"; import { useSearchParams } from "next/navigation"; import { Suspense } from "react"; import { useRoomsOverview } from "~/api/chat/hooks"; @@ -31,7 +30,7 @@ function ChatListContent() { ) : state.current === "loading" ? ( ) : state.current === "error" ? ( - Error: {state.error.message} +

Error: {state.error.message}

) : ( ); diff --git a/web/app/home/layout.tsx b/web/app/home/layout.tsx index 5a9eb8f3..9dca6bd3 100644 --- a/web/app/home/layout.tsx +++ b/web/app/home/layout.tsx @@ -1,4 +1,3 @@ -import { Box } from "@mui/material"; import BottomBar from "~/components/BottomBar"; import Header from "~/components/Header"; @@ -10,21 +9,9 @@ export default function HomePageLayout({ return ( <>
- +
{children} - +
); diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx index f4e73469..327ebae2 100644 --- a/web/app/login/page.tsx +++ b/web/app/login/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { Box, Button, Link, Typography } from "@mui/material"; import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; import { useRouter } from "next/navigation"; import { useSnackbar } from "notistack"; @@ -125,34 +124,21 @@ export default function Login() { return (
- - +
+
- - - +
+
+

CourseMateを使って
同じ授業の人と
友達になろう - - +

+
- +

- 初めての方はこちら - - - + +
+
); } diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx index 4bb9bce5..bc96ff21 100644 --- a/web/app/signup/page.tsx +++ b/web/app/signup/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { Box } from "@mui/material"; import { useSnackbar } from "notistack"; import { useState } from "react"; @@ -78,19 +77,10 @@ function Registration() { export default function RegistrationPage() { return ( - +
- +
); } diff --git a/web/app/tutorial/page.tsx b/web/app/tutorial/page.tsx index bf0c6491..7982323d 100644 --- a/web/app/tutorial/page.tsx +++ b/web/app/tutorial/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { Box, Typography } from "@mui/material"; import { Navigation, Pagination } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; @@ -42,68 +41,36 @@ const tutorialSteps = [ export default function Tutorial() { return ( - +
- +
{tutorialSteps.map((step) => ( - - - {step.label} - +
+

{step.label}

{step.label} - +
))} - +
ホーム画面へ - - - +
+
+
); } diff --git a/web/components/Header.tsx b/web/components/Header.tsx index 4a2c3bf1..f8c39270 100644 --- a/web/components/Header.tsx +++ b/web/components/Header.tsx @@ -1,6 +1,5 @@ -import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; -import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material"; import Link from "next/link"; +import { MdInfoOutline } from "react-icons/md"; import { CourseMateIcon } from "./common/CourseMateIcon"; type Props = { @@ -10,32 +9,20 @@ type Props = { export default function Header(props: Props) { const { title } = props; return ( - <> - - - - - - - - - {title} - - - - - - - +
+
+ + + + +

+ {title} +

+ + + + +
+
); } diff --git a/web/components/ImageCropper.tsx b/web/components/ImageCropper.tsx index c3b6f0da..24be6a06 100644 --- a/web/components/ImageCropper.tsx +++ b/web/components/ImageCropper.tsx @@ -1,4 +1,3 @@ -import { Slider } from "@mui/material"; import { useState } from "react"; import Cropper from "react-easy-crop"; @@ -11,6 +10,10 @@ export function ImageCropper({ sameOriginURL: url, onImageChange }: Props) { const [crop, setCrop] = useState({ x: 0, y: 0 }); const [zoom, setZoom] = useState(1); + const handleSliderChange = (event: React.ChangeEvent) => { + setZoom(Number(event.target.value)); + }; + return ( <>
- { - setZoom(Number(newVal) || 1); - }} - /> +
+ + {zoom.toFixed(2)} +
); } diff --git a/web/components/chat/MessageInput.tsx b/web/components/chat/MessageInput.tsx index da8e7fe0..9e359ccf 100644 --- a/web/components/chat/MessageInput.tsx +++ b/web/components/chat/MessageInput.tsx @@ -1,6 +1,5 @@ -import SendIcon from "@mui/icons-material/Send"; -import { Box, IconButton, Stack, TextField, Typography } from "@mui/material"; import { useEffect, useState } from "react"; +import { MdSend } from "react-icons/md"; import type { DMOverview, SendMessage, UserID } from "~/common/types"; import { parseContent } from "~/common/zod/methods"; @@ -58,34 +57,30 @@ export function MessageInput({ send, room }: Props) { } return ( - +
- - +