From d452809c443cc31c5c1cd228da10eac0146dcd3f Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Thu, 18 Dec 2025 12:29:49 +0100
Subject: [PATCH] new design

---
 public/cutt.svg       |  58 +++++
 src/CUTT.tsx          |  28 +++
 src/Footer.tsx        |  45 ++--
 src/Form.tsx          | 528 ++++++++++++++++++++++++++++++++++++++++++
 src/Header.tsx        |  74 +++++-
 src/Login.tsx         | 113 ++++-----
 src/Session.tsx       |   8 +-
 src/TabController.tsx |  36 ++-
 src/main.css          |  12 +
 src/main.tsx          |  13 +-
 10 files changed, 778 insertions(+), 137 deletions(-)
 create mode 100644 public/cutt.svg
 create mode 100644 src/CUTT.tsx
 create mode 100644 src/Form.tsx
 create mode 100644 src/main.css

diff --git a/public/cutt.svg b/public/cutt.svg
new file mode 100644
index 0000000..b8a5f3b
--- /dev/null
+++ b/public/cutt.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="80"
+   height="50"
+   viewBox="0 0 80 50"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="cutt.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   inkscape:export-filename="cutt.svg"
+   inkscape:export-xdpi="362.84"
+   inkscape:export-ydpi="362.84"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="12.413459"
+     inkscape:cx="38.869102"
+     inkscape:cy="55.745945"
+     inkscape:window-width="2880"
+     inkscape:window-height="1800"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1" />
+  <ellipse
+     cx="40"
+     cy="25"
+     rx="20.262579"
+     ry="20.632982"
+     style="fill:#c7d6f1;fill-opacity:1;stroke:#3366cc;stroke-width:8.73336"
+     id="ellipse1" />
+  <path
+     d="m -3.4e-4,17.669765 h 80.00068 v 14.66047 H -3.4e-4 Z"
+     style="fill:#000000;stroke-width:3.56018;paint-order:stroke fill markers"
+     id="path1" />
+  <text
+     xml:space="preserve"
+     x="39.788086"
+     y="29.819336"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14px;line-height:1;font-family:Sans;-inkscape-font-specification:'Sans Bold';text-align:center;letter-spacing:0;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#ffffff;stroke:#ffffff;stroke-width:0.055;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     id="text1"><tspan
+       x="39.788086"
+       y="29.819336"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:14px;font-family:Sans;-inkscape-font-specification:'Sans Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0.055;stroke-dasharray:none;stroke-opacity:1"
+       id="tspan1">CUTT</tspan></text>
+</svg>
diff --git a/src/CUTT.tsx b/src/CUTT.tsx
new file mode 100644
index 0000000..69fdcb1
--- /dev/null
+++ b/src/CUTT.tsx
@@ -0,0 +1,28 @@
+import "./main.css";
+import Header from "./Header";
+import Footer from "./Footer";
+import { BrowserRouter, Route, Routes } from "react-router";
+import { SessionProvider } from "./Session";
+import Rankings from "./Form";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <SessionProvider>
+              <Routes>
+                <Route index element={<Rankings />} />
+              </Routes>
+              <Footer />
+            </SessionProvider>
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+export default App;
diff --git a/src/Footer.tsx b/src/Footer.tsx
index 862b8fe..e20b120 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -6,37 +6,20 @@ export default function Footer() {
   const location = useLocation();
   const { user, teams } = useSession();
   return (
-    <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
-      {(user?.scopes.split(" ").includes("analysis") ||
-        teams?.activeTeam === 42) && (
-        <div className="navbar">
-          <Link to="/">
-            <span>Form</span>
-          </Link>
-          <span>|</span>
-          <Link to="/network">
-            <span>Sociogram</span>
-          </Link>
-          <span>|</span>
-          <Link to="/mvp">
-            <span>MVP</span>
-          </Link>
-          <span>|</span>
-          <Link to="/team">
-            <span>Team</span>
-          </Link>
-        </div>
-      )}
-      <p className="grey extra-margin">
-        something not working?
-        <br />
-        message <a href="https://t.me/x0124816">me</a>.
-        <br />
-        or fix it here:{" "}
-        <a href="https://git.0124816.xyz/julius/cutt" key="gitea">
-          <img src="gitea.svg" alt="gitea" height="16" />
-        </a>
-      </p>
+    <footer className="footer">
+      <div className="content has-text-centered">
+        <p className="grey">
+          something not working? message <a href="https://t.me/x0124816">me </a>
+          or fix it here:&nbsp;
+          <a
+            className="icon is-small"
+            href="https://git.0124816.xyz/julius/cutt"
+            key="gitea"
+          >
+            <img src="gitea.svg" alt="gitea" />
+          </a>
+        </p>
+      </div>
     </footer>
   );
 }
