From b7f5c0b61ad07c52b1dda2a44e75974b52a8f7e8 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Mon, 10 Jan 2022 13:13:42 +0100 Subject: [PATCH 01/25] feat(ui): implement new navbar --- packages/ui/assets/styles/main.scss | 25 +++- packages/ui/components/Button.vue | 45 +++++++ packages/ui/components/MainSection.vue | 3 +- packages/ui/components/NavBar.vue | 161 +++++++++++++++++-------- packages/ui/components/WitnetLogo.vue | 23 +--- packages/ui/constants.js | 1 + packages/ui/locales/en.json | 2 +- packages/ui/locales/es.json | 2 +- 8 files changed, 189 insertions(+), 73 deletions(-) create mode 100644 packages/ui/components/Button.vue diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss index cd79c3c8..f9c44ea9 100644 --- a/packages/ui/assets/styles/main.scss +++ b/packages/ui/assets/styles/main.scss @@ -72,6 +72,7 @@ --switcher-item-background: #41BEA5; --switcher-item-color: white; + } .dark-mode { @@ -148,10 +149,19 @@ --contract-address: #41BEA5; - //switcher + //Switcher + + --switcher-item-background: #41BEA5; + --switcher-item-color: white; - --switcher-item-background: #41BEA5; - --switcher-item-color: white; + //Button + + --btn-primary-color: #EDEDED; + --btn-primary-background-color: #00D4AA16; + --btn-primary-border-color: #00D4AA16; + --btn-secondary-color: #4AB6A1; + --btn-secondary-background-color: #4AB6A1; + --btn-secondary-border-color: #4AB6A1; } .light-mode { @@ -232,6 +242,15 @@ --switcher-item-background: #41BEA5; --switcher-item-color: #2D2C39; + + //Button + + --btn-primary-color: #FDFDFD; + --btn-primary-background-color: #4AB6A1; + --btn-primary-border-color: #4AB6A1; + --btn-secondary-color: #4AB6A1; + --btn-secondary-background-color: #4AB6A1; + --btn-secondary-border-color: #4AB6A1; } h1 { diff --git a/packages/ui/components/Button.vue b/packages/ui/components/Button.vue new file mode 100644 index 00000000..dd0b9bd5 --- /dev/null +++ b/packages/ui/components/Button.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/packages/ui/components/MainSection.vue b/packages/ui/components/MainSection.vue index 87d99386..5d66a124 100644 --- a/packages/ui/components/MainSection.vue +++ b/packages/ui/components/MainSection.vue @@ -9,12 +9,11 @@ diff --git a/packages/ui/constants.js b/packages/ui/constants.js index b6bcd9ad..60ed7215 100644 --- a/packages/ui/constants.js +++ b/packages/ui/constants.js @@ -1,4 +1,5 @@ export const witnetBlockExplorerUrl = 'https://witnet.network/search' +export const requestDataFeedUrl = 'https://witnet.io' export const languages = [ { diff --git a/packages/ui/locales/en.json b/packages/ui/locales/en.json index 9eb17ccd..c2bf5da6 100644 --- a/packages/ui/locales/en.json +++ b/packages/ui/locales/en.json @@ -6,7 +6,7 @@ "data_feeds": "Data feeds" }, "navbar": { - "about": "About" + "request_data_feed": "Request data feed" }, "transactions_list": { "transactions": "Transactions", diff --git a/packages/ui/locales/es.json b/packages/ui/locales/es.json index 68414fb1..7e34643a 100644 --- a/packages/ui/locales/es.json +++ b/packages/ui/locales/es.json @@ -6,7 +6,7 @@ "data_feeds": "Data feeds" }, "navbar": { - "about": "Sobre Witnet" + "request_data_feed": "Request data feed" }, "transactions_list": { "transactions": "Transacciones", From ff102c275e17014f6b99a24b9203b91496973cb3 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Mon, 17 Jan 2022 11:00:48 +0100 Subject: [PATCH 02/25] feat(ui): implement footer --- packages/ui/assets/styles/colors.scss | 2 + packages/ui/assets/styles/main.scss | 9 ++++ packages/ui/components/Footer.vue | 71 ++++++++++++++++++++++++++ packages/ui/components/MainSection.vue | 15 +++--- packages/ui/components/NavBar.vue | 2 +- packages/ui/components/WitnetLogo.vue | 5 ++ packages/ui/constants.js | 2 + packages/ui/layouts/default.vue | 1 + packages/ui/locales/en.json | 8 ++- 9 files changed, 107 insertions(+), 8 deletions(-) create mode 100644 packages/ui/components/Footer.vue diff --git a/packages/ui/assets/styles/colors.scss b/packages/ui/assets/styles/colors.scss index 623c26a2..00bb3968 100644 --- a/packages/ui/assets/styles/colors.scss +++ b/packages/ui/assets/styles/colors.scss @@ -3,6 +3,8 @@ $black: black; // GREENS $green-1: #5fbfae; $green-2: #468d80; +$green-3: #26474B; +$green-4: #4AB6A1; //BLUES $blue-1: #758ea9; $blue-2: #526488; diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss index f9c44ea9..85ff90c9 100644 --- a/packages/ui/assets/styles/main.scss +++ b/packages/ui/assets/styles/main.scss @@ -73,6 +73,9 @@ --switcher-item-background: #41BEA5; --switcher-item-color: white; + //footer + --footer-bg: #4AB6A1; + } .dark-mode { @@ -162,6 +165,9 @@ --btn-secondary-color: #4AB6A1; --btn-secondary-background-color: #4AB6A1; --btn-secondary-border-color: #4AB6A1; + + //footer + --footer-bg: #26474B; } .light-mode { @@ -251,6 +257,9 @@ --btn-secondary-color: #4AB6A1; --btn-secondary-background-color: #4AB6A1; --btn-secondary-border-color: #4AB6A1; + + //footer + --footer-bg: #4AB6A1; } h1 { diff --git a/packages/ui/components/Footer.vue b/packages/ui/components/Footer.vue new file mode 100644 index 00000000..11a5520f --- /dev/null +++ b/packages/ui/components/Footer.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/packages/ui/components/MainSection.vue b/packages/ui/components/MainSection.vue index 5d66a124..c3316e91 100644 --- a/packages/ui/components/MainSection.vue +++ b/packages/ui/components/MainSection.vue @@ -1,8 +1,11 @@ @@ -11,7 +14,7 @@ color: var(--text); min-height: 100vh; display: grid; - grid-template-rows: 150px 1fr; + grid-template-rows: 150px 1fr max-content; grid-template-columns: 1fr; max-width: 1124px; row-gap: 24px; @@ -26,7 +29,7 @@ } @media (max-width: 1200px) { .main-section { - grid-template-rows: 100px 1fr; + grid-template-rows: 100px 1fr max-content; padding: 0; } } diff --git a/packages/ui/components/NavBar.vue b/packages/ui/components/NavBar.vue index 2d8bfaa0..00134478 100644 --- a/packages/ui/components/NavBar.vue +++ b/packages/ui/components/NavBar.vue @@ -97,7 +97,7 @@ export default { display: flex; align-items: center; &.visible { - background: white; + background: var(--bg); display: block; padding: 0; } diff --git a/packages/ui/components/WitnetLogo.vue b/packages/ui/components/WitnetLogo.vue index f19ef19d..ac598680 100644 --- a/packages/ui/components/WitnetLogo.vue +++ b/packages/ui/components/WitnetLogo.vue @@ -29,4 +29,9 @@ .main { fill: var(--logo-dot); } +.white { + .main { + fill: $white; + } +} diff --git a/packages/ui/constants.js b/packages/ui/constants.js index 60ed7215..7ffd274f 100644 --- a/packages/ui/constants.js +++ b/packages/ui/constants.js @@ -1,5 +1,7 @@ export const witnetBlockExplorerUrl = 'https://witnet.network/search' export const requestDataFeedUrl = 'https://witnet.io' +export const documentationUrl = 'https://docs.witnet.io/' +export const witnetUrl = 'https://witnet.io' export const languages = [ { diff --git a/packages/ui/layouts/default.vue b/packages/ui/layouts/default.vue index cccc0355..85d13fec 100644 --- a/packages/ui/layouts/default.vue +++ b/packages/ui/layouts/default.vue @@ -3,6 +3,7 @@ +