diff --git a/twenty-frontend/src/css/_groups.scss b/twenty-frontend/src/css/_groups.scss index 4809353..23aea10 100644 --- a/twenty-frontend/src/css/_groups.scss +++ b/twenty-frontend/src/css/_groups.scss @@ -79,24 +79,7 @@ body .wrapper .group { height: 50px; justify-content: space-between; padding: 10px 10px 5px 0px; - - .title { - display: flex; - padding-bottom: 5px; - } - - .subtitle { - color: $secondary-color; - } - } - - .tags { - .tag { - color: $primary-color; - border: 1px solid $secondary-color; - border-radius: 5px; - font-weight: bold; - } + text-decoration: none; } } } diff --git a/twenty-frontend/src/css/_layout.scss b/twenty-frontend/src/css/_layout.scss index 926f700..f22194d 100644 --- a/twenty-frontend/src/css/_layout.scss +++ b/twenty-frontend/src/css/_layout.scss @@ -1,6 +1,11 @@ +@import "layout/height"; +@import "layout/width"; .m-0-auto { margin: 0 auto; } .maxw-1024 { max-width: 1024px; } +.block { display: block; } + + /* flex */ .flex { display: flex; } @@ -12,8 +17,9 @@ .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } +.align-items-center { align-items: center; } -/* colors */ +/* text colors */ .bg-primary { background: $primary-color; } .bg-secondary { background: $secondary-color; } .bg-accent { background: $accent-color; } @@ -21,7 +27,7 @@ .text-secondary { color: $secondary-color; } .text-accent { color: $accent-color; } -/* font sizes */ +/* text sizes */ .text-xxsmall { font-size: xx-small; } .text-xsmall { font-size: x-small; } .text-small { font-size: small; } @@ -30,46 +36,18 @@ .text-large { font-size: large; } .text-larger { font-size: larger; } -/* width */ -.w-100 { width: 100%; } -.w-95 { width: 95%; } -.w-90 { width: 90%; } -.w-85 { width: 85%; } -.w-80 { width: 80%; } -.w-75 { width: 75%; } -.w-70 { width: 70%; } -.w-65 { width: 65%; } -.w-60 { width: 60%; } -.w-55 { width: 55%; } -.w-50 { width: 50%; } -.w-45 { width: 45%; } -.w-40 { width: 40%; } -.w-35 { width: 35%; } -.w-30 { width: 30%; } -.w-25 { width: 25%; } -.w-20 { width: 20%; } -.w-15 { width: 15%; } -.w-10 { width: 10%; } -.w-5 { width: 5%; } +/* text alignment */ +.text-left { text-align: left; } +.text-center { text-align: center; } +.text-right { text-align: right; } -/* height */ -.h-100 { height: 100%; } -.h-95 { height: 95%; } -.h-90 { height: 90%; } -.h-85 { height: 85%; } -.h-80 { height: 80%; } -.h-75 { height: 75%; } -.h-70 { height: 70%; } -.h-65 { height: 65%; } -.h-60 { height: 60%; } -.h-55 { height: 55%; } -.h-50 { height: 50%; } -.h-45 { height: 45%; } -.h-40 { height: 40%; } -.h-35 { height: 35%; } -.h-30 { height: 30%; } -.h-25 { height: 25%; } -.h-20 { height: 20%; } -.h-15 { height: 15%; } -.h-10 { height: 10%; } -.h-5 { height: 5%; } + +/* padding */ +.p-3 { padding: 3px; } +.p-5 { padding: 5px; } + + +/* borders */ +.rounded { border-radius: 5px; } +.border-primary { border: 1px solid $primary-color; } +.border-secondary { border: 1px solid $secondary-color; } diff --git a/twenty-frontend/src/css/_lists.scss b/twenty-frontend/src/css/_lists.scss deleted file mode 100644 index a6c9cff..0000000 --- a/twenty-frontend/src/css/_lists.scss +++ /dev/null @@ -1,77 +0,0 @@ -/** - ----------------- - | ul.collection | - ----------------- -**/ - -ul { - h1, h2 { - display: flex; - align-items: center; - margin: 0; - padding: 0; - background: $primary-color; - color: $secondary-color; - height: 25px; - width: 100%; - } -} - - -ul.items { - @import "colors"; - margin: 0; - padding: 0; - list-style-type: none; -} - -ul.items.nav { - border: 1px solid $secondary-color; - border-radius: 5px; - background: $secondary-color; - color: $primary-color; - width: 90%; - padding: 10px; - - h1 { - height: unset; - align-items: center; - background: $secondary-color; - color: $primary-color; - margin-top: 10px; - } - h1:first-child { - margin-top: unset; - } - - li.item { - padding: 5px; - justify-content: space-between; - background: $primary-color; - color: $secondary-color; - display: flex; - align-items: center; - height: 25px; - a { - display: inline; - height: unset; - padding: unset; - } - } -} - -ul.items.projects { - li.item { - a { - width: 100%; - } - } -} - -ul.items.tasks { - li.item { - a { - width: 95%; - } - } -} diff --git a/twenty-frontend/src/css/layout/_height.scss b/twenty-frontend/src/css/layout/_height.scss new file mode 100644 index 0000000..55a41d5 --- /dev/null +++ b/twenty-frontend/src/css/layout/_height.scss @@ -0,0 +1,40 @@ +.h-0 { height: 0px; } +.h-px { height: 1px; } +.h-1 { height: 0.25rem; } +.h-2 { height: 0.5rem; } +.h-3 { height: 0.75rem; } +.h-4 { height: 1rem; } +.h-5 { height: 1.25rem; } +.h-6 { height: 1.5rem; } +.h-7 { height: 1.75rem; } +.h-8 { height: 2rem; } +.h-9 { height: 2.25rem; } +.h-10 { height: 2.5rem; } +.h-11 { height: 2.75rem; } +.h-12 { height: 3rem; } +.h-14 { height: 3.5rem; } +.h-16 { height: 4rem; } +.h-20 { height: 5rem; } +.h-24 { height: 6rem; } +.h-28 { height: 7rem; } +.h-32 { height: 8rem; } +.h-36 { height: 9rem; } +.h-40 { height: 10rem; } +.h-44 { height: 11rem; } +.h-48 { height: 12rem; } +.h-52 { height: 13rem; } +.h-56 { height: 14rem; } +.h-60 { height: 15rem; } +.h-64 { height: 16rem; } +.h-72 { height: 18rem; } +.h-80 { height: 20rem; } +.h-96 { height: 24rem; } +.h-auto { height: auto; } +.h-full { height: 100%; } +.h-screen { height: 100vh; } +.h-svh { height: 100svh; } +.h-lvh { height: 100lvh; } +.h-dvh { height: 100dvh; } +.h-min { height: min-content; } +.h-max { height: max-content; } +.h-fit { height: fit-content; } diff --git a/twenty-frontend/src/css/layout/_width.scss b/twenty-frontend/src/css/layout/_width.scss new file mode 100644 index 0000000..9183f6e --- /dev/null +++ b/twenty-frontend/src/css/layout/_width.scss @@ -0,0 +1,156 @@ +.w-0 { width: 0px; } +.w-px { width: 1px; } +.w-1 { width: 0.25rem; } +.w-2 { width: 0.5rem; } +.w-3 { width: 0.75rem; } +.w-4 { width: 1rem; } +.w-5 { width: 1.25rem; } +.w-6 { width: 1.5rem; } +.w-7 { width: 1.75rem; } +.w-8 { width: 2rem; } +.w-9 { width: 2.25rem; } +.w-10 { width: 2.5rem; } +.w-11 { width: 2.75rem; } +.w-12 { width: 3rem; } +.w-14 { width: 3.5rem; } +.w-16 { width: 4rem; } +.w-20 { width: 5rem; } +.w-24 { width: 6rem; } +.w-28 { width: 7rem; } +.w-32 { width: 8rem; } +.w-36 { width: 9rem; } +.w-40 { width: 10rem; } +.w-44 { width: 11rem; } +.w-48 { width: 12rem; } +.w-52 { width: 13rem; } +.w-56 { width: 14rem; } +.w-60 { width: 15rem; } +.w-64 { width: 16rem; } +.w-72 { width: 18rem; } +.w-80 { width: 20rem; } +.w-96 { width: 24rem; } +.w-auto { width: auto; } +.w-1\/2 { width: 50%; } +.w-1\/3 { width: 33.333333%; } +.w-2\/3 { width: 66.666667%; } +.w-1\/4 { width: 25%; } +.w-2\/4 { width: 50%; } +.w-3\/4 { width: 75%; } +.w-1\/5 { width: 20%; } +.w-2\/5 { width: 40%; } +.w-3\/5 { width: 60%; } +.w-4\/5 { width: 80%; } +.w-1\/6 { width: 16.666667%; } +.w-2\/6 { width: 33.333333%; } +.w-3\/6 { width: 50%; } +.w-4\/6 { width: 66.666667%; } +.w-5\/6 { width: 83.333333%; } +.w-1\/12 { width: 8.333333%; } +.w-2\/12 { width: 16.666667%; } +.w-3\/12 { width: 25%; } +.w-4\/12 { width: 33.333333%; } +.w-5\/12 { width: 41.666667%; } +.w-6\/12 { width: 50%; } +.w-7\/12 { width: 58.333333%; } +.w-8\/12 { width: 66.666667%; } +.w-9\/12 { width: 75%; } +.w-10\/12 { width: 83.333333%; } +.w-11\/12 { width: 91.666667%; } +.w-full { width: 100%; } +.w-screen { width: 100vw; } +.w-svw { width: 100svw; } +.w-lvw { width: 100lvw; } +.w-dvw { width: 100dvw; } +.w-min { width: min-content; } +.w-max { width: max-content; } +.w-fit { width: fit-content; } + +.min-w-0 { min-width: 0px } +.min-w-1 { min-width: 0.25rem; } +.min-w-2 { min-width: 0.5rem; } +.min-w-3 { min-width: 0.75rem; } +.min-w-4 { min-width: 1rem; } +.min-w-5 { min-width: 1.25rem; } +.min-w-6 { min-width: 1.5rem; } +.min-w-7 { min-width: 1.75rem; } +.min-w-8 { min-width: 2rem; } +.min-w-9 { min-width: 2.25rem; } +.min-w-10 { min-width: 2.5rem; } +.min-w-11 { min-width: 2.75rem; } +.min-w-12 { min-width: 3rem; } +.min-w-14 { min-width: 3.5rem; } +.min-w-16 { min-width: 4rem; } +.min-w-20 { min-width: 5rem; } +.min-w-24 { min-width: 6rem; } +.min-w-28 { min-width: 7rem; } +.min-w-32 { min-width: 8rem; } +.min-w-36 { min-width: 9rem; } +.min-w-40 { min-width: 10rem; } +.min-w-44 { min-width: 11rem; } +.min-w-48 { min-width: 12rem; } +.min-w-52 { min-width: 13rem; } +.min-w-56 { min-width: 14rem; } +.min-w-60 { min-width: 15rem; } +.min-w-64 { min-width: 16rem; } +.min-w-72 { min-width: 18rem; } +.min-w-80 { min-width: 20rem; } +.min-w-96 { min-width: 24rem; } +.min-w-px { min-width: 1px; } +.min-w-full { min-width: 100%; } +.min-w-min { min-width: min-content; } +.min-w-max { min-width: max-content; } +.min-w-fit { min-width: fit-content; } + +.max-w-0 { max-width: 0px; } +.max-w-px { max-width: 1px; } +.max-w-1 { max-width: 0.25rem; } +.max-w-2 { max-width: 0.5rem; } +.max-w-3 { max-width: 0.75rem; } +.max-w-4 { max-width: 1rem; } +.max-w-5 { max-width: 1.25rem; } +.max-w-6 { max-width: 1.5rem; } +.max-w-7 { max-width: 1.75rem; } +.max-w-8 { max-width: 2rem; } +.max-w-9 { max-width: 2.25rem; } +.max-w-10 { max-width: 2.5rem; } +.max-w-11 { max-width: 2.75rem; } +.max-w-12 { max-width: 3rem; } +.max-w-14 { max-width: 3.5rem; } +.max-w-16 { max-width: 4rem; } +.max-w-20 { max-width: 5rem; } +.max-w-24 { max-width: 6rem; } +.max-w-28 { max-width: 7rem; } +.max-w-32 { max-width: 8rem; } +.max-w-36 { max-width: 9rem; } +.max-w-40 { max-width: 10rem; } +.max-w-44 { max-width: 11rem; } +.max-w-48 { max-width: 12rem; } +.max-w-52 { max-width: 13rem; } +.max-w-56 { max-width: 14rem; } +.max-w-60 { max-width: 15rem; } +.max-w-64 { max-width: 16rem; } +.max-w-72 { max-width: 18rem; } +.max-w-80 { max-width: 20rem; } +.max-w-96 { max-width: 24rem; } +.max-w-none { max-width: none; } +.max-w-xs { max-width: 20rem; } +.max-w-sm { max-width: 24rem; } +.max-w-md { max-width: 28rem; } +.max-w-lg { max-width: 32rem; } +.max-w-xl { max-width: 36rem; } +.max-w-2xl { max-width: 42rem; } +.max-w-3xl { max-width: 48rem; } +.max-w-4xl { max-width: 56rem; } +.max-w-5xl { max-width: 64rem; } +.max-w-6xl { max-width: 72rem; } +.max-w-7xl { max-width: 80rem; } +.max-w-full { max-width: 100%; } +.max-w-min { max-width: min-content; } +.max-w-max { max-width: max-content; } +.max-w-fit { max-width: fit-content; } +.max-w-prose { max-width: 65ch; } +.max-w-screen-sm { max-width: 640px; } +.max-w-screen-md { max-width: 768px; } +.max-w-screen-lg { max-width: 1024px; } +.max-w-screen-xl { max-width: 1280px; } +.max-w-screen-2xl { max-width: 1536px; } diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss index 873da35..4fc39f1 100644 --- a/twenty-frontend/src/css/main.scss +++ b/twenty-frontend/src/css/main.scss @@ -1,12 +1,8 @@ @import "fonts"; @import "colors"; @import "global"; -@import "layout"; @import "groups"; -@import "lists"; - -@import "vendor/forms"; -@import "vendor/animations"; +@import "layout"; *, *:before, *:after { box-sizing: border-box; @@ -18,16 +14,10 @@ html, html body, .wrapper { } body { - font-family: 'Courier new', serif; + font-family: monospace; font-weight: normal; } -.pt-20 { padding-top: 20px; } -.pb-20 { padding-bottom: 20px; } -.mb-20 { margin-bottom: 20px; } -.mb-50 { margin-bottom: 50px; } -.w-100 { width: 100%; } - .wrapper { color: $secondary-color; diff --git a/twenty-frontend/src/js/components/Group.tsx b/twenty-frontend/src/js/components/Group.tsx index babf06a..f0c92d2 100644 --- a/twenty-frontend/src/js/components/Group.tsx +++ b/twenty-frontend/src/js/components/Group.tsx @@ -31,8 +31,8 @@ export function Group({ groupName, getItems }: Props) { const editHref = `/tasks/edit#id=${task.id}`; return (
  • -
    -
    +
    +
    {task.title} @@ -41,14 +41,12 @@ export function Group({ groupName, getItems }: Props) {
    -
    - - - {task.project.name} - +
    + + {task.project.name}
    @@ -65,7 +63,8 @@ export function Group({ groupName, getItems }: Props) {
    Add a task - . + {" "} + .

    )}
    diff --git a/twenty-frontend/src/js/components/Tasks.tsx b/twenty-frontend/src/js/components/Tasks.tsx index 6d309a0..14809b3 100644 --- a/twenty-frontend/src/js/components/Tasks.tsx +++ b/twenty-frontend/src/js/components/Tasks.tsx @@ -17,10 +17,10 @@ export function Tasks() { return (
    -
    +
    -
    +

    Tasks

    = T | null; export type InputMaybe = Maybe; -export type Exact = { [K in keyof T]: T[K] }; -export type MakeOptional = Omit & { [SubKey in K]?: Maybe }; -export type MakeMaybe = Omit & { [SubKey in K]: Maybe }; -export type MakeEmpty = { [_ in K]?: never }; -export type Incremental = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never }; +export type Exact = { + [K in keyof T]: T[K]; +}; +export type MakeOptional = Omit & { + [SubKey in K]?: Maybe; +}; +export type MakeMaybe = Omit & { + [SubKey in K]: Maybe; +}; +export type MakeEmpty< + T extends { [key: string]: unknown }, + K extends keyof T, +> = { [_ in K]?: never }; +export type Incremental = + | T + | { + [P in keyof T]?: P extends " $fragmentName" | "__typename" ? T[P] : never; + }; /** All built-in and custom scalars, mapped to their actual values */ export type Scalars = { - ID: { input: string; output: string; } - String: { input: string; output: string; } - Boolean: { input: boolean; output: boolean; } - Int: { input: number; output: number; } - Float: { input: number; output: number; } + ID: { input: string; output: string }; + String: { input: string; output: string }; + Boolean: { input: boolean; output: boolean }; + Int: { input: number; output: number }; + Float: { input: number; output: number }; /** An ISO 8601-encoded datetime */ - ISO8601DateTime: { input: any; output: any; } + ISO8601DateTime: { input: any; output: any }; }; /** Autogenerated return type of CompleteTask. */ export type CompleteTaskPayload = { - __typename?: 'CompleteTaskPayload'; - errors?: Maybe>; - ok?: Maybe; + __typename?: "CompleteTaskPayload"; + errors?: Maybe>; + ok?: Maybe; }; /** Autogenerated return type of CreateTask. */ export type CreateTaskPayload = { - __typename?: 'CreateTaskPayload'; - errors: Array; + __typename?: "CreateTaskPayload"; + errors: Array; }; /** Autogenerated return type of DestroyTask. */ export type DestroyTaskPayload = { - __typename?: 'DestroyTaskPayload'; - errors?: Maybe>; - ok?: Maybe; + __typename?: "DestroyTaskPayload"; + errors?: Maybe>; + ok?: Maybe; }; export type Mutation = { - __typename?: 'Mutation'; + __typename?: "Mutation"; completeTask?: Maybe; createTask?: Maybe; destroyTask?: Maybe; updateTask?: Maybe; }; - export type MutationCompleteTaskArgs = { - taskId: Scalars['Int']['input']; + taskId: Scalars["Int"]["input"]; }; - export type MutationCreateTaskArgs = { input: TaskInput; }; - export type MutationDestroyTaskArgs = { - taskId: Scalars['Int']['input']; + taskId: Scalars["Int"]["input"]; }; - export type MutationUpdateTaskArgs = { input: TaskInput; - taskId: Scalars['Int']['input']; + taskId: Scalars["Int"]["input"]; }; export type Project = { - __typename?: 'Project'; - color: Scalars['String']['output']; - id: Scalars['Int']['output']; - name: Scalars['String']['output']; - path: Scalars['String']['output']; + __typename?: "Project"; + color: Scalars["String"]["output"]; + id: Scalars["Int"]["output"]; + name: Scalars["String"]["output"]; + path: Scalars["String"]["output"]; tasks: Array; }; export type Query = { - __typename?: 'Query'; + __typename?: "Query"; findTask?: Maybe; projects: Array; tasks: Array; }; - export type QueryFindTaskArgs = { - taskId: Scalars['Int']['input']; + taskId: Scalars["Int"]["input"]; }; - export type QueryTasksArgs = { status: TaskStatus; }; export type Task = { - __typename?: 'Task'; - content: Scalars['String']['output']; - id: Scalars['Int']['output']; - inProgress: Scalars['Boolean']['output']; - isBacklogged: Scalars['Boolean']['output']; - isComplete: Scalars['Boolean']['output']; - isReady: Scalars['Boolean']['output']; + __typename?: "Task"; + content: Scalars["String"]["output"]; + id: Scalars["Int"]["output"]; + inProgress: Scalars["Boolean"]["output"]; + isBacklogged: Scalars["Boolean"]["output"]; + isComplete: Scalars["Boolean"]["output"]; + isReady: Scalars["Boolean"]["output"]; project: Project; status: TaskStatus; - title: Scalars['String']['output']; - updatedAt: Scalars['ISO8601DateTime']['output']; + title: Scalars["String"]["output"]; + updatedAt: Scalars["ISO8601DateTime"]["output"]; }; export type TaskInput = { - content?: InputMaybe; - projectId?: InputMaybe; + content?: InputMaybe; + projectId?: InputMaybe; status?: InputMaybe; - title?: InputMaybe; + title?: InputMaybe; }; export enum TaskStatus { - Backlog = 'backlog', - Complete = 'complete', - InProgress = 'in_progress', - Ready = 'ready' + Backlog = "backlog", + Complete = "complete", + InProgress = "in_progress", + Ready = "ready", } /** Autogenerated return type of UpdateTask. */ export type UpdateTaskPayload = { - __typename?: 'UpdateTaskPayload'; - errors: Array; + __typename?: "UpdateTaskPayload"; + errors: Array; };