refactor(Loader):remove image & add background image

eea · Mar 10, 2022 · 70fe041 · 70fe041
1 parent e984771
commit 70fe041
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 24 deletions.
diff --git a/src/ui/Loader/Loader.stories.jsx b/src/ui/Loader/Loader.stories.jsx
@@ -1,27 +1,15 @@
 import React from 'react';
 import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react';
-import loaderImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/loaderImage.png';
 
 export default {
   title: 'Components/Loader',
   component: Loader,
   argTypes: {
-    image: {
-      description: "path or url of loader's image",
+    content: {
+      description: 'loader primary content',
       table: {
         type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '',
-        },
-      },
-    },
-    text: {
-      description: 'text to appear in loader',
-      table: {
-        type: {
-          summary: 'string',
+          summary: 'custom',
         },
         defaultValue: {
           summary: '',
@@ -34,10 +22,7 @@ export default {
 const Template = (args) => (
   <Segment>
     <Dimmer active>
-      <Loader>
-        <Image src={args.image} alt="EEA loader logo" />
-        <p>{args.text}</p>
-      </Loader>
+      <Loader {...args} />
     </Dimmer>
 
     <Image
@@ -49,6 +34,5 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  image: loaderImage,
-  text: 'Loading...',
+  content: 'Loading...',
 };
diff --git a/theme/themes/eea/elements/loader.overrides b/theme/themes/eea/elements/loader.overrides
@@ -10,12 +10,15 @@
 .ui.text.loader {
   display: flex;
   width: 205px !important;
-  flex-direction: column;
-  align-items: center;
+  height: 210px !important;
+  align-items: end;
   justify-content: center;
-  padding-bottom: (@medium + @textDistance);
+  padding-bottom: 1em;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 72px 30px 0px 32px;
   font-size: @bigFontSize;
   font-weight: @loaderTextFontWeight;
+  background-image: url('../assets/images/loaderImage.png');
+  background-repeat:no-repeat;
+  background-position:center;
 }