My projects page update (#447)

closes #442

---------

Co-authored-by: magdalenajadach <[email protected]>
Co-authored-by: Magdalena Jadach <[email protected]>
Co-authored-by: Scott <[email protected]>
Co-authored-by: Scott Adams <[email protected]>

Author: 5 people

CHANGELOG.md

@@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Refactored `NewComponentButton` (#450)
 - Modal styling (#450)
+- Projects tab layout (#447)
 
 ### Fixed
 

src/Icons.js

@@ -64,6 +64,9 @@ $rpf-text-black: #212121;
 $rpf-white: #FFFFFF;
 $rpf-white-opacity8: #FFFFFF14;
 
+$rpf-text-secondary: #4D575B;
+$rpf-darkmode-text-secondary: #CCCCCC;
+
 :root,
 :host {
   --rpf-white: #{$rpf-white};

src/assets/python_icon.svg

@@ -19,7 +19,7 @@
     border-radius: 8px;
     background-color: $rpf-teal-tint-75;
     font-weight: var(--font-weight-bold);
-    margin-right: var(--spacing-2)
+    margin-right: var(--spacing-2);
   }
 }
 

src/colours.scss

@@ -1,13 +1,29 @@
-import './Button.scss';
+import "./Button.scss";
 
-import React from 'react';
-import { confirmAlert } from 'react-confirm-alert';
-import 'react-confirm-alert/src/react-confirm-alert.css';
+import React from "react";
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
 
 const Button = (props) => {
-  const { className, onClickHandler, ButtonIcon, buttonImage, buttonImageAltText, buttonText, buttonOuter, buttonOuterClassName, disabled, confirmText, title, label } = props;
-  
-  const buttonClass = `btn${className ? ` ${className}` : ""}${buttonText ? "" : " btn--svg-only"}`
+  const {
+    className,
+    onClickHandler,
+    ButtonIcon,
+    buttonImage,
+    buttonImageAltText,
+    buttonText,
+    buttonOuter,
+    buttonOuterClassName,
+    disabled,
+    confirmText,
+    title,
+    label,
+    buttonIconPosition = "left",
+  } = props;
+
+  const buttonClass = `btn${className ? ` ${className}` : ""}${
+    buttonText ? "" : " btn--svg-only"
+  }`;
 
   const onButtonClick = (e) => {
     if (!confirmText) {
@@ -19,34 +35,45 @@ const Button = (props) => {
       message: confirmText,
       buttons: [
         {
-          label: 'Yes',
-          onClick: () => onClickHandler(e)
+          label: "Yes",
+          onClick: () => onClickHandler(e),
         },
         {
-          label: 'No',
-        }
-      ]
+          label: "No",
+        },
+      ],
     });
-  }
+  };
 
   const button = (
-    <button className={buttonClass} disabled={disabled} aria-label={label} title={title} onClick={buttonOuter ? null : onButtonClick}>
-      { buttonImage ? <img src={buttonImage} alt={buttonImageAltText}/> : null }
-      { ButtonIcon ? <ButtonIcon /> : null }
-      { buttonText ? <span>{buttonText}</span> : null }
+    <button
+      className={buttonClass}
+      disabled={disabled}
+      aria-label={label}
+      title={title}
+      onClick={buttonOuter ? null : onButtonClick}
+    >
+      {buttonImage ? <img src={buttonImage} alt={buttonImageAltText} /> : null}
+      {ButtonIcon && buttonIconPosition === "left" ? <ButtonIcon /> : null}
+      {buttonText ? <span>{buttonText}</span> : null}
+      {ButtonIcon && buttonIconPosition === "right" ? <ButtonIcon /> : null}
     </button>
   );
 
   if (buttonOuter) {
     return (
-      <div className={`btn-outer${buttonOuterClassName ? ` ${buttonOuterClassName}` : ''}`} onClick={onButtonClick}>
+      <div
+        className={`btn-outer${
+          buttonOuterClassName ? ` ${buttonOuterClassName}` : ""
+        }`}
+        onClick={onButtonClick}
+      >
         {button}
       </div>
-    )
+    );
   }
 
   return button;
 };
 
 export default Button;
-

src/components/BetaBanner/BetaBanner.scss

@@ -52,6 +52,7 @@
   font-family: sans-serif;
   font-size: inherit;
   font-weight: var(--font-weight-bold);
+  gap: var(--spacing-1);
   justify-content: center;
   margin: 6px;
   min-height: 44px;
@@ -73,10 +74,6 @@
     outline: none;
   }
 
-  svg {
-    margin-right: var(--spacing-1);
-  }
-
   &--small {
     padding: var(--spacing-four);
   }

src/components/Button/Button.js

@@ -53,7 +53,8 @@
 
   .proj-runner-container {
     display: flex;
-    flex: 5;
+    flex-flow: column;
+    flex: 5 1;
     overflow-y: hidden;
 
     .react-tabs__tab-panel--selected {

src/components/Button/Button.scss

@@ -1,38 +1,48 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import './HtmlRunner.css';
-import React, { useRef, useEffect } from 'react';
-import { useSelector } from 'react-redux'
+import "./HtmlRunner.scss";
+import React, { useRef, useEffect } from "react";
+import { useSelector } from "react-redux";
 
 function HtmlRunner() {
   const projectCode = useSelector((state) => state.editor.project.components);
   const output = useRef();
 
   const getBlobURL = (code, type) => {
-    const blob = new Blob([code], { type })
-    return URL.createObjectURL(blob)
-  }
+    const blob = new Blob([code], { type });
+    return URL.createObjectURL(blob);
+  };
 
   useEffect(() => {
     runCode();
   }, [projectCode]);
 
   const runCode = () => {
     // TODO: get html files and handle urls for non index pages
-    var indexPage = projectCode[0].content;
-
-    var cssFiles = projectCode.filter(component => component.extension === 'css');
-    cssFiles.forEach(cssFile => {
-      var cssFileBlob = getBlobURL(cssFile.content, 'text/css');
-      indexPage = indexPage.replace(`href="${cssFile.name}.css"`, `href="${cssFileBlob}"`)
+    let indexPage = projectCode[0].content;
+
+    const cssFiles = projectCode.filter(
+      (component) => component.extension === "css"
+    );
+    cssFiles.forEach((cssFile) => {
+      const cssFileBlob = getBlobURL(cssFile.content, "text/css");
+      indexPage = indexPage.replace(
+        `href="${cssFile.name}.css"`,
+        `href="${cssFileBlob}"`
+      );
     });
 
-    var blob = getBlobURL(indexPage, 'text/html');
+    const blob = getBlobURL(indexPage, "text/html");
     output.current.src = blob;
-  }
+  };
 
   return (
     <div className="htmlrunner-container">
-      <iframe className="htmlrunner-iframe" id="output-frame" title="html-output-frame" ref={output} />
+      <iframe
+        className="htmlrunner-iframe"
+        id="output-frame"
+        title="html-output-frame"
+        ref={output}
+      />
     </div>
   );
 }