Skip to content

Commit 3cd6315

Browse files
michaelfigmichaelfig
committed
fix: make MenuButton more subtle
1 parent ae42200 commit 3cd6315

File tree

3 files changed

+173
-15
lines changed

3 files changed

+173
-15
lines changed

‎packages/dapp-svelte-wallet/ui/lib/Button.svelte

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<script>
2+
import Icon from "smelte/src/components/Icon";
3+
import utils, { ClassBuilder, filterProps } from "smelte/src/utils/classes.js";
4+
import createRipple from "smelte/src/components/Ripple/ripple.js";
5+
6+
7+
8+
export let value = false;
9+
export let outlined = false;
10+
export let text = false;
11+
export let block = false;
12+
export let disabled = false;
13+
export let icon = null;
14+
export let small = false;
15+
export let light = false;
16+
export let dark = false;
17+
export let flat = false;
18+
export let iconClass = "";
19+
export let color = "primary";
20+
export let href = null;
21+
export let fab = false;
22+
23+
export let remove = "";
24+
export let add = "";
25+
export let replace = {};
26+
27+
const classesDefault = 'py-2 px-4 uppercase text-sm font-medium relative overflow-hidden';
28+
const basicDefault = 'text-white duration-200 ease-in';
29+
const outlinedDefault = 'bg-transparent border border-solid';
30+
const textDefault = 'bg-transparent border-none px-4 hover:bg-transparent';
31+
const iconDefault = 'p-4 flex items-center select-none';
32+
const fabDefault = 'hover:bg-transparent';
33+
const smallDefault = 'pt-1 pb-1 pl-2 pr-2 text-xs';
34+
const disabledDefault = 'bg-gray-300 text-gray-500 dark:bg-dark-400 elevation-none pointer-events-none hover:bg-gray-300 cursor-default';
35+
const elevationDefault = 'hover:elevation-5 elevation-3';
36+
37+
export let classes = classesDefault;
38+
export let basicClasses = basicDefault;
39+
export let outlinedClasses = outlinedDefault;
40+
export let textClasses = textDefault;
41+
export let iconClasses = iconDefault;
42+
export let fabClasses = fabDefault;
43+
export let smallClasses = smallDefault;
44+
export let disabledClasses = disabledDefault;
45+
export let elevationClasses = elevationDefault;
46+
47+
fab = fab || (text && icon);
48+
const basic = !outlined && !text && !fab;
49+
const elevation = (basic || icon) && !disabled && !flat && !text;
50+
51+
let Classes = i => i;
52+
let iClasses = i => i;
53+
let shade = 0;
54+
55+
$: {
56+
shade = light ? 200 : 0;
57+
shade = dark ? -400 : shade;
58+
}
59+
$: normal = 500 - shade;
60+
$: lighter = 400 - shade;
61+
62+
$: ({
63+
bg,
64+
border,
65+
txt,
66+
} = utils(color));
67+
68+
const cb = new ClassBuilder(classes, classesDefault);
69+
let iconCb;
70+
71+
if (icon) {
72+
iconCb = new ClassBuilder(iconClass);
73+
}
74+
75+
$: classes = cb
76+
.flush()
77+
.add(basicClasses, basic, basicDefault)
78+
.add(`${bg(normal)} hover:${bg(lighter)}`, basic)
79+
.add(elevationClasses, elevation, elevationDefault)
80+
.add(outlinedClasses, outlined, outlinedDefault)
81+
.add(
82+
`${border(lighter)} ${txt(normal)} hover:${bg("trans")} dark-hover:${bg("transDark")}`,
83+
outlined)
84+
.add(`${txt(lighter)}`, text)
85+
.add(textClasses, text, textDefault)
86+
.add(iconClasses, icon, iconDefault)
87+
.remove("py-2", icon)
88+
.remove(txt(lighter), fab)
89+
.add(disabledClasses, disabled, disabledDefault)
90+
.add(smallClasses, small, smallDefault)
91+
.add("flex items-center justify-center h-8 w-8", small && icon)
92+
.add("border-solid", outlined)
93+
.add("rounded-full", icon)
94+
.add("w-full", block)
95+
.add("rounded", basic || outlined || text)
96+
.add("button", !icon)
97+
.add(fabClasses, fab, fabDefault)
98+
.add(`hover:${bg("transLight")}`, fab)
99+
.add($$props.class)
100+
.remove(remove)
101+
.replace(replace)
102+
.add(add)
103+
.get();
104+
105+
$: if (iconCb) {
106+
iClasses = iconCb.flush().add(txt(), fab && !iconClass).get();
107+
}
108+
109+
const ripple = createRipple((text || fab || outlined) ? color : "white");
110+
111+
const props = filterProps([
112+
'outlined',
113+
'text',
114+
'color',
115+
'block',
116+
'disabled',
117+
'icon',
118+
'small',
119+
'light',
120+
'dark',
121+
'flat',
122+
'add',
123+
'remove',
124+
'replace',
125+
], $$props);
126+
</script>
127+
128+
129+
{#if href}
130+
<a
131+
{href}
132+
{...props}
133+
>
134+
<button
135+
use:ripple
136+
class={classes}
137+
{...props}
138+
{disabled}
139+
on:click={() => (value = !value)}
140+
on:click
141+
on:mouseover
142+
on:*
143+
>
144+
{#if icon}
145+
<Icon class={iClasses} {small}>{icon}</Icon>
146+
{/if}
147+
<slot />
148+
</button>
149+
</a>
150+
{:else}
151+
<button
152+
use:ripple
153+
class={classes}
154+
{...props}
155+
{disabled}
156+
on:click={() => (value = !value)}
157+
on:click
158+
on:mouseover
159+
on:*
160+
>
161+
{#if icon}
162+
<Icon class={iClasses} {small}>{icon}</Icon>
163+
{/if}
164+
<slot />
165+
</button>
166+
{/if}

‎packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script>
2-
import Button from 'smelte/src/components/Button';
2+
import Button from './Button.svelte';
3+
// import Button from 'smelte/src/components/Button';
34
45
export let text = '';
56
export let id;
@@ -8,15 +9,7 @@
89
$: highlighted = value === id;
910
</script>
1011

11-
<style>
12-
.highlighted {
13-
background-color: var(--color-secondary-500);
14-
}
15-
</style>
16-
17-
<div class:highlighted>
18-
<Button outlined={id === value}
19-
text fab flat
20-
on:click={() => (value = id)} {color}
21-
><slot>{text}</slot></Button>
22-
</div>
12+
<Button outlined={id === value}
13+
text fab flat
14+
on:click={() => (value = id)} color={value === id ? 'secondary' : color}
15+
><slot>{text}</slot></Button>

‎packages/dapp-svelte-wallet/ui/src/App.svelte

+1-2
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@
102102
nav :global(button) {
103103
/* remove the padding at the bottom */
104104
margin: auto;
105-
color: var(--color-secondary);
106105
}
107106
nav h6 {
108107
text-transform: uppercase;
@@ -176,7 +175,7 @@
176175
<nav>
177176
<ListItems horizontal items={menu} on:change>
178177
<div slot="item" let:item>
179-
<MenuButton id={item.id} text={item.text} bind:value={navPanel} color="secondary"/>
178+
<MenuButton id={item.id} text={item.text} bind:value={navPanel} color="primary"/>
180179
</div>
181180
</ListItems>
182181

0 commit comments

Comments
 (0)