add styles to admin panel

anna-murphy · Apr 21, 2024 · ca6a37f · ca6a37f
1 parent 25b2d6d
commit ca6a37f
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 53 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,5 +5,5 @@ import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react(), tailwind()]
-});
+  integrations: [react(), tailwind()],
+});
diff --git a/src/admin-portal/components/EpisodeForm.tsx b/src/admin-portal/components/EpisodeForm.tsx
@@ -71,7 +71,10 @@ export function EpisodeForm({
 
   return (
     <>
-      <form onSubmit={doSubmit}>
+      <form
+        onSubmit={doSubmit}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput
           label="Episode Title"
           value={editedEpisodeData.title}
@@ -91,16 +94,6 @@ export function EpisodeForm({
             }));
           }}
         />
-        {/* <NumberInput
-          label="Season"
-          value={editedEpisodeData.season}
-          setValue={(season) => {
-            setEditedEpisodeData((existingData) => ({
-              ...existingData,
-              season,
-            }));
-          }}
-        /> */}
         <NumberInput
           label="Episode"
           value={editedEpisodeData.episode}
@@ -155,7 +148,12 @@ export function EpisodeForm({
             }));
           }}
         />
-        <button type="submit">{submitLabel}</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          {submitLabel}
+        </button>
       </form>
       {error !== "" ? <p>{error}</p> : undefined}
     </>

