From c24af09afb8cf972cfc0af2ab56dbd55020c4876 Mon Sep 17 00:00:00 2001
From: eemaanamir <eemaan.amir@gmail.com>
Date: Thu, 21 Nov 2024 13:43:06 +0500
Subject: [PATCH 1/3] fix: fixed reponsiveness issues on mobile view

---
 src/profile-v2/CertificateCard.jsx     | 53 +++++++++++---
 src/profile-v2/Certificates.jsx        | 98 +++++++++++++++-----------
 src/profile-v2/ProfilePage.jsx         | 69 +++++++++++++++---
 src/profile-v2/UsernameDescription.jsx | 33 +++++----
 src/profile-v2/index.scss              |  3 +
 5 files changed, 186 insertions(+), 70 deletions(-)

diff --git a/src/profile-v2/CertificateCard.jsx b/src/profile-v2/CertificateCard.jsx
index bbdb55f6b..53005ea17 100644
--- a/src/profile-v2/CertificateCard.jsx
+++ b/src/profile-v2/CertificateCard.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
+import { breakpoints, Hyperlink, useWindowSize } from '@openedx/paragon';
 import get from 'lodash.get';
 
+import classNames from 'classnames';
 import professionalCertificateSVG from './assets/professional-certificate.svg';
 import verifiedCertificateSVG from './assets/verified-certificate.svg';
 import messages from './Certificates.messages';
