diff --git a/CHANGELOG.md b/CHANGELOG.md index 681d3302bd..d0baa55907 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.3.0] - 2023-07-13 + +## Added + +- Comprehensive application of a custom UI/UX theme, encompassing: + - Incorporation of specific colors for graph representation + - Accentuation of color for PayoutBar and PayoutLine elements + - Integration of the HumanSans typography + - Refinement of colors assigned to BalanceGraph and Bounded components + - Modification of the primary color dedicated to the light theme + - Refreshment of the Cere Icon and Logo aesthetics + +## Changed + +- The functionality to toggle between light and dark themes has been reinstated +- Cere icon in the validator configuration has been updated + ## [1.2.1] - 2023-07-12 ## Changed diff --git a/package.json b/package.json index d9e231b9b8..59d320f79d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "polkadot-staking-dashboard", - "version": "1.2.1", + "version": "1.3.0", "license": "apache-2.0", "private": false, "dependencies": { diff --git a/public/fonts/HumanSans/HumanSans-Medium.otf b/public/fonts/HumanSans/HumanSans-Medium.otf new file mode 100644 index 0000000000..967580d7c3 Binary files /dev/null and b/public/fonts/HumanSans/HumanSans-Medium.otf differ diff --git a/public/fonts/HumanSans/HumanSans-Regular.otf b/public/fonts/HumanSans/HumanSans-Regular.otf new file mode 100644 index 0000000000..81bcb56f94 Binary files /dev/null and b/public/fonts/HumanSans/HumanSans-Regular.otf differ diff --git a/public/fonts/HumanSans/Lisence_HumanSans_OFL.txt b/public/fonts/HumanSans/Lisence_HumanSans_OFL.txt new file mode 100644 index 0000000000..5d08c9030e --- /dev/null +++ b/public/fonts/HumanSans/Lisence_HumanSans_OFL.txt @@ -0,0 +1,95 @@ +Copyright (c) 2021, Tim Radville (humansans@radville.com), +with Reserved Font Name Human Sans. + + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/src/config/networks.ts b/src/config/networks.ts index bccad9a1c8..21962334db 100644 --- a/src/config/networks.ts +++ b/src/config/networks.ts @@ -8,7 +8,7 @@ const cereMainnet = { name: 'Cere', colors: { primary: { - light: 'rgb(183, 174, 255)', + light: '#1D1B20', dark: 'rgb(183, 174, 255)', }, secondary: { diff --git a/src/config/validators/thumbnails/cere.svg b/src/config/validators/thumbnails/cere.svg index 91e47cfc9f..bdf0e5031e 100644 --- a/src/config/validators/thumbnails/cere.svg +++ b/src/config/validators/thumbnails/cere.svg @@ -1,15 +1,4 @@ - - - - - - - - - - - - + + diff --git a/src/img/cere_icon.svg b/src/img/cere_icon.svg index 1cf682eb48..bdf0e5031e 100644 --- a/src/img/cere_icon.svg +++ b/src/img/cere_icon.svg @@ -1,13 +1,4 @@ - - - - - - - - - - - - + + diff --git a/src/img/cere_logo.svg b/src/img/cere_logo.svg index 1ad76cba25..b7fe7e239b 100644 --- a/src/img/cere_logo.svg +++ b/src/img/cere_logo.svg @@ -1,18 +1,16 @@ - - - - - - - - - - - - - - - - - + + + + + + diff --git a/src/index.css b/src/index.css index 728ad67ce4..a4ee0017c5 100644 --- a/src/index.css +++ b/src/index.css @@ -2,10 +2,17 @@ * SPDX-License-Identifier: Apache-2.0 */ @font-face { - font-family: 'Work Sans'; + font-family: 'Human Sans'; font-style: normal; font-weight: 400; - src: url('../public/fonts/WorkSans-VariableFont_wght.ttf'); + src: url('../public/fonts/HumanSans/HumanSans-Regular.otf'); +} + +@font-face { + font-family: 'Human Sans'; + font-style: normal; + font-weight: 500; + src: url('../public/fonts/HumanSans/HumanSans-Medium.otf'); } /* global font size */ @@ -27,14 +34,14 @@ html { body { margin: 0; - font-family: 'Work Sans', 'sans-serif', sans-serif; + font-family: 'Human Sans', 'sans-serif', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1 { - font-weight: normal; + font-weight: 500; font-size: 1.6rem; font-variation-settings: 'wght' 600; margin: 0 0 0.4rem 0; @@ -42,20 +49,20 @@ h1 { h2 { font-variation-settings: 'wght' 580; - font-weight: normal; + font-weight: 500; font-size: 1.5rem; } h3 { font-variation-settings: 'wght' 560; - font-weight: normal; + font-weight: 500; font-size: 1.25rem; line-height: 1.55rem; } h4 { font-variation-settings: 'wght' 540; - font-weight: normal; + font-weight: 500; font-size: 1.05rem; line-height: 1.6rem; } @@ -63,7 +70,7 @@ h4 { h5 { color: #333; font-variation-settings: 'wght' 540; - font-weight: normal; + font-weight: 500; font-size: 0.89rem; margin: 1rem 0; } @@ -81,7 +88,7 @@ a { } button { - font-family: 'Work Sans', 'sans-serif', sans-serif; + font-family: 'Human Sans', 'sans-serif', sans-serif; background: none; box-shadow: none; border: none; @@ -95,4 +102,4 @@ button { display: flex; flex-flow: row wrap; align-items: flex-end; -} \ No newline at end of file +} diff --git a/src/library/Graphs/Bonded.tsx b/src/library/Graphs/Bonded.tsx index e3c15b597c..bf7a5d42f8 100644 --- a/src/library/Graphs/Bonded.tsx +++ b/src/library/Graphs/Bonded.tsx @@ -81,7 +81,7 @@ export const Bonded = (props: BondedProps) => { defaultThemes.graphs.inactive[mode], ] : [ - networkColors[`${network.name}-${mode}`], + defaultThemes.graphs.accent[mode], defaultThemes.graphs.colors[0][mode], defaultThemes.graphs.colors[1][mode], ]; diff --git a/src/library/Graphs/PayoutBar.tsx b/src/library/Graphs/PayoutBar.tsx index d26609ae4e..653bbbe709 100644 --- a/src/library/Graphs/PayoutBar.tsx +++ b/src/library/Graphs/PayoutBar.tsx @@ -65,7 +65,7 @@ export const PayoutBar = (props: PayoutBarProps) => { // determine color for payouts const colorPayouts = notStaking ? networkColorsTransparent[`${network.name}-${mode}`] - : networkColors[`${network.name}-${mode}`]; + : defaultThemes.graphs.accent[mode]; // determine color for poolClaims const colorPoolClaims = notStaking diff --git a/src/library/Graphs/PayoutLine.tsx b/src/library/Graphs/PayoutLine.tsx index 2713ffffe0..e260831ed0 100644 --- a/src/library/Graphs/PayoutLine.tsx +++ b/src/library/Graphs/PayoutLine.tsx @@ -67,7 +67,7 @@ export const PayoutLine = (props: PayoutLineProps) => { const color = notStaking ? networkColorsTransparent[`${network.name}-${mode}`] : !poolingOnly - ? networkColors[`${network.name}-${mode}`] + ? defaultThemes.graphs.accent[mode] : networkColorsSecondary[`${network.name}-${mode}`]; // configure graph options diff --git a/src/library/SideMenu/index.tsx b/src/library/SideMenu/index.tsx index fec0006a46..9ca6476964 100644 --- a/src/library/SideMenu/index.tsx +++ b/src/library/SideMenu/index.tsx @@ -226,6 +226,10 @@ export const SideMenu = () => { transform="grow-3" /> +