Add links to PP and ToS in About

Author: catarak

client/modules/IDE/components/About.jsx

@@ -22,6 +22,16 @@ function About(props) {
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
+        <p className="about__content-column-list">
+          <a href="https://p5js.org/" target="_blank" rel="noopener noreferrer">
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Home
+          </a>
+        </p>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/examples/"
@@ -50,6 +60,34 @@ function About(props) {
             {t('About.Learn')}
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://twitter.com/p5xjs?lang=en"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Twitter
+          </a>
+        </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://www.instagram.com/p5xjs/?hl=en"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Instagram
+          </a>
+        </p>
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.Resources')}</h3>
@@ -95,33 +133,58 @@ function About(props) {
             {t('About.Forum')}
           </a>
         </p>
-      </div>
-      <div className="about__footer">
-        <p className="about__footer-list">
+        <p className="about__content-column-list">
           <a
-            href="https://github.com/processing/p5.js-web-editor"
+            href="https://discord.com/invite/SHQ8dH25r9"
             target="_blank"
             rel="noopener noreferrer"
           >
-            {t('About.Contribute')}
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Discord
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Privacy Policy
+          </a>
+        </p>
+        <p className="about__content-column-list">
+          <a href="/terms-of-use" target="_blank" rel="noopener noreferrer">
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Terms of Use
+          </a>
+        </p>
+      </div>
+      <div className="about__footer">
         <p className="about__footer-list">
           <a
-            href="https://github.com/processing/p5.js-web-editor/issues/new"
+            href="https://github.com/processing/p5.js-web-editor"
             target="_blank"
             rel="noopener noreferrer"
           >
-            {t('About.Report')}
+            {t('About.Contribute')}
           </a>
         </p>
         <p className="about__footer-list">
           <a
-            href="https://twitter.com/p5xjs?lang=en"
+            href="https://github.com/processing/p5.js-web-editor/issues/new"
             target="_blank"
             rel="noopener noreferrer"
           >
-            Twitter
+            {t('About.Report')}
           </a>
         </p>
       </div>