From e4b2822c56e3bca5c5272ca6d908450bb9b437c8 Mon Sep 17 00:00:00 2001
From: dewanshDT <dewansh.dt@gmail.com>
Date: Fri, 17 Feb 2023 13:54:55 +0530
Subject: [PATCH 1/4] Revert "space fixed"

This reverts commit 730111a52bd23191af0bc97eefed97a87a701791.
---
 client/modules/IDE/components/FileNode.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 335b21eb16..c6a2c6ad2e 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -53,7 +53,6 @@ function FileName({ name }) {
       {baseName.length > 2 && (
         <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
       )}
-      {middleText.charAt(middleText.length - 1) === ' ' && <span>&nbsp;</span>}
       {baseName.length > 1 && <span>{lastLetter}</span>}
       {extension && <span>{extension}</span>}
     </span>

From ef0f580f05a1805edd0242e7b42a21f953364996 Mon Sep 17 00:00:00 2001
From: dewanshDT <dewansh.dt@gmail.com>
Date: Fri, 17 Feb 2023 13:58:26 +0530
Subject: [PATCH 2/4] version info added

---
 client/modules/IDE/components/About.jsx | 18 +++++++++++++++++-
 client/styles/components/_about.scss    | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 254dd5f8bb..fef61f24aa 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import axios from 'axios';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';
+import packageData from '../../../../package.json';
 
 function About(props) {
   const { t } = useTranslation();
+  const [p5version, setP5version] = useState(0);
+  useEffect(() => {
+    axios
+      .get('https://cdn.jsdelivr.net/npm/p5/package.json')
+      .then((data) => setP5version(data?.data?.version));
+  }, []);
   return (
     <div className="about__content">
       <Helmet>
@@ -20,6 +28,14 @@ function About(props) {
           aria-label={t('Common.p5logoARIA')}
           focusable="false"
         />
+        <div className="about__content-column">
+          <p className="about__version-info">
+            Editor version: <span>v{packageData?.version}</span>
+          </p>
+          <p className="about__version-info">
+            p5.js version: <span>v{p5version}</span>
+          </p>
+        </div>
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index 66ff9ccd2a..e29bbd8466 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -74,6 +74,24 @@
   }
 }
 
+.about__version-info {
+  @include themify() {
+    padding-top: #{8 / $base-font-size}rem;
+    font-size: #{16 / $base-font-size}rem;
+    span {
+      color: getThemifyVariable('logo-color');
+    }
+    &:first-child {
+      padding-top: #{30 /$base-font-size}rem;
+    }
+  }
+  // span {
+  //   @include themify() {
+  //     fill: getThemifyVariable('logo-color');
+  //   }
+  // }
+}
+
 .about__footer {
   display: flex;
   justify-content: space-between;

From 302631808356c3b669952d640e11134e1cbbdf57 Mon Sep 17 00:00:00 2001
From: dewanshDT <dewansh.dt@gmail.com>
Date: Fri, 17 Feb 2023 14:05:52 +0530
Subject: [PATCH 3/4] version

---
 client/modules/IDE/components/About.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index fef61f24aa..b8ee99595c 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -30,10 +30,10 @@ function About(props) {
         />
         <div className="about__content-column">
           <p className="about__version-info">
-            Editor version: <span>v{packageData?.version}</span>
+            Web Editor: <span>v{packageData?.version}</span>
           </p>
           <p className="about__version-info">
-            p5.js version: <span>v{p5version}</span>
+            p5.js: <span>v{p5version}</span>
           </p>
         </div>
       </div>

From 2c0f02803cd6524ffa71f83fbe3a1bd72ab8c578 Mon Sep 17 00:00:00 2001
From: dewanshDT <dewansh.dt@gmail.com>
Date: Sun, 19 Feb 2023 10:27:55 +0530
Subject: [PATCH 4/4] updated p5version approach

---
 client/modules/IDE/components/About.jsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index b8ee99595c..6a68828a65 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import axios from 'axios';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
@@ -10,12 +10,10 @@ import packageData from '../../../../package.json';
 
 function About(props) {
   const { t } = useTranslation();
-  const [p5version, setP5version] = useState(0);
-  useEffect(() => {
-    axios
-      .get('https://cdn.jsdelivr.net/npm/p5/package.json')
-      .then((data) => setP5version(data?.data?.version));
-  }, []);
+  const p5version = useSelector((state) => {
+    const index = state.files.find((file) => file.name === 'index.html');
+    return index?.content.match(/\/p5\.js\/([\d.]+)\//)?.[1];
+  });
   return (
     <div className="about__content">
       <Helmet>