Skip to content

Commit

Permalink
Merge pull request #71 from dl-solarity/feature/poseidon-hash
Browse files Browse the repository at this point in the history
Fix/Convertor fixes
  • Loading branch information
lilbonekit authored Oct 3, 2024
2 parents 4127683 + cddc9d8 commit bbeaf33
Show file tree
Hide file tree
Showing 13 changed files with 386 additions and 84 deletions.
17 changes: 17 additions & 0 deletions assets/icons/spinner-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/icons/x-circle-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions assets/styles/_app-colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@ $background-primary-light: #252627;
$background-primary-main: #151314;
$background-primary-dark: #0C0D10;

$background-success-main: #161F18;

$background-error-main: #1F1616;

$background-secondary-main: #181819;

/* status colors */
$success-light: #5EDDB7;
$success-light: #66EBC2;
$success-main: #5EDDB7;
$success-dark: #5EDDB7;
$success-dark: #56CBA5;

$error-light: #FF8383;
$error-main: #FF8383;
Expand Down
4 changes: 4 additions & 0 deletions assets/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@

--background-secondary-main: #{$background-secondary-main};

--background-success-main: #{$background-success-main};

--background-error-main: #{$background-error-main};

/* status colors */
--success-light: #{$success-light};
--success-main: #{$success-main};
Expand Down
80 changes: 80 additions & 0 deletions components/AppAlert.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<template>
<div :class="alertClasses">
<app-icon class="app-alert__icon" :name="alertIcon" />
<div class="app-alert__details">
<p class="app-alert__title">
{{ title }}
</p>
<p class="app-alert__message">
{{ message }}
</p>
</div>
</div>
</template>

<script setup lang="ts">
import { AppIcon } from '#components'
import { ICON_NAMES } from '@/enums'
const props = defineProps<{
title?: string
message?: string
type: 'success' | 'error'
}>()
const alertClasses = computed(() => ['app-alert', `app-alert--${props.type}`])
const alertIcon = computed(() => {
switch (props.type) {
case 'success':
return ICON_NAMES.checkCircle
case 'error':
return ICON_NAMES.xCircle
}
})
</script>

