either I'm much smarter than I think or I'm incredibly lucky

Author: blueedgetechno

package-lock.json

@@ -20,7 +20,6 @@
     "axios": "^0.21.1",
     "color-parse": "^1.4.2",
     "color-rgba": "^2.4.0",
-    "html2canvas": "^1.4.1",
     "react": "^17.0.2",
     "react-calendar": "^3.6.0",
     "react-dom": "^17.0.2",

package.json

@@ -1,7 +1,7 @@
 .background {
   min-width: 100vw;
   min-height: 100%;
-  background-color: var(--wintheme);
+  background-color: #fefefe;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;

src/components/background/back.scss

@@ -73,3 +73,14 @@ body{
     opacity: 1;
   }
 }
+
+.press-in{
+  transition: transform 200ms ease-in-out;
+  &:active{
+    transform: scale(0.86);
+  }
+}
+
+.quick-trans{
+  transition: transform 100ms ease-in-out;
+}

src/components/main.scss

@@ -6,3 +6,4 @@ import './index.scss';
 
 export * from './whatsapp';
 export * from './youtube';
+export * from './playstore';

src/containers/apps/index.js

@@ -1,4 +1,4 @@
-.app-wrappper{
+.app-wrapper{
   pointer-events: auto;
   height: 100%;
   border-radius: 0;

src/containers/apps/index.scss

@@ -0,0 +1,33 @@
+import React, {useState, useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+
+import {Icon, Image, LazyComponent} from '../../../components/utils';
+import {dispatchAction, dispatchAct} from "../../../store/actions";
+
+const AppContainer = ({app, show, count}) => {
+  const clstring = `${app.payload}-wrapper`;
+
+  return (
+    <div className={"app-wrapper "+clstring} id={clstring} data-open={show}>
+      <div className="app-icon-container">
+        <Icon className="mdShad" src={"apps/" + app.icon} w={72} action="home/setHome"/>
+        <span>{count}</span>
+      </div>
+    </div>
+  );
+}
+
+export const PlaystoreApp = () => {
+  const [count, setCount] = useState(0);
+  const app = useSelector(state => state.home.apps.playstore || {});
+  const home = useSelector(state => state.home);
+  const show = home.ishome==false && home.stack.at(-1)==app.payload;
+
+  useEffect(()=>{
+    setCount(count + 1)
+  }, [home])
+
+  return <LazyComponent show={show}>
+    <AppContainer app={app} show={show} count={count}/>
+  </LazyComponent>
+}

src/containers/apps/playstore/index.js

@@ -1,20 +1,20 @@
-.app-wrappper{
+.app-wrapper{
   --app-bg: #fefefe;
   background: var(--app-bg);
 }
 
-.whatsapp-wrappper{
+.whatsapp-wrapper, .playstore-wrapper{
   --app-bg: #fefefe;
   background: var(--app-bg);
 }
 
-.whatsapp-viewport{
+.whatsapp-viewport, .playstore-viewport{
   --app-bg: #fefefe;
   --statusbg: var(--app-bg);
   --navbg: var(--app-bg);
 }
 
-.youtube-wrappper{
+.youtube-wrapper{
   --app-bg: #121212;
   background: var(--app-bg);
   color: #fefefe;

src/containers/apps/themes.scss

@@ -5,11 +5,12 @@ import {Icon, Image, LazyComponent} from '../../../components/utils';
 import {dispatchAction, dispatchAct} from "../../../store/actions";
 
 const AppContainer = ({app, show, count}) => {
+  const clstring = `${app.payload}-wrapper`;
 
   return (
-    <div className={"app-wrappper "+`${app.payload}-wrappper`} data-open={show}>
+    <div className={"app-wrapper "+clstring} id={clstring} data-open={show}>
       <div className="app-icon-container">
-        <Icon className="mdShad" src={"apps/bg/" + app.icon} w={72} action="home/setHome"/>
+        <Icon className="mdShad" src={"apps/" + app.icon} w={72} action="home/setHome"/>
         <span>{count}</span>
       </div>
     </div>

src/containers/apps/whatsapp/index.js

@@ -5,9 +5,10 @@ import {Icon, Image, LazyComponent} from '../../../components/utils';
 import {dispatchAction, dispatchAct} from "../../../store/actions";
 
 const AppContainer = ({app, show, count}) => {
+  const clstring = `${app.payload}-wrapper`;
 
   return (
-    <div className={"app-wrappper "+`${app.payload}-wrappper`} data-open={show}>
+    <div className={"app-wrapper "+clstring} id={clstring} data-open={show}>
       <div className="app-icon-container">
         <Icon className="mdShad" src={"apps/" + app.icon} w={72} action="home/setHome"/>
         <span>{count}</span>