More icons

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/assets/index.ts

@@ -18,3 +18,5 @@ export { ReactComponent as ResetIcon } from "./reset.svg";
 export { ReactComponent as RenameIcon } from "./rename.svg";
 export { ReactComponent as SaveIcon } from "./save.svg";
 export { ReactComponent as SplashIcon } from "./logo_jderobot.svg";
+export { ReactComponent as MinusIcon } from "./minus.svg";
+export { ReactComponent as PlusIcon } from "./plus.svg";

src/assets/minus.svg

@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 
-import { SaveIcon } from "Assets";
+import { SaveIcon, MinusIcon, PlusIcon } from "Assets";
 import { useError, useTheme } from "Utils";
 import { CommsManager } from "jderobot-commsmanager";
 import { Entry, EditorsEntry } from "Types";
 import TextEditor from "./TextEditor";
 import {
   MenuButton,
+  MenuButtonStroke,
   StyledButtonsContainer,
   StyledSeparatedButtonsContainer,
 } from "Components";
@@ -229,20 +230,20 @@ const FileEditor = ({
           >
             <SaveIcon viewBox="0 0 .9375 .9375" />
           </MenuButton>
-          <MenuButton
+          <MenuButtonStroke
             id="zoom-in-button"
             onClick={handleZoomIn}
             title="Increase Zoom"
           >
-            +
-          </MenuButton>
-          <MenuButton
+            <PlusIcon viewBox="0 0 20 20" />
+          </MenuButtonStroke>
+          <MenuButtonStroke
             id="zoom-out-button"
             title="Decrease Zoom"
             onClick={handleZoomOut}
           >
-            -
-          </MenuButton>
+            <MinusIcon viewBox="0 0 20 20" />
+          </MenuButtonStroke>
           {(() => {
             for (const editor of extraEditors) {
               if (editor.language === language) {

src/assets/plus.svg

@@ -79,6 +79,7 @@ export const Main: Story = {
         api={api}
         extraEditors={[]}
         viewers={[gazeboViewer, terminalViewer]}
+        statusBarComponents={{ extras: [] }}
       />
     </div>
   ),

src/components/FileEditor/FileEditor.tsx

@@ -1,4 +1,4 @@
-import { BackIcon, CloseIcon } from "Assets";
+import { BackIcon, CloseIcon, MinusIcon } from "Assets";
 import styled from "styled-components";
 
 const primaryColor = "#666";
@@ -79,28 +79,26 @@ export const StyledModalTitlebar = styled.div<StyledModalTitlebarProps>`
   }
 `;
 
-interface StyledModalCloseButtonProps {
+interface StyledModalButtonProps {
   color?: string;
 }
 
-export const StyledModalCloseButton = styled(
-  CloseIcon,
-)<StyledModalCloseButtonProps>`
+export const StyledModalCloseButton = styled(CloseIcon)<StyledModalButtonProps>`
   fill: ${(p) => p.color ?? primaryColor};
   margin-left: auto;
 `;
 
-interface StyledModalBackButtonProps {
-  color?: string;
-}
-
-export const StyledModalBackButton = styled(
-  BackIcon,
-)<StyledModalBackButtonProps>`
+export const StyledModalBackButton = styled(BackIcon)<StyledModalButtonProps>`
   fill: ${(p) => p.color ?? primaryColor};
   margin-right: auto;
 `;
 
+export const StyledModalDeleteButton = styled(
+  MinusIcon,
+)<StyledModalButtonProps>`
+  stroke: ${(p) => p.color ?? primaryColor};
+`;
+
 interface StyledModalRowProps {
   color?: string;
   buttonColor?: string;

src/components/IdeInterface/IdeInterface.stories.tsx

@@ -5,6 +5,7 @@ import {
   StyledModalButtonRow,
   StyledModalCloseButton,
   StyledModalContent,
+  StyledModalDeleteButton,
   StyledModalDropArea,
   StyledModalEditableList,
   StyledModalInput,
@@ -271,7 +272,7 @@ export const ModalEditableList = ({
         return (
           <div id={"project-" + entry} onClick={(e: any) => onSelect(e, entry)}>
             <label>{entry}</label>
-            <StyledModalCloseButton
+            <StyledModalDeleteButton
               viewBox="0 0 20 20"
               title="Delete"
               id={"delete-" + entry}
@@ -355,7 +356,7 @@ export const ModalInputDropArea = ({
   return (
     <StyledModalDropArea
       ref={areaRef}
-      id={id + '-area'}
+      id={id + "-area"}
       htmlFor={id}
       onDragOver={(e) => {
         e.preventDefault();