FW-5751 update site app page part 1 (#589)

* Separate Apps page component- new content, old styling * Rename ResourcesApps to SiteApps * Rename Resources to SIteKeyboards and remove need for pageSlug * Use wysiwyg class for Keyboards text styling * Styling adjustments * Update copy on WidgetApp and remove Data and Container layers * Update alt text and set width * Reduce header font size * Make use of SectionTitle in WIdgetApps * Swap out FVLogo svgs
First-Peoples-Cultural-Council · Sep 11, 2024 · 6488f15 · 6488f15
1 parent 7fef85d
commit 6488f15
Show file tree

Hide file tree

Showing 21 changed files with 261 additions and 441 deletions.
diff --git a/src/common/icons/FVLogo.js b/src/common/icons/FVLogo.js
diff --git a/src/components/AppNavBar/AppNavBarPresentation.js b/src/components/AppNavBar/AppNavBarPresentation.js
@@ -14,9 +14,7 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {
   const [scrollAtTop, setScrollAtTop] = useState(true)
   const isGuest = user.isAnonymous
   const location = useLocation()
-  const isSearchPage =
-    location.pathname.startsWith(`/search`) ||
-    location.pathname.startsWith(`/languages`)
+  const isSearchPage = location.pathname.startsWith(`/search`) || location.pathname.startsWith(`/languages`)
 
   useEffect(() => {
     const listener = document.addEventListener('scroll', () => {
@@ -48,8 +46,7 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {
     'h-8 xl:h-10 group p-1 inline-flex items-center text-base xl:text-lg font-medium text-white hover:text-gray-300'
   const menuItemLabelStyling = 'ml-1 xl:ml-3 xl:mr-2 whitespace-nowrap'
 
-  const mobileMenuItemStyling =
-    'w-full py-3 px-1 text-fv-charcoal flex items-center rounded focus:ring-2'
+  const mobileMenuItemStyling = 'w-full py-3 px-1 text-fv-charcoal flex items-center rounded focus:ring-2'
   const mobileMenuItemLabelStyling = 'ml-3 font-medium'
 
   const createMobileMenuLink = ({ title, iconName, link }) => (
@@ -72,27 +69,19 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {
           {/* Logo */}
           <Link to="/" className="flex items-center">
             <span className="sr-only">FirstVoices Logo</span>
-            {getIcon('FVLogo', 'h-10 w-auto')}
+            {getIcon('FVLogo', 'h-10 w-auto fill-current text-white')}
           </Link>
 
           {/* Menu Items */}
           <ul className="hidden md:flex md:text-white md:items-center justify-end md:space-x-4">
             <li>
-              <Link
-                data-testid="NavBar-About-Link"
-                to="/about"
-                className={menuItemStyling}
-              >
+              <Link data-testid="NavBar-About-Link" to="/about" className={menuItemStyling}>
                 {getIcon('About', 'fill-current h-full w-auto')}
                 <p className={menuItemLabelStyling}>About</p>
               </Link>
             </li>
             <li>
-              <Link
-                data-testid="NavBar-Support-Link"
-                to="/support"
-                className={menuItemStyling}
-              >
+              <Link data-testid="NavBar-Support-Link" to="/support" className={menuItemStyling}>
                 {getIcon('QuestionCircleSolid', 'fill-current h-full w-auto')}
                 <p className={menuItemLabelStyling}>Support</p>
               </Link>
@@ -132,21 +121,14 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {
             {!isGuest && <UserMenu.Container />}
           </ul>
           {/* Landing Mobile Menu Button */}
-          <div
-            id="LandingMobileMenuButton"
-            className="flex items-center md:hidden"
-          >
+          <div id="LandingMobileMenuButton" className="flex items-center md:hidden">
             <button
               type="button"
               onClick={() => openCloseMobileLandingNavbar()}
               className="bg-fv-charcoal rounded-lg p-2 inline-flex items-center justify-center text-white hover:text-gray-100 focus:ring-2"
             >
-              <span className="sr-only">
-                {mobileLandingNavbarOpen ? 'Close menu' : 'Open menu'}
-              </span>
-              {mobileLandingNavbarOpen
-                ? getIcon('Close', 'h-6 w-6')
-                : getIcon('HamburgerMenu', 'h-6 w-6')}
+              <span className="sr-only">{mobileLandingNavbarOpen ? 'Close menu' : 'Open menu'}</span>
+              {mobileLandingNavbarOpen ? getIcon('Close', 'h-6 w-6') : getIcon('HamburgerMenu', 'h-6 w-6')}
             </button>
           </div>
         </div>
@@ -195,13 +177,8 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {
                 onClick={isGuest ? login : logout}
                 onKeyDown={isGuest ? login : logout}
               >
-                {getIcon(
-                  `${isGuest ? 'Login' : 'LogOut'}`,
-                  'fill-current h-12 w-8',
-                )}
-                <span className={mobileMenuItemLabelStyling}>
-                  {isGuest ? 'Sign in / Register' : 'Sign out'}
-                </span>
+                {getIcon(`${isGuest ? 'Login' : 'LogOut'}`, 'fill-current h-12 w-8')}
+                <span className={mobileMenuItemLabelStyling}>{isGuest ? 'Sign in / Register' : 'Sign out'}</span>
               </button>
             </li>
           </ul>

diff --git a/src/components/Dashboard/DashboardPresentation.js b/src/components/Dashboard/DashboardPresentation.js
@@ -20,7 +20,7 @@ function DashboardPresentation({ children, currentUser, site, logout }) {
         {getIcon(
           'LogOut',
 
-          'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6',
+          'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6'
         )}
         <span>Sign Out</span>
       </button>
@@ -34,14 +34,11 @@ function DashboardPresentation({ children, currentUser, site, logout }) {
         <div className="flex-1 flex flex-col min-h-0 bg-fv-charcoal divide-y divide-fv-charcoal-light space-y-2">
           <div className="flex-1 flex flex-col overflow-y-auto">
             <div className="flex items-center flex-shrink-0 m-4">
-              {getIcon('FVLogo', 'h-10 w-auto')}
+              {getIcon('FVLogo', 'h-10 w-auto fill-current text-white')}
             </div>
 
             <nav className="flex-1">
-              <DashboardPresentationSiteSelect
-                sites={currentUser?.sites}
-                site={site}
-              />
+              <DashboardPresentationSiteSelect sites={currentUser?.sites} site={site} />
               <div className="flex-1 divide-y divide-fv-charcoal-light space-y-2">
                 {primaryNavigationItems(site?.sitename)}
                 {secondaryNavigationItems(currentUser?.sites)}
@@ -106,15 +103,10 @@ const primaryNavigationItems = (currentSitename) => {
               data-testid={`DashboardPresentation${item.name}`}
               to={item.href}
               className={`group flex items-center p-2 text-sm font-medium rounded-lg ${
-                match
-                  ? 'bg-fv-charcoal-dark text-white'
-                  : 'text-gray-300 hover:bg-fv-charcoal-light hover:text-white'
+                match ? 'bg-fv-charcoal-dark text-white' : 'text-gray-300 hover:bg-fv-charcoal-light hover:text-white'
               }`}
             >
-              {getIcon(
-                item.icon,
-                'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6',
-              )}
+              {getIcon(item.icon, 'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6')}
               {item.name}
             </Link>
           </RequireAuth>
@@ -132,7 +124,7 @@ const secondaryNavigationItems = (sites) => {
         name: `${site?.title} site`,
         href: `/${site?.sitename}`,
         icon: 'BackArrow',
-      }),
+      })
     )
   }
 
@@ -146,7 +138,7 @@ const secondaryNavigationItems = (sites) => {
       >
         {getIcon(
           'QuestionCircleSolid',
-          'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6',
+          'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6'
         )}
         Support
       </a>
@@ -156,10 +148,7 @@ const secondaryNavigationItems = (sites) => {
           to={item.href}
           className="group flex items-center p-2 text-sm font-medium rounded-lg text-gray-300 hover:bg-fv-charcoal-light hover:text-white"
         >
-          {getIcon(
-            item.icon,
-            'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6',
-          )}
+          {getIcon(item.icon, 'text-gray-400 fill-current group-hover:text-gray-300 mr-4 flex-shrink-0 h-6 w-6')}
           {item.name}
         </Link>
       ))}

diff --git a/src/components/NavBar/NavBarPresentation.js b/src/components/NavBar/NavBarPresentation.js
@@ -11,26 +11,15 @@ import UserMenu from 'components/UserMenu'
 import JoinModalButton from 'components/JoinModalButton'
 import getIcon from 'common/utils/getIcon'
 
-function NavBarPresentation({
-  isHome,
-  isSearchPage,
-  mobileNavbarOpen,
-  openCloseMobileNavbar,
-  site,
-  siteLoading,
-}) {
+function NavBarPresentation({ isHome, isSearchPage, mobileNavbarOpen, openCloseMobileNavbar, site, siteLoading }) {
   const menuData = site?.menu || {}
 
   const generateMenu = (menu) => (
-    <NavBarPresentationMenu
-      key={`NavBarMenu_${menu?.id}`}
-      menuItemData={menu}
-      sitename={site?.sitename}
-    />
+    <NavBarPresentationMenu key={`NavBarMenu_${menu?.id}`} menuItemData={menu} sitename={site?.sitename} />
   )
 
   const fvlogo = isHome
-    ? getIcon('FVLogo', 'h-10 w-auto')
+    ? getIcon('FVLogo', 'h-10 w-auto fill-current text-white')
     : getIcon('FVShortLogo', 'h-10 w-auto')
 
   return (
@@ -71,12 +60,8 @@ function NavBarPresentation({
                 onClick={() => openCloseMobileNavbar()}
                 className="bg-fv-charcoal rounded-lg p-2 inline-flex items-center justify-center text-white hover:text-gray-100 focus:ring-2"
               >
-                <span className="sr-only">
-                  {mobileNavbarOpen ? 'Close menu' : 'Open menu'}
-                </span>
-                {mobileNavbarOpen
-                  ? getIcon('Close', 'h-6 w-6')
-                  : getIcon('HamburgerMenu', 'h-6 w-6')}
+                <span className="sr-only">{mobileNavbarOpen ? 'Close menu' : 'Open menu'}</span>
+                {mobileNavbarOpen ? getIcon('Close', 'h-6 w-6') : getIcon('HamburgerMenu', 'h-6 w-6')}
               </button>
             </div>
           </div>

diff --git a/src/components/Resource/ResourceContainer.js b/src/components/Resource/ResourceContainer.js
diff --git a/src/components/Resource/ResourcePresentation.js b/src/components/Resource/ResourcePresentation.js
diff --git a/src/components/Resource/index.js b/src/components/Resource/index.js