From 986262a8ef37454c94709f2ad64dd1790ff45c44 Mon Sep 17 00:00:00 2001
From: Yousef El-Dardiry <yousefdardiry@gmail.com>
Date: Wed, 29 Dec 2021 16:00:08 +0100
Subject: [PATCH 1/2] move assets to src

---
 README.md                                     |   2 +-
 .../editor/src/app/main/components/Logo.tsx   |   3 ++-
 .../main/components/StartScreen.module.css    |   4 +++-
 .../src/app/main/components/StartScreen.tsx   |  22 +++++++++++-------
 .../components/startscreen}/assets/demo.png   | Bin
 .../components/startscreen}/assets/globe.svg  |   0
 .../components/startscreen}/assets/intro.gif  | Bin
 .../startscreen}/assets/lightning.svg         |   0
 .../startscreen}/assets/notebook_preview.jpg  | Bin
 .../components/startscreen}/assets/npm.svg    |   0
 .../{public => src}/assets/app_logo.svg       |   0
 .../editor/{public => src}/assets/logo.svg    |   0
 .../{public => src}/assets/logo_with_text.svg |   0
 13 files changed, 20 insertions(+), 11 deletions(-)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/demo.png (100%)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/globe.svg (100%)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/intro.gif (100%)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/lightning.svg (100%)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/notebook_preview.jpg (100%)
 rename packages/editor/{public => src/app/main/components/startscreen}/assets/npm.svg (100%)
 rename packages/editor/{public => src}/assets/app_logo.svg (100%)
 rename packages/editor/{public => src}/assets/logo.svg (100%)
 rename packages/editor/{public => src}/assets/logo_with_text.svg (100%)

diff --git a/README.md b/README.md
index c1dc68d9e..204e0939f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-![TypeCell Logo](./packages/editor/public/assets/logo_with_text.svg?raw=true)
+![TypeCell Logo](./packages/editor/src/assets/logo_with_text.svg?raw=true)
 
 Welcome to TypeCell! Let's reimagine how we can make it easier to understand, build and share knowledge.
 
diff --git a/packages/editor/src/app/main/components/Logo.tsx b/packages/editor/src/app/main/components/Logo.tsx
index 7e453f4bb..a381749aa 100644
--- a/packages/editor/src/app/main/components/Logo.tsx
+++ b/packages/editor/src/app/main/components/Logo.tsx
@@ -1,4 +1,5 @@
 import { getStoreService } from "../../../store/local/stores";
+import logo_with_text from "../../../assets/logo_with_text.svg";
 import styles from "./Logo.module.css";
 
 export const Logo = () => {
@@ -12,7 +13,7 @@ export const Logo = () => {
         e.preventDefault();
         navigationStore.showStartScreen();
       }}>
-      <img src="/assets/logo_with_text.svg" alt="TypeCell Logo" />
+      <img src={logo_with_text} alt="TypeCell Logo" />
     </a>
   );
 };
