Hi, here is a modification to make the swipe bigger.
Go to Dashboard -> Settings -> Custom CSS and paste this
/*Swipe Button CSS*/
.ReactSwipeButton {
float: left;
width: 100%;
height: 108px;
position: relative;
}
.ReactSwipeButton,
.ReactSwipeButton * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rsbContainer {
float: left;
width: 100%;
height: 100%;
background: #eee;
position: relative;
overflow: hidden;
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.rsbContainerUnlocked {
display: none;
}
.rsbcSlider {
float: left;
width: 100%;
position: absolute;
height: 108px;
top: 0;
left: 80px;
margin-left: -100%;
background: #0d101d;
z-index: 100;
box-shadow: 2px 1px 6px 2px rgba(38, 50, 56, 0.35);
cursor: pointer;
}
.rsbcSliderText {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 108px;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 500;
}
.rsbcSliderArrow {
float: left;
position: absolute;
transform: translateX(-4px) rotate(45deg);
border: 3px solid #fff;
height: 13px;
width: 13px;
top: 50%;
right: 22px;
margin-top: -6px;
border-left-color: transparent;
border-bottom-color: transparent;
transform-origin: center;
z-index: 10;
animation: rsbcSliderArrowAnimate 2s linear infinite;
}
@keyframes rsbcSliderArrowAnimate {
0% {
transform: translateX(-4px) rotate(45deg);
}
50% {
transform: translateX(6px) rotate(45deg);
}
100% {
transform: translateX(-4px) rotate(45deg);
}
}
.rsbcSliderCircle {
position: absolute;
right: 0;
background: #263238;
top: 0;
height: 108px;
width: 50px;
border-radius: 100%;
}
.rsbcText {
float: left;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 108px;
line-height: 108px;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 500;
}
.slider-bg-color {
background-color: #18c775;
}
/* END Swipe Button CSS*/
Finished! To change the size, replace "108px" everywhere with the size you want. (original 58px)
Bonus, here is a code that @wpradobr shared in a comment to "lift" the swipe
.delivery-action {
position: fixed;
width: 100%;
bottom: 45px;
z-index: 99;
}
.location-error {
bottom: 0.0rem !important;
background-color: #222b45;
}
