fix: make font-size consistent

src/components.ts

@@ -0,0 +1,61 @@
+import styled from "@emotion/styled";
+
+const fontSizes = {
+  xl: "35px",
+  l: "23px",
+  s: "18px",
+  xs: "14px",
+};
+
+type TextProps = {
+  size: "xl" | "l" | "s" | "xs";
+  margin?: string;
+};
+
+export const Text = styled.p<TextProps>`
+  font-size: ${(props) => fontSizes[props.size]};
+  margin: ${(props) => props.margin ?? "0"};
+`;
+
+export const Input = styled.input`
+  font-family: virgil;
+  padding: 3px;
+  text-align: center;
+  background-color: #ffffff;
+  font-size: ${fontSizes.xs};
+  border-radius: 4px;
+  color: black;
+  margin-left: 5px;
+  margin-right: 5px;
+`;
+
+type GroupProps = {
+  justifyContent?: "center" | "space-between";
+  maxHeight?: number;
+  margin?: string;
+  padding?: string;
+};
+
+export const Group = styled.div<GroupProps>`
+  display: flex;
+  justify-content: ${(props) => props.justifyContent ?? "center"};
+  max-height: ${(props) =>
+    props.maxHeight ? `${props.maxHeight}px` : undefined};
+  margin: ${(props) => props.margin ?? undefined};
+  padding: ${(props) => props.padding ?? undefined};
+`;
+
+export const Button = styled.button`
+  font-family: virgil;
+  padding: 3px 10px;
+  background-color: #ffffff;
+  font-size: ${fontSizes.xs};
+  border-radius: 4px;
+  color: black;
+  margin-left: 5px;
+  margin-right: 5px;
+  &:hover {
+    color: #ffffff;
+    background-color: black;
+  }
+`;

src/main.tsx

@@ -3,23 +3,37 @@ import { css, Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { Button, Group, Input, TitleBar, Text } from './components'
+import { Button, Group, Input, Text } from './components'
+import { floppy, sword } from './icons'
 import { GlobalStyles } from './style'
 
+const TitleBar = () => {
+  return <>
+    <Group padding='0'>
+      <img style={{ width: "25px", marginRight: "10px" }} src={sword} />
+      <Text size="xl" margin="0">Excalistore</Text>
+      <img style={{ width: "35px", marginLeft: "10px" }} src={floppy} />
+    </Group>
+    <Group margin='0' padding='0' >
+      <Text size="s" margin="0">The Excalidraw drawings manager</Text>
+    </Group>
+  </>
+}
+
 const DrawingItem = ({ name, date }: { name: string, date: string }) => {
   const ItemContainer = styled.div`
     border: 1px solid black;
     padding: 0px 10px;
   `;
   return <ItemContainer>
-    <Text margin={10} size='s'>{name}</Text>
+    <Text margin="4px 5px" size='s'>{name}</Text>
     <Group justifyContent="space-between">
       <Group maxHeight={30}>
         <Button>Open</Button>
         <Button>Update</Button>
         <Button>Bin it</Button>
       </Group>
-      <Text size='s' margin={5}>{date}</Text>
+      <Text size='s' margin="5px 0px">{date}</Text>
     </Group>
   </ItemContainer>
 }
@@ -28,12 +42,12 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Global styles={GlobalStyles} />
     <TitleBar />
-    <Group style={{ marginTop: "10px" }}>
+    <Group margin="25px 0 25px 0">
       <Input style={{ minWidth: "320px" }} placeholder='drawing title'></Input>
       <Button>Save drawing</Button>
     </Group>
-    <Group>
-      <h2 style={{ fontSize: "23px", marginBottom: "5px" }}>My drawings</h2>
+    <Group margin='0px 0px 5px 0'>
+      <Text size='l'>My drawings</Text>
     </Group>
     <div style={{ maxHeight: "245px", minHeight: "245px", overflow: "scroll", border: "2px solid black", borderRadius: "4px" }}>
       <DrawingItem name="My awesome drawing" date='01/01/2023' />