diff --git a/packages/editor/src/app/main/components/StartScreen.module.css b/packages/editor/src/app/main/components/StartScreen.module.css
index 6faf481f9..026a790e9 100644
--- a/packages/editor/src/app/main/components/StartScreen.module.css
+++ b/packages/editor/src/app/main/components/StartScreen.module.css
@@ -10,7 +10,9 @@
 .introduction {
   padding: 3em 0 11em 0;
   position: relative;
-  background: linear-gradient(0deg, #eff7fc, #eff7fc);
+  background: url(../../../assets/logo.svg),
+    linear-gradient(0deg, #eff7fc, #eff7fc);
+  /* background: linear-gradient(0deg, #eff7fc, #eff7fc); */
 }
 
 .introduction .github {
diff --git a/packages/editor/src/app/main/components/StartScreen.tsx b/packages/editor/src/app/main/components/StartScreen.tsx
index 3b4cf17b2..b3643c4a2 100644
--- a/packages/editor/src/app/main/components/StartScreen.tsx
+++ b/packages/editor/src/app/main/components/StartScreen.tsx
@@ -3,6 +3,12 @@ import styles from "./StartScreen.module.css";
 import GitHubButton from "react-github-btn";
 import { getStoreService } from "../../../store/local/stores";
 import { NotebookOverviewItem } from "./NotebookOverviewItem";
+import app_logo from "../../../assets/app_logo.svg";
+import intro from "./startscreen/assets/intro.gif";
+import lightning from "./startscreen/assets/lightning.svg";
+import globe from "./startscreen/assets/globe.svg";
+import notebook_preview from "./startscreen/assets/notebook_preview.jpg";
+import npm from "./startscreen/assets/npm.svg";
 
 export const StartScreen = observer(() => {
   const { navigationStore, sessionStore } = getStoreService();
@@ -33,7 +39,7 @@ export const StartScreen = observer(() => {
             <div className={styles.row + " row"}>
               <img
                 className={styles.logo}
-                src="/assets/app_logo.svg"
+                src={app_logo}
                 alt="TypeCell app logo"
               />
             </div>
@@ -66,7 +72,7 @@ export const StartScreen = observer(() => {
         <section className={styles.demo}>
           <div className="container">
             <div className={styles.code_block}>
-              <img src="/assets/intro.gif" alt="TypeCell Demo" />
+              <img src={intro} alt="TypeCell Demo" />
             </div>
           </div>
         </section>
@@ -76,7 +82,7 @@ export const StartScreen = observer(() => {
             <div className={styles.perk_row + " row"}>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/lightning.svg" alt="Lightning icon" />
+                  <img src={lightning} alt="Lightning icon" />
                 </div>
                 <span>
                   Execute code changes in realtime, directly in your browser
@@ -85,14 +91,14 @@ export const StartScreen = observer(() => {
               <div className={styles.separator}></div>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/npm.svg" alt="NPM logo" />
+                  <img src={npm} alt="NPM logo" />
                 </div>
                 <span>Instantly use npm modules in your notebook</span>
               </div>
               <div className={styles.separator}></div>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/globe.svg" alt="Globe icon" />
+                  <img src={globe} alt="Globe icon" />
                 </div>
                 <span>Colaborate with anyone in an instant</span>
               </div>
@@ -116,7 +122,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="Import & transform CSV"
                 description="See if we can import and manipulate some data"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Niklas",
                   profileImageUrl: "",
@@ -127,7 +133,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="3D prototype. Work with new models and cameras"
                 description="Load a 3D model with adjustable camera interface"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Yousef",
                   profileImageUrl: "",
@@ -138,7 +144,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="Use React graphs"
                 description="Use React graph library to display various bar charts"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Pieter",
                   profileImageUrl: "",
diff --git a/packages/editor/public/assets/demo.png b/packages/editor/src/app/main/components/startscreen/assets/demo.png
similarity index 100%
rename from packages/editor/public/assets/demo.png
rename to packages/editor/src/app/main/components/startscreen/assets/demo.png
diff --git a/packages/editor/public/assets/globe.svg b/packages/editor/src/app/main/components/startscreen/assets/globe.svg
similarity index 100%
rename from packages/editor/public/assets/globe.svg
rename to packages/editor/src/app/main/components/startscreen/assets/globe.svg
diff --git a/packages/editor/public/assets/intro.gif b/packages/editor/src/app/main/components/startscreen/assets/intro.gif
similarity index 100%
rename from packages/editor/public/assets/intro.gif
rename to packages/editor/src/app/main/components/startscreen/assets/intro.gif
diff --git a/packages/editor/public/assets/lightning.svg b/packages/editor/src/app/main/components/startscreen/assets/lightning.svg
similarity index 100%
rename from packages/editor/public/assets/lightning.svg
rename to packages/editor/src/app/main/components/startscreen/assets/lightning.svg
diff --git a/packages/editor/public/assets/notebook_preview.jpg b/packages/editor/src/app/main/components/startscreen/assets/notebook_preview.jpg
similarity index 100%
rename from packages/editor/public/assets/notebook_preview.jpg
rename to packages/editor/src/app/main/components/startscreen/assets/notebook_preview.jpg
diff --git a/packages/editor/public/assets/npm.svg b/packages/editor/src/app/main/components/startscreen/assets/npm.svg
similarity index 100%
rename from packages/editor/public/assets/npm.svg
rename to packages/editor/src/app/main/components/startscreen/assets/npm.svg
diff --git a/packages/editor/public/assets/app_logo.svg b/packages/editor/src/assets/app_logo.svg
similarity index 100%
rename from packages/editor/public/assets/app_logo.svg
rename to packages/editor/src/assets/app_logo.svg
diff --git a/packages/editor/public/assets/logo.svg b/packages/editor/src/assets/logo.svg
similarity index 100%
rename from packages/editor/public/assets/logo.svg
rename to packages/editor/src/assets/logo.svg
diff --git a/packages/editor/public/assets/logo_with_text.svg b/packages/editor/src/assets/logo_with_text.svg
similarity index 100%
rename from packages/editor/public/assets/logo_with_text.svg
rename to packages/editor/src/assets/logo_with_text.svg

From 22b6856ce221dd01f4e0cb398034cb513353cb7c Mon Sep 17 00:00:00 2001
From: Yousef El-Dardiry <yousefdardiry@gmail.com>
Date: Wed, 29 Dec 2021 16:06:21 +0100
Subject: [PATCH 2/2] add real bg pattern

---
 .../editor/src/app/main/components/StartScreen.module.css     | 2 +-
 .../main/components/startscreen/assets/background_pattern.svg | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor/src/app/main/components/startscreen/assets/background_pattern.svg

diff --git a/packages/editor/src/app/main/components/StartScreen.module.css b/packages/editor/src/app/main/components/StartScreen.module.css
index 026a790e9..c80aa0ece 100644
--- a/packages/editor/src/app/main/components/StartScreen.module.css
+++ b/packages/editor/src/app/main/components/StartScreen.module.css
@@ -10,7 +10,7 @@
 .introduction {
   padding: 3em 0 11em 0;
   position: relative;
-  background: url(../../../assets/logo.svg),
+  background: url(./startscreen/assets/background_pattern.svg),
     linear-gradient(0deg, #eff7fc, #eff7fc);
   /* background: linear-gradient(0deg, #eff7fc, #eff7fc); */
 }
diff --git a/packages/editor/src/app/main/components/startscreen/assets/background_pattern.svg b/packages/editor/src/app/main/components/startscreen/assets/background_pattern.svg
new file mode 100644
index 000000000..56d527be6
--- /dev/null
+++ b/packages/editor/src/app/main/components/startscreen/assets/background_pattern.svg
@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M96 95H100V96H96V100H95V96H86V100H85V96H76V100H75V96H66V100H65V96H56V100H55V96H46V100H45V96H36V100H35V96H26V100H25V96H16V100H15V96H0V95H15V86H0V85H15V76H0V75H15V66H0V65H15V56H0V55H15V46H0V45H15V36H0V35H15V26H0V25H15V16H0V15H15V0H16V15H25V0H26V15H35V0H36V15H45V0H46V15H55V0H56V15H65V0H66V15H75V0H76V15H85V0H86V15H95V0H96V15H100V16H96V25H100V26H96V35H100V36H96V45H100V46H96V55H100V56H96V65H100V66H96V75H100V76H96V85H100V86H96V95ZM95 95V86H86V95H95ZM85 95V86H76V95H85ZM75 95V86H66V95H75ZM65 95V86H56V95H65ZM55 95V86H46V95H55ZM45 95V86H36V95H45ZM35 95V86H26V95H35ZM25 95V86H16V95H25ZM16 85H25V76H16V85ZM26 85H35V76H26V85ZM36 85H45V76H36V85ZM46 85H55V76H46V85ZM56 85H65V76H56V85ZM66 85H75V76H66V85ZM76 85H85V76H76V85ZM86 85H95V76H86V85ZM95 75V66H86V75H95ZM85 75V66H76V75H85ZM75 75V66H66V75H75ZM65 75V66H56V75H65ZM55 75V66H46V75H55ZM45 75V66H36V75H45ZM35 75V66H26V75H35ZM25 75V66H16V75H25ZM16 65H25V56H16V65ZM26 65H35V56H26V65ZM36 65H45V56H36V65ZM46 65H55V56H46V65ZM56 65H65V56H56V65ZM66 65H75V56H66V65ZM76 65H85V56H76V65ZM86 65H95V56H86V65ZM95 55V46H86V55H95ZM85 55V46H76V55H85ZM75 55V46H66V55H75ZM65 55V46H56V55H65ZM55 55V46H46V55H55ZM45 55V46H36V55H45ZM35 55V46H26V55H35ZM25 55V46H16V55H25ZM16 45H25V36H16V45ZM26 45H35V36H26V45ZM36 45H45V36H36V45ZM46 45H55V36H46V45ZM56 45H65V36H56V45ZM66 45H75V36H66V45ZM76 45H85V36H76V45ZM86 45H95V36H86V45ZM95 35V26H86V35H95ZM85 35V26H76V35H85ZM75 35V26H66V35H75ZM65 35V26H56V35H65ZM55 35V26H46V35H55ZM45 35V26H36V35H45ZM35 35V26H26V35H35ZM25 35V26H16V35H25ZM16 25H25V16H16V25ZM26 25H35V16H26V25ZM36 25H45V16H36V25ZM46 25H55V16H46V25ZM56 25H65V16H56V25ZM66 25H75V16H66V25ZM76 25H85V16H76V25ZM86 25H95V16H86V25Z" fill="#E0E0E0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 5V0H5V5H0V6H5V100H6V6H100V5H6Z" fill="#E0E0E0"/>
+</svg>