Merge pull request #295 from tjklint/refactor(1page)

refactor: Adjust contribution map layout for better alignment and res…

Author: tjklint

src/components/contribution_map/contribution_map.scss

@@ -17,7 +17,7 @@
 }
 
 .contribution-map-container {
-  width: 100%;
+  width: 80%; /* Set width to 80% for consistent margin with the rest of the components */
   margin: 0 auto;
   padding: 20px 0;
   color: #fff;
@@ -27,35 +27,30 @@
     margin-top: 40px;
     display: flex;
     flex-direction: column;
+    align-items: center; /* Center everything except the header */
     color: #fff;
-    align-items: center;
-
-    .content-wrapper {
-      width: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start; // Align content to the left within the wrapper
-    }
 
     h2 {
       font-size: 2em;
       margin-bottom: 20px;
       color: #fff;
       font-family: 'RobotoMono', sans-serif;
       text-align: left;
+      align-self: flex-start; /* Keep the header aligned to the left */
+      width: 100%;
     }
 
     .react-github-calendar {
+      width: 100%;
       display: flex;
-      justify-content: center;
-      font-family: 'RobotoMono', sans-serif;
-      width: auto;
+      justify-content: center; /* Center the contribution graph */
+      overflow-x: auto; /* Allows horizontal scroll if the graph overflows */
     }
 
     .calendar-wrapper {
+      width: 100%;
       display: flex;
-      justify-content: center;
-      width: auto;
+      justify-content: center; /* Center the content within the wrapper */
     }
   }
 }

src/components/contribution_map/contribution_map.tsx

@@ -3,11 +3,6 @@ import GitHubCalendar from "react-github-calendar";
 import "./contribution_map.scss";
 
 const ContributionMap: React.FC = () => {
-  const theme = {
-    light: ["#e6ccff", "#c299ff", "#9f66ff", "#7a33cc", "#592699"],
-    dark: ["#e6ccff", "#c299ff", "#9f66ff", "#7a33cc", "#592699"],
-  };
-
   const labels = {
     months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -21,23 +16,20 @@ const ContributionMap: React.FC = () => {
   return (
     <div className="contribution-map-container">
       <section className="contribution-map">
-        <div className="content-wrapper">
-          <h2>My Github Contributions</h2>
-          <div className="react-github-calendar">
-            <div className="calendar-wrapper">
+        <h2>My Github Contributions</h2>
+        <div className="react-github-calendar">
+          <div className="calendar-wrapper">
             <GitHubCalendar
               username="tjklint"
-              blockSize={20}
+              blockSize={18}
               fontSize={16}
               theme={{
                 light: ["#ffffff", "#c299ff", "#9f66ff", "#7a33cc", "#592699"],
                 dark: ["#ffffff", "#c299ff", "#9f66ff", "#7a33cc", "#592699"],
               }}
               labels={labels}
-            
             />
           </div>
-          </div>
         </div>
       </section>
     </div>