XをTwitterに置き換える

src/components/common/button/LinkButton.astro

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = Omit<HTMLAttributes<'a'>, 'slot'> & {
-  variant?: 'primary' | 'white' | 'twitter' | 'discord' | 'peing'
+  variant?: 'primary' | 'white' | 'black' | 'discord' | 'peing'
 }
 
 const { variant = 'primary', ...attrs } = Astro.props
@@ -16,8 +16,8 @@ const { variant = 'primary', ...attrs } = Astro.props
         variant === 'primary',
       'bg-white text-primary drop-shadow-white-light hover:drop-shadow-white-heavy':
         variant === 'white',
-      'bg-twitter text-white drop-shadow-twitter-light hover:drop-shadow-twitter-heavy':
-        variant === 'twitter',
+      'bg-black text-white drop-shadow-black-light hover:drop-shadow-black-heavy':
+        variant === 'black',
       'bg-discord text-white drop-shadow-discord-light hover:drop-shadow-discord-heavy':
         variant === 'discord',
       'bg-peing text-white drop-shadow-peing-light hover:drop-shadow-peing-heavy':

src/components/common/button/TwitterLink.astro → src/components/common/button/XLink.astro

@@ -3,9 +3,9 @@ import Icon from '@/components/common/Icon.astro'
 import LinkButton from './LinkButton.astro'
 ---
 
-<LinkButton href="https://twitter.com/OUCC" target="_blank" variant="twitter">
+<LinkButton href="https://twitter.com/OUCC" target="_blank" variant="black">
   <span class="flex items-center gap-2.5">
-    <Icon name="twitter" alt="Twitter" class="w-7" />
+    <Icon name="x" alt="X" class="w-5" />
     <span>@OUCC</span>
   </span>
 </LinkButton>

src/components/contact/ContactSection.astro

@@ -1,7 +1,7 @@
 ---
 import Section from '@/components/common/Section.astro'
 import DiscordJoinLink from '@/components/common/button/DiscordJoinLink.astro'
-import TwitterLink from '@/components/common/button/TwitterLink.astro'
+import XLink from '@/components/common/button/XLink.astro'
 import PeingLink from '@/components/common/button/PeingLink.astro'
 ---
 
@@ -17,11 +17,11 @@ import PeingLink from '@/components/common/button/PeingLink.astro'
     </div>
     <div>
       <p>
-        また、質問箱では匿名で質問を送ることができます。回答はOUCCのTwitterアカウントから発信します。
+        また、質問箱では匿名で質問を送ることができます。回答はOUCCのXアカウントから発信します。
       </p>
     </div>
     <div class="flex justify-center gap-6">
-      <TwitterLink />
+      <XLink />
       <PeingLink />
     </div>
     <div>

src/components/faq/FaqSection.astro

@@ -1,6 +1,6 @@
 ---
 import Section from '@/components/common/Section.astro'
-import TwitterLink from '@/components/common/button/TwitterLink.astro'
+import XLink from '@/components/common/button/XLink.astro'
 import PeingLink from '@/components/common/button/PeingLink.astro'
 import InlineLink from '@/components/common/InlineLink.astro'
 import FaqCard from './FaqCard.astro'
@@ -9,10 +9,10 @@ import FaqCard from './FaqCard.astro'
 <Section background="white">
   <div class="flex flex-col gap-5">
     <p>
-      質問箱から匿名で質問を送ることができます。回答はOUCCのTwitterアカウントから発信します。
+      質問箱から匿名で質問を送ることができます。回答はOUCCのXアカウントから発信します。
     </p>
     <p class="flex justify-center gap-6">
-      <TwitterLink />
+      <XLink />
       <PeingLink />
     </p>
     <ul class="flex flex-wrap gap-5">

src/components/layout/nav/Navigation.astro

@@ -19,7 +19,7 @@ import DrWani from './DrWani.astro'
       ブログ
     </NavigationListItem>
     <NavigationListItem to="https://twitter.com/OUCC" targetBlank>
-      Twitter
+      X (旧Twitter)
     </NavigationListItem>
   </ul>
   <div class="grow relative [container-type:size]">

tailwind.config.cjs

@@ -4,7 +4,6 @@ const plugin = require('tailwindcss/plugin')
 const colors = {
   primary: '#1a2872',
   secondary: '#f1f2f7',
-  twitter: '#1d9bf0',
   discord: '#5865f2',
   peing: '#5eb9ba',
 }
@@ -29,8 +28,8 @@ module.exports = {
         'primary-heavy': dropShadowHeavy(colors.primary),
         'white-light': dropShadowLight('white'),
         'white-heavy': dropShadowHeavy('white'),
-        'twitter-light': dropShadowLight(colors.twitter),
-        'twitter-heavy': dropShadowHeavy(colors.twitter),
+        'black-light': dropShadowLight('black'),
+        'black-heavy': dropShadowHeavy('black'),
         'discord-light': dropShadowLight(colors.discord),
         'discord-heavy': dropShadowHeavy(colors.discord),
         'peing-light': dropShadowLight(colors.peing),