From 9e820a0068d4725a144904e652bad5e1c66648ca Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Sat, 13 Jan 2024 18:16:08 -0300 Subject: [PATCH] frontend: remove large amounts of custom CSS --- README.md | 14 ++- twenty-frontend/src/css/_groups.scss | 98 -------------------- twenty-frontend/src/css/main.scss | 27 ++++-- twenty-frontend/src/js/components/Group.tsx | 23 +++-- twenty-frontend/src/js/components/NavBar.tsx | 80 ++++++++++++---- twenty-frontend/src/js/components/Task.tsx | 5 +- 6 files changed, 97 insertions(+), 150 deletions(-) delete mode 100644 twenty-frontend/src/css/_groups.scss diff --git a/README.md b/README.md index 25a0891..e537cdb 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,15 @@ ## About -Twenty helps you manage projects with a solution that runs on your computer -rather than in the cloud. +Twenty helps you manage projects with a web application that +runs on your computer rather than in the cloud. ## Features -* Provides a web application that helps you manage projects. -* Provides a command-line utility to start / stop a web server, connect / disconnect a project. +* Provides a command-line utility to start / stop a web server. +* Connect / disconnect a project from the command line. * Works offline. Binds to `http//:localhost:2020` by default. -* Lightweight: Ruby, and SQLite3 are the primary runtime dependencies. -* Database: `~/.local/share/twenty/twenty.sqlite`. -* Easy to install: `gem install twenty`. -* Easy to use: `$ twenty up`. +* Ruby, and SQLite3 are the primary runtime dependencies. +* Easy to install, easy to use. ## Usage diff --git a/twenty-frontend/src/css/_groups.scss b/twenty-frontend/src/css/_groups.scss deleted file mode 100644 index 6398ff2..0000000 --- a/twenty-frontend/src/css/_groups.scss +++ /dev/null @@ -1,98 +0,0 @@ -body .wrapper .group { - @import "colors"; - width: 100%; - margin-bottom: 10px; - - .group-name { - margin: 10px 0 10px 0; - padding: 10px; - background: $secondary-color; - color: $primary-color; - border-radius: 5px; - - ul.tabs { - list-style-type: none; - display: flex; - grid-gap: 15px; - font-size: medium; - - li.tab { - height: 24px; - width: 100px; - a { - display: block; - background: $primary-color; - color: $accent-color; - border-radius: 5px; - height: 100%; - &:focus { - text-decoration: none; - } - } - } - li.tab.active { - a { - text-decoration: underline; - } - } - } - } - - .group-items { - min-height: 75px; - - p.empty-group { - padding-top: 2.5%; - } - - ul.items { - li.item { - display: flex; - padding: 7.5px; - border: 1px solid $primary-color; - - select { - height: 35px; - padding: 10px; - background: $primary-color; - } - - &:hover { - background: $secondary-color; - color: $primary-color; - border-radius: 10px; - border: 1px solid $secondary-color; - - a { - color: $primary-color; - text-decoration: none; - span { - color: $primary-color; - text-decoration: none; - } - } - } - - a { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px 10px 5px 0px; - text-decoration: none; - } - } - } - } -} - -.markdown { - ul , - ul li, - ul li.task-list-item input[type='checkbox'] - { - padding: 0 !important; - margin: 0 !important; - } - h1, h2, h3, h4, p { - } -} diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss index 423effb..84fef5b 100644 --- a/twenty-frontend/src/css/main.scss +++ b/twenty-frontend/src/css/main.scss @@ -1,14 +1,13 @@ @import "fonts"; @import "colors"; @import "global"; -@import "groups"; @import "layout"; *, *:before, *:after { box-sizing: border-box; } -html, html body, .wrapper { +html, html body { height: 100%; font-size: medium; } @@ -18,13 +17,21 @@ body { font-weight: normal; } -.wrapper { - color: $secondary-color; - - .react-mount { - padding-top: 25px; - } - h1, h2, h3, h4, h5 { - font-size: medium; +ul { + list-style-type: none; + padding: 0; + margin: 0; +} +.secondary-hover { + &:hover { + @extend .no-underline; + @extend .p-3; + @extend .rounded; + @extend .bg-secondary; + @extend .text-primary; + a, span { + @extend .text-primary; + @extend .no-underline; + } } } diff --git a/twenty-frontend/src/js/components/Group.tsx b/twenty-frontend/src/js/components/Group.tsx index 7dd090e..e093fa5 100644 --- a/twenty-frontend/src/js/components/Group.tsx +++ b/twenty-frontend/src/js/components/Group.tsx @@ -19,23 +19,23 @@ export function Group({ groupName, getItems }: Props) { } return ( -
+
There are no {groupName.toLowerCase()} tasks.
Add a task
- {" "}
- .
+ .