diff --git a/src/Brands/bluehost/step-loader-logo.svg b/src/Brands/bluehost/step-loader-logo.svg new file mode 100644 index 000000000..86d672953 --- /dev/null +++ b/src/Brands/bluehost/step-loader-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Brands/hostgator/logo.svg b/src/Brands/hostgator/logo.svg index 9fa16f156..1c80087f9 100644 --- a/src/Brands/hostgator/logo.svg +++ b/src/Brands/hostgator/logo.svg @@ -1,31 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/OnboardingSPA/components/ImageUploader/index.js b/src/OnboardingSPA/components/ImageUploader/index.js index cef4335d0..c629665e2 100644 --- a/src/OnboardingSPA/components/ImageUploader/index.js +++ b/src/OnboardingSPA/components/ImageUploader/index.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { useRef, useState } from '@wordpress/element'; -import Loader from '../Loader'; +import { ImageUploadLoader } from '../Loaders'; import { uploadImage } from '../../utils/api/uploader'; /* @@ -51,7 +51,7 @@ const ImageUploader = ({ icon, iconSetter }) => { function loader(){ return (
- +
); } function getImageUploadWindow() { diff --git a/src/OnboardingSPA/components/Loader/index.js b/src/OnboardingSPA/components/Loader/index.js deleted file mode 100644 index be7572bd4..000000000 --- a/src/OnboardingSPA/components/Loader/index.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Infinite Loader. - * - * @returns - */ -const Loader = () => { - - return ( -
-
-
- ); -}; - -export default Loader; diff --git a/src/OnboardingSPA/components/Loader/stylesheet.scss b/src/OnboardingSPA/components/Loader/stylesheet.scss deleted file mode 100644 index 8756d804e..000000000 --- a/src/OnboardingSPA/components/Loader/stylesheet.scss +++ /dev/null @@ -1,33 +0,0 @@ -.loading-box { - width: 200px; - height: 25px; - position: relative; - border-radius: 50px; - overflow: hidden; - border: 2px solid #ededed; - - &__loader { - width: 100%; - height: 100%; - position: absolute; - border-radius: 50px; - background: linear-gradient(45deg, #b6b5ff, #ff9797); - left: 0%; - } - - &__loader { - left: -100%; - animation: load 3s linear infinite; - } -} - -// Loading Animation -@keyframes load { - 0% { - left: -100%; - } - - 100% { - left: 100%; - } -} \ No newline at end of file diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js new file mode 100644 index 000000000..6fde645e0 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js @@ -0,0 +1,9 @@ +const ImageUploadLoader = () => { + return ( +
+
+
+ ); +}; + +export default ImageUploadLoader; diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss new file mode 100644 index 000000000..4dec6c459 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss @@ -0,0 +1,35 @@ +.image-upload-loader { + + &--loading-box { + width: 200px; + height: 25px; + position: relative; + border-radius: 50px; + overflow: hidden; + border: 2px solid #ededed; + + &__loader { + width: 100%; + height: 100%; + position: absolute; + border-radius: 50px; + background: linear-gradient(45deg, #b6b5ff, #ff9797); + left: -100%; + animation: load 3s linear infinite; + } + } + + // Loading Animation + @keyframes load { + + 0% { + left: -100%; + } + + 100% { + left: 100%; + } + } + +} + diff --git a/src/OnboardingSPA/components/Loaders/Step/index.js b/src/OnboardingSPA/components/Loaders/Step/index.js new file mode 100644 index 000000000..ea84b1950 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Step/index.js @@ -0,0 +1,17 @@ +import CommonLayout from '../../Layouts/Common'; +import HeadingWithSubHeading from '../../HeadingWithSubHeading'; +import NeedHelpTag from '../../NeedHelpTag'; + +const StepLoader = ( { title, subtitle } ) => { + return ( + + +
+
+
+ + + ); +}; + +export default StepLoader; diff --git a/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss new file mode 100644 index 000000000..252a837bc --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss @@ -0,0 +1,8 @@ +.step-loader { + + &__logo { + width: 256px; + height: 256px; + background-image: var(--nfd-onboarding-step-loader-icon); + } +} diff --git a/src/OnboardingSPA/components/Loaders/index.js b/src/OnboardingSPA/components/Loaders/index.js new file mode 100644 index 000000000..dc19345bd --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/index.js @@ -0,0 +1,2 @@ +export { default as StepLoader } from "./Step"; +export { default as ImageUploadLoader } from "./ImageUpload"; diff --git a/src/OnboardingSPA/components/Loaders/stylesheet.scss b/src/OnboardingSPA/components/Loaders/stylesheet.scss new file mode 100644 index 000000000..07308445b --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/stylesheet.scss @@ -0,0 +1,2 @@ +@import "./ImageUpload/stylesheet"; +@import "./Step/stylesheet"; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index e226e14d7..27196c84c 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -25,6 +25,7 @@ body { --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); + --nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg"); } &.nfd-brand-hostgator { --wp-admin-theme-color: #2e93ee; diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 78bcc8e67..9c8c4f5f4 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -10,7 +10,7 @@ @import "../components/Content/stylesheet"; @import "../components/Layouts/stylesheet"; @import "../components/SkipButton/stylesheet"; -@import "../components/Loader/stylesheet"; +@import "../components/Loaders/stylesheet"; @import "../components/MiniPreview/stylesheet"; @import "../components/Tooltip/stylesheet"; @import "../components/ImageUploader/stylesheet";