done home mobile

2026-03-16 10:21:18 +08:00
parent e1ec8a90c1
commit dcddc14d7e
5 changed files with 165 additions and 80 deletions
--- a/frontend/src/app/components/icons/link.jsx
+++ b/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;
--- a/frontend/src/app/components/icons/sun.jsx
+++ b/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;
--- a/frontend/src/app/components/navbar/styles.module.css
+++ b/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 {
--- a/frontend/src/app/home/page.jsx
+++ b/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
-                  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>
+                <SunIcon />
                <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
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={24}
-                  height={24}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M9 15L15 9"
-                    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 className={userDashboardStyle.linkIcon}>
+                  {isMobile ? (
+                    <LinkIcon color="#D2D3E1" width="18" height="18" />
+                  ) : (
+                    <LinkIcon />
+                  )}
+                  <p>Connected to</p>
+                </div>
+                <Link href="#">https://isaac.dev.onecoopbank.com</Link>
              </div>
            </div>
          </div>
--- a/frontend/src/app/home/styles.module.css
+++ b/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;
-  right: 0;
+  position: relative;
 }
+
 .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;
-}
-
-/* Tablet */
-@media (max-width: 1024px) {
+  /* width: 463px; */
 }

 /* 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 */
-@media (max-width: 400px) {
+  .logoSection {
+    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;
+  } */
 }