@eeacms/volto-eea-design-system 1.0.0-beta.1 → 1.0.0-beta.3

package/CHANGELOG.md

@@ -4,6 +4,77 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-beta.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.2...1.0.0-beta.3) - 21 February 2023
+
+#### :rocket: New Features
+
+- feat(accordion): storybook accessibility by using buttons for titles #297 from eea/accessibility-accordion [ichim-david - [`809d52b`](https://github.com/eea/volto-eea-design-system/commit/809d52b203ef40fab735006b3b8358d68682f7cf)]
+
+#### :bug: Bug Fixes
+
+- fix(dropdown): remove close on blur so that we can navigate links using keyboard [David Ichim - [`5442715`](https://github.com/eea/volto-eea-design-system/commit/5442715e022b3eb2eeb709ff597f815947ac45bd)]
+
+#### :nail_care: Enhancements
+
+- change(language): restore dropdown duplication in order to properly show and hide language dropdown [David Ichim - [`cb28888`](https://github.com/eea/volto-eea-design-system/commit/cb28888ff19bd9894b58403e674f69de42ad8d09)]
+- change(language): hide language dropdown by default [David Ichim - [`cc6064f`](https://github.com/eea/volto-eea-design-system/commit/cc6064f72dcb4dbf96e9b05205cc796775d75205)]
+- change(header): top dropdown menu keyboard navigation #293 from eea/accessibility-megamenu-searchbox [ichim-david - [`1e6fa65`](https://github.com/eea/volto-eea-design-system/commit/1e6fa658e52b9d5e6cc38f065b5707b592005241)]
+- change(language): dropdown to use links for proper keyboard navigation [David Ichim - [`6a7de30`](https://github.com/eea/volto-eea-design-system/commit/6a7de30d9d229443d6d2070d9649129e6d35badf)]
+- change(search): to reflect changes from eea-website-theme [David Ichim - [`2cc35e0`](https://github.com/eea/volto-eea-design-system/commit/2cc35e0da6e6eac1473724293fcf6cd6b0a914b5)]
+- change(button): set focus styling for buttons [ichim-david - [`33ebfca`](https://github.com/eea/volto-eea-design-system/commit/33ebfcacb014fca365ae58079bfa5429d9007e54)]
+- change(footer): Avoid devtools warning in FooterActions #304 from eea/avoid_warning [ichim-david - [`d774824`](https://github.com/eea/volto-eea-design-system/commit/d774824c5d3d0998b3440ac83152428cfa821087)]
+- change(accessibility): style outline instead of box-shadow [David Ichim - [`53209f3`](https://github.com/eea/volto-eea-design-system/commit/53209f3b28c9a1dd54a8a86ab418b8bc2a8e01b3)]
+- change(header): set the logo class directly on the link [David Ichim - [`f8fba50`](https://github.com/eea/volto-eea-design-system/commit/f8fba508f925d9e6b86720fcb2c7dcfffee4ab5e)]
+- change(footer): Accessibility update p with h3 heading tag for theme sites title #302 from eea/footer-accessibility [ichim-david - [`5bf70de`](https://github.com/eea/volto-eea-design-system/commit/5bf70de97aee216a0b88f5843a290c6bcb5da6f2)]
+- change(documentation): Rename all image files to follow the agreed convention #301 from eea/refactor-image-filenames [ichim-david - [`cfe44ef`](https://github.com/eea/volto-eea-design-system/commit/cfe44ef79943af9b9179df1b8ec5f8c743e8bb39)]
+- refactor(Footer): update mobile header size [Antonis Tarantilis - [`01ab7f0`](https://github.com/eea/volto-eea-design-system/commit/01ab7f0d9abe688b3d96aaec018838e1abefec73)]
+- refactor(footer): update p with h3 heading tag for header [Antonis Tarantilis - [`ca1477b`](https://github.com/eea/volto-eea-design-system/commit/ca1477b554f56423d40a33d8ee788c3f3bd3e341)]
+- refactor(docusaurus): cleanup decorative images [Giorgos Stamatis - [`fedc4d4`](https://github.com/eea/volto-eea-design-system/commit/fedc4d4dc156f9c1394fcedcebece4fb87dc70b6)]
+- refactor(images): remove unused docusaurus svgs [Giorgos Stamatis - [`c5ef14c`](https://github.com/eea/volto-eea-design-system/commit/c5ef14cdb1923d803feb673559d41b3064211653)]
+- refactor(Accessibility): add box-shadow on focus-visible components [Antonis Tarantilis - [`b1adcc3`](https://github.com/eea/volto-eea-design-system/commit/b1adcc315a89c7d3431e542e8d1b6ec479a346e2)]
+- refactor(images): clear docusaurus unused pngs [Giorgos Stamatis - [`db5c611`](https://github.com/eea/volto-eea-design-system/commit/db5c61124182e3030f753f6baa294fbdecaa3798)]
+- refactor(Accordion): div titles to buttons, test in mobile mega menu accordions [Antonis Tarantilis - [`eaad4b4`](https://github.com/eea/volto-eea-design-system/commit/eaad4b479e37ebf5ac004cfc5759e0be603000a7)]
+- refactor(header): add escape key functionality, actions from div to button to have proper focus state [Antonis Tarantilis - [`8081aa4`](https://github.com/eea/volto-eea-design-system/commit/8081aa4e3b77f8a3dc89aa358408d75e3dca5579)]
+- refactor(images): cleared unused/renamed images assets [Giorgos Stamatis - [`821f5c1`](https://github.com/eea/volto-eea-design-system/commit/821f5c1da5c1e2350818cd9b8b82bc0b1893370d)]
+- refactor(header-images): removed unused [Giorgos Stamatis - [`8250d94`](https://github.com/eea/volto-eea-design-system/commit/8250d94421d9d1ee13144e71bc0938af2b7309f5)]
+- refactor(footer images): removed unused/renamed [Giorgos Stamatis - [`186de6b`](https://github.com/eea/volto-eea-design-system/commit/186de6b23906e05ec700c3db5180a4d7f7e5ed68)]
+
+#### :house: Internal changes
+
+- style(header): react syntax fix [Antonis Tarantilis - [`3add127`](https://github.com/eea/volto-eea-design-system/commit/3add1271c785a92bea0ef925d7bc562cef1e0d92)]
+
+#### :house: Documentation changes
+
+- docs(guidelines): add image name convention [Giorgos Stamatis - [`290747c`](https://github.com/eea/volto-eea-design-system/commit/290747c8df6919199577bc7fce6a0e337cb57853)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.3 [Alin Voinea - [`386c903`](https://github.com/eea/volto-eea-design-system/commit/386c9032d39317b0bb95191bd59e3b7a99bded69)]
+- Avoid warning in FooterActions [Tiberiu Ichim - [`0fe73d7`](https://github.com/eea/volto-eea-design-system/commit/0fe73d70e44e32be73049f3b5cf826de42115942)]
+### [1.0.0-beta.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.1...1.0.0-beta.2) - 13 February 2023
+
+#### :bug: Bug Fixes
+
+- fix(footer): action and copyright #300 from eea/develop [ichim-david - [`579f3e4`](https://github.com/eea/volto-eea-design-system/commit/579f3e436e9608b38a2407a16c070345462bfccc)]
+- fix(accessibility): added navigation and footer id's for skip link [David Ichim - [`48354b9`](https://github.com/eea/volto-eea-design-system/commit/48354b908e7d1a87b4e1a965d225e8f1b3e0ac59)]
+- fix(footer): action or copyright links are simple a tags for external link [David Ichim - [`9af5070`](https://github.com/eea/volto-eea-design-system/commit/9af5070187ec975e58387f133afedcf1bbc47a50)]
+
+#### :nail_care: Enhancements
+
+- change(navigation): raise z-index of go to top link [David Ichim - [`485ca72`](https://github.com/eea/volto-eea-design-system/commit/485ca7291da7a156b6b580c42e46d4f3602211bb)]
+- change(footer): modified footer gap [David Ichim - [`b8a820a`](https://github.com/eea/volto-eea-design-system/commit/b8a820ac90c7d6664e4d4655c2c06edfa976c64e)]
+- change(footer): added gap for actions and copyright [David Ichim - [`7d32ddd`](https://github.com/eea/volto-eea-design-system/commit/7d32ddd3c28a48c6c2fb73dea373bb5873b6f76b)]
+- change(footer): typos and modified footer links to be center aligned [David Ichim - [`ac23f04`](https://github.com/eea/volto-eea-design-system/commit/ac23f046bcac06525985dff7520bb2766dec44ec)]
+- change(footer): removed extra text and date from copyright section [David Ichim - [`af47bbe`](https://github.com/eea/volto-eea-design-system/commit/af47bbec298678fece6f879fbc18fe2e01ab0894)]
+
+#### :house: Internal changes
+
+- chore(docs): Update eea.hbs template to beta - refs #158717 [Alin Voinea - [`196538e`](https://github.com/eea/volto-eea-design-system/commit/196538ed7bb9dab36a0efb4cef84e96dd3038ff8)]
+
+#### :hammer_and_wrench: Others
+
+- change version to beta 2 [David Ichim - [`cbb0798`](https://github.com/eea/volto-eea-design-system/commit/cbb07981454b28de840561eca281888e8bc29f9e)]
+- Beta release [Alin Voinea - [`4ad51b3`](https://github.com/eea/volto-eea-design-system/commit/4ad51b3c2bbb75f19af14fa56afdbddf57b6c95e)]
 ### [1.0.0-beta.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.15...1.0.0-beta.1) - 9 February 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Accordion/Accordion.stories.js

@@ -107,6 +107,7 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 0}
           index={0}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle1}
           <Icon className="ri-arrow-down-s-line" />
@@ -114,12 +115,14 @@ function AccordionContainer({ ...args }) {
         <Accordion.Content active={activeIndex === 0}>
           {args.content1.length > 0 &&
             args.content1.map((item, index) => <p key={index}>{item}</p>)}
+          <a href="/#">Read more</a>
         </Accordion.Content>
 
         <Accordion.Title
           active={activeIndex === 1}
           index={1}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle2}
           <Icon className="ri-arrow-down-s-line" />
@@ -133,6 +136,7 @@ function AccordionContainer({ ...args }) {
           active={activeIndex === 2}
           index={2}
           onClick={toggleOpenAccordion}
+          as="button"
         >
           {args.toggle3}
           <Icon className="ri-arrow-down-s-line" />

package/src/ui/Footer/Footer.jsx

@@ -23,7 +23,7 @@ import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
 const Footer = (props) => {
   const { children } = props;
   return (
-    <footer>
+    <footer id={'footer'}>
       <div className="footer-wrapper">
         <Container>{children}</Container>
       </div>

package/src/ui/Footer/Footer.stories.js

@@ -36,7 +36,10 @@ Default.args = {
     { link: '/#', title: 'Sitemap' },
     { link: '/#', title: 'CMS Login' },
   ],
-  copyright: [{ link: '/#', site: 'EEA' }],
+  copyright: [
+    { link: 'https://status.eea.europa.eu/', title: 'System status' },
+    { link: '/#', title: '© Copyright 2023 EEA' },
+  ],
   sites: [
     { link: '/#', src: Marine, alt: 'WISE marine' },
     { link: '/#', src: Freshwater, alt: 'WISE freshwater' },

package/src/ui/Footer/FooterActions.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
 
 const FooterActions = (props) => {
@@ -14,9 +13,14 @@ const FooterActions = (props) => {
           <div className="actions">
             {props.actions &&
               props.actions.map((action, index) => (
-                <Link to={action.link} key={index}>
+                <a
+                  href={action.link}
+                  key={index}
+                  target={'_blank'}
+                  rel={'noreferrer'}
+                >
                   {action.title}
-                </Link>
+                </a>
               ))}
           </div>
         </Grid.Column>
@@ -25,9 +29,16 @@ const FooterActions = (props) => {
           <div className="copyright">
             {props.copyright &&
               props.copyright.map((copyright, index) => (
-                <Link to={copyright.link} key={index}>
-                  &copy; Copyright {new Date().getFullYear()} {copyright.site}
-                </Link>
+                <React.Fragment key={index}>
+                  <a
+                    href={copyright.link}
+                    key={index}
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                  >
+                    {copyright.title}
+                  </a>
+                </React.Fragment>
               ))}
           </div>
         </Grid.Column>

package/src/ui/Footer/FooterHeader.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const FooterHeader = (props) => {
   return (
     <div className="theme-sites">
-      <p className="header text-center">{props.children}</p>
+      <h3 className="header text-center">{props.children}</h3>
     </div>
   );
 };

package/src/ui/Header/Header.jsx

@@ -41,7 +41,7 @@ const TopDropdownMenu = ({
   children,
   className,
   icon,
-  hasLanguageDropdown = true,
+  hasLanguageDropdown = false,
   id,
   tabletText,
   mobileText,
@@ -62,8 +62,9 @@ const TopDropdownMenu = ({
               text={mobileText || text}
               icon={icon || 'chevron down'}
               aria-label="dropdown"
-              closeOnChange={false}
-              closeOnBlur={true}
+              closeOnChange={true}
+              closeOnBlur={false}
+              closeOnEscape={true}
             >
               <Dropdown.Menu role="group">{children}</Dropdown.Menu>
             </Dropdown>
@@ -75,8 +76,9 @@ const TopDropdownMenu = ({
             text={mobileText || text}
             icon={icon || 'chevron down'}
             aria-label="dropdown"
-            closeOnChange={false}
-            closeOnBlur={true}
+            closeOnChange={true}
+            closeOnBlur={false}
+            closeOnEscape={true}
           >
             <Dropdown.Menu role="group">{children}</Dropdown.Menu>
           </Dropdown>
@@ -200,6 +202,32 @@ const Main = ({
     }
   };
 
+  // Listens for escape keydown event
+  React.useEffect(() => {
+    const escKeyPressed = (e) => {
+      if (e.key === 'Escape') {
+        // menuOnClickOutside();
+        // restore active element if nothing was selected from the menu dropdown
+        if (pathname !== activeItem) {
+          setActiveItem(pathname);
+        }
+        // close mobile navigation when clicking outside if we have value for nav
+        if (burger) {
+          setBurger('');
+        }
+        // always close the  menu & search
+        setMenuIsActive(false);
+        setSearchIsActive(false);
+      }
+    };
+
+    document.addEventListener('keydown', escKeyPressed);
+
+    return () => {
+      document.removeEventListener('keydown', escKeyPressed);
+    };
+  }, [activeItem, burger, pathname]);
+
   // React.useEffect(() => {
   //   if (searchIsActive || burger === 'open' || menuIsActive) {
   //     document.body.style.overflow = 'hidden';
@@ -236,6 +264,7 @@ const Main = ({
                 <div
                   className="ui text eea-main-menu tablet or lower hidden menu"
                   ref={desktopMenuRef}
+                  id={'navigation'}
                 >
                   {menuItems.map((item) => (
                     <Menu.Item
@@ -254,10 +283,12 @@ const Main = ({
                 </div>
               )}
               {!hideSearch && (
-                <div
+                <button
                   className="search-action"
                   onClick={searchOnClick}
-                  role="none"
+                  tabIndex="0"
+                  aria-pressed="false"
+                  aria-haspopup="true"
                   ref={searchButtonRef}
                 >
                   {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
@@ -265,7 +296,7 @@ const Main = ({
                     src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
                     alt="search button open/close"
                   />
-                </div>
+                </button>
               )}
               <Header.BurgerAction
                 className={`mobile ${burger}`}
@@ -302,14 +333,16 @@ const Main = ({
 };
 
 const BurgerAction = React.forwardRef((props, ref) => (
-  <div
+  <button
     ref={ref}
     className={`burger-action ${props.className}`}
-    role="none"
+    tabIndex="0"
+    aria-pressed="false"
+    aria-haspopup="true"
     onClick={props.onClick}
   >
     {props.children}
-  </div>
+  </button>
 ));
 
 Header.BurgerAction = BurgerAction;

package/src/ui/Header/Header.stories.js

@@ -1371,14 +1371,18 @@ const Template = (args) => {
                   as="li"
                   key={index}
                   text={
-                    <span>
+                    <a
+                      href={'/' + item.code}
+                      onClick={() => setLanguage(item.code)}
+                      tabIndex={0}
+                      className={'language-link'}
+                    >
                       {item.name}
                       <span className="country-code">
                         {item.code.toUpperCase()}
                       </span>
-                    </span>
+                    </a>
                   }
-                  onClick={() => setLanguage(item.code)}
                 ></Dropdown.Item>
               ))}
             </ul>

package/src/ui/Header/HeaderMenuPopUp.js

@@ -176,7 +176,7 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
               defaultIndex = index;
             }
             x.title = (
-              <Accordion.Title key={`title=${index}`}>
+              <Accordion.Title key={`title=${index}`} as="button">
                 {item.title}
                 <Icon className="ri-arrow-down-s-line" size="small" />
               </Accordion.Title>
@@ -279,7 +279,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
       defaultIndex = index;
     }
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index}>
+      <Accordion.Title key={`title-${index}`} index={index} as="button">
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>

package/src/ui/Header/HeaderSearchPopUp.js

@@ -10,9 +10,9 @@ function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
 
   return (
     <div id="search-box" ref={nodeRef}>
-      <form>
+      <div className="wrapper">
         <Container>
-          <div className="wrapper">
+          <form>
             <Input
               ref={searchInputRef}
               className="search"
@@ -20,30 +20,21 @@ function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
               placeholder="Search..."
               fluid
             />
-            {/* <div className="action">
-            <Button icon labelPosition="left" className="search">
-              <Icon name="search" />
-              Advanced Search
-            </Button>
-          </div> */}
-          </div>
+          </form>
         </Container>
-      </form>
 
-      <div className="advanced-search">
-        <Container>
-          <p>
-            Looking for more information? Try searching the full EEA website
-            content
-          </p>
-          <a
-            href="/"
-            className="ui button white inverted"
-            title="Advanced search"
-          >
-            Go to full site search
-          </a>
-        </Container>
+        <div className="advanced-search">
+          <Container>
+            <div>For more search options</div>
+            <a
+              href="/"
+              className="ui button white inverted"
+              title="Advanced search"
+            >
+              Go to advanced search
+            </a>
+          </Container>
+        </div>
       </div>
     </div>
   );

package/src/ui/Logo/Logo.jsx

@@ -15,7 +15,7 @@ import { Image } from 'semantic-ui-react';
  */
 const Logo = ({ src, invertedSrc, id, url, alt, title, inverted }) => {
   return (
-    <Link to={url} title={title}>
+    <Link to={url} title={title} className={'logo'}>
       <Image
         src={inverted ? invertedSrc : src}
         alt={alt}

package/templates/eea.hbs

@@ -2,7 +2,7 @@
 title: What's new
 ---
 
-### EEA Design System (1.0.0-alpha)
+### EEA Design System (1.0.0-beta)
 
 #### Components ready to be used
 

package/theme/themes/eea/elements/loader.overrides

@@ -20,7 +20,7 @@
       rgba(255, 255, 255, 0),
       rgba(255, 255, 255, 0)
     ),
-    url('../assets/images/loaderImage.png');
+    url('../assets/images/loader-image.png');
   background-position: @eeaLoaderBackgroundPosition;
   background-repeat: no-repeat;
   border-radius: @eeaLoaderBorderRadius;
@@ -35,7 +35,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   5% {
@@ -43,7 +43,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   10% {
@@ -51,7 +51,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   15% {
@@ -59,7 +59,7 @@
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.1)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   20% {
@@ -67,7 +67,7 @@
         rgba(255, 255, 255, 0.2),
         rgba(255, 255, 255, 0.2)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   25% {
@@ -75,7 +75,7 @@
         rgba(255, 255, 255, 0.3),
         rgba(255, 255, 255, 0.3)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   30% {
@@ -83,7 +83,7 @@
         rgba(255, 255, 255, 0.4),
         rgba(255, 255, 255, 0.4)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   35% {
@@ -91,7 +91,7 @@
         rgba(255, 255, 255, 0.5),
         rgba(255, 255, 255, 0.5)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   40% {
@@ -99,7 +99,7 @@
         rgba(255, 255, 255, 0.6),
         rgba(255, 255, 255, 0.6)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   45% {
@@ -107,7 +107,7 @@
         rgba(255, 255, 255, 0.7),
         rgba(255, 255, 255, 0.7)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   50% {
@@ -115,7 +115,7 @@
         rgba(255, 255, 255, 0.75),
         rgba(255, 255, 255, 0.8)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   55% {
@@ -123,7 +123,7 @@
         rgba(255, 255, 255, 0.7),
         rgba(255, 255, 255, 0.7)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   60% {
@@ -131,7 +131,7 @@
         rgba(255, 255, 255, 0.6),
         rgba(255, 255, 255, 0.6)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   65% {
@@ -139,7 +139,7 @@
         rgba(255, 255, 255, 0.5),
         rgba(255, 255, 255, 0.5)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   70% {
@@ -147,7 +147,7 @@
         rgba(255, 255, 255, 0.4),
         rgba(255, 255, 255, 0.4)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   75% {
@@ -155,7 +155,7 @@
         rgba(255, 255, 255, 0.3),
         rgba(255, 255, 255, 0.3)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   80% {
@@ -163,7 +163,7 @@
         rgba(255, 255, 255, 0.2),
         rgba(255, 255, 255, 0.2)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   85% {
@@ -171,7 +171,7 @@
         rgba(255, 255, 255, 0.1),
         rgba(255, 255, 255, 0.1)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   90% {
@@ -179,7 +179,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   95% {
@@ -187,7 +187,7 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 
   100% {
@@ -195,6 +195,6 @@
         rgba(255, 255, 255, 0),
         rgba(255, 255, 255, 0)
       ),
-      url('../assets/images/loaderImage.png');
+      url('../assets/images/loader-image.png');
   }
 }