Homepage tailwindcss rework

leaky-ships/components/Lobby/Icon.tsx

@@ -1,10 +1,12 @@
+import { ReactNode } from "react"
+
 function Icon({
   src,
-  text,
+  children,
   onClick,
 }: {
   src: string
-  text: string
+  children: ReactNode
   onClick?: () => void
 }) {
   return (
@@ -17,7 +19,7 @@ function Icon({
         src={"/assets/" + src}
         alt={src}
       />
-      <span className="font-semibold">{text}</span>
+      <span className="font-semibold">{children}</span>
     </button>
   )
 }

leaky-ships/components/Lobby/LobbyFrame.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import Settings from "../SettingsFrame/Settings"
+import Settings from "./SettingsFrame/Settings"
 import Icon from "./Icon"
 import Player from "./Player"
 
@@ -17,15 +17,13 @@ function LobbyFrame() {
   return (
     <div className="mx-32 flex flex-col self-stretch rounded-3xl bg-gray-400">
       <div className="flex items-center justify-between border-b-2 border-slate-900">
-        <Icon src="speech_bubble.png" text="Chat" />
+        <Icon src="speech_bubble.png">Chat</Icon>
         <h1 className="font-farro text-5xl font-medium">
           Game-PIN: <span className="underline">3169</span>
         </h1>
-        <Icon
-          src="gear.png"
-          text="Settings"
-          onClick={() => setSettings(true)}
-        />
+        <Icon src="gear.png" onClick={() => setSettings(true)}>
+          Settings
+        </Icon>
       </div>
       <div className="flex items-center justify-around">
         <Player

leaky-ships/components/OptionButton.tsx

@@ -0,0 +1,27 @@
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from "@fortawesome/react-fontawesome"
+import { ReactNode } from "react"
+
+function OptionButton({
+  icon,
+  action,
+  children,
+}: {
+  icon: FontAwesomeIconProps["icon"]
+  action?: () => void
+  children: ReactNode
+}) {
+  return (
+    <button
+      className="flex w-full flex-row items-center justify-between rounded-lg border-2 border-black bg-voidDark py-4 pr-8 pl-16 text-4xl text-grayish first:mt-8 last:mt-8"
+      onClick={action}
+    >
+      <span className="mx-auto">{children}</span>
+      <FontAwesomeIcon className="ml-12 w-10 text-4xl" icon={icon} />
+    </button>
+  )
+}
+
+export default OptionButton

leaky-ships/pages/dev/index.tsx

@@ -5,43 +5,43 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
 import Logo from "../../components/Logo"
 import BurgerMenu from "../../components/BurgerMenu"
+import OptionButton from "../../components/OptionButton"
 
 export default function Home() {
-  const [heWantsToPlay, setHeWantsToPlay] = useState(false)
+  const [heWantsToPlay, setHeWantsToPlay] = useState<boolean | null>(false)
   return (
-    <div id="box">
+    <div className="h-full bg-theme">
       <BurgerMenu />
-      <Logo />
-      {!heWantsToPlay ? (
-        <>
-          <div id="videoWrapper">
-            <FontAwesomeIcon icon={faCirclePlay} />
+      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-around">
+        <Logo />
+        {!heWantsToPlay ? (
+          <>
+            <div className="transition-color flex h-full max-h-80 w-full max-w-screen-sm items-center justify-center rounded-xl border-4 border-black bg-[#2227] duration-200">
+              <FontAwesomeIcon className="text-8xl" icon={faCirclePlay} />
+            </div>
+            <button
+              className="font-farro transition-color rounded-2xl border-b-8 border-orange-400 bg-warn px-24 pt-10 pb-8 text-5xl font-bold duration-100 active:border-t-8 active:border-b-0"
+              onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
+            >
+              START
+            </button>
+          </>
+        ) : (
+          <div className="gap flex w-full flex-col items-center rounded-xl border-4 border-black bg-grayish p-12 shadow-lg">
+            <button
+              className="mt-[-1.5rem] w-40 self-start rounded-lg border-2 border-black bg-voidDark px-2 text-5xl text-grayish"
+              onClick={() => setHeWantsToPlay(false)}
+            >
+              <FontAwesomeIcon icon={faLeftLong} />
+            </button>
+            <div className="flex flex-col items-center gap-12">
+              <OptionButton icon={faPlus}>Raum erstellen</OptionButton>
+              <OptionButton icon={faUserPlus}>Raum beitreten</OptionButton>
+              <OptionButton icon={faEye}>Zuschauen</OptionButton>
+            </div>
           </div>
-          <button id="startButton" onClick={() => setHeWantsToPlay(true)}>
-            START
-          </button>
-        </>
-      ) : (
-        <div id="startBox">
-          <button id="back" onClick={() => setHeWantsToPlay(false)}>
-            <FontAwesomeIcon icon={faLeftLong} />
-          </button>
-          <div id="sameWidth">
-            <button className="optionButton">
-              <span>Raum erstellen</span>
-              <FontAwesomeIcon icon={faPlus} />
-            </button>
-            <button className="optionButton">
-              <span>Raum beitreten</span>
-              <FontAwesomeIcon icon={faUserPlus} />
-            </button>
-            <button className="optionButton">
-              <span>Zuschauen</span>
-              <FontAwesomeIcon icon={faEye} />
-            </button>
-          </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   )
 }

leaky-ships/tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
       theme: "#282c34",
       grayish: "#b1b2b5cc",
       warn: "#fabd04",
+      voidDark: "#000c",
       "shield-gray": "#616161",
       "shield-lightgray": "#989898",
     },