UI animation

package.json

@@ -19,6 +19,7 @@
     "@tauri-apps/api": "^1",
     "anychart": "^8.12.1",
     "bootstrap": "^5.3.3",
+    "framer-motion": "^11.2.10",
     "github-contributions-canvas": "^0.7.0",
     "nanoid": "^5.0.7",
     "react": "^18.2.0",

src/App.css

@@ -87,8 +87,10 @@ ul {
 
 .toggle-sidebar-btn {
   position: absolute;
-  bottom: 10px; /* this is a jugaad just because I don't want it to get in the way for now.*/
-  left: 20px;
+  top: 0;
+  left: 0;
+  margin: 10px;
+  z-index: 1;
   height: 40px;
   width: 40px;
   padding: 0;
@@ -126,11 +128,33 @@ ul {
 /* ------------------------------SIDEBAR STYLES------------------------------ */
 /* -------------------------------------------------------------------------- */
 
+.sidebar-button {
+  position: fixed;
+  top: 7px;
+  left: 0;
+  transform: translateY(-50%);
+  background: #3576bb;
+  color: white;
+  border: none;
+  padding: 7px;
+  font-size: 1.05rem;
+  cursor: pointer;
+  border-radius: 5px;
+  box-shadow: 10px 10px 10px #000;
+  z-index: 1;
+}
+.sidebar-button:hover {
+  filter: brightness(120%);
+  box-shadow: 10px 10px 10px #000;
+}
+
+.sidebar-button:hover::after {
+  content: attr("Sidebar");
+}
+
 .sidebar .sidebar-list {
   height: 100%;
   width: 100%;
-  /* Let's keep the border, it divides the screen better. */
-  border-right: 1px solid black;
   margin: 0;
   padding: 0;
   display: flex;
@@ -252,6 +276,7 @@ ul {
   background-color: var(--primary);
   color: var(--light);
   width: 100%;
+  height: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -269,8 +294,10 @@ ul {
 }
 
 .page-title {
-  margin: 20px 0 20px 0;
-  font-size: 2rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 auto;
+  text-align: center;
 }
 
 /* ---- */
@@ -294,14 +321,49 @@ ul {
   padding: 0 1rem;
 }
 
-/* Checkboxes are a bitch I CANT STYLE IT*/
+/* You cannot style an checkbox, the entirety of reddit and stackoverflow gave up */
+/* But I said nah I'd win and I did*/
+/* Made a fricking new checkbox */
+/* I am Gojo Satoru of CSS*/
+
 .task-card input[type="checkbox"] {
-  flex: 5%;
-  height: 30px;
-  padding: 0;
-  margin: 0;
+  /* Hide the default checkbox */
+  display: none;
+}
+
+.task-card input[type="checkbox"] + label {
+  /* Create a custom checkbox */
+  display: inline-block;
+  position: relative;
+}
+
+.task-card input[type="checkbox"] + label:before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border: 1px solid #0a0a0a;
+  background-color: white;
   cursor: pointer;
-  border: 2px solid black; /* doesnt show squat */
+}
+
+.task-card input[type="checkbox"]:checked + label:before {
+  /* Style the checked state */
+  background-color: #3576cc;
+  border-color: #000000;
+}
+
+.task-card input[type="checkbox"]:checked + label:after {
+  /* Add a checkmark */
+  content: "✔";
+  font-size: 25px;
+  color: #fff; /* Change the color to white */
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
 }
 
 .text-container {
@@ -362,17 +424,26 @@ ul {
   min-width: 300px;
 }
 
+/* -------------------------------------------------------------------------- */
+/* -----------------------------BUTTON STYLES-------------------------------- */
+/* -------------------------------------------------------------------------- */
+
+/* ----------------- */
+/* Buttons on navbar */
+/* ----------------- */
 .btn {
   background: #3576cc;
   color: white;
   border: none;
   padding: 10px;
-  font-size: 1.2rem;
-  font-family: CustFont, sans-serif;
+  font-size: 1rem;
+  font-family: inherit;
   cursor: pointer;
   outline: inherit;
   border-radius: 15px;
   box-shadow: 6px 6px 7px black;
+  display: flex;
+  align-items: center;
 }
 
 .btn:hover {
@@ -384,34 +455,51 @@ ul {
   box-shadow: inset 2px 2px 10px #000;
 }
 
-.delete-icon, .edit-icon {
+
+/* ----------------- */
+/* Buttons for tasks */
+/* ----------------- */
+
+.task-btn {
+  background: #3576bb;
   color: white;
   background-color: #3576bb;
   border: none;
   border-radius: 17px;
   box-shadow: 6px 6px 7px #000;
+  display: flex;
+  align-items: center;
   padding: 12px;
-  cursor: pointer;
 }
 
-.delete-icon:hover {
-  background: white;
-  color: red;
+.task-btn:hover {
   filter: brightness(120%);
-  border-radius: 15px;
   box-shadow: 10px 10px 10px #000;
 }
 
-.delete-icon:active {
+.task-btn:active {
+  box-shadow: inset 2px 2px 10px #000;
+}
+
+.delete-icon {
+  background-color: #286bb3;
   color: white;
-  box-shadow: inset 2px 2px 10px white;
+  border: none;
+  padding: 12px;
+  cursor: pointer;
+  border-radius: 17px;
+  box-shadow: 6px 6px 7px #000;
+  display: flex;
+  align-items: center;
 }
 
-.edit-icon:hover {
-  filter: brightness(120%);
+.delete-icon:hover {
+  background: white;
+  color: red;
+  border-radius: 15px;
   box-shadow: 10px 10px 10px #000;
 }
 
-.edit-icon:active {
-  box-shadow: inset 2px 2px 10px #000;
-}
+.delete-icon:active {
+  box-shadow: inset 2px 2px 10px white;
+}

src/App.jsx

@@ -1,19 +1,19 @@
 // Non-UI stuff.
 import { useState } from "react";
-import { invoke } from "@tauri-apps/api/tauri";
 
 // External UI Components
 import AssignmentIcon from "@mui/icons-material/Assignment";
 import DirectionsRunIcon from "@mui/icons-material/DirectionsRun";
 import AutoGraphIcon from "@mui/icons-material/AutoGraph";
-import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 
 // My UI Components
 import Sidebar from "./components/Sidebar";
 import "./App.css";
 import TasksView from "./views/TasksView/TasksView";
 import HabitsView from "./views/HabitsView/HabitsView";
 import StreaksWatchView from "./views/StreaksWatchView/StreaksWatchView";
+import { motion } from "framer-motion";
 
 // Constants.
 import { TASKS_VIEW, HABITS_VIEW, STREAKS_VIEW } from "./Constants";
@@ -32,16 +32,37 @@ function App() {
     setTab(newTab);
   }
 
+  function toggleSidebar() {
+    setSidebar(!showSidebar);
+  }
+
   return (
     <>
       <div className="container">
-        <button
-          type="button"
-          className="toggle-sidebar-btn"
-          onClick={() => setSidebar(!showSidebar)}
-        >{<FormatListBulletedIcon />}</button>
+
+         <motion.button
+          className="sidebar-button"
+          initial={{ rotate: 0 }}
+          // animate={{
+          //   rotate: isSpinning ? 180 : 0,
+          //   transition: {
+          //     duration: 0.2,
+          //     ease: "easeInOut",
+          //   },
+          //}
+
+          onClick={toggleSidebar}
+        >
+          <FormatListBulletedIcon></FormatListBulletedIcon>
+        </motion.button>
+
         {showSidebar && (
-          <Sidebar tabs={TABS} toggleTab={toggleTab} activeTab={tab} />
+          <Sidebar
+            tabs={TABS}
+            toggleTab={toggleTab}
+            activeTab={tab}
+            toggleSidebar={toggleSidebar}
+          />
         )}
         <div className="main-area">
           {tab === TASKS_VIEW && <TasksView />}