Skip to content

Commit

Permalink
fix: remove custom inactive osnap button styles (#116)
Browse files Browse the repository at this point in the history
  • Loading branch information
gsteenkamp89 authored Nov 28, 2023
1 parent ea96165 commit 6c0a1fd
Showing 1 changed file with 3 additions and 24 deletions.
27 changes: 3 additions & 24 deletions src/components/SettingsTreasuryActivateOsnapButton.vue
Original file line number Diff line number Diff line change
@@ -1,42 +1,21 @@
<script setup lang="ts">
const { theme } = useSkin();
defineProps<{
isOsnapEnabled: boolean;
}>();
// handling some theming here locally so as not to interfere with the global style.scss file
const inactiveStyles = computed(() => {
return theme.value === 'light'
? {
div: 'bg-[hsla(0,0%,0%,1)] text-skin-bg',
span: 'bg-skin-bg opacity-30'
}
: {
div: 'bg-[hsla(0,0%,100%,1)] text-skin-bg',
span: 'bg-skin-bg opacity-30'
};
});
</script>

<template>
<button
v-if="isOsnapEnabled"
class="flex items-center gap-2 rounded-full px-3 py-2 bg-primary text-white"
class="flex items-center gap-2 rounded-full px-3 py-2 bg-skin-primary text-white"
>
<span class="block h-[6px] w-[6px] rounded-full bg-green" />oSnap activated
</button>
<button
v-else
:class="[
'flex items-center gap-2 rounded-full px-3 py-2',
inactiveStyles.div
]"
class="bg-skin-link text-skin-bg flex items-center gap-2 rounded-full px-3 py-2"
>
<span
:class="['block h-[6px] w-[6px] rounded-full', inactiveStyles.span]"
/>
<span class="block h-[6px] w-[6px] rounded-full bg-skin-bg opacity-30" />
Activate oSnap
</button>
</template>

0 comments on commit 6c0a1fd

Please sign in to comment.