main menu refactor

src/App.tsx

@@ -30,7 +30,7 @@ const GlobalStyles = createGlobalStyle`
     --tertiary-color: #E0E2DB; 
     --tertiary-color-active: #cacbc5; 
     --quaternary-color: #000000;
-    --quinary-color: ;
+    --quinary-color: #4795d4;
     --senary-color: ;
     
     --scroll-background-color: #E0E2DB;

src/color-palette/PaletteColorsStyles.tsx

@@ -13,4 +13,4 @@ export const PaletteColorsWrapper = styled.div`
     justify-content: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
-`
+`;

src/menu/CreateCanvas.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { CreateCanvasWrapper, SizePickerContainer } from "./CreateCanvasStyles";
+import { Label, Title } from "../shared-styles/Text";
+import { InputStandard } from "../shared-styles/Input";
+import { maxCanvasSize, minCanvasSize } from "../shared/Constants";
+import { updateInput, validateAndConvertInput } from "../shared/SharedUtilities";
+import { ButtonLarge } from "../shared-styles/Button";
+
+interface CreateCanvasProps {
+    initCanvas: Function;
+    initCanvasFromSave: Function;
+}
+
+export function CreateCanvas(props: CreateCanvasProps) {
+    const [name, setName] = useState<string>('');
+    const [width, setWidth] = useState<string>('10');
+    const [height, setHeight] = useState<string>('10');
+
+    return (
+        <>
+            <CreateCanvasWrapper>
+                <Title>Canvas Options</Title>
+
+                <SizePickerContainer>
+                    <Label>GIF Name:</Label>
+                    <InputStandard type="text" 
+                        value={name}
+                        placeholder="GIF Name"
+                        onMouseOver={(e) => {let element: HTMLInputElement = e.target as HTMLInputElement; element.focus();}}
+                        onChange={(e) => {setName(e.target.value)}}/>
+
+                    <Label>Width:</Label>
+                    <InputStandard type="number" 
+                        min={minCanvasSize.toString()}
+                        max={maxCanvasSize.toString()}
+                        value={width}
+                        onMouseOver={(e) => {let element: HTMLInputElement = e.target as HTMLInputElement; element.focus();}}
+                        onChange={(e) => {updateInput(e, setWidth, 1, 3000)}}/>
+
+                    <Label>Height:</Label>
+                    <InputStandard type="number"
+                        min={minCanvasSize.toString()}
+                        max={maxCanvasSize.toString()}
+                        value={height} 
+                        onMouseOver={(e) => {let element: HTMLInputElement = e.target as HTMLInputElement; element.focus();}}
+                        onChange={(e) => {updateInput(e, setHeight, 1, 3000)}}/>
+                </SizePickerContainer>
+
+                <ButtonLarge onClick={(e) => {
+                    props.initCanvas(name, validateAndConvertInput(width, minCanvasSize), validateAndConvertInput(height, minCanvasSize));
+                }}>create a canvas</ButtonLarge>
+            </CreateCanvasWrapper>
+        </>
+    );
+}

src/menu/CreateCanvasStyles.tsx

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const CreateCanvasWrapper = styled.div`
+    width: min(70vw, 70vh);
+    padding: max(4vw, 4vh);
+    gap: 3vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary-color);
+`;
+
+export const SizePickerContainer = styled.div`
+    width: inherit;
+    display: grid;
+    grid-template-columns: 4fr 10fr;
+    grid-row-gap: min(1vw, 1vh);
+`;

src/menu/GifStorageItem.tsx → src/menu/GIFStorage.tsx

@@ -1,13 +1,14 @@
 import { useState, useEffect } from "react";
-import { GifStorageItemButton, GifStorageItemPreview, GifStorageItemPreviewWrapper, GifStorageItemTitle, GifStorageItemWrapper } from "./GifStorageItemStyles";
+import { GIFStorageItemWrapper, GIFStorageWrapper, GIFStorageItemPreviewWrapper, GIFStorageItemTitle } from "./GIFStorageStyles";
 import { gifRecord } from "../shared/Formats";
-
+import { ButtonGIFStorageItem } from "../shared-styles/Button";
+import { ImgGIFStorageItemPreview } from "../shared-styles/Image";
 
 interface GifStorageItemsProps {
     initCanvasFromSave: Function;
 }
 
