Redesign the entire fucking thing with PicoCSS

SlopCrew · Nov 27, 2023 · cb99b78 · cb99b78
1 parent bf50afe
commit cb99b78
Show file tree

Hide file tree

Showing 18 changed files with 615 additions and 191 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env.local
+.env.production
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   </head>
 
   <body>
-    <div id="root"></div>
+    <main class="container" id="root"></main>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@picocss/pico": "^1.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0"
+    "react-feather": "^2.0.10",
+    "react-router-dom": "^6.18.0",
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,39 +1,24 @@
-import "./App.css";
-
-function genState() {
-  const alphabet =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let state = "";
-  for (let i = 0; i < 32; i++) {
-    state += alphabet[Math.floor(Math.random() * alphabet.length)];
-  }
-  return state;
-}
-export default function App() {
-  const state = genState();
-  localStorage.setItem("state", state);
-
-  const redirectUri = new URL("https://discord.com/api/oauth2/authorize");
-  const query = new URLSearchParams({
-    client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
-    redirect_uri: import.meta.env.VITE_DISCORD_REDIRECT_URI,
-    response_type: "code",
-    scope: "identify",
-    state
-  });
-  redirectUri.search = query.toString();
+import { Link, Outlet } from "react-router-dom";
+import CurrentAccount from "./components/CurrentAccount";
 
+export default function Root() {
   return (
     <>
-      <h1>SlopNet</h1>
-      <p>
-        This website will let you connect your Discord account to Slop Crew.
-        While this is a currently unused feature, it will be used in the future.
-      </p>
-      <p>Click the button below to sign in:</p>
-      <a href={redirectUri.toString()}>
-        <button>Sign in with Discord</button>
-      </a>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/" className="contrast">
+              <strong>SlopNet</strong>
+            </Link>
+          </li>
+        </ul>
+
+        <ul>
+          <CurrentAccount />
+        </ul>
+      </nav>
+
+      <Outlet />
     </>
   );
 }