Updated the 404 error page with the new design and add the provided Lottie animation. #600

APOORVA456 · 2020-03-10T10:57:39Z

Description

Updated the 404 error page with the new design and add the provided Lottie animation.

Issue Link: #567

Kindly Review it @Paarmita

Screenshots :

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

welcome · 2020-03-10T10:57:41Z

Thanks for opening this pull request! Please check out our contributing guidelines.

src/ignitus-Routes/notFound.js

divyanshu-rawat

LGTM @APOORVA456 , Please try to resolve husky suggestions, as it has left some review for you.

divyanshu-rawat · 2020-03-10T11:30:03Z

@Paarmita , @gittysachin , @debck please have a look into the PR 👍

gittysachin

Please resolve hound suggestions as well.

src/ignitus-Routes/Styles/style.scss

divyanshu-rawat

Nice work! but I must admit please refrain using px, vw instead use rem in margin, padding, width. #577 was all about this, introducing vw will make it more complex.

src/ignitus-Routes/notFound.js

hound · 2020-03-10T13:40:26Z

src/ignitus-Routes/notFound.js

-        <Link to="/">
+import Lottie from 'react-lottie'
+import animationData from '../ignitus-Routes/Styles/404animation.json';
+//path to animation  file


Expected exception block, space or tab after '//' in comment spaced-comment

src/ignitus-Routes/Styles/style.scss

hound · 2020-03-10T13:54:07Z

src/ignitus-Routes/Styles/style.scss

