From 97819277b4a5314ae966678effc8449408de37c2 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Tue, 10 May 2022 15:25:34 +0800 Subject: [PATCH 01/10] Add button component --- src/backend/views/components/button.twig | 25 ++++++++ src/frontend/styles/components/button.pcss | 74 ++++++++++++++++++++++ src/frontend/styles/main.pcss | 1 + src/frontend/styles/vars.pcss | 13 ++++ src/frontend/svg/bin.svg | 3 + src/frontend/svg/checklist.svg | 3 + 6 files changed, 119 insertions(+) create mode 100644 src/backend/views/components/button.twig create mode 100644 src/frontend/styles/components/button.pcss create mode 100644 src/frontend/svg/bin.svg create mode 100644 src/frontend/svg/checklist.svg diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig new file mode 100644 index 00000000..7c8bc0ca --- /dev/null +++ b/src/backend/views/components/button.twig @@ -0,0 +1,25 @@ +{# + Reusable button component. + Available props: + - label + - icon + - name + - style: primary, secondary or warning + - size: small, default + + Usage example: + {% include 'components/button.twig' with {label: 'Label', icon: 'checklist', style: 'secondary', size: 'default'} %} +#} + +{% set mainClass = 'docs-button' %} + + \ No newline at end of file diff --git a/src/frontend/styles/components/button.pcss b/src/frontend/styles/components/button.pcss new file mode 100644 index 00000000..bb2d9d2f --- /dev/null +++ b/src/frontend/styles/components/button.pcss @@ -0,0 +1,74 @@ +.docs-button { + border-radius: 8px; + display: flex; + align-items: center; + height: var(--height); + padding-left: 12px; + padding-right: 12px; + color: white; + font-size: 14px; + font-weight: 500; + border: none; + cursor: pointer; + transition-property: background-color; + transition-duration: 0.1s; + + &--default { + --height: 40px; + } + + &--small { + --height: 32px; + } + + &--primary { + background: var(--color-button-primary); + + &:hover { + background: var(--color-button-primary-hover); + } + + &:active { + background: var(--color-button-primary-active); + } + } + + &--secondary { + background: var(--color-button-secondary); + color: var(--color-text-main); + + &:hover { + background: var(--color-button-secondary-hover); + } + + &:active { + background: var(--color-button-secondary-active); + } + } + + &--warning { + background: var(--color-button-warning); + + &:hover { + background: var(--color-button-warning-hover); + } + + &:active { + background: var(--color-button-warning-active); + } + } + + &--with-icon { + padding-left: 8px; + } + + &__icon { + margin-right: 4px; + + svg { + width: 24px; + height: 24px; + display: block; + } + } +} \ No newline at end of file diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss index d00b43ba..1c77bc7e 100644 --- a/src/frontend/styles/main.pcss +++ b/src/frontend/styles/main.pcss @@ -8,6 +8,7 @@ @import './components/page.pcss'; @import './components/landing.pcss'; @import './components/auth.pcss'; +@import './components/button.pcss'; body { font-family: system-ui, Helvetica, Arial, Verdana; diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss index c292aa39..7454d321 100644 --- a/src/frontend/styles/vars.pcss +++ b/src/frontend/styles/vars.pcss @@ -7,6 +7,19 @@ --color-bg-light: #f8f7fa; --color-page-active: #ff1767; + --color-button-primary: #3389FF; + --color-button-primary-hover: #2E7AE6; + --color-button-primary-active: #296DCC; + + --color-button-secondary: #F3F6F8; + --color-button-secondary-hover: #D9DCDE; + --color-button-secondary-active: #C0C3C4; + + --color-button-warning: #EF5C5C; + --color-button-warning-hover: #D65151; + --color-button-warning-active: #BD4848; + + /** * Site layout sizes */ diff --git a/src/frontend/svg/bin.svg b/src/frontend/svg/bin.svg new file mode 100644 index 00000000..8c60f996 --- /dev/null +++ b/src/frontend/svg/bin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/frontend/svg/checklist.svg b/src/frontend/svg/checklist.svg new file mode 100644 index 00000000..3688f2b1 --- /dev/null +++ b/src/frontend/svg/checklist.svg @@ -0,0 +1,3 @@ + + + From d5f75fbe9f80ce691f2cf2f7ec9cac415a041bff Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Wed, 11 May 2022 22:56:29 +0800 Subject: [PATCH 02/10] Replace old buttons with the new ones --- src/backend/views/components/button.twig | 2 +- src/backend/views/pages/form.twig | 7 ++++--- src/backend/views/pages/page.twig | 10 +++++----- src/frontend/styles/components/page.pcss | 9 ++++----- src/frontend/styles/components/writing.pcss | 7 ++++--- src/frontend/svg/edit.svg | 10 ++++++++++ 6 files changed, 28 insertions(+), 17 deletions(-) create mode 100644 src/frontend/svg/edit.svg diff --git a/src/backend/views/components/button.twig b/src/backend/views/components/button.twig index 7c8bc0ca..62597764 100644 --- a/src/backend/views/components/button.twig +++ b/src/backend/views/components/button.twig @@ -13,7 +13,7 @@ {% set mainClass = 'docs-button' %} - \ No newline at end of file + + {{ label }} + diff --git a/src/backend/views/components/header.twig b/src/backend/views/components/header.twig index 9c0a0eed..37079063 100644 --- a/src/backend/views/components/header.twig +++ b/src/backend/views/components/header.twig @@ -5,14 +5,12 @@