Changed:

*View list event; *Form event; bugFix zaverden#1
tkuzmina11 · Jul 29, 2021 · 94bfdc0 · 94bfdc0
1 parent a2ad71c
commit 94bfdc0
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 32 deletions.
diff --git a/client/src/components/app-header.tsx b/client/src/components/app-header.tsx
@@ -8,20 +8,21 @@ import { AppLoader } from "./app-loader";
 const Logo = styled.img`
   display: block;
   margin: 0 auto;
-  max-width: 60%;
+  max-width: 210px;
+  width: 100%;
   height: auto;
 `;
 
 const Slogan = styled.p`
   display: block;
-  margin: 0 auto;
+  margin: 15px auto 40px;
   width: fit-content;
   font-size: var(--fs-s);
-  line-height: 2em;
-
+  font-weight: var(--fw-th);
+  line-height: 1.2;
+  
   & > span {
     color: var(--fg-a);
-    font-weight: var(--fw-b);
   }
 `;
 

diff --git a/client/src/components/auth-page.tsx b/client/src/components/auth-page.tsx
@@ -4,8 +4,9 @@ import { AnchorButton, H1 } from "@shacal/ui/kit";
 import styled from "@emotion/styled";
 
 const GoogleIcon = styled.img`
-  height: 1em;
-  width: 1em;
+  width: 22px;
+  height: 22px;
+  margin-right: 5px;
   background: var(--bg-m);
   padding: 2px;
   border-radius: 100%;
@@ -15,6 +16,17 @@ const AuthPanel = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  & > h1 {
+    margin: 0 auto 25px;
+    font-size: 24px;
+    font-weight: bold;
+  }
+  
+  & > p {
+    margin-top: 10px;
+    font-weight: var(--fw-th);
+  }
 `;
 
 export function AuthPage() {

diff --git a/client/src/kit/button.tsx b/client/src/kit/button.tsx
@@ -26,12 +26,17 @@ export const Button = styled("button", {
   text-decoration: none;
   cursor: pointer;
   color: #fff;
-  border: 0;
+  border: none;
   border-radius: 4px;
-  font-weight: var(--fw-b);
+  font-weight: var(--fw-th);
   background-color: ${({ secondary }) => bg(secondary)};
   padding: ${({ medium: medium }) => (medium ? "8px" : "10px")};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.5)};
+  transition: 0.3s;
+
+  &:hover {
+    opacity: 0.5;
+  }
 `;
 
 export const LinkButton = Button.withComponent(Link);

diff --git a/client/src/kit/colors.ts b/client/src/kit/colors.ts
@@ -2,6 +2,7 @@ export const COLOR_VARS = `
   --fg-p: #202020;
   --fg-a: #72B3AC;
   --fg-m: #8D8D8D;
+  --fg-b: #2E7CF6;
   --fg-placeholder: #BABABA;
   --bg-p: #00AA98;
   --bg-s: #515151;

diff --git a/client/src/kit/font.ts b/client/src/kit/font.ts
@@ -3,7 +3,8 @@ export const FONT_SIZE_VARS = `
 --fs-xl: 1.8rem;
 --fs-l: 1.6rem;
 --fs-m: 1.4rem;
---fs-s: 1.2rem;
+--fs-s: 16px;
+--fs-xs: 12px;
 `;
 
 export const FONT_WEIGHT_VARS = `

diff --git a/client/src/kit/input.ts b/client/src/kit/input.ts
@@ -2,10 +2,14 @@ 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;
+  padding: 12px;
+  margin-top: 5px;
+  font-size: 14px;
+  background: transparent;
 
   &::placeholder {
     color: var(--fg-placeholder);

diff --git a/client/src/kit/link.tsx b/client/src/kit/link.tsx
@@ -2,7 +2,39 @@ import styled from "@emotion/styled";
 import { Link as RouterLink } from "react-router-dom";
 
 export const Anchor = styled("a")`
-  color: var(--fg-a);
+  color: var(--fg-b);
+  font-weight: bold;
+  font-size: 14px;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0 0 11px;
+  margin-top: 17px;
+  transition: 0.3s;
+  
+  &:hover {
+    opacity: 0.5;
+  }
+  
+  &.createNewEvent {
+    box-sizing: border-box;
+    width: 100%;
+    height: 44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    border-radius: 4px;
+    color: var(--bg-m);
+    background: #00B5A1;
+  }
+  
+  &.confirmAnotherEmail {
+    margin: 0;
+    padding: 0;
+  }
 `;
 
+
+
 export const Link = Anchor.withComponent(RouterLink);
diff --git a/client/src/pages/calendars/calendar-page.tsx b/client/src/pages/calendars/calendar-page.tsx
@@ -7,7 +7,7 @@ import { formatDate } from "utils";
 import { Permissions } from "./permissions";
 
 function AddEventLink({ publicId }: { publicId: string }) {
-  return <Link to={`/calendar/${publicId}/new-event`}>+ Add event</Link>;
+  return <Link className="createNewEvent" to={`/calendar/${publicId}/new-event`}>Create New Event</Link>;
 }
 
 type EventCardProps = {
@@ -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} />
             ))}

diff --git a/client/src/pages/calendars/calendars-list-page.tsx b/client/src/pages/calendars/calendars-list-page.tsx
@@ -60,12 +60,13 @@ function CalendarStatus({
 const List = styled.ul`
   list-style-type: none;
   padding-inline: 0;
+  margin: 0;
 `;
 
 const Line = styled.li`
   display: flex;
   align-items: baseline;
-  padding: 1em 0;
+  padding: 14px 0 10px;
   gap: 1em;
 
   & > :nth-child(1) {

diff --git a/client/src/pages/calendars/permissions.tsx b/client/src/pages/calendars/permissions.tsx
@@ -1,5 +1,6 @@
 import { useSaveShacalPermissions } from "hooks/useSaveShacalPermissions";
 import React, { ChangeEvent, useState } from "react";
+import { Button, Input } from "@shacal/ui/kit";
 
 type PermissionsProps = {
   publicId: string;
@@ -29,25 +30,26 @@ export function Permissions({
     });
   };
   return (
-    <details>
+    <details style={{ margin: '16px 0 20px' }}>
       <summary>Granted add permission</summary>
       {list.map((p, i) => (
-        <input
+        <Input
           key={i}
           type="text"
           value={p}
           onChange={onChange(i)}
           disabled={isFetching || save.isLoading}
-          style={{ display: "block" }}
+          style={{ display: "block", marginBottom: "12px" }}
         />
       ))}
-      <button
+      <Button
         type="button"
         disabled={isFetching || save.isLoading}
         onClick={onSaveClick}
+        style={{ backgroundColor: "#515151", marginTop: "16px", maxWidth: "112px" }}
       >
         Save
-      </button>
+      </Button>
     </details>
   );
 }
diff --git a/client/src/pages/events/description-view.tsx b/client/src/pages/events/description-view.tsx
@@ -7,6 +7,7 @@ export function DescriptionView({ description }: { description: string }) {
   return (
     <div
       className="ql-editor"
+      style={{ padding: "0", fontWeight: "500", fontSize: "18px", color: "#202020" }}
       dangerouslySetInnerHTML={{ __html: sanitized }}
     />
   );

diff --git a/client/src/pages/events/event-form.tsx b/client/src/pages/events/event-form.tsx
@@ -2,7 +2,7 @@ import "react-quill/dist/quill.snow.css";
 import React, { FormEvent, useState } from "react";
 import ReactQuill from "react-quill";
 import { EventPayload } from "@shacal/ui/data-access";
-import { DatePicker, Input } from "@shacal/ui/kit";
+import { DatePicker, Input, Button } from "@shacal/ui/kit";
 import { getDuration, MS_IN_MINUTE } from "utils";
 
 const DEFAULT_DURATION_MIN = 60;
@@ -73,7 +73,8 @@ export function EventForm({ event, isSaving, onSave }: EventFormProps) {
   };
   return (
     <form onSubmit={onFormSubmit}>
-      <label style={{ display: "block" }}>
+      <h2>Create New Event</h2>
+      <label style={{ display: "block", marginBottom: "18px" }}>
         Summary
         <Input
           type="text"
@@ -84,7 +85,7 @@ export function EventForm({ event, isSaving, onSave }: EventFormProps) {
           disabled={isSaving}
         />
       </label>
-      <label style={{ display: "block" }}>
+      <label style={{ display: "block", marginBottom: "18px" }}>
         Start
         <DatePicker
           onChange={(d) => setStartDate(d as Date)}
@@ -98,7 +99,7 @@ export function EventForm({ event, isSaving, onSave }: EventFormProps) {
           disabled={isSaving}
         />
       </label>
-      <label style={{ display: "block" }}>
+      <label style={{ display: "block", marginBottom: "18px" }}>
         Duration (minutes)
         <Input
           type="number"
@@ -111,7 +112,7 @@ export function EventForm({ event, isSaving, onSave }: EventFormProps) {
           min={15}
         />
       </label>
-      <label style={{ display: "block" }}>
+      <label style={{ display: "block", marginBottom: "18px" }}>
         Location
         <Input
           type="text"
@@ -132,9 +133,11 @@ export function EventForm({ event, isSaving, onSave }: EventFormProps) {
           onChange={setDescription}
         />
       </div>
-      <button type="submit" disabled={isSaving}>
-        Save
-      </button>
+      <Button type="submit"
+              disabled={isSaving}
+              style={{ height: "44px", marginTop: "18px", background: "#515151" }}>
+        Create event
+      </Button>
     </form>
   );
 }
diff --git a/client/src/pages/events/event-view.tsx b/client/src/pages/events/event-view.tsx
@@ -9,14 +9,15 @@ const Summary = styled.h1`
 `;
 
 const MutedLabel = styled.label`
-  font-size: var(--fs-s);
+  font-size: var(--fs-xs);
   color: var(--fg-m);
 `;
 
 const Field = styled.p`
   font-size: var(--fs-xl);
   color: var(--fg-p);
   margin-top: 0;
+  margin-bottom: 16px;
 `;
 
 const LocationAnchor = styled.a`

diff --git a/client/src/pages/events/join-event.tsx b/client/src/pages/events/join-event.tsx
@@ -14,6 +14,17 @@ const JoinButton = styled(Button)`
   }
 `;
 
+const JoinedSuccessfully = styled.p`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+  border-radius: 2px;
+  text-align: center;
+  font-weight: normal;
+  color: #00A52E;
+  background: #E4FFE3;
+`;
+
 const ConfirmEmailLinkButton = styled(LinkButton)`
   margin: 8px 0;
 `;
@@ -33,6 +44,7 @@ function ButtonsList({ onJoin, isLoading, publicId }: ButtonsListProps) {
           type="button"
           onClick={() => onJoin(email)}
           disabled={isLoading}
+          style={{ height: "44px", marginTop: "18px" }}
         >
           <span>Join as</span> {email}
         </JoinButton>
@@ -64,7 +76,7 @@ function ConfirmAnotherEmailPanel({ publicId }: Event) {
   return (
     <p>
       or you can{" "}
-      <Link to={`/event/${publicId}/confirm-email`}>confirm another email</Link>
+      <Link className="confirmAnotherEmail" to={`/event/${publicId}/confirm-email`}>confirm another email</Link>
     </p>
   );
 }
@@ -75,7 +87,7 @@ export function JoinEvent({ publicId }: Event) {
     <Fragment>
       {join.isError ? <p>{join.error?.message}</p> : null}
       {join.isSuccess ? (
-        <p>You have successfully joined</p>
+        <JoinedSuccessfully>You have successfully joined</JoinedSuccessfully>
       ) : (
         <ButtonsList
           publicId={publicId}