-export function GifStorageItems(props: GifStorageItemsProps) {
+export function GIFStorage(props: GifStorageItemsProps) {
     const [localStorageGIFs, setLocalStorageGIFs] = useState<Array<gifRecord>>(JSON.parse(localStorage.getItem("GIFS") || "[]"));
 
     function deleteSavedGIF(deletingIndex: number) {
@@ -22,24 +23,6 @@ export function GifStorageItems(props: GifStorageItemsProps) {
         setLocalStorageGIFs(() => { return newGIFs });
     }
 
-    function downloadSavedGIF(index: number) {
-        const blob = new Blob([JSON.stringify(localStorageGIFs[index])], { type: "application/json" });
-        const link = document.createElement("a");
-
-        link.download = localStorageGIFs[index].canvas.canvasName + ".json";
-        link.href = window.URL.createObjectURL(blob);
-        link.dataset.downloadurl = ["application/json", link.download, link.href].join(":");
-
-        const evt = new MouseEvent("click", {
-            view: window,
-            bubbles: true,
-            cancelable: true,
-        });
-
-        link.dispatchEvent(evt);
-        link.remove()
-    }
-
     function uploadJsonGIF() {
         var files = (document.getElementById('jsonFile') as HTMLInputElement).files;
         console.log(files);
@@ -60,6 +43,24 @@ export function GifStorageItems(props: GifStorageItemsProps) {
         fr.readAsText(files.item(0), "application/json");
     }
 
+    function downloadSavedGIF(index: number) {
+        const blob = new Blob([JSON.stringify(localStorageGIFs[index])], { type: "application/json" });
+        const link = document.createElement("a");
+
+        link.download = localStorageGIFs[index].canvas.canvasName + ".json";
+        link.href = window.URL.createObjectURL(blob);
+        link.dataset.downloadurl = ["application/json", link.download, link.href].join(":");
+
+        const evt = new MouseEvent("click", {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        });
+
+        link.dispatchEvent(evt);
+        link.remove()
+    }
+
     function getSavedGIFs() {
         if (localStorageGIFs.length == 0) {
             return;
@@ -79,19 +80,40 @@ export function GifStorageItems(props: GifStorageItemsProps) {
             }
 
             elements.push(
-                <GifStorageItemWrapper key={crypto.randomUUID()}>
-                    <GifStorageItemPreviewWrapper>
-                        <GifStorageItemPreview $widthratio={1}
-                                               $heightratio={1}
-                                               src={blobUrl}></GifStorageItemPreview>
-                    </GifStorageItemPreviewWrapper>
+                <GIFStorageItemWrapper key={crypto.randomUUID()}>
+                    <GIFStorageItemPreviewWrapper>
+                        <ImgGIFStorageItemPreview $widthratio={1}
+                                                  $heightratio={1}
+                                                  src={blobUrl} />
+                    </GIFStorageItemPreviewWrapper>
 
-                    <GifStorageItemTitle title={currentGIF.canvas.canvasName}>{currentGIF.canvas.canvasName || "GIF SAVE #" + (i + 1) }</GifStorageItemTitle>
+                    <GIFStorageItemTitle title={currentGIF.canvas.canvasName}>
+                        { currentGIF.canvas.canvasName || "GIF SAVE #" + (i + 1) }
+                    </GIFStorageItemTitle>
 
-                    <GifStorageItemButton onClick={e => props.initCanvasFromSave(currentGIF.canvas, currentGIF.frames, currentGIF.globalColorTable)}>load</GifStorageItemButton>
-                    <GifStorageItemButton onClick={e => downloadSavedGIF(i)}>download data</GifStorageItemButton>
-                    <GifStorageItemButton onClick={e => deleteSavedGIF(i)}>delete</GifStorageItemButton>
-                </GifStorageItemWrapper>
+                    <ButtonGIFStorageItem 
+                        title="open save in gif editor"
+                        className="material-symbols-outlined" 
+                        onClick={(e) => {
+                        props.initCanvasFromSave(currentGIF.canvas,
+                                                 currentGIF.frames,
+                                                 currentGIF.globalColorTable)
+                       }}>draw</ButtonGIFStorageItem>
+
+                    <ButtonGIFStorageItem 
+                        title="download json save file"
+                        className="material-symbols-outlined"
+                        onClick={(e) => {
+                            downloadSavedGIF(i)
+                        }}>download</ButtonGIFStorageItem>
+
+                    <ButtonGIFStorageItem 
+                        title="delete save from local stroage"
+                        className="material-symbols-outlined"
+                        onClick={(e) => {
+                            deleteSavedGIF(i)
+                        }}>delete</ButtonGIFStorageItem>
+                </GIFStorageItemWrapper>
             )
         }
 
@@ -102,17 +124,23 @@ export function GifStorageItems(props: GifStorageItemsProps) {
         localStorage.setItem("GIFS", JSON.stringify(localStorageGIFs));
     }, [localStorageGIFs]);
 
-
     return (
         <>
-            {
-                getSavedGIFs()
-            }
-            <GifStorageItemWrapper key={crypto.randomUUID()}>
-                <GifStorageItemTitle>Upload a json file</GifStorageItemTitle>
-                <input type="file" id="jsonFile" name="filename"></input>
-                <GifStorageItemButton onClick={e => uploadJsonGIF()}>Upload File</GifStorageItemButton>
-            </GifStorageItemWrapper>
+            <GIFStorageWrapper>
+                {
+                    getSavedGIFs()
+                }
+                <GIFStorageItemWrapper key={crypto.randomUUID()}>
+                    <GIFStorageItemTitle>Upload a json file</GIFStorageItemTitle>
+                    <input type="file" id="jsonFile" name="filename"></input>
+                    <ButtonGIFStorageItem 
+                        title="upload json save file"
+                        className="material-symbols-outlined" 
+                        onClick={(e) => {
+                            uploadJsonGIF()
+                        }}>upload</ButtonGIFStorageItem>
+                </GIFStorageItemWrapper>
+            </GIFStorageWrapper>
         </>
     );
 }

src/menu/GIFStorageStyles.tsx

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+export const GIFStorageWrapper = styled.div`
+    width: min(70vw, 70vh);
+    height: 20vh;
+    padding: max(4vw, 4vh);
+
+    gap: 3vh;
+    overflow-y: scroll;
+    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--secondary-color);
+`;
+
+export const GIFStorageItemWrapper = styled.div`
+    width: min(63vw, 63vh);
+    height: 75px;
+    padding: max(1.5vw, 1.5vh);
+    gap: 10px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--primary-color);
+`;
+
+export const GIFStorageItemPreviewWrapper = styled.div`
+    height: 90%;
+    aspect-ratio: 1/1;
+    margin-right: 10px;
+`;
+
+export const GIFStorageItemTitle = styled.p`
+    font-size: var(--font-size-sm);
+    color: var(--tertiary-color);
+    flex-grow: 1;
+    margin: 0px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
+