Changed:

client/src/components/app-header.tsx

@@ -18,7 +18,7 @@ const Slogan = styled.p`
   width: fit-content;
   font-size: var(--fs-s);
   line-height: 2em;
-
+  
   & > span {
     color: var(--fg-a);
     font-weight: var(--fw-b);

client/src/kit/button.tsx

@@ -32,6 +32,11 @@ export const Button = styled("button", {
   background-color: ${({ secondary }) => bg(secondary)};
   padding: ${({ medium: medium }) => (medium ? "8px" : "10px")};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.5)};
+  transition: 0.3s;
+
+  &:hover {
+    box-shadow: 0 5px 10px 2px rgba(34, 60, 80, 0.2);
+  }
 `;
 
 export const LinkButton = Button.withComponent(Link);

client/src/kit/colors.ts

@@ -2,10 +2,13 @@ export const COLOR_VARS = `
   --fg-p: #202020;
   --fg-a: #72B3AC;
   --fg-m: #8D8D8D;
+  --fg-b: #2E7CF6;
   --fg-placeholder: #BABABA;
+  --fc-w: #FFFFFF;
   --bg-p: #00AA98;
   --bg-s: #515151;
   --bg-m: #FFFFFF;
+  --bg-l: #00B5A1;
   --br-p: #C4C4C4;
 `;
 

client/src/kit/input.ts

@@ -2,10 +2,13 @@ import styled from "@emotion/styled";
 
 export const Input = styled.input`
   width: 100%;
+  height: 40px;
   border: 1px solid var(--br-p);
   border-radius: 4px;
   box-sizing: border-box;
   padding: 1em;
+  font-size: var(--fs-m);
+  background: transparent;
 
   &::placeholder {
     color: var(--fg-placeholder);

client/src/kit/link.tsx

@@ -3,6 +3,16 @@ import { Link as RouterLink } from "react-router-dom";
 
 export const Anchor = styled("a")`
   color: var(--fg-a);
+  font-weight: var(--fw-b);
+  font-size: var(--fs-m);
+  text-decoration: none;
+  display: inline-block;
+  padding: 0 0 11px;
+  transition: 0.3s;
+
+  &:hover {
+    text-decoration: underline;
+  }
 `;
 
-export const Link = Anchor.withComponent(RouterLink);
+export const Link = Anchor.withComponent(RouterLink);

client/src/pages/calendars/calendar-page.tsx

@@ -2,12 +2,12 @@ import { Page } from "@shacal/ui/components";
 import { ShacalEvent } from "@shacal/ui/data-access";
 import { usePublicIdParam, useShacal } from "@shacal/ui/hooks";
 import React, { Fragment } from "react";
-import { Link } from "@shacal/ui/kit";
+import { Link, LinkButton } from "@shacal/ui/kit";
 import { formatDate } from "utils";
 import { Permissions } from "./permissions";
 
 function AddEventLink({ publicId }: { publicId: string }) {
-  return <Link to={`/calendar/${publicId}/new-event`}>+ Add event</Link>;
+  return <LinkButton to={`/calendar/${publicId}/new-event`}>Create New Event</LinkButton>;
 }
 
 type EventCardProps = {
@@ -16,7 +16,7 @@ type EventCardProps = {
 function EventCard({ event }: EventCardProps) {
   const d = new Date(event.start);
   return (
-    <div>
+    <div style={{ marginTop: "17px" }}>
       <Link to={`/event/${event.publicId}`}>{event.summary}</Link>
       <div>{formatDate(d)}</div>
     </div>
@@ -35,15 +35,15 @@ export function CalendarPage() {
     >
       {() => (
         <Fragment>
+          {shacal.data?.canAdd ? <AddEventLink publicId={publicId} /> : null}
           {shacal.data?.owned ? (
             <Permissions
               publicId={publicId}
               isFetching={shacal.isFetching}
               addPermissionGrantedTo={shacal.data.addPermissionGrantedTo ?? []}
             />
           ) : null}
-          {shacal.data?.canAdd ? <AddEventLink publicId={publicId} /> : null}
-          <ul>
+          <ul style={{ padding: "0", marginTop: "0" }}>
             {shacal.data?.events.map((event) => (
               <EventCard key={event.publicId} event={event} />
             ))}

client/src/pages/calendars/permissions.tsx

@@ -1,12 +1,25 @@
 import { useSaveShacalPermissions } from "hooks/useSaveShacalPermissions";
 import React, { ChangeEvent, useState } from "react";
+import {Button, Input, LinkButton} from "@shacal/ui/kit";
+import styled from "@emotion/styled";
 
 type PermissionsProps = {
   publicId: string;
   addPermissionGrantedTo: string[];
   isFetching: boolean;
 };
 
+const EmailInput = styled(Input)`
+  display: block;
+  margin-bottom: 12px;
+`;
+
+const ButtonSave = styled(Button)`
+  background-color: var(--bg-s);
+  margin-top: 16px;
+  max-width: 112px;
+`;
+
 export function Permissions({
   addPermissionGrantedTo,
   publicId,
@@ -29,25 +42,24 @@ export function Permissions({
     });
   };
   return (
-    <details>
+    <details style={{ margin: '16px 0 20px' }}>
       <summary>Granted add permission</summary>
       {list.map((p, i) => (
-        <input
+        <EmailInput
           key={i}
           type="text"
           value={p}
           onChange={onChange(i)}
           disabled={isFetching || save.isLoading}
-          style={{ display: "block" }}
         />
       ))}
-      <button
+      <ButtonSave
         type="button"
         disabled={isFetching || save.isLoading}
         onClick={onSaveClick}
       >
         Save
-      </button>
+      </ButtonSave>
     </details>
   );
 }