styling dashboard

truc9 · May 18, 2024 · 8c74911 · 8c74911
1 parent 79b9087
commit 8c74911
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
diff --git a/frontend/src/components/toggleButton/index.tsx b/frontend/src/components/toggleButton/index.tsx
@@ -16,15 +16,17 @@ const ToggleButton: React.FC<Prop> = ({
   ...props
 }) => {
   return disabled ? (
-    <div className="flex w-full items-center justify-center gap-1 rounded bg-gradient-to-r from-orange-500 to-orange-300 px-3 py-2 text-center text-white">
+    <div className="flex w-full items-center justify-center gap-1 rounded-xl bg-gradient-to-r from-orange-500 to-orange-300 px-3 py-2 text-center text-white">
       Not Available
     </div>
   ) : (
     <button
       {...props}
       className={clsx(
-        isActive ? "bg-green-500" : "bg-slate-300",
-        "flex w-full items-center justify-center gap-1 rounded px-3 py-2 text-center text-white",
+        isActive
+          ? "bg-gradient-to-r from-green-500 to-green-300"
+          : "bg-slate-300",
+        "flex w-full items-center justify-center gap-1 rounded-xl px-3 py-2 text-center text-white",
       )}
     >
       {icon}

diff --git a/frontend/src/screens/dashboard/index.tsx b/frontend/src/screens/dashboard/index.tsx
@@ -27,14 +27,7 @@ function Dashboard() {
             <Accordion variant="separated" value={`${todayMatch.id}`}>
               <Accordion.Item key={todayMatch.id} value={`${todayMatch.id}`}>
                 <Accordion.Control icon={<FiMapPin />}>
-                  <div
-                    className={clsx(
-                      dayjs(todayMatch.start).isSame(new Date(), "date")
-                        ? "text-red-500"
-                        : "text-slate-300",
-                      "flex items-center justify-between px-5",
-                    )}
-                  >
+                  <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-2">
                       <span>
                         {dayjs(todayMatch.start).format("dddd")} -{" "}

diff --git a/frontend/src/screens/dashboard/matchRegistration.tsx b/frontend/src/screens/dashboard/matchRegistration.tsx
@@ -44,13 +44,13 @@ const MatchRegistration: React.FC<Prop> = ({ match }) => {
   });
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col">
       {registrations &&
         registrations.map((reg) => {
           return (
             <div
               key={reg.playerId}
-              className="grid h-16 grid-cols-3 items-center gap-5"
+              className="grid grid-cols-3 items-center gap-2"
             >
               <span>{reg.playerName}</span>
               <div>

diff --git a/frontend/src/screens/layout.tsx b/frontend/src/screens/layout.tsx
@@ -15,7 +15,7 @@ interface NavItemProps {
 const NavItem: FC<NavItemProps> = ({ label, path, icon, showLabel = true }) => {
   return (
     <NavLink
-      className="hover:bg-gradient-to-r hover:font-bold [&.active]:bg-gradient-to-r [&.active]:font-bold from-green-300 to-green-400 px-4 py-3 rounded flex items-center gap-2"
+      className="flex items-center gap-2 rounded from-green-300 to-green-400 px-4 py-3 hover:bg-gradient-to-r hover:font-bold [&.active]:bg-gradient-to-r [&.active]:font-bold"
       to={path}
     >
       <span className="text-xl">{icon}</span>
@@ -26,27 +26,27 @@ const NavItem: FC<NavItemProps> = ({ label, path, icon, showLabel = true }) => {
 
 function Layout() {
   const APP_NAME = "RACKET";
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(false);
 
   function toggleSideNav() {
     setCollapsed(!collapsed);
   }
 
   return (
-    <div className="flex w-screen h-screen">
+    <div className="flex h-screen w-screen">
       <div
         className={cx(
-          "group transition-all delay-100 relative h-full bg-green-400 text-white flex-shrink-0 flex-grow-0 border-r",
+          "group relative h-full flex-shrink-0 flex-grow-0 border-r bg-green-400 text-white transition-all delay-100",
           !collapsed && "w-[250px]",
-          collapsed && "w-16"
+          collapsed && "w-16",
         )}
       >
         {collapsed ? (
-          <div className="text-2xl font-bold p-2 text-center">
+          <div className="p-2 text-center text-2xl font-bold">
             {APP_NAME.substring(0, 1)}
           </div>
         ) : (
-          <div className="text-2xl font-bold p-2 text-center">{APP_NAME}</div>
+          <div className="p-2 text-center text-2xl font-bold">{APP_NAME}</div>
         )}
         <div className="flex flex-col p-2">
           <NavItem
@@ -76,7 +76,7 @@ function Layout() {
         </div>
         <button
           onClick={toggleSideNav}
-          className="hidden group-hover:block absolute top-2 -right-2 text-lg rounded-full ring-green-500 bg-white text-green-500 shadow border border-green-500"
+          className="absolute -right-2 top-2 hidden rounded-full border border-green-500 bg-white text-lg text-green-500 shadow ring-green-500 group-hover:block"
         >
           <FiChevronLeft className={cx(collapsed && "rotate-180")} />
         </button>