Design improvements

czM1K3 · Aug 30, 2024 · 5bc90a2 · 5bc90a2
1 parent b5c9b9c
commit 5bc90a2
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 29 deletions.
diff --git a/src/app/create/_components/create.tsx b/src/app/create/_components/create.tsx
@@ -4,7 +4,7 @@ import React, { useState, type FC } from "react";
 import { ModelBase } from "./modelBase";
 import { ModelIteration } from "./modelIteration";
 import { type ParameterInput } from "~/app/models/[id]/_components/input";
-import { Box, Button, LoadingOverlay } from "@mantine/core";
+import { Box, Button, Center, LoadingOverlay } from "@mantine/core";
 import { api } from "~/trpc/react";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
@@ -105,7 +105,9 @@ export const CreateModel: FC<CreateModelProps> = ({ categories }) => {
         createScreenshot={screenshot}
         setTimeToGenerate={setTimeToGenerate}
       />
-      <Button onClick={() => submit()}>Create</Button>
+      <Center>
+        <Button mb="sm" onClick={() => submit()}>Create</Button>
+      </Center>
       <LoadingOverlay visible={isSending} zIndex={99} overlayProps={{ radius: "sm", blur: 2 }} />
     </Box>
   );

diff --git a/src/app/create/_components/modelBase.tsx b/src/app/create/_components/modelBase.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, Button, FileButton, Image, LoadingOverlay, Select, Text, TextInput, Title } from "@mantine/core";
+import { Anchor, Box, Button, Card, Divider, FileButton, Image, LoadingOverlay, Select, Text, TextInput, Title } from "@mantine/core";
 import React, { type Dispatch, type SetStateAction, type FC, useState, useEffect } from "react";
 import { type Categories } from "~/app/_types/categories";
 import { Carousel, CarouselSlide } from '@mantine/carousel';
