Revert "🎨 styled-components を Functional Components の外へ"

This reverts commit a95e4b3.
SystemEngineeringTeam · Sep 3, 2024 · 32831fa · 32831fa
1 parent f07cc4f
commit 32831fa
Show file tree

Hide file tree

Showing 9 changed files with 438 additions and 441 deletions.
diff --git 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
@@ -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
@@ -5,21 +5,21 @@ 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,
 }: {
   unlockedAchievement: UnlockedAchievement;
 }): 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
@@ -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
@@ -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
@@ -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() }}