Rename and reorganise some sections to be more clear

src/App.js

@@ -3,11 +3,12 @@ import Dropzone from "./components/PodcastDropzone";
 import FileView from "./fileEditor/FileView";
 import styled from "styled-components";
 import { StoreProvider } from "./store/store";
+import tw from "twin.macro";
 
 const Wrapper = styled.div`
 	width: 100vw;
 	height: 100vh;
-	padding: 10px;
+	${tw`p-3`};
 `;
 
 function App() {

src/fileEditor/artwork.js → src/components/Artwork.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Dropzone from "../components/ArtworkDropzone";
+import ArtworkDropzone from "./ArtworkDropzone";
 
 const electron = window.require("electron");
 const imageTools = electron.remote.require("./image");
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
 export default function Artwork({ image, setImage }) {
 	return (
 		<Wrapper>
-			<Dropzone current={image} selectFile={(file) => setImage(imageTools.toBuffer(file.path))}></Dropzone>
+			<ArtworkDropzone current={image} selectFile={(file) => setImage(imageTools.toBuffer(file.path))} />
 		</Wrapper>
 	);
 }

src/components/ArtworkDropzone.js

@@ -39,7 +39,7 @@ const Overlay = styled.div`
 	align-items: center;
 `;
 
-export default function PodcastDropzone({ current, selectFile }) {
+export default function ArtworkDropzone({ current, selectFile }) {
 	const onDrop = useCallback((acceptedFiles) => selectFile(acceptedFiles[0]), [selectFile]);
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 

src/fileEditor/actions.js → src/fileEditor/ActionsPanel.js

@@ -34,7 +34,7 @@ const timeToS = (time) => {
 
 Modal.setAppElement("#root");
 
-export default function Actions({ path, setTags, image, length, chapters }) {
+export default function ActionsPanel({ path, setTags, image, length, chapters }) {
 	const [isCreatingVideo, setIsCreatingVideo] = useState(false);
 	const [err, setErr] = useState(undefined);
 	const [modalOpen, setModalOpen] = useState(false);

src/fileEditor/FileView.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import InfoView from "./infoView";
+import InfoPanel from "./InfoPanel";
 import styled from "styled-components";
-import Actions from "./actions";
+import ActionsPanel from "./ActionsPanel";
 import LogView from "./LogView";
 import ChapterPanel from "./ChapterPanel";
 import tw from "twin.macro";
@@ -39,21 +39,18 @@ export default function FileView({ file: { path } }) {
 
 	return tags ? (
 		<Wrapper>
-			<InfoView info={tags} setInfo={(tags) => setTags(tags)}></InfoView>
-			<ChapterPanel
-				chapters={tags.chapter}
-				setChapters={(newChapters) => setTags({ ...tags, chapter: newChapters })}
-			></ChapterPanel>
+			<InfoPanel info={tags} setInfo={(tags) => setTags(tags)}></InfoPanel>
+			<ChapterPanel chapters={tags.chapter} setChapters={(newChapters) => setTags({ ...tags, chapter: newChapters })} />
 
 			<RightPanel>
-				<LogView></LogView>
-				<Actions
+				<LogView />
+				<ActionsPanel
 					path={path}
 					setTags={() => id3.setTags(path, tags)}
 					image={tags.image}
 					length={tags.length}
 					chapters={tags.chapter}
-				></Actions>
+				/>
 			</RightPanel>
 		</Wrapper>
 	) : (

src/fileEditor/infoView.js → src/fileEditor/InfoPanel.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import tw from "twin.macro";
 import styled from "styled-components";
-import Artwork from "./artwork";
+import Artwork from "../components/Artwork";
 
 const timestampFormat = "HH:MM:SS";
 
@@ -23,7 +23,7 @@ const Text = styled.input`
 	${tw`appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white`};
 `;
 
-export default function InfoView({ info, setInfo }) {
+export default function InfoPanel({ info, setInfo }) {
 	useEffect(() => {
 		if (!info.encodedBy) {
 			setInfo({ ...info, encodedBy: "McPodcast" });