From 288640e2a9008fcf31170fdbdae3cc674ad9a322 Mon Sep 17 00:00:00 2001 From: jquispe-oddball Date: Wed, 4 Dec 2024 12:04:19 -0500 Subject: [PATCH 01/18] 97602 - progress --- .../components/common/Header/Header.jsx | 3 -- .../components/common/Header/Header.scss | 26 +++++++++++ .../Header/MobileHeader/MobileHeader.jsx | 9 +--- .../Header/MobileHeader/MobileLogoRow.jsx | 45 ++++++++----------- .../MobileOfficialGovtWebsite.jsx | 1 + .../common/Header/common/UserNav.jsx | 4 +- src/site/assets/img/va.svg | 1 + 7 files changed, 50 insertions(+), 39 deletions(-) create mode 100644 src/site/assets/img/va.svg diff --git a/src/applications/accredited-representative-portal/components/common/Header/Header.jsx b/src/applications/accredited-representative-portal/components/common/Header/Header.jsx index 1e0fc944589b..1a85df8827f2 100644 --- a/src/applications/accredited-representative-portal/components/common/Header/Header.jsx +++ b/src/applications/accredited-representative-portal/components/common/Header/Header.jsx @@ -1,7 +1,5 @@ import React from 'react'; - import MobileHeader from './MobileHeader/MobileHeader'; -import WiderThanMobileHeader from './WiderThanMobileHeader/WiderThanMobileHeader'; import './Header.scss'; @@ -9,7 +7,6 @@ const Header = () => { return (
-
); }; diff --git a/src/applications/accredited-representative-portal/components/common/Header/Header.scss b/src/applications/accredited-representative-portal/components/common/Header/Header.scss index 5b3c7217e051..abca7a687bb1 100644 --- a/src/applications/accredited-representative-portal/components/common/Header/Header.scss +++ b/src/applications/accredited-representative-portal/components/common/Header/Header.scss @@ -1,5 +1,31 @@ @import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables"; @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins"; +.mobile-nav { + padding: 1.5px 8px; + + &__sign-in { + width: auto; + margin-left: auto; + } + + &__link { + align-items: center; + } + &__logo { + height: 24px; + margin-right: 10px; + + &-text { + display: flex; + flex-wrap: wrap; + width: 40%; + color: var(--vads-color-white); + text-decoration: none; + line-height: 15.08px; + font-size: 12px; + } + } +} .arp-header { min-height: 78px; diff --git a/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileHeader.jsx b/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileHeader.jsx index a231e76d0408..96df170ad3c3 100644 --- a/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileHeader.jsx +++ b/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileHeader.jsx @@ -5,13 +5,8 @@ import MobileLogoRow from './MobileLogoRow'; const MobileHeader = () => { return ( -
-
- -
+
+
); diff --git a/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileLogoRow.jsx b/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileLogoRow.jsx index 63be5ee2f8dc..07d89006bd64 100644 --- a/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileLogoRow.jsx +++ b/src/applications/accredited-representative-portal/components/common/Header/MobileHeader/MobileLogoRow.jsx @@ -4,33 +4,24 @@ import UserNav from '../common/UserNav'; export const MobileLogoRow = () => { return ( -
); } + + return
{content}
; }; UserNav.propTypes = { diff --git a/src/applications/accredited-representative-portal/components/common/Header/UserNavLinks.jsx b/src/applications/accredited-representative-portal/components/common/Header/UserNavLinks.jsx index a487d2951204..672c36087b33 100644 --- a/src/applications/accredited-representative-portal/components/common/Header/UserNavLinks.jsx +++ b/src/applications/accredited-representative-portal/components/common/Header/UserNavLinks.jsx @@ -1,17 +1,18 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { SIGN_OUT_URL } from '../../../constants'; const UserNavLinks = () => { return (