@@ -57,14 +57,17 @@ export const ModelBase: FC<ModelBaseProps> = ({ isEditing, title, setTitle, desc
   };
 
   return (
-    <>
+    <Card shadow="sm" withBorder p="md" mb="sm">
       <Title>{isEditing ? "Edit existing model" : "Create new model"}</Title>
+
       <TextInput
         label="Model name"
         value={title}
         onChange={(e) => setTitle(e.currentTarget.value)}
         multiple
       />
+      <Divider my="md" />
+
       <Text>
         {"Description (supports "}
         <Anchor
@@ -81,20 +84,26 @@ export const ModelBase: FC<ModelBaseProps> = ({ isEditing, title, setTitle, desc
         langauge="markdown"
         height="30vh"
       />
+      <Divider my="md" />
+
       <Select
         label="Category"
         placeholder="Pick category"
         data={categories.names}
         value={categories.keyName[category]}
         onChange={(v) => v ? setCategory(categories.nameKey[v] ?? "") : "" }
       />
+      <Divider my="md" />
+
       {files !== null ? (
         <>
-          <Title order={2}>Images {`(${files.length}/10)`}</Title>
+          <Text>Images {`(${files.length}/10)`}</Text>
           {files.length < 10 ? (
-            <FileButton onChange={(f) => f && setFiles((ff) => [...(ff ?? []), f])} accept="image/png,image/jpeg">
-              {(props) => <Button {...props}>Add image</Button>}
-            </FileButton>
+            <Box>
+              <FileButton onChange={(f) => f && setFiles((ff) => [...(ff ?? []), f])} accept="image/png,image/jpeg">
+                {(props) => <Button {...props}>Add image</Button>}
+              </FileButton>
+            </Box>
           ) : <></>}
           {previews.length ? (
             <Carousel height={400} slideGap="md" pt="sm" pb="sm">
@@ -124,6 +133,6 @@ export const ModelBase: FC<ModelBaseProps> = ({ isEditing, title, setTitle, desc
           <LoadingOverlay visible={isDownloading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
         </Box>
       )}
-    </>
+    </Card>
   );
 }
diff --git a/src/app/create/_components/modelIteration.tsx b/src/app/create/_components/modelIteration.tsx
@@ -1,4 +1,4 @@
-import { Button, CloseButton, Modal, NativeSelect, Table, TableTbody, TableTd, TableThead, TableTr, TextInput, Title } from "@mantine/core";
+import { Box, Button, Card, CloseButton, Divider, Modal, NativeSelect, Table, TableTbody, TableTd, TableThead, TableTr, TextInput, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import React, { type Dispatch, type SetStateAction, type FC, useState, useEffect } from "react";
 import { ModelGenerator } from "~/app/models/[id]/_components/generator";
@@ -71,16 +71,17 @@ export const ModelIteration: FC<ModelIterationProps> = ({ code, setCode, paramet
     setNewParameterDefault("0");
   }
   return (
-    <>
+    <Card shadow="sm" withBorder p="md" mb="sm">
       <Title>Create iteration</Title>
-      <Title order={2}>Code</Title>
+      <Title order={2}>OpenSCAD code</Title>
       <Editor
         code={code}
         setCode={setCode}
         colorScheme={colorScheme}
         langauge="openscad"
         height="50vh"
       />
+      <Divider my="md" />
 
       <Title order={2}>Parameters</Title>
       <Table>
@@ -113,7 +114,9 @@ export const ModelIteration: FC<ModelIterationProps> = ({ code, setCode, paramet
           ))}
         </TableTbody>
       </Table>
-      <Button onClick={() => setShowAddParameter(true)}>Add parameter</Button>
+      <Box>
+        <Button mt="sm" onClick={() => setShowAddParameter(true)}>Add parameter</Button>
+      </Box>
       <Modal opened={showAddParameter} onClose={() => setShowAddParameter(false)} title="Add parameter">
         <NativeSelect
           label="Parameter datatype"
@@ -144,7 +147,7 @@ export const ModelIteration: FC<ModelIterationProps> = ({ code, setCode, paramet
         />
         <Button m="0.5rem 0 0" onClick={() => addParameter()}>Add</Button>
       </Modal>
-
+      <Divider my="md" />
 
       <Title order={2}>Preview</Title>
       <ModelGenerator
@@ -157,6 +160,6 @@ export const ModelIteration: FC<ModelIterationProps> = ({ code, setCode, paramet
         createScreenshot={createScreenshot}
         setTimeToGenerate={setTimeToGenerate}
       />
-    </>
+    </Card>
   );
 }
diff --git a/src/app/models/[id]/_components/generator.tsx b/src/app/models/[id]/_components/generator.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Accordion, AccordionControl, AccordionItem, AccordionPanel, Box, Button, Center, Code, Group, LoadingOverlay, Modal, Paper, Text, Title } from "@mantine/core";
+import { Accordion, AccordionControl, AccordionItem, AccordionPanel, Box, Button, Card, Center, Code, Group, LoadingOverlay, Modal, Paper, Text, Title } from "@mantine/core";
 import React, { type Dispatch, type  SetStateAction, useEffect, useState, type FC } from "react";
 import { StlViewer } from "react-stl-viewer";
 import { ParameterInputField, type ParameterInput } from "./input";
@@ -142,7 +142,7 @@ export const ModelGenerator: FC<ModelGeneratorProps> = ({ iterations, createScre
   }
 
   return (
-    <Paper shadow="xs" p="sm" mt="md" mb="md" pos="relative">
+    <Card shadow="sm" withBorder p="sm" mt="" mb="" pos="relative">
       <Accordion chevronPosition="right" variant="contained" defaultValue={iterations[0]?.id} onChange={iterationChange}>
         {iterations.map((iteration) => (
           <AccordionItem value={iteration.id} key={iteration.id}>
@@ -244,6 +244,6 @@ export const ModelGenerator: FC<ModelGeneratorProps> = ({ iterations, createScre
         )}
         <Code block>{outputs.join("\n")}</Code>
       </Modal>
-    </Paper>
+    </Card>
   );
 }
diff --git a/src/app/models/[id]/edit/_components/edit.tsx b/src/app/models/[id]/edit/_components/edit.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Button, LoadingOverlay } from "@mantine/core";
+import { Box, Button, Center, LoadingOverlay } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import React, { useState, type FC } from "react";
@@ -62,7 +62,9 @@ export const EditModel: FC<EditModeProps> = ({ id, categories, images, ...props}
   return (
     <Box pos="relative">
       <ModelBase isEditing title={title} setTitle={setTitle} description={description} setDescription={setDescription} category={category} setCategory={setCategory} categories={categories} files={files} setFiles={setFiles} images={images} />
-      <Button onClick={() => submit()}>Update</Button>
+      <Center>
+        <Button mb="sm" onClick={() => submit()}>Update</Button>
+      </Center>
       <LoadingOverlay visible={isSending} zIndex={99} overlayProps={{ radius: "sm", blur: 2 }} />
     </Box>
   );

diff --git a/src/app/models/[id]/new-iteration/_components/newIteration.tsx b/src/app/models/[id]/new-iteration/_components/newIteration.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Button, LoadingOverlay } from "@mantine/core";
+import { Box, Button, Center, LoadingOverlay } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import React, { useState, type FC } from "react";
@@ -50,7 +50,9 @@ export const NewIteration: FC<NewIterationProps> = ({ lastParameters, modelId, l
   return (
     <Box pos="relative">
       <ModelIteration code={code} setCode={setCode} parameters={parameters} setParameters={setParameters} setTimeToGenerate={setTimeToGenerate} />
-      <Button onClick={() => submit()}>Create</Button>
+      <Center>
+        <Button mb="sm" onClick={() => submit()}>Create</Button>
+      </Center>
       <LoadingOverlay visible={isSending} zIndex={99} overlayProps={{ radius: "sm", blur: 2 }} />
     </Box>
   );

diff --git a/src/app/models/[id]/page.tsx b/src/app/models/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { Button, Paper, Title, TypographyStylesProvider } from "@mantine/core";
+import { Box, Button, Card, Title, TypographyStylesProvider } from "@mantine/core";
 import { notFound } from "next/navigation";
 import { type FC } from "react";
 import { api, HydrateClient } from "~/trpc/server";
@@ -32,7 +32,7 @@ const ModelPage: FC<ModelPageProps> = async ({ params }) => {
   return (
     <HydrateClient>
       <main>
-        <Paper shadow="xs" p="sm" mt="md" mb="md">
+        <Card shadow="sm" withBorder p="sm" mt="md" mb="md">
           <Title>{modelData.title}</Title>
           <Title order={2} c="gray" size={20}>{modelData.created_at.toLocaleString("en-us")}</Title>
           <UserInfo id={modelData.user.id} image={modelData.user.image} name={modelData.user.name} />
@@ -41,12 +41,12 @@ const ModelPage: FC<ModelPageProps> = async ({ params }) => {
             <Markdown>{modelData.description}</Markdown>
           </TypographyStylesProvider>
           {session && session.user && session.user.id === modelData.user.id && (
-            <>
-              <Button component={Link} href={`/models/${modelData.id}/edit`} m="sm">Edit</Button>
-              <Button component={Link} href={`/models/${modelData.id}/new-iteration`} m="sm">New iteration</Button>
-            </>
+            <Box>
+              <Button component={Link} href={`/models/${modelData.id}/edit`} m="xs">Edit</Button>
+              <Button component={Link} href={`/models/${modelData.id}/new-iteration`} m="xs">New iteration</Button>
+            </Box>
           )}
-        </Paper>
+        </Card>
         {modelData.iterations.length > 0 && (
           <ModelGenerator iterations={modelData.iterations} />
         )}