[Draft] Added slider instead of drop down for referendum vote conviction

[niklabh]

Closes: #775

Need help with design and css

[niklabh]

CSS help needed

[Tbaut]

I'm not a css widzard, but do you mean you need help to match the design proposed in the issue? or is there something else?

[niklabh]

Yes need help to match proposed design

https://user-images.githubusercontent.com/7072141/81508605-4f227800-9305-11ea-8ffc-6da62eccb368.png

[erler]

When I prototyped this a few months ago I did it the lazy way and used this slider, so that you can actually drag it with your mouse and have visualised steps. Can't remember if it has arrow key support for accessibility (it ideally should have).

Updated CSS for that would be

.rc-slider-rail {
		background-color: grey_light;
	}

	.rc-slider-track {
		background-color: pink_primary;	
	}

	.rc-slider-handle {
		border-top-color: grey_secondary;
		border-bottom-color: grey_secondary;
		border-left-color: grey_secondary;
		border-right-color: grey_secondary;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
		border-right-width: 1px;
		&:active {
			box-shadow: none;
		}
	}

	.rc-slider-dot-active {
		border-top-color: pink_primary;
		border-bottom-color: pink_primary;
		border-left-color: pink_primary;
		border-right-color: pink_primary;
	}

And then have the line beneath it: tokensLocked * lockPeriodMultiplier = votes, so that the user gets an idea how the amount of votes come together and can adjust either tokens and lock period.