Dev lane r

src/app/globals.css

@@ -1,5 +1,4 @@
 @import "react-big-calendar/lib/css/react-big-calendar.css";
-/* @import '../styles/custom-calendar.css'; */
 
 * {
   box-sizing: border-box;
@@ -25,27 +24,27 @@ body {
 :root {
   --color-page-bg: #fff;
 
-  --color-toolbar-bg: #ef3e0e;
+  --color-toolbar-bg: #2C3168;
   --color-toolbar-button: rgb(255, 255, 255);
-  --color-toolbar-button-hover: rgba(79, 45, 80, 0.692);
-  --color-toolbar-button-active: rgba(79, 45, 80, 0.692);
+  --color-toolbar-button-hover: rgba(44, 49, 104, 0.692);
+  --color-toolbar-button-active: rgba(113, 120, 197, 0.692);
   --color-toolbar-label: #fff;
-  --color-toolbar-text: #ef3e0e;
+  --color-toolbar-text: #2C3168;
 
-  --color-modal-button: #ef3e0e;
+  --color-modal-button: #2C3168;
   --color-modal-text: #fff;
-  --color-modal-button-hover: #a33718;
+  --color-modal-button-hover: #1c2050;
 
   --color-header-button: #fff;
-  --color-header-text: #ef3e0e;
-  --color-header-button-hover: #a33718;
+  --color-header-text: #2C3168;
+  --color-header-button-hover: #1c2050;
   --color-header-text-hover: #fff;
 
   --color-calendar-bg: #d3d3d3;
-  --color-calendar-border: #ee5126;
+  --color-calendar-border: #5960b3;
   --color-calendar-numbers: #ffffff;
 
-  --color-event-bg: #ef3e0e;
+  --color-event-bg: #2C3168;
   --color-event-text: #fff;
 
   --color-today-border: #007bff;

src/app/layout.js

@@ -1,10 +1,8 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-// import "@/styles/custom-calendar.css";
-import Sidebar from "@/components/Sidebar";
+import "@/styles/main.scss";
 import Header from "@/components/Header";
 import StyledComponentsRegistry from "@/lib/registry";
-import Square from "@/components/Square";
 import { CalendarProvider } from "@/context/CalendarContext";
 
 const geistSans = Geist({
@@ -41,9 +39,8 @@ export default function RootLayout({ children }) {
                 style={{
                   display: "flex",
                   backgroundColor: "var(--color-toolbar-bg)",
-                  width: '100%',
-                  height: 'auto',
-
+                  width: "100%",
+                  height: "auto",
                 }}
               >
                 {/* <Square /> */}
@@ -54,7 +51,7 @@ export default function RootLayout({ children }) {
                   display: "flex",
                   overflow: "hidden",
                   justifyContent: "center",
-                  alignItems: 'center',
+                  alignItems: "center",
                   width: "100%",
                   height: "100%",
                 }}

src/components/Button.jsx

@@ -1,32 +1,16 @@
-import styled from "styled-components";
-
-const ButtonWrapper = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-size: 1.1rem;
-  border: none;
-  background-color: var(--color-header-button);
-  padding: 15px;
-  border-radius: 15px;
-  cursor: pointer;
-  width: auto;
-  color: var(--color-header-text);
-  transition: background-color 0.2s ease, color 0.2s ease;
-
-  &:hover {
-    background-color: var(--color-header-button-hover);
-    color: var(--color-header-text-hover);
-  }
-`;
-
-export default function Button({ children, type = "button", ...props }) {
+export default function Button({
+  children,
+  type = "button",
+  className = "",
+  ...props
+}) {
   return (
-    <>
-      <ButtonWrapper type={type} {...props}>
-        {children}
-      </ButtonWrapper>
-    </>
+    <button
+      type={type}
+      className={`button__button_wrapper ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
   );
 }

src/components/Calendar.jsx

@@ -1,30 +1,13 @@
 "use client";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import moment from "moment";
-import styled from "styled-components";
+
 import { useEffect, useState } from "react";
 import { useCalendar } from "@/context/CalendarContext";
 import EventFormModal from "./EventFormModal";
 import DeleteEventModal from "./DeleteEventModal";
 import { useRouter } from "next/navigation";
 
-const CalendarWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  height: 75vh;
-  width: 90vw;
-  padding: 10px;
-  box-sizing: border-box;
-`;
-
-const CalendarSizing = styled.div`
-  flex-grow: 1;
-  width: 100%;
-  max-width: 1200px;
-  height: 100%;
-`;
-
 const localizer = momentLocalizer(moment);
 
 export default function UserCalendar() {
@@ -113,8 +96,8 @@ export default function UserCalendar() {
   return (
     <>
       <div key={theme}>
-        <CalendarWrapper>
-          <CalendarSizing>
+        <div className="calendar__wrapper">
+          <div className="calendar__sizing">
             <Calendar
               key={user?.id || "calendar"}
               localizer={localizer}
@@ -128,12 +111,7 @@ export default function UserCalendar() {
               onSelectSlot={handleSelectSlot}
               onSelectEvent={(event) => setEventToDelete(event)}
               onNavigate={(date) => setDate(date)}
-              style={{
-                minHeight: "494px",
-                height: "100%",
-                minWidth: "452px",
-                boxShadow: "2px 3px 6px 4px rgba(0, 0, 0, 0.1)",
-              }}
+              className="calendar__component"
             />
             {showModal && <EventFormModal start={modalStart} end={modalEnd} />}
             {eventToDelete && typeof eventToDelete === "object" && (
@@ -147,8 +125,8 @@ export default function UserCalendar() {
                 }}
               />
             )}
-          </CalendarSizing>
-        </CalendarWrapper>
+          </div>
+        </div>
       </div>
     </>
   );

src/components/CalendarSkeletion.jsx

@@ -1,20 +1,11 @@
-'use client'
-import styled from "styled-components";
-
-const SkeletonWrapper = styled.div`
-  flex-grow: 1;          // fill the remaining space next to Sidebar
-  padding: 50px 20px 50px 50px;
-  height: 80vh;
-`;
+"use client";
 
 const CalendarSkeleton = () => {
   return (
-    <>
-        <SkeletonWrapper>
-            <p>Loading calendar...</p>
-        </SkeletonWrapper>
-    </>
-  )
-}
+    <div className="calendar__wrapper">
+      <div className="calendar__component">Loading calendar...</div>
+    </div>
+  );
+};
 
-export default CalendarSkeleton
+export default CalendarSkeleton;

src/components/ContactTabInModal.jsx

@@ -1,111 +1,52 @@
 "use client";
 import Image from "next/image";
-import styled from "styled-components";
-
-const TabWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  background-color: ${({ isSelected }) =>
-    isSelected
-      ? "var(--color-selected-contact-bg)"
-      : "var(--color-notselected-contact-bg)"};
-  color: #fff;
-  transition: background-color 0.2s ease;
-`;
-
-const UserContactIconWrapper = styled.div`
-  min-width: 13%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 7px 20px 7px 15px;
-  color: var(--color-contacts-text);
-`;
-
-const UserContactIcon = styled.button`
-  cursor: pointer;
-  border: none;
-  height: 40px;
-  width: 40px;
-  border-radius: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color-user-icon);
-  color: var(--color-contacts-icon-text);
-`;
-
-const ContactSnippetWrapper = styled.div`
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-grow: 1;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 10px;
-`;
-
-const ContactSnippet = styled.button`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-contacts-text);
-  cursor: pointer;
-  border: none;
-  background-color: inherit;
-  font-size: 1.2rem;
-`;
-
-const ContactFunctionWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  height: 100%;
-  position: relative;
-`;
 
 export default function ContactTabInModal({ contact, isSelected, onToggle }) {
   const trashcanImage = "/images/trashcan.png";
 
   return (
-    <TabWrapper isSelected={isSelected}>
-      <UserContactIconWrapper>
-        <UserContactIcon type="button" onClick={() => onToggle(contact.id)}>
+    <div
+      className={`contacts__tab-wrapper${
+        isSelected ? " contacts__tab-wrapper--selected" : ""
+      }`}
+    >
+      <div className="contacts__user-contact-icon-wrapper">
+        <button
+          className="contacts__user-contact-icon"
+          type="button"
+          onClick={() => onToggle(contact.id)}
+        >
           {contact.username?.slice(0, 2).toUpperCase()}
-        </UserContactIcon>
-      </UserContactIconWrapper>
-
-      <ContactSnippetWrapper>
-        <ContactSnippet type="button" onClick={() => onToggle(contact.id)}>{contact.username}</ContactSnippet>
-      </ContactSnippetWrapper>
-      <ContactFunctionWrapper>
+        </button>
+      </div>
+      <div className="contacts__contact-snippet-wrapper">
+        <button
+          className="contacts__contact-snippet"
+          type="button"
+          onClick={() => onToggle(contact.id)}
+        >
+          {contact.username}
+        </button>
+      </div>
+      <div className="contacts__contact-function-wrapper">
         <button
+          className="contacts__delete-contact-btn"
           type="button"
           onClick={() => onToggle(contact.id)}
-          style={{
-            border: "none",
-            backgroundColor: "transparent",
-            cursor: "pointer",
-          }}
         >
           <Image
             src={trashcanImage}
             width={25}
             height={50}
             alt="Toggle contact"
-            style={{
-              margin: "0 10px",
-              objectFit: "contain",
-              opacity: isSelected ? 1 : 0.4,
-              transform: isSelected ? "rotate(0deg)" : "rotate(20deg)",
-            }}
+            className={`contacts__delete-contact-icon${
+              isSelected
+                ? " contacts__delete-contact-icon--selected"
+                : " contacts__delete-contact-icon--notselected"
+            }`}
           />
         </button>
-      </ContactFunctionWrapper>
-    </TabWrapper>
+      </div>
+    </div>
   );
 }

src/components/ContactsSkeleton.jsx

@@ -1,20 +1,11 @@
-'use client'
-import styled from "styled-components";
-
-const SkeletonWrapper = styled.div`
-  flex-grow: 1;          // fill the remaining space next to Sidebar
-  padding: 50px 20px 50px 50px;
-  height: 80vh;
-`;
+"use client";
 
 const ContactsSkeleton = () => {
   return (
-    <>
-        <SkeletonWrapper>
-            <div style={{fontSize: '3.5rem', padding: '0 0 50px 0', display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: '1', minHeight: '80vh'}}>Loading...</div>
-        </SkeletonWrapper>
-    </>
-  )
-}
+    <div className="contacts__section-wrapper">
+      <div className="contacts__empty-message">Loading...</div>
+    </div>
+  );
+};
 
-export default ContactsSkeleton
+export default ContactsSkeleton;