fixed so that we have a structure for our color pallet

fsek · Oct 24, 2024 · a593944 · a593944
1 parent dd8d7bc
commit a593944
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 138 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,8 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 :root {
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
-}
+    --wavelength-612-color: #FF5700;
+    --wavelength-612-color-light: #FF7F33;
+    --wavelength-612-color-dark: #CC4700;
+}
diff --git a/src/routes/admin/Admin.css b/src/routes/admin/Admin.css
@@ -1,8 +1,8 @@
 .sidebar {
     display: block;
     text-align: left;
-    background-color: orange;
-    max-width: 15%;
+    background-color: var(--wavelength-612-color);
+    max-width: 10%;
     height: 100vh;
     flex-grow: 1;
     overflow-y: auto;
@@ -29,7 +29,7 @@
     max-width: 15%;
     height: 100vh;
     position: absolute;
-    left: 15%;
+    left: 10%;
     /* Position it next to the main sidebar */
     top: 0;
     overflow-y: auto;

diff --git a/src/routes/admin/news/News.tsx b/src/routes/admin/news/News.tsx
@@ -1,125 +1,3 @@
-// import "../Admin.css";
-// import { Create } from "./Create";
-// import { type NewsRead, NewsService } from "../../../api";
-
-// // biome-ignore lint/style/noNonNullAssertion: <explanation>
-// const news: Array<NewsRead> = await NewsService.getAllNews().then((val) => val.data!);
-// //const news: NewsItem[] = [{title: "Ny app", creator: "Cajsa", dateCreated: "32/3-2025"}]
-// export interface NewsItem {
-// 	title: string;
-// 	creator: string;
-// 	dateCreated: string;
-// 	id: number;
-// }
-
-// export default function News() {
-// 	return (
-// 		<div className="content">
-// 			<h1>Administrera nyheter</h1>
-// 			<p>
-// 				Här kan du skapa nyheter & redigera existerande nyheter på hemsidan.
-// 			</p>
-// 			<button type="button">Skapa nyhet</button>
-// 			<button type="button">Redigera nyheter</button>
-// 			<h2>Senaste nyheter</h2>
-// 			<table>
-// 				<tr>
-// 					<th>Titel</th>
-// 					<th>Skapare</th>
-// 					<th>Datum skapad</th>
-// 					<th>Redigera</th>
-// 				</tr>
-// 				{news.map((news, index) => {
-// 					return (
-// 						<tr key={index.toString()}>
-// 							<td>{news.title_sv}</td>
-// 							<td>{news.author_id}</td>
-// 							<td>{news.created_at.toISOString()}</td>
-// 							<td>
-// 								<button type="button">Redigera</button>
-// 							</td>
-// 						</tr>
-// 					);
-// 				})}
-// 			</table>
-// 			<Create />
-// 		</div>
-// 	);
-// }
-
-
-// import { useState, useEffect } from "react";
-// import "../Admin.css";
-// import { Create } from "./Create";
-// import { type NewsRead, NewsService } from "../../../api";
-
-// export interface NewsItem {
-//   title: string;
-//   creator: string;
-//   dateCreated: string;
-//   id: number;
-// }
-
-// export default function News() {
-//   const [news, setNews] = useState<Array<NewsRead>>([]);
-//   const [loading, setLoading] = useState(true);
-
-//   useEffect(() => {
-//     // Fetch news data when the component mounts
-//     const fetchNews = async () => {
-//       try {
-//         const response = await NewsService.getAllNews();
-//         setNews(response.data || []);
-//       } catch (error) {
-//         console.error("Error fetching news:", error);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchNews();
-//   }, []);
-
-//   if (loading) {
-//     return <p>Loading...</p>;
-//   }
-
-//   return (
-//     <div className="content">
-//       <h1>Administrera nyheter</h1>
-//       <p>Här kan du skapa nyheter & redigera existerande nyheter på hemsidan.</p>
-//       <button type="button">Skapa nyhet</button>
-//       <button type="button">Redigera nyheter</button>
-//       <h2>Senaste nyheter</h2>
-//       <table>
-//         <thead>
-//           <tr>
-//             <th>Titel</th>
-//             <th>Skapare</th>
-//             <th>Datum skapad</th>
-//             <th>Redigera</th>
-//           </tr>
-//         </thead>
-//         <tbody>
-//           {news.map((newsItem, index) => (
-//             <tr key={index.toString()}>
-//               <td>{newsItem.title_sv}</td>
-//               <td>{newsItem.author_id}</td>
-//               <td>{new Date(newsItem.created_at).toLocaleDateString()}</td>
-//               <td>
-//                 <button type="button">Redigera</button>
-//               </td>
-//             </tr>
-//           ))}
-//         </tbody>
-//       </table>
-//       <Create />
-//     </div>
-//   );
-// }
-
-
-
 import { useState, useEffect } from "react";
 import { Create } from "./Create";
 import { type NewsRead, NewsService } from "../../../api";
@@ -157,7 +35,7 @@ export default function News() {
 
   return (
     <div className="p-8 bg-white shadow-md rounded-lg">
-      <h1 className="text-2xl font-bold mb-4">Administrera nyheter</h1>
+      <h1 className="text-2xl font-bold mb-4 text-center">Administrera nyheter</h1>
       <p className="text-gray-700 mb-6">
         Här kan du skapa nyheter & redigera existerande nyheter på hemsidan.
       </p>
@@ -175,10 +53,10 @@ export default function News() {
           Redigera nyheter
         </button>
       </div>
-      <h2 className="text-xl font-semibold mb-4">Senaste nyheter</h2>
-      <table className="min-w-full bg-white border border-gray-300 rounded-lg">
+      <h2 className="text-xl font-semibold mb-4 underline underline-offset-4">Senaste nyheter</h2>
+      <table className="min-w-full bg-white border border-gray-300 rounded-lg border-solid">
         <thead>
-          <tr className="bg-gray-100">
+          <tr className="bg-forange">
             <th className="text-left py-2 px-4 border-b">Titel</th>
             <th className="text-left py-2 px-4 border-b">Skapare</th>
             <th className="text-left py-2 px-4 border-b">Datum skapad</th>
@@ -199,7 +77,7 @@ export default function News() {
               <td className="py-2 px-4 border-b">
                 <button
                   type="button"
-                  className="bg-yellow-500 text-white px-2 py-1 rounded hover:bg-yellow-600"
+                  className="bg-red-600 text-white px-2 py-1 rounded hover:bg-forange"
                 >
                   Redigera
                 </button>

diff --git a/src/routes/admin/songs/Songs.tsx b/src/routes/admin/songs/Songs.tsx
@@ -96,40 +96,41 @@ export default function Songs() {
       <p>Här kan du skapa nyheter & redigera existerande sånger på hemsidan.</p>
 
       <div className="mb-6 flex gap-4">
-        <button type="button" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-yellow-600" onClick={handleAddButtonClick}>
+        <button type="button" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-forange" onClick={handleAddButtonClick}>
           Lägg till sång
         </button>
-        <button type="button" className="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-blue-600">Uppdatera sång</button>
+        <button type="button" className="bg-forange text-white px-4 py-2 rounded hover:bg-blue-600">Uppdatera sång</button>
       </div>
-      <h2>Sånginformation</h2>
       {/* Lägg till formuläret för att skapa en ny låt */}
       {showAddForm && (
         <form onSubmit={handleFormSubmit} className="add-song-form">
           <h3>Lägg till ny låt</h3>
           <div>
-            <label htmlFor="title">Titel:</label>
+            <label htmlFor="title" className="pr-2">Titel:</label>
             <input
               type="text"
               id="title"
               name="title"
               value={newSong.title}
               onChange={handleFormChange}
               required
+              className="px-3 border border-gray-700 rounded"
             />
           </div>
           <div>
-            <label htmlFor="artist">Artist:</label> {/* Ändrat från 'author' till 'artist' */}
+            <label htmlFor="artist" className="pr-2">Artist:</label> {/* Ändrat från 'author' till 'artist' */}
             <input
               type="text"
               id="artist"
               name="author" // Ändrat från 'author' till 'artist'
               value={newSong.author ?? "Herr bajskorvsson"} // Ändrat från newSong.author till newSong.artist
               onChange={handleFormChange}
               required
+              className="px-3 border border-gray-700 rounded"
             />
           </div>
           <div>
-            <label htmlFor="melody">Melodi:</label>
+            <label htmlFor="melody" className="pr-2">Melodi:</label>
             <input
               type="text"
               id="melody"
@@ -179,6 +180,7 @@ export default function Songs() {
           </div>
         </form>
       )}
+      <h2 className="font-bold">Sånginformation</h2>
 
       {/* Render the song details */}
       <table>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,15 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        forange: {
+          DEFAULT: '#FF5700', // Default shade
+          light: '#FF7F33',   // Lighter variant if needed
+          dark: '#CC4700',    // Darker variant if needed
+        },
+      },
+    },
   },
   plugins: [],
 };