+        color: {
+
+        };
+      p {


Rule declaration should be preceded by an empty line
Selector should have depth of applicability no greater than 2, but was 3

src/ignitus-Routes/Styles/style.scss

hound · 2020-03-10T13:54:09Z

src/ignitus-Routes/Styles/style.scss

 .container-404 {
    min-height: 60vh;
-    width: 100vw;
+    width: 100%;


Line should be indented 2 spaces, but was indented 4 spaces

gittysachin

Please resolve codacy errors. Everything else looks good.

hound · 2020-03-10T14:04:12Z

src/ignitus-Routes/Styles/style.scss

+            // color: blue;
+            color: rgb(10, 33, 151);
+            font-size: 25px;
+          a {


Rule declaration should be preceded by an empty line
Selector should have depth of applicability no greater than 2, but was 4

APOORVA456 · 2020-03-10T14:05:53Z

Please resolve codacy errors. Everything else looks good.

Okay Sure.

package.json

src/ignitus-Routes/notFound.js

hound · 2020-03-10T14:41:11Z

src/ignitus-Routes/notFound.js

+                width={500}/>
+      </div>
+      </div>
+     </div>


Expected closing tag to match indentation of opening react/jsx-closing-tag-location
Expected indentation of 3 space characters but found 5 react/jsx-indent

hound · 2020-03-10T14:41:11Z

src/ignitus-Routes/notFound.js

+                height={400}
+                width={500}/>
+      </div>
+      </div>


Expected closing tag to match indentation of opening react/jsx-closing-tag-location
Expected indentation of 7 space characters but found 6 react/jsx-indent

hound · 2020-03-10T14:41:11Z

src/ignitus-Routes/notFound.js

+         <Lottie options={defaultOptions}
+                height={400}
+                width={500}/>
+      </div>


Expected closing tag to match indentation of opening react/jsx-closing-tag-location
Expected indentation of 8 space characters but found 6 react/jsx-indent

hound · 2020-03-10T14:41:11Z

src/ignitus-Routes/notFound.js

+        <div className="animation">
+         <Lottie options={defaultOptions}
+                height={400}
+                width={500}/>


A space is required before closing bracket react/jsx-tag-spacing
Expected indentation of 11 space characters but found 16 react/jsx-indent-props
The closing bracket must be aligned with the line containing the opening tag (expected column 10 on the next line) react/jsx-closing-bracket-location

hound · 2020-03-10T14:41:11Z

src/ignitus-Routes/notFound.js

+        {/* Lottie Animation */}
+        <div className="animation">
+         <Lottie options={defaultOptions}
+                height={400}


Expected indentation of 11 space characters but found 16 react/jsx-indent-props

hound · 2020-03-10T14:41:13Z

src/ignitus-Routes/notFound.js

+        <div className="content">
+         <p ><b>Oops!</b></p>
+         <p>We can&apos;t seem to  find the page you were looking for&nbsp;</p>
+         <p>


Expected indentation of 10 space characters but found 9 react/jsx-indent

hound · 2020-03-10T14:41:13Z

src/ignitus-Routes/notFound.js

+       <div className="container-404">
+        <div className="content">
+         <p ><b>Oops!</b></p>
+         <p>We can&apos;t seem to  find the page you were looking for&nbsp;</p>


Expected indentation of 10 space characters but found 9 react/jsx-indent

hound · 2020-03-10T14:41:13Z

src/ignitus-Routes/notFound.js

+   <div>
+       <div className="container-404">
+        <div className="content">
+         <p ><b>Oops!</b></p>


Expected indentation of 10 space characters but found 9 react/jsx-indent

hound · 2020-03-10T14:41:13Z

src/ignitus-Routes/notFound.js

+  (
+   <div>
+       <div className="container-404">
+        <div className="content">


Expected indentation of 9 space characters but found 8 react/jsx-indent

hound · 2020-03-10T14:41:14Z

src/ignitus-Routes/notFound.js

+export const Notfound = () =>
+  (
+   <div>
+       <div className="container-404">


Expected indentation of 5 space characters but found 7 react/jsx-indent

Paarmita · 2020-03-10T19:42:01Z

@APOORVA456 Can you please fix the width and height so that the animation does not cut on the sides, it looks like this for me.

Also, it is not responsive enough, Please fix these issues.

Paarmita · 2020-03-11T10:30:02Z

@APOORVA456 Also, update your PR with the develop branch and not master #605

divyanshu-rawat

Thanks for your work @APOORVA456 thanks a lot, I just realised the it would be great if we put some gif there, react-lottie has severely affected the performance of the app, cost of adding react-lottie is very high see here. https://bundlephobia.com/[email protected] in comparison to that what it is providing what do you think @gittysachin , @debck , @Paarmita .

divyanshu-rawat · 2020-03-11T14:25:56Z

Lets find a gif add it there :)

APOORVA456 · 2020-03-11T14:41:06Z

Thanks for your work @APOORVA456 thanks a lot, I just realised the it would be great if we put some gif there, react-lottie has severely affected the performance of the app, cost of adding react-lottie is very high see here. https://bundlephobia.com/[email protected] in comparison to that what it is providing what do you think @gittysachin , @debck , @Paarmita .

Yeah..It has affected the performance.

divyanshu-rawat · 2020-03-11T14:44:12Z

can you and @Paarmita can look for some gif :) , as I can see lottie animation is continuously running and causing lot 3D rendering.

divyanshu-rawat · 2020-03-11T14:44:37Z

Here are some free ones in giphy - https://giphy.com/gifs/404-14uQ3cOFteDaU

Paarmita · 2020-03-11T15:16:39Z

@APOORVA456 @divyanshu-rawat Leave the idea of GIF as it will also consume space, let's use CSS for this. Here are some examples

We just need to use our theme color and font. Also, add the link to the Home page.

What do you think?

APOORVA456 · 2020-03-12T05:55:17Z

@Paarmita I noticed that in second one ,GIF is embedded in CSS so it will rise the same issue as earlier.
I think first one would be better as it's color matches with our theme and and just have to add the home page link.

gittysachin

@divyanshu-rawat @Paarmita @APOORVA456 let's just leave the react-lottie because it'll reduce the performance of the app. GIFs won't look good and will surely take some extra space. We should go for CSS animation rather than using the GIF.

divyanshu-rawat · 2020-03-12T21:40:47Z

@APOORVA456 please go ahead with the 1st one then, and please remove react-lottie as a dependency from your package.json file.

Updated UI and added Lottie Animation for 404 Not Found Page

bf88e31

auto-assign bot requested review from debck, divyanshu-rawat, gittysachin and Paarmita March 10, 2020 10:57

pr-triage bot added the PR: unreviewed label Mar 10, 2020

hound bot reviewed Mar 10, 2020

View reviewed changes

src/ignitus-Routes/notFound.js Show resolved Hide resolved

divyanshu-rawat reviewed Mar 10, 2020

View reviewed changes

gittysachin suggested changes Mar 10, 2020

View reviewed changes

src/ignitus-Routes/Styles/style.scss Outdated Show resolved Hide resolved

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Mar 10, 2020

divyanshu-rawat requested changes Mar 10, 2020

View reviewed changes

Updated the requested changes .

eb5d05a

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Mar 10, 2020

hound bot reviewed Mar 10, 2020

View reviewed changes

Minor Updates

9d424fe

hound bot reviewed Mar 10, 2020

View reviewed changes

APOORVA456 requested a review from gittysachin March 10, 2020 13:56

gittysachin suggested changes Mar 10, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Mar 10, 2020

Updates

19c86a7

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Mar 10, 2020

hound bot reviewed Mar 10, 2020

View reviewed changes

gittysachin reviewed Mar 10, 2020

View reviewed changes

package.json Show resolved Hide resolved

gittysachin reviewed Mar 10, 2020

View reviewed changes

src/ignitus-Routes/notFound.js Outdated Show resolved Hide resolved

divyanshu-rawat reviewed Mar 10, 2020

View reviewed changes

src/ignitus-Routes/notFound.js Outdated Show resolved Hide resolved

APOORVA456 added 2 commits March 10, 2020 20:05

Recent Updates in Indentation

a4332c4

Updates

745e4c5

hound bot reviewed Mar 10, 2020

View reviewed changes

divyanshu-rawat reviewed Mar 11, 2020

View reviewed changes

gittysachin reviewed Mar 12, 2020

View reviewed changes

APOORVA456 closed this Mar 13, 2020

APOORVA456 reopened this Mar 13, 2020

APOORVA456 closed this Mar 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updated the 404 error page with the new design and add the provided Lottie animation. #600

Updated the 404 error page with the new design and add the provided Lottie animation. #600

APOORVA456 commented Mar 10, 2020 •

edited

Loading

welcome bot commented Mar 10, 2020

divyanshu-rawat left a comment

divyanshu-rawat commented Mar 10, 2020

gittysachin left a comment

divyanshu-rawat left a comment

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

gittysachin left a comment •

edited

Loading

hound bot Mar 10, 2020

APOORVA456 commented Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

hound bot Mar 10, 2020

Paarmita commented Mar 10, 2020

Paarmita commented Mar 11, 2020

divyanshu-rawat left a comment

divyanshu-rawat commented Mar 11, 2020

APOORVA456 commented Mar 11, 2020

divyanshu-rawat commented Mar 11, 2020

divyanshu-rawat commented Mar 11, 2020 •

edited

Loading

Paarmita commented Mar 11, 2020 •

edited

Loading

APOORVA456 commented Mar 12, 2020

gittysachin left a comment

divyanshu-rawat commented Mar 12, 2020

Updated the 404 error page with the new design and add the provided Lottie animation. #600

Updated the 404 error page with the new design and add the provided Lottie animation. #600

Conversation

APOORVA456 commented Mar 10, 2020 • edited Loading

Description

Screenshots :

Types of changes

Checklist:

welcome bot commented Mar 10, 2020

divyanshu-rawat left a comment

Choose a reason for hiding this comment

divyanshu-rawat commented Mar 10, 2020

gittysachin left a comment

Choose a reason for hiding this comment

divyanshu-rawat left a comment

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

gittysachin left a comment • edited Loading

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

APOORVA456 commented Mar 10, 2020

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

hound bot Mar 10, 2020

Choose a reason for hiding this comment

Paarmita commented Mar 10, 2020

Paarmita commented Mar 11, 2020

divyanshu-rawat left a comment

Choose a reason for hiding this comment

divyanshu-rawat commented Mar 11, 2020

APOORVA456 commented Mar 11, 2020

divyanshu-rawat commented Mar 11, 2020

divyanshu-rawat commented Mar 11, 2020 • edited Loading

Paarmita commented Mar 11, 2020 • edited Loading

APOORVA456 commented Mar 12, 2020

gittysachin left a comment

Choose a reason for hiding this comment

divyanshu-rawat commented Mar 12, 2020

APOORVA456 commented Mar 10, 2020 •

edited

Loading

gittysachin left a comment •

edited

Loading

divyanshu-rawat commented Mar 11, 2020 •

edited

Loading

Paarmita commented Mar 11, 2020 •

edited

Loading