<style scoped lang="scss">
.app-alert {
display: flex;
align-items: center;
gap: toRem(12);
background: var(--app-alert-bg);
border: var(--app-alert-border);
color: var(--app-alert-color);
border-radius: var(--field-border-radius);
padding: toRem(16);
@include respond-to(small) {
padding: toRem(10) toRem(12);
}
& .app-alert__title {
color: var(--app-alert-color);
@include p-16-semi-bold;
}
& .app-alert__message {
color: var(--app-alert-color);
@include p-14-semi-bold;
}
& .app-alert__icon {
width: toRem(20);
aspect-ratio: 1;
}
&--success {
--app-alert-bg: var(--background-success-main);
--app-alert-border: #{toRem(1)} solid var(--success-main);
--app-alert-color: var(--success-main);
}
&--error {
--app-alert-bg: var(--background-error-main);
--app-alert-border: #{toRem(1)} solid var(--error-main);
--app-alert-color: var(--error-main);
}
}
</style>
154 changes: 133 additions & 21 deletions components/AppButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
:to="route"
>
<app-icon
v-if="iconLeft"
class="app-button__icon-left"
:name="iconLeft"
v-if="buttonIconLeft"
class="app-button__icon app-button__icon--left"
:name="buttonIconLeft"
/>
<template v-if="$slots.default">
<slot />
Expand All @@ -21,17 +21,17 @@
</template>
<app-icon
v-if="iconRight"
class="app-button__icon-right"
class="app-button__icon app-button__icon--right"
:name="iconRight"
/>
</nuxt-link>
</template>
<template v-else-if="href">
<a class="app-button" :class="buttonClasses" v-bind="$attrs" :href="href">
<app-icon
v-if="iconLeft"
class="app-button__icon-left"
:name="iconLeft"
v-if="buttonIconLeft"
class="app-button__icon app-button__icon--left"
:name="buttonIconLeft"
/>
<template v-if="$slots.default">
<slot />
Expand All @@ -43,7 +43,7 @@
</template>
<app-icon
v-if="iconRight"
class="app-button__icon-right"
class="app-button__icon app-button__icon--right"
:name="iconRight"
/>
</a>
Expand All @@ -57,9 +57,9 @@
:type="buttonType"
>
<app-icon
v-if="iconLeft"
class="app-button__icon-left"
:name="iconLeft"
v-if="buttonIconLeft"
class="app-button__icon app-button__icon--left"
:name="buttonIconLeft"
/>
<template v-if="$slots.default">
<slot />
Expand All @@ -71,7 +71,7 @@
</template>
<app-icon
v-if="iconRight"
class="app-button__icon-right"
class="app-button__icon app-button__icon--right"
:name="iconRight"
/>
</button>
Expand All @@ -91,12 +91,13 @@ const props = withDefaults(
text?: string
scheme?: 'filled' | 'flat' | 'none'
modification?: 'border-circle' | 'border-rounded' | 'text' | 'none'
color?: 'primary' | 'secondary' | 'none'
color?: 'primary' | 'secondary' | 'success' | 'error' | 'none'
size?: 'large' | 'medium' | 'none'
route?: RouteLocationRaw
href?: string
iconLeft?: ICON_NAMES | ''
iconRight?: ICON_NAMES | ''
isLoading?: boolean
}>(),
{
text: '',
Expand All @@ -108,14 +109,17 @@ const props = withDefaults(
href: '',
iconLeft: '',
iconRight: '',
isLoading: false,
},
)
const attrs = useAttrs()
const slots = useSlots()
const isDisabled = computed((): boolean =>
['', 'disabled', true].includes(attrs.disabled as string | boolean),
const isDisabled = computed(
(): boolean =>
['', 'disabled', true].includes(attrs.disabled as string | boolean) ||
props.isLoading,
)
const buttonClasses = computed(() => [
Expand All @@ -130,8 +134,13 @@ const buttonClasses = computed(() => [
...((props.iconLeft || props.iconRight) && !props.text && !slots.default
? ['app-button--icon-only']
: []),
...(props.isLoading ? ['app-button--loading'] : []),
])
const buttonIconLeft = computed(() =>
props.isLoading ? ICON_NAMES.spinner : props.iconLeft,
)
const buttonType = computed<ButtonType>(
() => (attrs.type as ButtonType) || 'button',
)
Expand All @@ -152,15 +161,23 @@ const buttonType = computed<ButtonType>(
background-color: var(--app-button-bg);
color: var(--app-button-text);
&:disabled,
&--disabled {
&:disabled:not(.app-button--loading),
&--disabled:not(.app-button--loading) {
cursor: not-allowed;
pointer-events: none;
--app-button-bg: var(--app-button-disabled-bg);
--app-button-text: var(--app-button-disabled-text);
--app-button-border: var(--app-button-disabled-border);
}
&.app-button--disabled,
.app-button--loading {
background-color: var(--app-button-bg);
color: var(--app-button-text);
border: var(--app-button-border);
opacity: 0.5;
}
&:not([disabled]):hover {
text-decoration: none;
transition-timing-function: var(--transition-timing-default);
Expand Down Expand Up @@ -331,6 +348,90 @@ const buttonType = computed<ButtonType>(
}
}
&--success {
--app-button-filled-bg: var(--success-main);
--app-button-filled-bg-hover: var(--success-dark);
--app-button-filled-bg-focused: var(--success-dark);
--app-button-filled-bg-active: var(--success-dark);
--app-button-filled-text: var(--text-primary-invert-main);
--app-button-filled-text-hover: var(--text-primary-invert-main);
--app-button-filled-text-focused: var(--text-primary-invert-light);
--app-button-filled-text-active: var(--text-primary-invert-main);
--app-button-flat-bg-hover: var(--background-success-light);
--app-button-flat-bg-focused: var(--background-success-light);
--app-button-flat-bg-active: var(--background-success-light);
--app-button-flat-text: var(--success-main);
--app-button-flat-text-hover: var(--success-main);
--app-button-flat-text-focused: var(--success-light);
--app-button-flat-text-active: var(--success-light);
--app-button-flat-border: #{toRem(1)} solid var(--success-main);
--app-button-flat-border-hover: #{toRem(1)} solid var(--success-main);
--app-button-flat-border-focused: #{toRem(1)} solid var(--success-light);
--app-button-flat-border-active: #{toRem(1)} solid var(--success-light);
--app-button-none-bg-hover: var(--background-success-light);
--app-button-none-bg-focused: var(--background-success-light);
--app-button-none-bg-active: var(--background-success-light);
--app-button-none-text: var(--success-main);
--app-button-none-text-hover: var(--success-main);
--app-button-none-text-focused: var(--success-light);
--app-button-none-text-active: var(--success-light);
&.app-button--text {
--app-button-text: var(--text-primary-invert-main);
--app-button-text-hover: var(--primary-light);
--app-button-text-focused: var(--primary-dark);
--app-button-text-active: var(--primary-dark);
}
}
&--error {
--app-button-filled-bg: var(--error-main);
--app-button-filled-bg-hover: var(--error-dark);
--app-button-filled-bg-focused: var(--error-dark);
--app-button-filled-bg-active: var(--error-dark);
--app-button-filled-text: var(--text-primary-invert-main);
--app-button-filled-text-hover: var(--text-primary-invert-main);
--app-button-filled-text-focused: var(--text-primary-invert-light);
--app-button-filled-text-active: var(--text-primary-invert-main);
--app-button-flat-bg-hover: var(--background-error-light);
--app-button-flat-bg-focused: var(--background-error-light);
--app-button-flat-bg-active: var(--background-error-light);
--app-button-flat-text: var(--error-main);
--app-button-flat-text-hover: var(--error-main);
--app-button-flat-text-focused: var(--error-light);
--app-button-flat-text-active: var(--error-light);
--app-button-flat-border: #{toRem(1)} solid var(--error-main);
--app-button-flat-border-hover: #{toRem(1)} solid var(--error-main);
--app-button-flat-border-focused: #{toRem(1)} solid var(--error-light);
--app-button-flat-border-active: #{toRem(1)} solid var(--error-light);
--app-button-none-bg-hover: var(--background-error-light);
--app-button-none-bg-focused: var(--background-error-light);
--app-button-none-bg-active: var(--background-error-light);
--app-button-none-text: var(--error-main);
--app-button-none-text-hover: var(--error-main);
--app-button-none-text-focused: var(--error-light);
--app-button-none-text-active: var(--error-light);
&.app-button--text {
--app-button-text: var(--text-primary-invert-main);
--app-button-text-hover: var(--primary-light);
--app-button-text-focused: var(--primary-dark);
--app-button-text-active: var(--primary-dark);
}
}
&--none {
$flat-border-hover: #{toRem(1)} solid var(--primary-light);
Expand Down Expand Up @@ -406,11 +507,16 @@ const buttonType = computed<ButtonType>(
text-decoration: underline;
}
}
}
.app-button__icon-left,
.app-button__icon-right {
height: 1.6em;
width: 1.6em;
.app-button__icon {
height: toRem(20);
width: toRem(20);
&--left {
.app-button--loading & {
animation: spin 2s linear infinite;
}
}
}
Expand All @@ -423,4 +529,10 @@ const buttonType = computed<ButtonType>(
@include text-ellipsis;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
</style>
Loading

0 comments on commit bbeaf33

Please sign in to comment.