done home mobile

frontend/src/app/components/icons/link.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const Link = ({ color = "#969AF9", width = "24", height = "24" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={height}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M9 15L15 9"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Link;

frontend/src/app/components/icons/sun.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const sun = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
+        stroke="white"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default sun;

frontend/src/app/components/navbar/styles.module.css

@@ -24,7 +24,9 @@
     height: 61px;
     align-items: center;
     gap: 10px;
+    padding-right: 10px;
     flex-shrink: 0;
+    align-self: stretch;
   }
 
   .mainContainer {

frontend/src/app/home/page.jsx

@@ -1,7 +1,13 @@
+"use client";
+
 import React from "react";
 import userDashboardStyle from "./styles.module.css";
-
+import LinkIcon from "../components/icons/link";
+import SunIcon from "../components/icons/sun";
+import Link from "next/link";
+import useIsMobile from "../hooks/useIsMobile";
 const HomePage = () => {
+  const isMobile = useIsMobile();
   return (
     // Main
     <div className={userDashboardStyle.mainWrapper}>
@@ -9,32 +15,11 @@ const HomePage = () => {
         <div className={userDashboardStyle.userDashContainer}>
           {/* User Name */}
           <div className={userDashboardStyle.userNameContainer}>
-            {/* Name and Welcome Msg */}
+            {/* Name and Welcome Msg Section */}
             <div className={userDashboardStyle.nameSection}>
               {/* Weather */}
               <div className={userDashboardStyle.weather}>
-                <svg
+                <SunIcon />
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={24}
-                  height={24}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
-                    stroke="white"
-                    strokeWidth={1.5}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
-                    stroke="white"
-                    strokeWidth={1.5}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
                 <p>
                   Friday, Feb 23
                   <span className={userDashboardStyle.ordinal}>rd</span>
@@ -48,7 +33,7 @@ const HomePage = () => {
                 </p>
               </div>
             </div>
-            {/* Logo */}
+            {/* Image Section*/}
             <div className={userDashboardStyle.logoSection}>
               <div className={userDashboardStyle.gradientGlass}></div>
             </div>
@@ -57,38 +42,15 @@ const HomePage = () => {
           <div className={userDashboardStyle.linkMainContainer}>
             <div className={userDashboardStyle.linkContainer}>
               <div className={userDashboardStyle.link}>
-                <svg
+                <div className={userDashboardStyle.linkIcon}>
-                  xmlns="http://www.w3.org/2000/svg"
+                  {isMobile ? (
-                  width={24}
+                    <LinkIcon color="#D2D3E1" width="18" height="18" />
-                  height={24}
+                  ) : (
-                  viewBox="0 0 24 24"
+                    <LinkIcon />
-                  fill="none"
+                  )}
-                >
+                  <p>Connected to</p>
-                  <path
+                </div>
-                    d="M9 15L15 9"
+                <Link href="#">https://isaac.dev.onecoopbank.com</Link>
-                    stroke="#969AF9"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
-                    stroke="#969AF9"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
-                    stroke="#969AF9"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                <p>
-                  Connected to <a href="#">https://isaac.dev.onecoopbank.com</a>
-                </p>
               </div>
             </div>
           </div>

frontend/src/app/home/styles.module.css

@@ -11,7 +11,6 @@
   flex: 1 0 0;
   align-self: stretch;
   background: #191a24;
-  background: color(display-p3 0.098 0.102 0.1373);
 }
 .userDashContainer {
   display: flex;
@@ -20,7 +19,6 @@
   flex: 1 0 0;
   align-self: stretch;
   background: #191a24;
-  background: color(display-p3 0.098 0.102 0.1373);
 }
 .userNameContainer {
   display: flex;
@@ -29,14 +27,7 @@
   align-items: center;
   align-self: stretch;
   border-radius: 8px;
-  border-radius: 8px;
   background: linear-gradient(180deg, #21232f 0%, #34366f 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.1294 0.1373 0.1804) 0%,
-    color(display-p3 0.205 0.2122 0.4215) 100%
-  );
-  position: relative;
   overflow: hidden;
 }
 .nameSection {
@@ -48,20 +39,24 @@
 }
 .logoSection {
   display: flex;
-  padding-right: 16px;
+  padding-right: 0.157px;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   align-self: stretch;
-  position: absolute;
+  position: relative;
-  right: 0;
 }
+
 .gradientGlass {
-  width: 345.503px;
+  max-width: 345.503px;
   height: 345.503px;
-  transform: rotate(3.836deg) translateX(-20px);
+  transform: rotate(3.836deg);
   aspect-ratio: 1/1;
   background: url(/images/idp.png) 50% / cover no-repeat;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 .weather {
   display: flex;
@@ -131,31 +126,90 @@
   align-self: stretch;
 }
 .link {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.linkIcon {
   display: flex;
   align-items: center;
   gap: 10px;
   align-self: stretch;
 }
-.link > p {
+.link,
+.linkIcon > p {
   color: #959aff;
-  color: color(display-p3 0.5892 0.6031 0.9766);
   font-family: Inter;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: -0.18px;
-  width: 463px;
+  /* width: 463px; */
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
 }
 
 /* Mobile */
 @media (max-width: 768px) {
+  .mainContainer {
+    padding: 16px;
+  }
+  .userDashContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    flex: 1 0 0;
+  }
+  .userNameContainer {
+    border-radius: 12px;
+    flex-direction: column;
+    gap: 24px;
+  }
+  .linkMainContainer {
+    padding: 10px;
+    border-radius: 12px;
+    background: #1e202e;
+  }
+  .welcomeMsg {
+    align-self: stretch;
+    font-size: 36px;
+    line-height: normal;
+    letter-spacing: 0.36px;
   }
 
-/* Small Mobile */
+  .logoSection {
-@media (max-width: 400px) {
+    display: flex;
+    height: 144px;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 10px;
+    align-self: stretch;
+  }
+  .gradientGlass {
+    left: -29.114px;
+  }
+
+  .link {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+  }
+  .linkIcon > p {
+    color: #d2d3e1;
+    font-size: 14px;
+  }
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+  .userNameContainer {
+    align-items: flex-start;
+  }
+  /* Pwede butngan ani pero modako lagi ang card */
+  /* .logoSection {
+    padding-right: 369px;
+  } */
 }