Merge pull request #59 from manuelsanchezweb/style/responsiveness

style changes

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-qwik": "1.5.5",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.5",
     "undici": "6.18.1",

src/components/views/calendar-components/calendar.tsx

@@ -137,10 +137,9 @@ export const Calendar = component$(
                   {day.day}
 
                   {hasTask ? (
-                    <p class="absolute w-2 h-2 top-0 right-0 sm:top-2 sm:right-2">
+                    <p class="absolute w-2 h-2 top-1 right-0 sm:top-2 sm:right-2">
                       <svg
-                        width="9"
-                        height="9"
+                        class='w-[6px] h-[6px] sm:w-2 sm:h-2'
                         viewBox="0 0 9 9"
                         fill="none"
                         xmlns="http://www.w3.org/2000/svg"

src/components/views/calendar-components/task-show.tsx

@@ -45,7 +45,7 @@ export const TaskShow = component$(
         </h2>
         {isThereAnyTaskThisDay ? (
           <ul
-            class={`flex flex-col pt-8 gap-8 overflow-y-scroll ${hasMaxHeight ? 'max-h-[400px]' : 'overflow-hidden'}`}
+            class={`flex flex-col pt-8 gap-8 px-2 scrollbar scrollbar-thumb-primary  scrollbar-track-grayBrandLight overflow-y-scroll ${hasMaxHeight ? 'max-h-[400px]' : 'overflow-hidden'}`}
           >
             {appointments.map((task, idx) => {
               const author = getAuthorByTaskId(task.created_by!, users)

src/components/views/calendar-view.tsx

@@ -29,7 +29,7 @@ export const CalendarView = component$(
         aria-label="calendar view"
         class="flex flex-col lg:flex-row justify-between gap-6"
       >
-        <div class="bg-grayBrandLight md:h-[600px] p-6 md:p-12 md:pt-2 rounded-xl w-full lg:w-1/2">
+        <div class="bg-grayBrandLight h-fit lg:h-[600px] p-6 md:p-12 md:pt-2 rounded-xl w-full lg:w-1/2">
           <Calendar
             appointments={appointments}
             selectedDay={selectedDay}

src/routes/index.tsx

@@ -175,18 +175,18 @@ export default component$(() => {
         </svg>
 
         <Debug users={users} appointments={appointments} />
-        <div class="flex flex-row justify-between items-center">
-          <div class="flex md:items-center gap-2">
-            <div class="text-primary text-3xl md:text-8xl">
+        <div class="flex flex-row justify-between items-end sm:items-center">
+          <div class="flex flex-col justify-start sm:flex-row sm:items-center sm:gap-2">
+            <div class="text-primary text-start text-7xl md:text-8xl">
               {getCurrentDay()}
             </div>
-            <div class="flex md:px-4 flex-col md:leading-[35px] md:text-3xl">
+            <div class="flex sm:px-4 flex-col text-2xl sm:leading-[35px] sm:text-3xl">
               <span>{getDayName()}</span>
               <span>{getCurrentMonthAndYear()}</span>
             </div>
           </div>
           <div class="flex flex-col gap-2 md:flex-row md:items-center">
-            <small class="text-primary flex items-center text-lg">
+            <small class="text-primary flex items-center text-2xl">
               {/* I commented out because it looks like you can click on it, */}
               {/* At the beginning we wanted to do some settings here  */}
               {/* <svg
@@ -229,9 +229,9 @@ export default component$(() => {
                   />
                 </g>
               </svg> */}
-              <span class="sm:hidden">Hi,</span>
-              <span class="hidden sm:block">Howdy,</span>
-              <span class="font-bold ml-2">{userName}</span>!
+              <span class="sm:hidden text-2xl">Hi,</span>
+              <span class="hidden sm:block text-2xl">Howdy,</span>
+              <span class="font-bold ml-2 text-2xl">{userName}</span>!
             </small>
           </div>
         </div>

tailwind.config.js

@@ -22,5 +22,8 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // ...
+    require('tailwind-scrollbar'),
+],
 }