@@ -27,6 +28,8 @@ const CertificateCard = ({
     audit: null,
   }[certificateType] || null;
 
+  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+
   return (
     <div
       key={`${modifiedDate}-${courseId}`}
@@ -37,24 +40,47 @@ const CertificateCard = ({
           className="certificate-type-illustration"
           style={{ backgroundImage: `url(${certificateIllustration})` }}
         />
-        <div className="d-flex flex-column position-relative p-0 width-19625rem">
+        <div className={classNames(
+          'd-flex flex-column position-relative p-0',
+          { 'max-width-19rem': isMobileView },
+          { 'width-19625rem': !isMobileView },
+        )}
+        >
           <div className="w-100 color-black">
-            <p className="small mb-0 font-weight-normal">
+            <p className={classNames([
+              'mb-0 font-weight-normal',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
               {intl.formatMessage(get(
                 messages,
                 `profile.certificates.types.${certificateType}`,
                 messages['profile.certificates.types.unknown'],
               ))}
             </p>
-            <h4 className="m-0 color-black">{courseDisplayName}</h4>
-            <p className="small mb-0">
+            <p className={classNames([
+              'm-0 color-black',
+              isMobileView ? 'h5' : 'h4',
+            ])}
+            >
+              {courseDisplayName}
+            </p>
+            <p className={classNames([
+              'mb-0',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
               <FormattedMessage
                 id="profile.certificate.organization.label"
                 defaultMessage="From"
               />
             </p>
             <h5 className="mb-0 color-black">{courseOrganization}</h5>
-            <p className="small mb-0">
+            <p className={classNames([
+              'mb-0',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+            >
               <FormattedMessage
                 id="profile.certificate.completion.date.label"
                 defaultMessage="Completed on {date}"
@@ -69,12 +95,20 @@ const CertificateCard = ({
               destination={downloadUrl}
               target="_blank"
               showLaunchIcon={false}
-              className="btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem"
+              className={classNames(
+                'btn btn-primary btn-rounded font-weight-normal px-4 py-0625rem',
+                { 'btn-sm': isMobileView },
+              )}
             >
               {intl.formatMessage(messages['profile.certificates.view.certificate'])}
             </Hyperlink>
           </div>
-          <p className="small mb-0 pt-3">
+          <p
+            className={classNames([
+              'mb-0 pt-3',
+              isMobileView ? 'x-small' : 'small',
+            ])}
+          >
             <FormattedMessage
               id="profile.certificate.uuid"
               defaultMessage="Credential ID {certificate_uuid}"
@@ -91,7 +125,8 @@ const CertificateCard = ({
 
 CertificateCard.propTypes = {
   certificateType: PropTypes.string,
-  courseDisplayName: PropTypes.string,
+  courseDisplayName:
+  PropTypes.string,
   courseOrganization: PropTypes.string,
   modifiedDate: PropTypes.string,
   downloadUrl: PropTypes.string,
diff --git a/src/profile-v2/Certificates.jsx b/src/profile-v2/Certificates.jsx
index cd8a227ee..9061cf34b 100644
--- a/src/profile-v2/Certificates.jsx
+++ b/src/profile-v2/Certificates.jsx
@@ -4,53 +4,71 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import CertificateCard from './CertificateCard';
 import { certificatesSelector } from './data/selectors';
 
-const Certificates = ({ certificates }) => (
-  <div>
-    <div className="col justify-content-start align-items-start g-5rem p-0">
-      <div className="col align-self-stretch height-2625rem justify-content-start align-items-start p-0">
-        <h2 className="font-weight-bold text-primary-500 m-0">
-          <FormattedMessage
-            id="profile.your.certificates"
-            defaultMessage="Your certificates"
-            description="heading for the certificates section"
-          />
-        </h2>
+const Certificates = ({ certificates }) => {
+  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
+  return (
+    <div>
+      <div className="col justify-content-start align-items-start g-5rem p-0">
+        <div className="col align-self-stretch height-2625rem justify-content-start align-items-start p-0">
+          <p className={classNames([
+            'font-weight-bold text-primary-500 m-0',
+            isMobileView ? 'h3' : 'h2',
+          ])}
+          >
+            <FormattedMessage
+              id="profile.your.certificates"
+              defaultMessage="Your certificates"
+              description="heading for the certificates section"
+            />
+          </p>
+        </div>
+        <div className="col justify-content-start align-items-start pt-2 p-0">
+          <p className={classNames([
+            'font-weight-normal text-gray-800 m-0 p-0',
+            isMobileView ? 'h5' : 'p',
+          ])}
+          >
+            <FormattedMessage
+              id="profile.certificates.description"
+              defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
+              description="description of the certificates section"
+              values={{
+                siteName: getConfig().SITE_NAME,
+              }}
+            />
+          </p>
+        </div>
       </div>
-      <div className="col justify-content-start align-items-start pt-2 p-0">
-        <p className="font-weight-normal text-gray-800 m-0 p-0">
+      {certificates?.length > 0 ? (
+        <div className="col">
+          <div className={classNames(
+            'row align-items-center pt-5 g-3rem',
+            { 'justify-content-center': isTabletView },
+          )}
+          >
+            {certificates.map(certificate => (
+              <CertificateCard key={certificate.courseId} {...certificate} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="pt-5">
           <FormattedMessage
-            id="profile.certificates.description"
-            defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
-            description="description of the certificates section"
-            values={{
-              siteName: getConfig().SITE_NAME,
-            }}
+            id="profile.no.certificates"
+            defaultMessage="You don't have any certificates yet."
+            description="displays when user has no course completion certificates"
           />
-        </p>
-      </div>
-    </div>
-    {certificates?.length > 0 ? (
-      <div className="col">
-        <div className="row align-items-center pt-5 g-3rem">
-          {certificates.map(certificate => (
-            <CertificateCard key={certificate.courseId} {...certificate} />
-          ))}
         </div>
-      </div>
-    ) : (
-      <div className="pt-5">
-        <FormattedMessage
-          id="profile.no.certificates"
-          defaultMessage="You don't have any certificates yet."
-          description="displays when user has no course completion certificates"
-        />
-      </div>
-    )}
-  </div>
-);
+      )}
+    </div>
+  );
+};
 
 Certificates.propTypes = {
   certificates: PropTypes.arrayOf(PropTypes.shape({
diff --git a/src/profile-v2/ProfilePage.jsx b/src/profile-v2/ProfilePage.jsx
index 22bcf7179..c853ae30a 100644
--- a/src/profile-v2/ProfilePage.jsx
+++ b/src/profile-v2/ProfilePage.jsx
@@ -7,7 +7,13 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@openedx/paragon';
+import {
+  Alert,
+  Hyperlink,
+  breakpoints,
+  useWindowSize,
+} from '@openedx/paragon';
+import classNames from 'classnames';
 import {
   fetchProfile,
   saveProfilePhoto,
@@ -42,6 +48,8 @@ const ProfilePage = ({ params }) => {
   } = useSelector(profilePageSelector);
 
   const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
+  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
 
   useEffect(() => {
     const { CREDENTIALS_BASE_URL } = context.config;
@@ -81,7 +89,10 @@ const ProfilePage = ({ params }) => {
 
     return (
       <Hyperlink
-        className="btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
+        className={classNames(
+          'btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap',
+          { 'btn-sm': isMobileView },
+        )}
         target="_blank"
         showLaunchIcon={false}
         destination={viewMyRecordsUrl}
@@ -109,10 +120,21 @@ const ProfilePage = ({ params }) => {
         <PageLoading srMessage={intl.formatMessage(messages['profile.loading'])} />
       ) : (
         <>
-          <div className="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100">
+          <div
+            className={classNames(
+              'profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100',
+              { 'px-4.5': isMobileView },
+              { 'px-75rem': !isMobileView },
+            )}
+          >
             <div className="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75">
               <div className="col h-100 w-100 py-4 px-0 justify-content-start g-15rem">
-                <div className="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem">
+                <div
+                  className={classNames([
+                    'row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem',
+                    isMobileView || isTabletView ? 'flex-column' : 'flex-row',
+                  ])}
+                >
                   <ProfileAvatar
                     className="col p-0"
                     src={profileImage.src}
@@ -122,17 +144,46 @@ const ProfilePage = ({ params }) => {
                     savePhotoState={savePhotoState}
                     isEditable={isAuthenticatedUserProfile() && !requiresParentalConsent}
                   />
-                  <div className="col justify-content-start align-items-start h-100 w-100 m-0 p-0">
-                    <h1 className="row h3 m-0 font-weight-bold text-truncate text-primary-500">{params.username}</h1>
+                  <div
+                    className={classNames([
+                      'col h-100 w-100 m-0 p-0',
+                      isMobileView || isTabletView
+                        ? 'd-flex flex-column justify-content-center align-items-center'
+                        : 'justify-content-start align-items-start',
+                    ])}
+                  >
+                    <p className={classNames([
+                      'row m-0 font-weight-bold text-truncate text-primary-500',
+                      isMobileView ? 'h4' : 'h3',
+                    ])}
+                    >
+                      {params.username}
+                    </p>
                     {isBlockVisible(name) && (
-                      <p className="row pt-2 text-gray-800 font-weight-normal m-0">{name}</p>
+                    <p className={classNames([
+                      'row pt-2 text-gray-800 font-weight-normal m-0',
+                      isMobileView ? 'h5' : 'p',
+                    ])}
+                    >
+                      {name}
+                    </p>
+                    )}
+                    <div className={classNames(
+                      'row pt-2 m-0',
+                      isMobileView
+                        ? 'd-flex justify-content-center align-items-center flex-column'
+                        : 'g-1rem',
                     )}
-                    <div className="row pt-2 m-0 g-1rem">
+                    >
                       <DateJoined date={dateJoined} />
                       <UserCertificateSummary count={courseCertificates.length} />
                     </div>
                   </div>
-                  <div className="col-auto p-0">
+                  <div className={classNames([
+                    'p-0 ',
+                    isMobileView || isTabletView ? 'col d-flex justify-content-center' : 'col-auto',
+                  ])}
+                  >
                     {renderViewMyRecordsButton()}
                   </div>
                 </div>
diff --git a/src/profile-v2/UsernameDescription.jsx b/src/profile-v2/UsernameDescription.jsx
index bbbd70333..d807903bc 100644
--- a/src/profile-v2/UsernameDescription.jsx
+++ b/src/profile-v2/UsernameDescription.jsx
@@ -1,18 +1,27 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 
-const UsernameDescription = () => (
-  <p className="text-gray-800 font-weight-normal m-0">
-    <FormattedMessage
-      id="profile.username.description"
-      defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
-      description="A description of the username field"
-      values={{
-        siteName: getConfig().SITE_NAME,
-      }}
-    />
-  </p>
-);
+const UsernameDescription = () => {
+  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  return (
+    <p className={classNames([
+      'text-gray-800 font-weight-normal m-0',
+      isMobileView ? 'h5' : 'p',
+    ])}
+    >
+      <FormattedMessage
+        id="profile.username.description"
+        defaultMessage="Your learner records information is only visible to you. Only your username is visible to others on {siteName}."
+        description="A description of the username field"
+        values={{
+          siteName: getConfig().SITE_NAME,
+        }}
+      />
+    </p>
+  );
+};
 
 export default UsernameDescription;
diff --git a/src/profile-v2/index.scss b/src/profile-v2/index.scss
index 32762c523..0538ccfcd 100644
--- a/src/profile-v2/index.scss
+++ b/src/profile-v2/index.scss
@@ -151,6 +151,9 @@
   max-width: 32em;
 }
 
+.max-width-19rem{
+    max-width: 19rem;
+}
 .width-75rem {
   width: 75rem;
 }

From 99d3a296b40ad8f7d57b4dbbebea5ec29047a5e3 Mon Sep 17 00:00:00 2001
From: eemaanamir <eemaan.amir@gmail.com>
Date: Thu, 21 Nov 2024 14:50:59 +0500
Subject: [PATCH 2/3] test: updated tests

---
 .../__snapshots__/ProfilePage.test.jsx.snap   | 102 +++++++++---------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
index d0434b33a..204043b89 100644
--- a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
@@ -31,7 +31,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
     class="profile-page"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
     >
       <div
         class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
@@ -40,7 +40,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -69,15 +69,15 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               </form>
             </div>
             <div
-              class="col justify-content-start align-items-start h-100 w-100 m-0 p-0"
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
-              <h1
-                class="row h3 m-0 font-weight-bold text-truncate text-primary-500"
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
               >
                 staff
-              </h1>
+              </p>
               <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0"
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
               >
                 user
               </p>
@@ -111,7 +111,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               </div>
             </div>
             <div
-              class="col-auto p-0"
+              class="p-0  col-auto"
             >
               <a
                 class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
@@ -127,7 +127,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             class="row-auto d-flex align-items-center h-100 w-100 justify-content-start m-0 pt-4"
           >
             <p
-              class="text-gray-800 font-weight-normal m-0"
+              class="text-gray-800 font-weight-normal m-0 p"
             >
               Your learner records information is only visible to you. Only your username is visible to others on localhost.
             </p>
@@ -148,17 +148,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
           <div
             class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
           >
-            <h2
-              class="font-weight-bold text-primary-500 m-0"
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
             >
               Your certificates
-            </h2>
+            </p>
           </div>
           <div
             class="col justify-content-start align-items-start pt-2 p-0"
           >
             <p
-              class="font-weight-normal text-gray-800 m-0 p-0"
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
             >
               Your learner records information is only visible to you. Only your username is visible to others on localhost.
             </p>
@@ -181,7 +181,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
     class="profile-page"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
     >
       <div
         class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
@@ -190,7 +190,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -235,15 +235,15 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </form>
             </div>
             <div
-              class="col justify-content-start align-items-start h-100 w-100 m-0 p-0"
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
-              <h1
-                class="row h3 m-0 font-weight-bold text-truncate text-primary-500"
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
               >
                 staff
-              </h1>
+              </p>
               <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0"
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
               >
                 Lemon Seltzer
               </p>
@@ -277,7 +277,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </div>
             </div>
             <div
-              class="col-auto p-0"
+              class="p-0  col-auto"
             >
               <a
                 class="pgn__hyperlink default-link standalone-link btn btn-brand btn-rounded font-weight-normal px-4 py-0625rem text-nowrap"
@@ -308,17 +308,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
           <div
             class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
           >
-            <h2
-              class="font-weight-bold text-primary-500 m-0"
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
             >
               Your certificates
-            </h2>
+            </p>
           </div>
           <div
             class="col justify-content-start align-items-start pt-2 p-0"
           >
             <p
-              class="font-weight-normal text-gray-800 m-0 p-0"
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
             >
               Your learner records information is only visible to you. Only your username is visible to others on localhost.
             </p>
@@ -347,17 +347,17 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     class="w-100 color-black"
                   >
                     <p
-                      class="small mb-0 font-weight-normal"
+                      class="mb-0 font-weight-normal small"
                     >
                       Verified Certificate
                     </p>
-                    <h4
-                      class="m-0 color-black"
+                    <p
+                      class="m-0 color-black h4"
                     >
                       edX Demonstration Course
-                    </h4>
+                    </p>
                     <p
-                      class="small mb-0"
+                      class="mb-0 small"
                     >
                       From
                     </p>
@@ -367,7 +367,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                       edX
                     </h5>
                     <p
-                      class="small mb-0"
+                      class="mb-0 small"
                     >
                       Completed on 
                       3/4/2019
@@ -386,7 +386,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     </a>
                   </div>
                   <p
-                    class="small mb-0 pt-3"
+                    class="mb-0 pt-3 small"
                   >
                     Credential ID 
                   </p>
@@ -407,7 +407,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
     class="profile-page"
   >
     <div
-      class="profile-page-bg-banner bg-primary d-md-block align-items-center px-75rem py-4rem h-100 w-100"
+      class="profile-page-bg-banner bg-primary d-md-block align-items-center py-4rem h-100 w-100 px-75rem"
     >
       <div
         class="col container-fluid w-100 h-100 bg-white py-0 px-25rem rounded-75"
@@ -416,7 +416,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
           class="col h-100 w-100 py-4 px-0 justify-content-start g-15rem"
         >
           <div
-            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem"
+            class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
           >
             <div
               class="profile-avatar-wrap position-relative"
@@ -461,15 +461,15 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </form>
             </div>
             <div
-              class="col justify-content-start align-items-start h-100 w-100 m-0 p-0"
+              class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
-              <h1
-                class="row h3 m-0 font-weight-bold text-truncate text-primary-500"
+              <p
+                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
               >
                 staff
-              </h1>
+              </p>
               <p
-                class="row pt-2 text-gray-800 font-weight-normal m-0"
+                class="row pt-2 text-gray-800 font-weight-normal m-0 p"
               >
                 Lemon Seltzer
               </p>
@@ -503,7 +503,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </div>
             </div>
             <div
-              class="col-auto p-0"
+              class="p-0  col-auto"
             />
           </div>
           <div
@@ -525,17 +525,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
           <div
             class="col align-self-stretch height-2625rem justify-content-start align-items-start p-0"
           >
-            <h2
-              class="font-weight-bold text-primary-500 m-0"
+            <p
+              class="font-weight-bold text-primary-500 m-0 h2"
             >
               Your certificates
-            </h2>
+            </p>
           </div>
           <div
             class="col justify-content-start align-items-start pt-2 p-0"
           >
             <p
-              class="font-weight-normal text-gray-800 m-0 p-0"
+              class="font-weight-normal text-gray-800 m-0 p-0 p"
             >
               Your learner records information is only visible to you. Only your username is visible to others on localhost.
             </p>
@@ -564,17 +564,17 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     class="w-100 color-black"
                   >
                     <p
-                      class="small mb-0 font-weight-normal"
+                      class="mb-0 font-weight-normal small"
                     >
                       Verified Certificate
                     </p>
-                    <h4
-                      class="m-0 color-black"
+                    <p
+                      class="m-0 color-black h4"
                     >
                       edX Demonstration Course
-                    </h4>
+                    </p>
                     <p
-                      class="small mb-0"
+                      class="mb-0 small"
                     >
                       From
                     </p>
@@ -584,7 +584,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                       edX
                     </h5>
                     <p
-                      class="small mb-0"
+                      class="mb-0 small"
                     >
                       Completed on 
                       3/4/2019
@@ -603,7 +603,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     </a>
                   </div>
                   <p
-                    class="small mb-0 pt-3"
+                    class="mb-0 pt-3 small"
                   >
                     Credential ID 
                   </p>

From 43b03829f0a9c98ab5779045f9e6bc90611d5d37 Mon Sep 17 00:00:00 2001
From: eemaanamir <eemaan.amir@gmail.com>
Date: Fri, 22 Nov 2024 15:57:17 +0500
Subject: [PATCH 3/3] refactor: refactored code as requested

---
 src/profile-v2/CertificateCard.jsx     |  8 ++++----
 src/profile-v2/Certificates.jsx        | 17 +++++++++++++----
 src/profile-v2/ProfilePage.jsx         | 12 ++++--------
 src/profile-v2/UsernameDescription.jsx |  4 ++--
 src/profile-v2/data/hooks.js           | 11 +++++++++++
 5 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/profile-v2/data/hooks.js

diff --git a/src/profile-v2/CertificateCard.jsx b/src/profile-v2/CertificateCard.jsx
index 53005ea17..360a7c811 100644
--- a/src/profile-v2/CertificateCard.jsx
+++ b/src/profile-v2/CertificateCard.jsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { breakpoints, Hyperlink, useWindowSize } from '@openedx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import get from 'lodash.get';
 
 import classNames from 'classnames';
 import professionalCertificateSVG from './assets/professional-certificate.svg';
 import verifiedCertificateSVG from './assets/verified-certificate.svg';
 import messages from './Certificates.messages';
+import { useIsOnMobileScreen } from './data/hooks';
 
 const CertificateCard = ({
   certificateType,
@@ -28,7 +29,7 @@ const CertificateCard = ({
     audit: null,
   }[certificateType] || null;
 
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isMobileView = useIsOnMobileScreen();
 
   return (
     <div
@@ -125,8 +126,7 @@ const CertificateCard = ({
 
 CertificateCard.propTypes = {
   certificateType: PropTypes.string,
-  courseDisplayName:
-  PropTypes.string,
+  courseDisplayName: PropTypes.string,
   courseOrganization: PropTypes.string,
   modifiedDate: PropTypes.string,
   downloadUrl: PropTypes.string,
diff --git a/src/profile-v2/Certificates.jsx b/src/profile-v2/Certificates.jsx
index 9061cf34b..3591832c0 100644
--- a/src/profile-v2/Certificates.jsx
+++ b/src/profile-v2/Certificates.jsx
@@ -5,13 +5,13 @@ import { connect } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 
 import classNames from 'classnames';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
 import CertificateCard from './CertificateCard';
 import { certificatesSelector } from './data/selectors';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
 const Certificates = ({ certificates }) => {
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
-  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
   return (
     <div>
       <div className="col justify-content-start align-items-start g-5rem p-0">
@@ -53,7 +53,16 @@ const Certificates = ({ certificates }) => {
           )}
           >
             {certificates.map(certificate => (
-              <CertificateCard key={certificate.courseId} {...certificate} />
+              <CertificateCard
+                key={certificate.courseId}
+                certificateType={certificate.certificateType}
+                courseDisplayName={certificate.courseDisplayName}
+                courseOrganization={certificate.courseOrganization}
+                modifiedDate={certificate.modifiedDate}
+                downloadUrl={certificate.downloadUrl}
+                courseId={certificate.courseId}
+                uuid={certificate.uuid}
+              />
             ))}
           </div>
         </div>
diff --git a/src/profile-v2/ProfilePage.jsx b/src/profile-v2/ProfilePage.jsx
index c853ae30a..9db64afcd 100644
--- a/src/profile-v2/ProfilePage.jsx
+++ b/src/profile-v2/ProfilePage.jsx
@@ -7,12 +7,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Alert,
-  Hyperlink,
-  breakpoints,
-  useWindowSize,
-} from '@openedx/paragon';
+import { Alert, Hyperlink } from '@openedx/paragon';
 import classNames from 'classnames';
 import {
   fetchProfile,
@@ -28,6 +23,7 @@ import PageLoading from './PageLoading';
 import { profilePageSelector } from './data/selectors';
 import messages from './ProfilePage.messages';
 import withParams from '../utils/hoc';
+import { useIsOnMobileScreen, useIsOnTabletScreen } from './data/hooks';
 
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
@@ -48,8 +44,8 @@ const ProfilePage = ({ params }) => {
   } = useSelector(profilePageSelector);
 
   const [viewMyRecordsUrl, setViewMyRecordsUrl] = useState(null);
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
-  const isTabletView = useWindowSize().width <= breakpoints.medium.minWidth;
+  const isMobileView = useIsOnMobileScreen();
+  const isTabletView = useIsOnTabletScreen();
 
   useEffect(() => {
     const { CREDENTIALS_BASE_URL } = context.config;
diff --git a/src/profile-v2/UsernameDescription.jsx b/src/profile-v2/UsernameDescription.jsx
index d807903bc..dd496e599 100644
--- a/src/profile-v2/UsernameDescription.jsx
+++ b/src/profile-v2/UsernameDescription.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import classNames from 'classnames';
-import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { useIsOnMobileScreen } from './data/hooks';
 
 const UsernameDescription = () => {
-  const isMobileView = useWindowSize().width <= breakpoints.small.minWidth;
+  const isMobileView = useIsOnMobileScreen();
   return (
     <p className={classNames([
       'text-gray-800 font-weight-normal m-0',
diff --git a/src/profile-v2/data/hooks.js b/src/profile-v2/data/hooks.js
new file mode 100644
index 000000000..1bf1a472f
--- /dev/null
+++ b/src/profile-v2/data/hooks.js
@@ -0,0 +1,11 @@
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+
+export function useIsOnTabletScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.medium.minWidth;
+}
+
+export function useIsOnMobileScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.small.minWidth;
+}