diff --git a/src/Form.tsx b/src/Form.tsx
new file mode 100644
index 0000000..0e55cf2
--- /dev/null
+++ b/src/Form.tsx
@@ -0,0 +1,528 @@
+import { useEffect, useRef, useState } from "react";
+import { ReactSortable, ReactSortableProps } from "react-sortablejs";
+import { apiAuth, User } from "./api";
+import { TeamState, useSession } from "./Session";
+import TabController from "./TabController";
+import { Chemistry, MVPRanking, PlayerType } from "./types";
+
+type PlayerListProps = Partial<ReactSortableProps<any>> & {
+  orderedList?: boolean;
+  gender?: boolean;
+};
+
+function PlayerList(props: PlayerListProps) {
+  const fmps = props.list?.filter((item) => item.gender === "fmp").length;
+  return (
+    <ReactSortable
+      {...props}
+      className="buttons is-centered is-clearfix"
+      direction={"vertical"}
+      animation={200}
+      swapThreshold={1}
+      handle=".handle"
+      draggable=".handle"
+    >
+      {props.list &&
+        props.list.map((item, index) => (
+          <div className="handle" key={item.id}>
+            <button
+              className={
+                "button is-primary is-light " +
+                (props.gender ? item.gender : "")
+              }
+            >
+              {props.orderedList
+                ? props.gender
+                  ? index +
+                    1 -
+                    (item.gender !== "fmp" ? fmps! : 0) +
+                    ". " +
+                    item.display_name
+                  : index + 1 + ". " + item.display_name
+                : item.display_name}
+            </button>
+          </div>
+        ))}
+    </ReactSortable>
+  );
+}
+
+function PlayerMenuList(props: PlayerListProps) {
+  const fmps = props.list?.filter((item) => item.gender === "fmp").length;
+  return (
+    <ReactSortable
+      {...props}
+      className="menu-list"
+      animation={200}
+      swapThreshold={1}
+    >
+      {props.list &&
+        props.list.map((item, index) => (
+          <p
+            key={item.id}
+            className={
+              "menu-item is-primary is-light " +
+              (props.gender ? item.gender : "")
+            }
+          >
+            {props.orderedList
+              ? props.gender
+                ? index +
+                  1 -
+                  (item.gender !== "fmp" ? fmps! : 0) +
+                  ". " +
+                  item.display_name
+                : index + 1 + ". " + item.display_name
+              : item.display_name}
+          </p>
+        ))}
+    </ReactSortable>
+  );
+}
+
+function filterSort(list: User[], ids: number[]): User[] {
+  const objectMap = new Map(list.map((obj) => [obj.id, obj]));
+  const filteredAndSortedObjects = ids
+    .map((id) => objectMap.get(id))
+    .filter((obj) => obj !== undefined);
+  return filteredAndSortedObjects;
+}
+
+interface PlayerInfoProps {
+  user: User;
+  teams: TeamState;
+  players: User[];
+}
+
+function TypeDnD({ user, teams, players }: PlayerInfoProps) {
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
+  const [handlers, setHandlers] = useState<User[]>([]);
+  const [combis, setCombis] = useState<User[]>([]);
+  const [cutters, setCutters] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    handleGet();
+  }, [players]);
+
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function handleSubmit() {
+    if (dialogRef.current) dialogRef.current.showModal();
+    setDialog("sending...");
+    let handlerlist = handlers.map(({ id }) => id);
+    let combilist = combis.map(({ id }) => id);
+    let cutterlist = cutters.map(({ id }) => id);
+    const data = {
+      user: user.id,
+      handlers: handlerlist,
+      combis: combilist,
+      cutters: cutterlist,
+      team: teams.activeTeam,
+    };
+    const response = await apiAuth("playertype", data, "PUT");
+    setDialog(response || "try sending again");
+  }
+
+  async function handleGet() {
+    setLoading(true);
+    const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
+    if (data.detail) {
+      console.log(data.detail);
+      setAvailablePlayers(players);
+      setHandlers([]);
+      setCombis([]);
+      setCutters([]);
+    } else {
+      const playertype = data as PlayerType;
+      setAvailablePlayers(
+        players.filter(
+          (player) =>
+            !playertype.handlers.includes(player.id) &&
+            !playertype.combis.includes(player.id) &&
+            !playertype.cutters.includes(player.id)
+        )
+      );
+      setHandlers(filterSort(players, playertype.handlers));
+      setCombis(filterSort(players, playertype.combis));
+      setCutters(filterSort(players, playertype.cutters));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <HeaderControl
+        onLoad={handleGet}
+        onClear={() => {
+          setAvailablePlayers(players);
+          setHandlers([]);
+          setCombis([]);
+          setCutters([]);
+        }}
+        onSubmit={handleSubmit}
+      />
+      <div className="columns container is-multiline is-mobile is-1-mobile">
+        <div className="column is-full is-flex is-justify-content-center">
+          <div className="box" style={{ maxWidth: 800 }}>
+            <p className="subtitle is-6 is-uppercase has-text-weight-light">
+              available players
+            </p>
+            <PlayerList
+              list={availablePlayers}
+              setList={setAvailablePlayers}
+              group={"type-shared"}
+              className="dragbox reservoir"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="column">
+        <div className="columns">
+          <div className="column">
+            <div className="box">
+              <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                handler
+              </p>
+              <PlayerList
+                list={handlers}
+                setList={setHandlers}
+                group={"type-shared"}
+                className="dragbox"
+              />
+            </div>
+          </div>
+          <div className="column">
+            <div className="box">
+              <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                combi
+              </p>
+              <PlayerList
+                list={combis}
+                setList={setCombis}
+                group={"type-shared"}
+                className="middle dragbox"
+              />
+            </div>
+          </div>
+          <div className="column">
+            <div className="box">
+              <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                cutter
+              </p>
+              <PlayerList
+                list={cutters}
+                setList={setCutters}
+                group={"type-shared"}
+                className="dragbox"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <dialog
+        ref={dialogRef}
+        id="PlayerTypeDialog"
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        {dialog}
+      </dialog>
+    </>
+  );
+}
+
+function MVPDnD({ user, teams, players }: PlayerInfoProps) {
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
+  const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [mixed, setMixed] = useState(false);
+
+  useEffect(() => {
+    const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
+    activeTeam && setMixed(activeTeam.mixed);
+    handleGet();
+  }, [players]);
+
+  useEffect(() => {
+    handleGet();
+    // setMixedList(rankedPlayers);
+  }, [mixed]);
+
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function handleSubmit() {
+    if (dialogRef.current) dialogRef.current.showModal();
+    setDialog("sending...");
+    let mvps = rankedPlayers.map(({ id }) => id);
+    const data = { user: user.id, mvps: mvps, team: teams.activeTeam };
+    const response = await apiAuth("mvps", data, "PUT");
+    response ? setDialog(response) : setDialog("try sending again");
+  }
+
+  const setMixedList = (newList: User[]) =>
+    mixed
+      ? setRankedPlayers(
+          newList.sort((a, b) =>
+            a.gender && b.gender ? a.gender.localeCompare(b.gender) : -1
+          )
+        )
+      : setRankedPlayers(newList);
+
+  async function handleGet() {
+    setLoading(true);
+    const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
+    if (data.detail) {
+      console.log(data.detail);
+      setAvailablePlayers(players);
+      setRankedPlayers([]);
+    } else {
+      const mvps = data as MVPRanking;
+      setMixedList(filterSort(players, mvps.mvps));
+      setAvailablePlayers(
+        players.filter((user) => !mvps.mvps.includes(user.id))
+      );
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <HeaderControl
+        onLoad={handleGet}
+        onClear={() => {
+          setAvailablePlayers(players);
+          setRankedPlayers([]);
+        }}
+        onSubmit={handleSubmit}
+      />
+      {loading ? (
+        <progress className="progress is-primary" max="100"></progress>
+      ) : (
+        <div className="columns container is-mobile is-1-mobile">
+          <div className="column">
+            <div className="box">
+              <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                available players
+              </p>
+              <PlayerList
+                list={availablePlayers}
+                setList={setAvailablePlayers}
+                group={{
+                  name: "mvp-shared",
+                }}
+                className="dragbox"
+                gender={mixed}
+              />
+            </div>
+          </div>
+          <div className="column">
+            <div className="box">
+              <p className="subtitle is-2 has-text-centered is-uppercase has-text-weight-light">
+                🏆
+              </p>
+              <div className="menu">
+                <PlayerMenuList
+                  list={rankedPlayers}
+                  setList={setMixedList}
+                  group={{
+                    name: "mvp-shared",
+                  }}
+                  className="dragbox"
+                  orderedList
+                  gender={mixed}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <dialog
+        ref={dialogRef}
+        id="MVPDialog"
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        {dialog}
+      </dialog>
+    </>
+  );
+}
+
+function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
+  var otherPlayers = players.filter((player) => player.id !== user.id);
+  const [playersLeft, setPlayersLeft] = useState<User[]>([]);
+  const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
+  const [playersRight, setPlayersRight] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    handleGet();
+  }, [players]);
+
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function handleSubmit() {
+    if (dialogRef.current) dialogRef.current.showModal();
+    setDialog("sending...");
+    let left = playersLeft.map(({ id }) => id);
+    let middle = playersMiddle.map(({ id }) => id);
+    let right = playersRight.map(({ id }) => id);
+    const data = {
+      user: user.id,
+      hate: left,
+      undecided: middle,
+      love: right,
+      team: teams.activeTeam,
+    };
+    const response = await apiAuth("chemistry", data, "PUT");
+    setDialog(response || "try sending again");
+  }
+
+  async function handleGet() {
+    setLoading(true);
+    const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
+    if (data.detail) {
+      console.log(data.detail);
+      setPlayersRight([]);
+      setPlayersMiddle(otherPlayers);
+      setPlayersLeft([]);
+    } else {
+      const chemistry = data as Chemistry;
+      setPlayersLeft(filterSort(otherPlayers, chemistry.hate));
+      setPlayersMiddle(
+        otherPlayers.filter(
+          (player) =>
+            !chemistry.hate.includes(player.id) &&
+            !chemistry.love.includes(player.id)
+        )
+      );
+      setPlayersRight(filterSort(otherPlayers, chemistry.love));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <HeaderControl
+        onLoad={handleGet}
+        onClear={() => {
+          setPlayersRight([]);
+          setPlayersMiddle(otherPlayers);
+          setPlayersLeft([]);
+        }}
+        onSubmit={handleSubmit}
+      />
+      {loading ? (
+        <progress className="progress is-primary" max="100"></progress>
+      ) : (
+        <div className="columns container is-multiline is-mobile is-1-mobile">
+          <div className="column is-full is-flex is-justify-content-center">
+            <div className="box" style={{ maxWidth: 800 }}>
+              <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                neutral
+              </p>
+              <PlayerList
+                list={playersMiddle}
+                setList={setPlayersMiddle}
+                group={"shared"}
+              />
+            </div>
+          </div>
+          <div className="column">
+            <div className="columns is-mobile">
+              <div className="column">
+                <div className="box">
+                  <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                    rather not
+                  </p>
+                  <PlayerList
+                    list={playersLeft}
+                    setList={setPlayersLeft}
+                    group={"shared"}
+                  />
+                </div>
+              </div>
+              <div className="column">
+                <div className="box">
+                  <p className="subtitle is-6 is-uppercase has-text-weight-light">
+                    yes, please ♥️
+                  </p>
+                  <PlayerList
+                    list={playersRight}
+                    setList={setPlayersRight}
+                    group={"shared"}
+                    orderedList
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      <dialog
+        ref={dialogRef}
+        id="ChemistryDialog"
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        {dialog}
+      </dialog>
+    </>
+  );
+}
+
+interface HeaderControlProps {
+  onLoad: () => void;
+  onClear: () => void;
+  onSubmit: () => void;
+}
+function HeaderControl({ onLoad, onClear, onSubmit }: HeaderControlProps) {
+  return (
+    <div className="buttons is-centered">
+      <button className="button is-small is-light" onClick={onLoad}>
+        🗃️ restore previous
+      </button>
+      <button className="button is-small is-light" onClick={onClear}>
+        🗑️start over
+      </button>
+      <button className="button is-small is-light" onClick={onSubmit}>
+        💾 submit
+      </button>
+    </div>
+  );
+}
+
+export default function Rankings() {
+  const { user, teams, players } = useSession();
+  const tabs = [
+    { id: "Chemistry", label: "🧪 Chemistry" },
+    { id: "MVP", label: "🏆 MVP" },
+    { id: "Type", label: "🃏 Type" },
+  ];
+
+  return (
+    <div className="container block">
+      <p className="notification is-primary is-light">
+        assign as many or as few players as you want and don't forget to 💾
+        <strong> submit</strong> when you're done :)
+      </p>
+      {user && teams && players ? (
+        <TabController tabs={tabs}>
+          <ChemistryDnDMobile {...{ user, teams, players }} />
+          <MVPDnD {...{ user, teams, players }} />
+          <TypeDnD {...{ user, teams, players }} />
+        </TabController>
+      ) : (
+        <progress className="progress is-primary" max="100"></progress>
+      )}
+    </div>
+  );
+}
diff --git a/src/Header.tsx b/src/Header.tsx
index 2fd8012..b514926 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,18 +1,70 @@
-import { Link, useLocation } from "react-router";
-import Avatar from "./Avatar";
+import { Link } from "react-router";
+import { useSession } from "./Session";
+import { useState } from "react";
 
 export default function Header() {
-  const location = useLocation();
+  const { user, teams, players } = useSession();
+  const [burgerActive, setBurgerActive] = useState(false);
   return (
-    <div className={location.pathname === "/network" ? "networkroute" : ""}>
-      <div className="logo">
-        <Link to="/">
-          <img alt="logo" height="66%" src="logo.svg" />
-          <h3 className="centered">cutt</h3>
+    <nav className="navbar" role="navigation" aria-label="main navigation">
+      <div className="navbar-brand">
+        <Link className="navbar-item" to="/">
+          <img
+            style={{ maxHeight: "unset" }}
+            className="image"
+            alt="cool ultimate team tool"
+            src="cutt.svg"
+          />
         </Link>
-        <span className="grey">cool ultimate team tool</span>
+
+        <a
+          role="button"
+          className={"navbar-burger" + (burgerActive ? " is-active" : "")}
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbar"
+          onClick={() => setBurgerActive(!burgerActive)}
+        >
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
       </div>
-      <Avatar />
-    </div>
+
+      <div
+        className={"navbar-menu" + (burgerActive ? " is-active" : "")}
+        id="navbar"
+      >
+        <div className="navbar-start">
+          <Link className="navbar-item" to="/network">
+            <span>Sociogram</span>
+          </Link>
+          <Link className="navbar-item" to="/mvp">
+            <span>MVP</span>
+          </Link>
+          <Link className="navbar-item" to="/team">
+            <span>Team</span>
+          </Link>
+        </div>
+        <div className="navbar-end">
+          <div className="navbar-item">
+            {user?.username}
+            <div className="buttons">
+              {user ? (
+                <button className="button is-light">Log out</button>
+              ) : (
+                <>
+                  <button className="button is-success">
+                    <strong>Sign up</strong>
+                  </button>
+                  <button className="button is-light">Log in</button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
   );
 }
diff --git a/src/Login.tsx b/src/Login.tsx
index 4a336ef..abf49e2 100644
--- a/src/Login.tsx
+++ b/src/Login.tsx
@@ -51,75 +51,54 @@ export const Login = ({ onLogin }: LoginProps) => {
   }, []);
 
   return (
-    <>
-      <Header />
-      <form onSubmit={handleSubmit}>
-        <div
-          style={{
-            position: "relative",
-            display: "flex",
-            alignItems: "end",
-          }}
+    <form onSubmit={handleSubmit}>
+      <div className="field">
+        <p className="control">
+          <input
+            className="input"
+            type="text"
+            id="username"
+            name="username"
+            placeholder="username"
+            required
+            value={username}
+            onChange={(evt) => {
+              setError("");
+              setUsername(evt.target.value);
+            }}
+          />
+        </p>
+      </div>
+      <div className="field">
+        <p className="control">
+          <input
+            className="input"
+            type={visible ? "text" : "password"}
+            id="password"
+            name="password"
+            placeholder="password"
+            minLength={8}
+            value={password}
+            required
+            onChange={(evt) => {
+              setError("");
+              setPassword(evt.target.value);
+            }}
+          />
+        </p>
+        {error && <p className="help is-danger">{error}</p>}
+      </div>
+      <div className="control">
+        <button
+          className="button"
+          type="submit"
+          value="login"
+          style={{ fontSize: "small" }}
         >
-          <div
-            style={{
-              width: "100%",
-              marginRight: "8px",
-              display: "flex",
-              justifyContent: "center",
-              flexDirection: "column",
-            }}
-          >
-            <div>
-              <input
-                type="text"
-                id="username"
-                name="username"
-                placeholder="username"
-                required
-                value={username}
-                onChange={(evt) => {
-                  setError("");
-                  setUsername(evt.target.value);
-                }}
-              />
-            </div>
-            <div>
-              <input
-                type={visible ? "text" : "password"}
-                id="password"
-                name="password"
-                placeholder="password"
-                minLength={8}
-                value={password}
-                required
-                onChange={(evt) => {
-                  setError("");
-                  setPassword(evt.target.value);
-                }}
-              />
-            </div>
-          </div>
-          <div
-            style={{
-              position: "absolute",
-              right: "-1em",
-              margin: "auto 4px",
-              background: "unset",
-              fontSize: "x-large",
-              cursor: "pointer",
-            }}
-            onClick={() => setVisible(!visible)}
-          >
-            {visible ? <Eye /> : <EyeSlash />}
-          </div>
-        </div>
-        {error && <span style={{ color: "red" }}>{error}</span>}
-        <button type="submit" value="login" style={{ fontSize: "small" }}>
           login
         </button>
-        {loading && <span className="loader" />}
-      </form>
-    </>
+      </div>
+      {loading && <span className="loader" />}
+    </form>
   );
 };
diff --git a/src/Session.tsx b/src/Session.tsx
index e6626ba..691dea8 100644
--- a/src/Session.tsx
+++ b/src/Session.tsx
@@ -105,7 +105,13 @@ export function SessionProvider(props: SessionProviderProps) {
       </>
     );
   else if (err) {
-    content = <Login onLogin={onLogin} />;
+    content = (
+      <section className="section is-medium">
+        <div className="container is-max-tablet">
+          <Login onLogin={onLogin} />
+        </div>
+      </section>
+    );
   } else
     content = (
       <sessionContext.Provider
diff --git a/src/TabController.tsx b/src/TabController.tsx
index 3be700b..4ffee68 100644
--- a/src/TabController.tsx
+++ b/src/TabController.tsx
@@ -17,29 +17,25 @@ export default function TabController({ tabs, children }: TabControllerProps) {
   };
 
   return (
-    <div>
-      <div>
-        <div className="container navbar">
+    <div className="block">
+      <div className="tabs is-boxed is-centered">
+        <ul>
           {tabs.map((tab, index) => (
-            <button
-              key={tab.id}
-              className={
-                currentIndex === index ? "tab-button active" : "tab-button"
-              }
-              onClick={() => handleTabClick(index)}
-            >
-              {tab.label}
-            </button>
+            <li className={currentIndex === index ? "is-active" : ""}>
+              <a onClick={() => handleTabClick(index)}>{tab.label}</a>
+            </li>
           ))}
-        </div>
+        </ul>
+      </div>
+      <div>
+        {children.map((child, index) => (
+          <Fragment key={index}>
+            <div style={{ display: currentIndex === index ? "block" : "none" }}>
+              {child}
+            </div>
+          </Fragment>
+        ))}
       </div>
-      {children.map((child, index) => (
-        <Fragment key={index}>
-          <div style={{ display: currentIndex === index ? "block" : "none" }}>
-            {child}
-          </div>
-        </Fragment>
-      ))}
     </div>
   );
 }
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..4dc96f0
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,12 @@
+@import "bulma/css/bulma.css";
+
+:root {
+  --bulma-primary-h: 220deg;
+  --bulma-primary-s: 60%;
+  --bulma-primary-l: 50%;
+}
+
+.overflow-y {
+  overflow-y: auto;
+  max-height: 30vh;
+}
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..a61e5fd 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,9 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./CUTT.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);