diff --git a/src/admin-portal/components/FormInputs/Base.tsx b/src/admin-portal/components/FormInputs/Base.tsx
@@ -11,8 +11,13 @@ export function Base({
   children,
 }: React.PropsWithChildren<BaseProps>): JSX.Element {
   return (
-    <div>
-      <label htmlFor={inputId}>{label}</label>
+    <div className="flex flex-col gap-0">
+      <label
+        htmlFor={inputId}
+        className="text-sm text-slate-500 dark:text-slate-400"
+      >
+        {label}
+      </label>
       {children}
     </div>
   );

diff --git a/src/admin-portal/components/FormInputs/CheckboxInput.tsx b/src/admin-portal/components/FormInputs/CheckboxInput.tsx
@@ -21,7 +21,7 @@ export function CheckboxInput({
         id={inputId}
         type="checkbox"
         checked={value}
-        onChange={(event) => {
+        onChange={() => {
           setValue(!value);
         }}
       />

diff --git a/src/admin-portal/components/FormInputs/FileInput.tsx b/src/admin-portal/components/FormInputs/FileInput.tsx
@@ -27,6 +27,7 @@ export function FileInput({
           }
         }}
         accept={accept}
+        className="w-96 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 text-sm"
       />
     </Base>
   );

diff --git a/src/admin-portal/components/FormInputs/NumberInput.tsx b/src/admin-portal/components/FormInputs/NumberInput.tsx
@@ -25,6 +25,7 @@ export function NumberInput({
           const value = Number(event.target.value);
           if (!isNaN(value)) setValue(value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950"
       />
     </Base>
   );

diff --git a/src/admin-portal/components/FormInputs/ParagraphInput.tsx b/src/admin-portal/components/FormInputs/ParagraphInput.tsx
@@ -23,7 +23,11 @@ export function ParagraphInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-2 px-2 rounded-md w-96 h-64 dark:text-slate-950 font-mono"
       />
+      <span className="mt-1 text-xs italic text-slate-500 dark:text-slate-400">
+        This field supports Markdown input!
+      </span>
     </Base>
   );
 }
diff --git a/src/admin-portal/components/FormInputs/SelectInput.tsx b/src/admin-portal/components/FormInputs/SelectInput.tsx
@@ -25,6 +25,7 @@ export function SelectInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950 bg-white"
       >
         <option disabled>~~Choose One~~</option>
         {values.map((opt) => {

diff --git a/src/admin-portal/components/FormInputs/TextInput.tsx b/src/admin-portal/components/FormInputs/TextInput.tsx
@@ -26,6 +26,7 @@ export function TextInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950"
       />
     </Base>
   );

diff --git a/src/admin-portal/index.tsx b/src/admin-portal/index.tsx
@@ -21,23 +21,28 @@ export function AdminPortal(): JSX.Element {
       ) : undefined}
       {credentials !== undefined ? (
         <>
-          <div>
-            <a
-              onClick={() => {
-                if (page !== "EPISODES") setPage("EPISODES");
-              }}
-              aria-disabled={page === "EPISODES"}
-            >
-              View Episodes
-            </a>
-            <a
-              onClick={() => {
-                if (page !== "UPLOAD") setPage("UPLOAD");
-              }}
-              aria-disabled={page === "UPLOAD"}
-            >
-              Upload
-            </a>
+          <div className="w-full flex flex-row gap-2">
+            <h1 className="text-xl flex-1">Podcast Admin</h1>
+            {page !== "EPISODES" ? (
+              <button
+                onClick={() => {
+                  setPage("EPISODES");
+                }}
+                className="rounded-md bg-sky-700 dark:bg-sky-800 hover:bg-sky-900 text-slate-100 px-4 py-1"
+              >
+                View Episodes
+              </button>
+            ) : undefined}
+            {page !== "UPLOAD" ? (
+              <button
+                onClick={() => {
+                  setPage("UPLOAD");
+                }}
+                className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+              >
+                Upload
+              </button>
+            ) : undefined}
           </div>
           {page === "EPISODES" ? (
             <EpisodeView

diff --git a/src/admin-portal/views/EditEpisode.tsx b/src/admin-portal/views/EditEpisode.tsx
@@ -39,7 +39,7 @@ export function EditEpisode({ id }: EditEpisodeProps): JSX.Element {
 
   return (
     <>
-      <h1>Edit Episode</h1>
+      <h1 className="text-lg">Edit Episode</h1>
       {error !== "" ? <p>{error}</p> : undefined}
       {episode !== undefined ? (
         <EpisodeForm

diff --git a/src/admin-portal/views/EpisodeView.tsx b/src/admin-portal/views/EpisodeView.tsx
@@ -39,22 +39,25 @@ export function EpisodeView({ goToEpisode }: EpisodeViewProps): JSX.Element {
 
   return (
     <>
-      <h1>Episodes</h1>
-      <ul>
+      <h1 className="text-lg">Episodes</h1>
+      <ul role="list" className="list-disc pl-4">
         {episodes.map((episode) => (
-          <li>
+          <li className="list-item">
             <a
               href="#"
               onClick={() => {
                 goToEpisode(episode.id);
               }}
+              className="text-sky-700 hover:text-sky-800 dark:text-sky-200 hover:dark:text-sky-300 underline"
             >
               {episode.id}
             </a>
           </li>
         ))}
       </ul>
-      {error !== "" ? <span>{error}</span> : undefined}
+      {error !== "" ? (
+        <span className="text-red-700 dark:text-red-400">{error}</span>
+      ) : undefined}
     </>
   );
 }
diff --git a/src/admin-portal/views/Login.tsx b/src/admin-portal/views/Login.tsx
@@ -40,17 +40,29 @@ export function Login({ setCredentials }: LoginProps): JSX.Element {
 
   return (
     <>
-      <form onSubmit={doLogin}>
+      <form
+        onSubmit={doLogin}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput label="Email" value={email} setValue={setEmail} />
         <TextInput
           label="Password"
           value={password}
           setValue={setPassword}
           password
         />
-        <button type="submit">Login</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          Login
+        </button>
+        {error !== "" ? (
+          <p role="note" className="text-red-700 dark:text-red-400">
+            {error}
+          </p>
+        ) : undefined}
       </form>
-      {error !== "" ? <p>{error}</p> : undefined}
     </>
   );
 }
diff --git a/src/admin-portal/views/Upload.tsx b/src/admin-portal/views/Upload.tsx
@@ -182,8 +182,11 @@ export function Upload(): JSX.Element {
 
   return (
     <>
-      <h1>Upload an Episode</h1>
-      <form onSubmit={submit}>
+      <h1 className="text-lg">Upload an Episode</h1>
+      <form
+        onSubmit={submit}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput label="Episode Title" value={title} setValue={setTitle} />
         <SeasonSelect
           value={seasonNumber}
@@ -220,7 +223,12 @@ export function Upload(): JSX.Element {
           value={description}
           setValue={setDescription}
         />
-        <button type="submit">Upload</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          Upload
+        </button>
       </form>
       {error !== "" ? <p>{error}</p> : undefined}
     </>

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -9,7 +9,7 @@ function makeNavItemClassList(key: string) {
     return ["p-2", "rounded-lg", title === key ? "bg-slate-700 text-sky-50" : false];
 }
 ---
-<nav class="flex justify-around bg-slate-100 dark:bg-slate-800 p-2 font-sans text-lg">
+<nav class="flex justify-around bg-slate-200 dark:bg-slate-800 p-2 font-sans text-lg">
     <a href="/" class:list={[...makeNavItemClassList("Home"), "text-xl"]}><h1>Capes</h1></a>
     <a href="/" class:list={makeNavItemClassList("Game")}><h2>Game</h2></a>
     <a href="/admin" class:list={makeNavItemClassList("Admin")}><h2>Admin</h2></a>

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ export function FileInput({ @@
               }
             }}
             accept={accept}
+            className="w-96 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 text-sm"
           />
         </Base>
       );
@@ Expand Down @@