styling + alfa header

antonstihl · Jan 12, 2024 · f21285d · f21285d
1 parent 02f4e8f
commit f21285d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,9 +7,12 @@ import ParentProvider from "./context/ParentContext";
 const App = () => {
   return (
     <>
+      <div className="w-full bg-amber-300 px-4 py-1 text-lg text-center">
+        Flappen är i alfaversion och kan gå sönder när som helst.
+      </div>
       <ParentProvider>
         <ChildProvider>
-          <NavBar/>
+          <NavBar />
           <main>
             <Outlet />
           </main>

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -7,7 +7,7 @@ export type Props = PropsWithChildren & {
 
 export default function Card({ children, width = "w-max", title }: Props & {}) {
   return (
-    <div className={`border-transparent shadow-sm shadow-black py-3 px-2 ${width} rounded-md bg-white`}>
+    <div className={`border-transparent shadow-sm shadow-black py-3 px-2 ${width} rounded-sm bg-white`}>
       {title && <h1 className="px-2 py-2 text-xl font-bold">{title}</h1>}
       {children}
     </div>

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -7,23 +7,21 @@ type Props = {
 function Menu({ closeMenu }: Props) {
   const getMenuItem = (text: string, path: string) => {
     return (
-      <div className="flex flex-row">
-        <NavLink
-          to={path}
-          onClick={() => closeMenu()}
-          className="rounded-md py-1 pl-2 pr-10 text-left w-full hover:bg-emerald-700"
-        >
-          {text}
-        </NavLink>
-      </div>
+      <NavLink
+        to={path}
+        onClick={() => closeMenu()}
+        className="rounded-md py-2 pl-2 pr-10 text-left w-full hover:bg-emerald-700"
+      >
+        {text}
+      </NavLink>
     );
   };
   return (
-    <nav className="flex flex-row fixed top-12 h-full z-10">
-      <div className="bg-green-700 pt-2 px-2 h-full text-white w-max flex-col space-y-2">
+    <nav className="flex flex-row fixed h-full z-10">
+      <div className="bg-green-700 pt-2 px-2 h-full text-white w-max flex flex-col">
         {getMenuItem("Familj", "/family")}
-        {getMenuItem("Lön", "/salary")}
         {getMenuItem("Kalender", "/calendar")}
+        {getMenuItem("Lön", "/salary")}
         {/* {getMenuItem("Statistik", "/stats")} */}
         {/* {getMenuItem("Hoppande kalkylator", "/calculator")} */}
         {getMenuItem("Hjälp", "/help")}

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export default function Modal({ children }: PropsWithChildren) {
   return (
-    <div className="m-0 w-screen h-screen fixed top-12 bg-black bg-opacity-50 z-30">
+    <div className="m-0 w-screen h-screen fixed top-0 left-0 bg-black bg-opacity-50 z-30">
       <div className="m-2 flex justify-center items-center h-full">{children}</div>
     </div>
   );