From 32831fa92c22d8a49cf160bfdb375c06484fabec Mon Sep 17 00:00:00 2001
From: nasubi916 <r916nis@gmail.com>
Date: Tue, 3 Sep 2024 21:01:50 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"=F0=9F=8E=A8=20styled-components=20?=
 =?UTF-8?q?=E3=82=92=20Functional=20Components=20=E3=81=AE=E5=A4=96?=
 =?UTF-8?q?=E3=81=B8"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit a95e4b3abd00f8ea9589eec5a4ead5aa23213fcd.
---
 src/components/ErrorScreen.tsx                |  38 +-
 src/components/achievements/Card.tsx          |  90 ++---
 .../achievements/RecentUnlockedCard.tsx       |  16 +-
 src/components/member/Card.tsx                |  72 ++--
 src/components/member/RankingCard.tsx         |  36 +-
 src/components/ranking/LogRecentUnlocked.tsx  |   8 +-
 src/pages/_app.tsx                            |  65 ++--
 src/pages/create/index.tsx                    | 214 ++++++-----
 src/pages/index.tsx                           | 340 +++++++++---------
 9 files changed, 438 insertions(+), 441 deletions(-)

diff --git a/src/components/ErrorScreen.tsx b/src/components/ErrorScreen.tsx
index ffef1ac..0cb08da 100644
--- a/src/components/ErrorScreen.tsx
+++ b/src/components/ErrorScreen.tsx
@@ -3,25 +3,6 @@ import { type ReactElement, useEffect } from "react";
 import styled from "styled-components";
 import { Center } from "./Center";
 
