Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme updates #698

Merged
merged 7 commits into from
Jun 15, 2023
Merged

Theme updates #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fa62460
Updating EOS theme
jaegerfe May 10, 2023
5f2f135
Updating EOS logos
jaegerfe May 10, 2023
2687c1c
Updating default theme
jaegerfe May 11, 2023
63dfeda
Updating font on Vote for blocks
jaegerfe May 23, 2023
ce92505
Updating Jugnle theme
jaegerfe May 30, 2023
d665444
Updating icons and fixing icons resizing
jaegerfe Jun 13, 2023
37b3dcd
Large logos maintaining their proportions
karynemayer Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified public/chains/eos/eos.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/eos/eos_large.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/eos/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/jungle/eos.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/jungle/eos_large.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/jungle/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/chains/ux/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/chains/ux/logo_lg.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/chains/ux/logo_sm.jpeg
View file
Open in desktop
Binary file not shown.
Binary file added public/chains/ux/logo_sm.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 0 additions & 26 deletions public/chains/ux/logo_sm.svg
View file
Open in desktop

This file was deleted.

10 changes: 7 additions & 3 deletions src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,19 +96,23 @@ export default defineComponent({
.logo
width: 104px
height:40px
object-fit: contain

.logo-token
width: 40px
height: 40px
object-fit: contain

.active-tab
text-decoration: none
color: #ffffff
color: var(--q-color-header-text)
opacity: 1 !important

.deactive
opacity: 0.3
opacity: 0.65
font-size: 18px

.header-background
background: var(--q-secondary)
border-bottom: 2px solid var(--q-color-header-border)
background: var(--q-color-header-background)
</style>
2 changes: 1 addition & 1 deletion src/components/HeaderSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export default defineComponent({

<style lang="sass">
.search-input
background: rgba(255, 255, 255, 0.05)
background: rgba(255, 255, 255, 0.15)
border-radius: 4px

.search-input .q-select__dropdown-icon
Expand Down
5 changes: 1 addition & 4 deletions src/components/PriceChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,7 @@ export default defineComponent({
},
stops: [
// [0, '#571AFF'],
[0, 'rgba(234 , 227 , 252 , 0.6)'],
[1, 'rgba(87, 26, 255, 0.003)'],
[2, 'rgba(87, 26, 255, 0.0001)'],
[3, 'rgba(87, 26, 255, 0)'],
[0, getCssVar('color-graph-shadow')],
],
},
marker: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProposalSuccess.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default defineComponent({

<template>
<q-dialog v-model="value" maximized>
<q-card class="gradient-box">
<q-card class="header-support">
<q-card-section class="full-height row justify-center items-center">
<div class="proposal-success__section-wrapper">
<header class="q-mb-lg">
Expand Down
2 changes: 1 addition & 1 deletion src/components/WorldMap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ export default defineComponent({
v-model="producerToggle"
label="Show Active BP"
left-label
color="cyan-4"
color="white"
@update:model-value="(val)=> updateToggleOption(val)"
/>
</div>
Expand Down
165 changes: 84 additions & 81 deletions src/components/validators/ValidatorData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,107 +185,110 @@ export default defineComponent({
</script>

<template>

<div>
<div class="q-pa-md">
<div class="row q-col-gutter-md q-pt-md">
<div class="col-md-8 col-sm-12 col-xs-12">
<q-card class="full-height card-gradient" flat>
<q-card-section>
<div class="row q-pa-md text-h5 text-weight-light">Voting Statistics</div>
<div class="row q-pa-md">
<div class="col-12">
<q-linear-progress
class="gradient-color q-mt-sm"
size="120px"
rounded
:value="votesProgress"
/>
</div>
<div class="q-pa-md header-support">
<div class="row q-col-gutter-md q-pt-md container-max-width">
<div class="col-md-8 col-sm-12 col-xs-12">
<q-card class="full-height" >
<q-card-section>
<div class="row q-pa-md text-h5 text-weight-light">Voting Statistics</div>
<div class="row q-pa-md">
<div class="col-12">
<q-linear-progress
class="gradient-color q-mt-sm"
size="120px"
rounded
:value="votesProgress"
/>
</div>
<div class="row q-pa-md">
<div class="col-12">
<div class="row">
<div class="col-6 text-uppercase text-weight-light text-grey-4">Total votes</div>
<div class="col-6">
<div class="float-right text-uppercase text-weight-light text-grey-4">Total Supply</div>
</div>
</div>
<div class="row">
<div class="col-6">{{ amount_voted.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
<div class="col-6">
<div class="float-right">{{ supply.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
</div>
</div>
<div class="row q-pa-md">
<div class="col-12">
<div class="row">
<div class="col-6 text-uppercase text-grey">Total votes</div>
<div class="col-6">
<div class="float-right text-uppercase text-grey">Total Supply</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</div>
<div v-if="accountValid" class="col-md-4 col-sm-12 col-xs-12">
<q-card class="full-height card-gradient" flat>
<q-card-section class="card-gradient">
<div class="row full-width justify-center">
<div class="text-h6 q-py-md text-weight-light text-grey-4">Current Vote Weight</div>
<q-icon
class="info-icon"
name="info"
color="white"
size="20px"
>
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">Voting is inversley weighted and increases the more validators you vote for (up to 30).</q-tooltip>
</q-icon>
</div>
<div class="row full-width justify-center text-h5">{{ balance }}</div>
<div class="row full-width justify-center text-h6 q-py-md text-weight-light text-grey-4">{{account}}</div>
</q-card-section>
<q-separator color="primary" size="2px"/>
<q-card-section>
<div class="row full-width justify-center subtitle2 q-py-md text-weight-light text-grey-4 q-pt-lg">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
<div class="row full-width justify-center">
<q-btn
class="full-width q-pa-sm"
label="Vote for Block Producers"
color="primary"
@click="sendVoteTransaction"
/>
</div>
</q-card-section>
</q-card>
</div>
<div v-else class="col-md-4 col-sm-12 col-xs-12">
<q-card class="full-height card-gradient" flat>
<q-card-section class="full-height">
<div class="column justify-center full-height">
<div class="row">
<div class="col-12 subtitle2 q-pb-md text-weight-light text-grey-4 q-pt-lg text-center">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
<div class="col-12">
<q-btn
class="full-width q-pa-sm"
label="Vote for Block Producers"
color="primary"
@click="sendVoteTransaction"
/>
<div class="col-6">{{ amount_voted.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
<div class="col-6">
<div class="float-right">{{ supply.toLocaleString(undefined, {minimumFractionDigits: 4,maximumFractionDigits: 4,}) }}</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</div>
</div>
</q-card-section>
</q-card>
</div>
<div v-if="accountValid" class="col-md-4 col-sm-12 col-xs-12">
<q-card>
<q-card-section>
<div class="row full-width justify-center">
<div class="text-h6 q-py-md text-weight-regular text-grey">Current Vote Weight</div>
<q-icon
class="info-icon"
name="info"
color="white"
size="20px"
>
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">Voting is inversley weighted and increases the more validators you vote for (up to 30).</q-tooltip>
</q-icon>
</div>
<div class="row full-width justify-center text-h5">{{ balance }}</div>
<div class="row full-width justify-center text-h6 q-py-md text-weight-regular text-grey">{{account}}</div>
</q-card-section>
<q-separator />
<q-card-section>
<div class="row full-width justify-center subtitle2 q-py-md text-weight-regular text-grey q-pt-lg">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
<div class="row full-width justify-center">
<q-btn
class="full-width q-pa-sm"
label="Vote for Block Producers"
color="primary"
@click="sendVoteTransaction"
/>
</div>
</q-card-section>
</q-card>
</div>

<div v-else class="col-md-4 col-sm-12 col-xs-12">
<q-card class="full-height">
<q-card-section class="full-height">
<div class="column justify-center full-height">
<div class="row">
<div class="col-12 subtitle2 q-pb-md text-weight-regular text-grey q-pt-lg text-center">SELECTED {{currentVote.length}} BLOCK PRODUCERS</div>
<div class="col-12">
<q-btn
class="full-width q-pa-sm"
label="Vote for Block Producers"
color="primary"
@click="sendVoteTransaction"
/>
</div>
</div>
</div>
</q-card-section>
</q-card>
</div>
</div>
</div>
<div class="container-max-width">
<ValidatorDataTable ref="ValidatorDataTable" :top21pay24h="top21pay24h"/>
<ViewTransaction
v-model="openTransaction"
:transactionId="transactionId"
:transactionError="transactionError || ''"
message="transaction complete"
/>
<WalletModal v-model="showWalletModal"/>
</div>
<WalletModal v-model="showWalletModal"/>
</template>

<style lang="sass" scoped>
.header-support
height: auto

.card-gradient
background: var(--q-color-secondary-gradient)
color: white
Expand Down
24 changes: 23 additions & 1 deletion src/config/chains/eos/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,29 @@ const FUEL_RPC_ENDPOINT = {
const API_ENDPOINT = 'https://example.com';
const S3_PRODUCER_BUCKET = 'https://telos-producer-validation.s3.amazonaws.com';
const DISPLAY_MAP = true;
const THEME = {};
const THEME = {
primary: '#28417c',
secondary: '#000000', //disso
accent: '#9C27B0',
dark: '#1d1d1d',
positive: '#21BA45',
negative: '#ff0000',
info: '#31CCEC',
warning: '#F2C037',
'color-map': '#19284e', //disso
'color-primary-gradient': 'linear-gradient(90deg, #0c3964 0%, #1876d2 100%)',
'color-secondary-gradient':
'linear-gradient(180deg, #0c3964 0%, #1876d2 147.34%)',
'color-tertiary-gradient':
'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
'color-progress-gradient': '#28417c',
'color-header-background': '#000000',
'color-header-border': '#444',
'color-header-support-background': '#000',
'color-graph-shadow': '#3f65c228',
};

// create vars for map colors (border, backround, countries, popup, text, popup)

export default class EOS extends BaseChain {
getName(): string {
Expand Down
22 changes: 21 additions & 1 deletion src/config/chains/jungle/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,27 @@ const RPC_ENDPOINT = {
};
const API_ENDPOINT = 'https://example.com';
const DISPLAY_MAP = true;
const THEME = {};
const THEME = {
primary: '#28417c',
secondary: '#000000', //disso
accent: '#9C27B0',
dark: '#1d1d1d',
positive: '#21BA45',
negative: '#ff0000',
info: '#31CCEC',
warning: '#F2C037',
'color-map': '#19284e', //disso
'color-primary-gradient': 'linear-gradient(90deg, #0c3964 0%, #1876d2 100%)',
'color-secondary-gradient':
'linear-gradient(180deg, #0c3964 0%, #1876d2 147.34%)',
'color-tertiary-gradient':
'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
'color-progress-gradient': '#28417c',
'color-header-background': '#000000',
'color-header-border': '#444',
'color-header-support-background': '#000',
'color-graph-shadow': '#3f65c228',
};

export default class TelosTestnet extends BaseChain {
getName(): string {
Expand Down
7 changes: 5 additions & 2 deletions src/config/chains/telos-testnet/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,13 @@ const THEME = {
'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
'color-tertiary-gradient':
'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
'color-progress-gradient':
'linear-gradient(90deg, #571AFF 0%, #A088F9 48.44%, #CBCAF5 100%)',
'color-progress-gradient': '#571aff',
'color-producer-card-background': '#f5f4fe',
'color-select-box-background': '#e0dffb',
'color-header-background': '#071A5F',
'color-header-border': '#8a65d41a',
'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
'color-graph-shadow': '#571aff28',
};

export default class TelosTestnet extends BaseChain {
Expand Down
7 changes: 5 additions & 2 deletions src/config/chains/telos/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,13 @@ const THEME = {
'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
'color-tertiary-gradient':
'linear-gradient(90deg, #CBCAF5 0%, #A9CAF3 56.77%, #63C9EF 100%)',
'color-progress-gradient':
'linear-gradient(90deg, #571AFF 0%, #A088F9 48.44%, #CBCAF5 100%)',
'color-progress-gradient': '#571aff',
'color-producer-card-background': '#f5f4fe',
'color-select-box-background': '#e0dffb',
'color-header-background': '#071A5F',
'color-header-border': '#8a65d41a',
'color-header-support-background': 'linear-gradient(180deg, #071A5F 0%, #571aff 147.34%)',
'color-graph-shadow': '#571aff28',
};

export default class Telos extends BaseChain {
Expand Down
4 changes: 2 additions & 2 deletions src/config/chains/ux/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ export default class UX extends BaseChain {
}

getLargeLogoPath(): string {
return 'chains/ux/logo_sm.jpeg';
return 'chains/ux/logo_sm.png';
}

getSmallLogoPath(): string {
return 'chains/ux/logo_sm.jpeg';
return 'chains/ux/logo_sm.png';
}

getMapDisplay(): boolean {
Expand Down
Loading