-const Error = styled(Center)`
-  position: relative;
-  gap: 10px;
-  color: #ff3e3e;
-  background-color: #ffedee;
-  > p {
-    font-size: 1.2rem;
-    font-weight: bold;
-  }
-`;
-
-const Image = styled.img`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  user-select: none;
-`;
-
 export function ErrorScreen({
   title,
   error,
@@ -34,6 +15,25 @@ export function ErrorScreen({
     console.error(error);
   }, []);
 
+  const Error = styled(Center)`
+    position: relative;
+    gap: 10px;
+    color: #ff3e3e;
+    background-color: #ffedee;
+    > p {
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+  `;
+
+  const Image = styled.img`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    user-select: none;
+  `;
+
   return (
     <Error>
       <Icon height="3rem" icon="mdi:alert-circle" />
diff --git a/src/components/achievements/Card.tsx b/src/components/achievements/Card.tsx
index 851039e..8e53259 100644
--- a/src/components/achievements/Card.tsx
+++ b/src/components/achievements/Card.tsx
@@ -4,58 +4,58 @@ import styled from "styled-components";
 import { useNavigate } from "@/router";
 import { type Achievement } from "@/types/post-data/achievements";
 
-const CardStyle = styled(Flex)`
-  transition: background-color 100ms;
-  color: #374151;
-  border-radius: 16px;
-  height: fit-content;
-  cursor: pointer;
-  transition: 200ms;
-  &:hover {
-    box-shadow:
-      inset 8px 8px 16px #b5bec9,
-      inset -8px -8px 16px #ffffff;
-  }
-`;
+export function AchievementCard({
+  achievement,
+}: {
+  achievement: Achievement;
+}): ReactElement {
+  const navigate = useNavigate();
 
-const AvatarStyle = styled(Avatar)`
-  box-shadow:
-    8px 8px 16px #b5bec9,
-    -8px -8px 16px #ffffff;
-  box-sizing: content-box;
-  border: 6px solid #e7e7e7;
-`;
+  const CardStyle = styled(Flex)`
+    transition: background-color 100ms;
+    color: #374151;
+    border-radius: 16px;
+    height: fit-content;
+    cursor: pointer;
+    transition: 200ms;
+    &:hover {
+      box-shadow:
+        inset 8px 8px 16px #b5bec9,
+        inset -8px -8px 16px #ffffff;
+    }
+  `;
 
-const Description = styled(Text)`
-  word-break: break-all;
-  width: 30vw;
-`;
+  const AvatarStyle = styled(Avatar)`
+    box-shadow:
+      8px 8px 16px #b5bec9,
+      -8px -8px 16px #ffffff;
+    box-sizing: content-box;
+    border: 6px solid #e7e7e7;
+  `;
 
-const Tags = styled(Text)`
-  font-weight: bold;
-  font-size: 1.4em;
-  color: #374151;
+  const Description = styled(Text)`
+    word-break: break-all;
+    width: 30vw;
+  `;
 
-  background-color: #e7e7e7;
+  const Tags = styled(Text)`
+    font-weight: bold;
+    font-size: 1.4em;
+    color: #374151;
 
-  padding: 0.1em 1em 0.3em;
-  margin-right: 1vw;
+    background-color: #e7e7e7;
 
-  text-align: center;
-  border-radius: 50px;
-  box-shadow:
-    8px 8px 16px #d4d9e1,
-    -8px -8px 16px #ffffff,
-    inset 4px 4px 16px #e6e9ec,
-    inset -4px -4px 16px #ffffff;
-`;
+    padding: 0.1em 1em 0.3em;
+    margin-right: 1vw;
 
-export function AchievementCard({
-  achievement,
-}: {
-  achievement: Achievement;
-}): ReactElement {
-  const navigate = useNavigate();
+    text-align: center;
+    border-radius: 50px;
+    box-shadow:
+      8px 8px 16px #d4d9e1,
+      -8px -8px 16px #ffffff,
+      inset 4px 4px 16px #e6e9ec,
+      inset -4px -4px 16px #ffffff;
+  `;
 
   return (
     <CardStyle
diff --git a/src/components/achievements/RecentUnlockedCard.tsx b/src/components/achievements/RecentUnlockedCard.tsx
index 42b54c9..fc222b0 100644
--- a/src/components/achievements/RecentUnlockedCard.tsx
+++ b/src/components/achievements/RecentUnlockedCard.tsx
@@ -5,14 +5,6 @@ import styled from "styled-components";
 import Achievements from "@/assets/achievements.json";
 import { type UnlockedAchievement } from "@/types/post-data/unlocked-achievements";
 
-const TableRow = styled(Table.Row)`
-  transition: background-color 100ms;
-  cursor: pointer;
-  &:hover {
-    background-color: #e2e8f0;
-  }
-`;
-
 export function RecentUnlockedCard({
   unlockedAchievement,
 }: {
@@ -20,6 +12,14 @@ export function RecentUnlockedCard({
 }): ReactElement {
   // const navigate = useNavigate();
 
+  const TableRow = styled(Table.Row)`
+    transition: background-color 100ms;
+    cursor: pointer;
+    &:hover {
+      background-color: #e2e8f0;
+    }
+  `;
+
   const [dayDiff, setDayDiff] = useState(0);
   const rtf1 = new Intl.RelativeTimeFormat("jp-lg", { style: "short" });
 
diff --git a/src/components/member/Card.tsx b/src/components/member/Card.tsx
index 77c1a62..dda9912 100644
--- a/src/components/member/Card.tsx
+++ b/src/components/member/Card.tsx
@@ -4,42 +4,6 @@ import styled from "styled-components";
 import { useNavigate } from "@/router";
 import { type Member } from "@/types/member";
 
-const CardStyle = styled(Flex)`
-  transition: background-color 100ms;
-  color: #374151;
-  border-radius: 16px;
-  height: fit-content;
-  cursor: pointer;
-  &:hover {
-    box-shadow:
-      inset 8px 8px 16px #b5bec9,
-      inset -8px -8px 16px #ffffff;
-    transition: 100ms;
-  }
-`;
-
-const AvatarStyle = styled(Avatar)`
-  box-shadow:
-    8px 8px 16px #b5bec9,
-    -8px -8px 16px #ffffff;
-  box-sizing: content-box;
-  border: 6px solid #e7e7e7;
-`;
-
-const NameStyle = styled(Text)`
-  font-weight: bold;
-  font-size: 2rem;
-  width: 30vw;
-`;
-
-const PointStyle = styled(Text)`
-  font-weight: bold;
-  font-size: 1.4em;
-  color: #374151;
-
-  margin-right: 1vw;
-`;
-
 export function MemberCard({
   member,
   point,
@@ -49,6 +13,42 @@ export function MemberCard({
 }): ReactElement {
   const navigate = useNavigate();
 
+  const CardStyle = styled(Flex)`
+    transition: background-color 100ms;
+    color: #374151;
+    border-radius: 16px;
+    height: fit-content;
+    cursor: pointer;
+    &:hover {
+      box-shadow:
+        inset 8px 8px 16px #b5bec9,
+        inset -8px -8px 16px #ffffff;
+      transition: 100ms;
+    }
+  `;
+
+  const AvatarStyle = styled(Avatar)`
+    box-shadow:
+      8px 8px 16px #b5bec9,
+      -8px -8px 16px #ffffff;
+    box-sizing: content-box;
+    border: 6px solid #e7e7e7;
+  `;
+
+  const NameStyle = styled(Text)`
+    font-weight: bold;
+    font-size: 2rem;
+    width: 30vw;
+  `;
+
+  const PointStyle = styled(Text)`
+    font-weight: bold;
+    font-size: 1.4em;
+    color: #374151;
+
+    margin-right: 1vw;
+  `;
+
   return (
     <CardStyle
       align="center"
diff --git a/src/components/member/RankingCard.tsx b/src/components/member/RankingCard.tsx
index 03c29e6..4466115 100644
--- a/src/components/member/RankingCard.tsx
+++ b/src/components/member/RankingCard.tsx
@@ -4,24 +4,6 @@ import styled from "styled-components";
 import { Link } from "@/router";
 import { type Member } from "@/types/member";
 
-const BoxStyle = styled(Box)`
-  border-radius: 24px;
-  border-color: #cbd5e1;
-  box-shadow:
-    12px 12px 32px #b5bec9,
-    -12px -12px 32px #ffffff;
-
-  padding: 1.2rem 0;
-  margin: 0 auto;
-  margin-bottom: 1.4rem;
-  width: 40rem;
-  background-color: #e7e7e7;
-  &:hover {
-    box-shadow: none;
-    transition: 100ms;
-  }
-`;
-
 export function RankingCard({
   member,
   point,
@@ -35,6 +17,24 @@ export function RankingCard({
 
   if (email == null) throw new Error("email is null");
 
+  const BoxStyle = styled(Box)`
+    border-radius: 24px;
+    border-color: #cbd5e1;
+    box-shadow:
+      12px 12px 32px #b5bec9,
+      -12px -12px 32px #ffffff;
+
+    padding: 1.2rem 0;
+    margin: 0 auto;
+    margin-bottom: 1.4rem;
+    width: 40rem;
+    background-color: #e7e7e7;
+    &:hover {
+      box-shadow: none;
+      transition: 100ms;
+    }
+  `;
+
   return (
     <BoxStyle>
       <Link params={{ id: email }} to="/members/:id">
diff --git a/src/components/ranking/LogRecentUnlocked.tsx b/src/components/ranking/LogRecentUnlocked.tsx
index 600652f..5bddfc5 100644
--- a/src/components/ranking/LogRecentUnlocked.tsx
+++ b/src/components/ranking/LogRecentUnlocked.tsx
@@ -18,10 +18,6 @@ const BoxStyle = styled(Box)`
   }
 `;
 
-const DateStyle = styled(Text)`
-  padding-left: 10rem;
-`;
-
 export function LogRecentUnlocked({
   unlockedAchievement,
   unlockedMember,
@@ -34,6 +30,10 @@ export function LogRecentUnlocked({
   if (unlockedAchievement === null || unlockedMember === null)
     throw new Error("unlockedAchievement or unlockedMember is null");
 
+  const DateStyle = styled(Text)`
+    padding-left: 10rem;
+  `;
+
   return (
     <Link
       params={{ id: unlockedAchievement.id.toString() }}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 81ea41e..881ab29 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,28 +12,28 @@ import "@radix-ui/themes/styles.css";
 import "@fontsource-variable/noto-sans-jp";
 import "@/styles/global.css";
 
-const Error = styled(Center)`
-  position: relative;
-  gap: 10px;
-  color: #ff3e3e;
-  background-color: #ffedee;
-  > p {
-    font-size: 1.2rem;
-    font-weight: bold;
-  }
-`;
-
-const Image = styled.img`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  user-select: none;
-`;
-
 export function Catch(): ReactElement {
   const error = useRouteError();
 
+  const Error = styled(Center)`
+    position: relative;
+    gap: 10px;
+    color: #ff3e3e;
+    background-color: #ffedee;
+    > p {
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+  `;
+
+  const Image = styled.img`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    user-select: none;
+  `;
+
   return (
     <Error>
       <Icon height="3rem" icon="mdi:alert-circle" />
@@ -44,21 +44,20 @@ export function Catch(): ReactElement {
   );
 }
 
-const Main = styled.main`
-  font-family: "Noto Sans JP Variable";
-  word-break: keep-all;
-`;
-const BodyStyle = styled.div``;
-const ThemeStyle = styled(Theme)`
-  background-color: #e7e7e7;
-  overflow: hidden;
-  ::-webkit-scrollbar {
-    /* Edge Chorome Safari Operaなど */
-    display: none;
-  }
-`;
-
 export default function Layout(): ReactElement {
+  const Main = styled.main`
+    font-family: "Noto Sans JP Variable";
+    word-break: keep-all;
+  `;
+  const BodyStyle = styled.div``;
+  const ThemeStyle = styled(Theme)`
+    background-color: #e7e7e7;
+    overflow: hidden;
+    ::-webkit-scrollbar {
+      /* Edge Chorome Safari Operaなど */
+      display: none;
+    }
+  `;
   return (
     <ThemeStyle>
       <Main>
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index ab84f71..977f1f3 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable react-refresh/only-export-components */
-
 import { Icon } from "@iconify/react";
 import {
   TextField,
@@ -15,112 +13,6 @@ import { useForm, type SubmitHandler } from "react-hook-form";
 import styled from "styled-components";
 import { type Achievement } from "@/types/post-data/achievements";
 
-const FormStyle = styled(Flex)`
-  margin-top: 4rem;
-  height: 90vh;
-  color: #242d3c;
-  justify-content: space-between;
-`;
-
-const AvatarContainer = styled.div`
-  position: relative;
-`;
-
-const AvatarStyle = styled(Avatar)`
-  box-shadow:
-    8px 8px 16px #b5bec9,
-    -8px -8px 16px #ffffff;
-  box-sizing: content-box;
-  border: 10px solid #e7e7e7;
-`;
-
-const Button1 = styled(Box)`
-  font-weight: 600;
-  font-family: sans-serif;
-  font-size: 1rem;
-
-  background-color: #e7e7e7;
-  color: #00cdc2;
-  border: 1px solid #00cdc2;
-
-  width: fit-content;
-  height: fit-content;
-
-  padding: 1.2vh 1.8vw 1.2vh 1.8vw;
-  margin-top: 4vh;
-  margin-left: 0.3vw;
-
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-
-  box-shadow:
-    6px 6px 16px #b5bec9,
-    -6px -6px 16px #ffffff;
-
-  transform-origin: 50% 50%;
-  transition: 300ms;
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 120%;
-    background-color: #00cdc2;
-
-    top: 0;
-    left: 0;
-    z-index: -1;
-    transform-origin: 100% 50%;
-    transform: scaleX(0%);
-    transition: transform 300ms;
-  }
-
-  &:hover {
-    box-shadow: none;
-    transform: scale(1.06);
-    color: #ffffff;
-    background-color: #00cdc2;
-  }
-
-  &:hover &::after {
-    transform-origin: 0% 50%;
-    transform: scaleX(100%);
-    transform: none;
-  }
-`;
-
-const PlusButton = styled(IconButton)`
-  position: absolute;
-  top: 164px;
-  left: 132px;
-  background-color: #00cdc2;
-  box-shadow: 6px 6px 16px #b5bec9;
-  transform-origin: 50% 50%;
-  transition: 200ms;
-  &:hover {
-    box-shadow: none;
-    transform: scale(1.06);
-  }
-`;
-
-const ImputStyle = styled(TextField.Root)`
-  position: relative;
-  background-color: #e7e7e7;
-  margin-top: 0.6rem;
-  box-shadow:
-    3px 3px 8px inset #b5bec9,
-    -6px -6px 16px inset #ffffff;
-  input {
-    margin-left: 0.4rem;
-    color: #737a89;
-  }
-`;
-
 export default function create(): ReactElement {
   const [selectIcon, setSelectIcon] = useState("");
 
@@ -132,6 +24,112 @@ export default function create(): ReactElement {
     console.log(data);
   };
 
+  const FormStyle = styled(Flex)`
+    margin-top: 4rem;
+    height: 90vh;
+    color: #242d3c;
+    justify-content: space-between;
+  `;
+
+  const AvatarContainer = styled.div`
+    position: relative;
+  `;
+
+  const AvatarStyle = styled(Avatar)`
+    box-shadow:
+      8px 8px 16px #b5bec9,
+      -8px -8px 16px #ffffff;
+    box-sizing: content-box;
+    border: 10px solid #e7e7e7;
+  `;
+
+  const Button1 = styled(Box)`
+    font-weight: 600;
+    font-family: sans-serif;
+    font-size: 1rem;
+
+    background-color: #e7e7e7;
+    color: #00cdc2;
+    border: 1px solid #00cdc2;
+
+    width: fit-content;
+    height: fit-content;
+
+    padding: 1.2vh 1.8vw 1.2vh 1.8vw;
+    margin-top: 4vh;
+    margin-left: 0.3vw;
+
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    box-shadow:
+      6px 6px 16px #b5bec9,
+      -6px -6px 16px #ffffff;
+
+    transform-origin: 50% 50%;
+    transition: 300ms;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 120%;
+      background-color: #00cdc2;
+
+      top: 0;
+      left: 0;
+      z-index: -1;
+      transform-origin: 100% 50%;
+      transform: scaleX(0%);
+      transition: transform 300ms;
+    }
+
+    &:hover {
+      box-shadow: none;
+      transform: scale(1.06);
+      color: #ffffff;
+      background-color: #00cdc2;
+    }
+
+    &:hover &::after {
+      transform-origin: 0% 50%;
+      transform: scaleX(100%);
+      transform: none;
+    }
+  `;
+
+  const PlusButton = styled(IconButton)`
+    position: absolute;
+    top: 164px;
+    left: 132px;
+    background-color: #00cdc2;
+    box-shadow: 6px 6px 16px #b5bec9;
+    transform-origin: 50% 50%;
+    transition: 200ms;
+    &:hover {
+      box-shadow: none;
+      transform: scale(1.06);
+    }
+  `;
+
+  const ImputStyle = styled(TextField.Root)`
+    position: relative;
+    background-color: #e7e7e7;
+    margin-top: 0.6rem;
+    box-shadow:
+      3px 3px 8px inset #b5bec9,
+      -6px -6px 16px inset #ffffff;
+    input {
+      margin-left: 0.4rem;
+      color: #737a89;
+    }
+  `;
+
   const iconUrl = [
     "https://qr.paps.jp/8o3Og",
     "https://i.imgur.com/5TaVIlf.gif",
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bb4a80b..d9fe1ef 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,184 +9,184 @@ import { getAuthorizePageUrl } from "@/lib/services/esa";
 import { $hasAuthenticated } from "@/lib/stores/auth";
 import { Link } from "@/router.ts";
 
-const Catchcopy = styled(Text)`
-  color: #242d3c;
-  letter-spacing: -0.1rem;
-  font-weight: 700;
-  font-size: 4.8rem;
-  line-height: 4.6rem;
-  font-family: sans-serif;
-  position: relative;
-  z-index: 3;
-  span {
+export default function App(): ReactElement {
+  const Catchcopy = styled(Text)`
+    color: #242d3c;
+    letter-spacing: -0.1rem;
+    font-weight: 700;
+    font-size: 4.8rem;
+    line-height: 4.6rem;
+    font-family: sans-serif;
+    position: relative;
+    z-index: 3;
+    span {
+      color: #00cdc2;
+      margin-left: 0.1rem;
+      text-shadow:
+        6px 6px 16px #b5bec9,
+        -6px -6px 16px #ffffff;
+    }
+  `;
+
+  const SubCatchcopy = styled(Text)`
+    color: #6c7482;
+    /* letter-spacing: -0.1rem; */
+    font-weight: 500;
+    font-size: 0.8rem;
+    font-family: sans-serif;
+  `;
+
+  const Detail = styled(Text)`
+    width: 28vw;
+    color: #737a89;
+
+    line-height: 1.4rem;
+    font-weight: 500;
+    font-size: 0.8rem;
+    font-family: sans-serif;
+  `;
+
+  const Button1 = styled(Link)`
+    font-weight: 600;
+    font-family: sans-serif;
+    font-size: 1rem;
+
+    background-color: #e7e7e7;
     color: #00cdc2;
-    margin-left: 0.1rem;
-    text-shadow:
+    border: 1px solid #00cdc2;
+
+    width: fit-content;
+    height: fit-content;
+
+    padding: 1.2vh 1.3vw 1.2vh 1.8vw;
+    margin-top: 4vh;
+    margin-left: 0.3vw;
+
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    box-shadow:
       6px 6px 16px #b5bec9,
       -6px -6px 16px #ffffff;
-  }
-`;
-
-const SubCatchcopy = styled(Text)`
-  color: #6c7482;
-  /* letter-spacing: -0.1rem; */
-  font-weight: 500;
-  font-size: 0.8rem;
-  font-family: sans-serif;
-`;
-
-const Detail = styled(Text)`
-  width: 28vw;
-  color: #737a89;
-
-  line-height: 1.4rem;
-  font-weight: 500;
-  font-size: 0.8rem;
-  font-family: sans-serif;
-`;
-
-const Button1 = styled(Link)`
-  font-weight: 600;
-  font-family: sans-serif;
-  font-size: 1rem;
-
-  background-color: #e7e7e7;
-  color: #00cdc2;
-  border: 1px solid #00cdc2;
-
-  width: fit-content;
-  height: fit-content;
-
-  padding: 1.2vh 1.3vw 1.2vh 1.8vw;
-  margin-top: 4vh;
-  margin-left: 0.3vw;
-
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-
-  box-shadow:
-    6px 6px 16px #b5bec9,
-    -6px -6px 16px #ffffff;
-
-  transform-origin: 50% 50%;
-  transition: 300ms;
-
-  ::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 120%;
-    background-color: #00cdc2;
 
-    top: 0;
-    left: 0;
-    z-index: -1;
-    transform-origin: 100% 50%;
-    transform: scaleX(0%);
-    transition: transform 300ms;
-  }
-
-  &:hover {
-    box-shadow: none;
-    transform: scale(1.06);
-    color: #ffffff;
-  }
-
-  &:hover ::after {
-    transform-origin: 0% 50%;
-    transform: scaleX(100%);
-    transform: none;
-  }
-`;
-
-const Button2 = styled(Button)`
-  font-weight: 600;
-  font-family: sans-serif;
-  font-size: 1rem;
-
-  background-color: #e7e7e7;
-  color: #00cdc2;
-  border: 1px solid #00cdc2;
-
-  width: fit-content;
-  height: fit-content;
-
-  padding: 1.2vh 1.3vw 1.2vh 1.8vw;
-  margin-top: 4vh;
-  margin-left: 0.3vw;
-
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-
-  box-shadow:
-    6px 6px 16px #b5bec9,
-    -6px -6px 16px #ffffff;
-
-  transform-origin: 50% 50%;
-  transition: 300ms;
-
-  ::after {
-    content: "";
+    transform-origin: 50% 50%;
+    transition: 300ms;
+
+    ::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 120%;
+      background-color: #00cdc2;
+
+      top: 0;
+      left: 0;
+      z-index: -1;
+      transform-origin: 100% 50%;
+      transform: scaleX(0%);
+      transition: transform 300ms;
+    }
+
+    &:hover {
+      box-shadow: none;
+      transform: scale(1.06);
+      color: #ffffff;
+    }
+
+    &:hover ::after {
+      transform-origin: 0% 50%;
+      transform: scaleX(100%);
+      transform: none;
+    }
+  `;
+
+  const Button2 = styled(Button)`
+    font-weight: 600;
+    font-family: sans-serif;
+    font-size: 1rem;
+
+    background-color: #e7e7e7;
+    color: #00cdc2;
+    border: 1px solid #00cdc2;
+
+    width: fit-content;
+    height: fit-content;
+
+    padding: 1.2vh 1.3vw 1.2vh 1.8vw;
+    margin-top: 4vh;
+    margin-left: 0.3vw;
+
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+
+    box-shadow:
+      6px 6px 16px #b5bec9,
+      -6px -6px 16px #ffffff;
+
+    transform-origin: 50% 50%;
+    transition: 300ms;
+
+    ::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 120%;
+      background-color: #00cdc2;
+
+      top: 0;
+      left: 0;
+      z-index: -1;
+      transform-origin: 100% 50%;
+      transform: scaleX(0%);
+      transition: transform 300ms;
+    }
+
+    &:hover {
+      box-shadow: none;
+      transform: scale(1.06);
+      color: #ffffff;
+    }
+
+    &:hover ::after {
+      transform-origin: 0% 50%;
+      transform: scaleX(100%);
+      transform: none;
+    }
+  `;
+
+  const RockStyle = styled.img`
     position: absolute;
-    width: 100%;
-    height: 120%;
-    background-color: #00cdc2;
+    width: 48rem;
+    left: 46vw;
+    top: 2vh;
+  `;
+
+  const CrossStyle = styled.img`
+    width: 28vw;
+    top: 68vh;
+    left: 24vw;
+    position: absolute;
+    z-index: -1;
+  `;
 
-    top: 0;
-    left: 0;
+  const CircleStyle = styled.img`
+    width: 30vw;
+    top: -26vh;
+    left: 34vw;
+    position: absolute;
     z-index: -1;
-    transform-origin: 100% 50%;
-    transform: scaleX(0%);
-    transition: transform 300ms;
-  }
-
-  &:hover {
-    box-shadow: none;
-    transform: scale(1.06);
-    color: #ffffff;
-  }
-
-  &:hover ::after {
-    transform-origin: 0% 50%;
-    transform: scaleX(100%);
-    transform: none;
-  }
-`;
-
-const RockStyle = styled.img`
-  position: absolute;
-  width: 48rem;
-  left: 46vw;
-  top: 2vh;
-`;
-
-const CrossStyle = styled.img`
-  width: 28vw;
-  top: 68vh;
-  left: 24vw;
-  position: absolute;
-  z-index: -1;
-`;
-
-const CircleStyle = styled.img`
-  width: 30vw;
-  top: -26vh;
-  left: 34vw;
-  position: absolute;
-  z-index: -1;
-`;
+  `;
 
-export default function App(): ReactElement {
   return (
     <Flex>
       <Flex direction="column" ml="12vw" mt="26vh">