Slider styling

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

Author: emreboga

wormhole-connect/src/views/v2/Bridge/GasSlider/index.tsx

@@ -28,6 +28,9 @@ const useStyles = makeStyles()(() => ({
     overflow: 'visible',
     padding: '0 4px',
   },
+  cardContent: {
+    paddingTop: '8px',
+  },
   container: {
     display: 'flex',
     flexDirection: 'column',
@@ -148,7 +151,7 @@ const GasSlider = (props: {
 
   return (
     <Card className={classes.card} variant="elevation">
-      <CardContent>
+      <CardContent className={classes.cardContent}>
         <Stack
           direction="row"
           alignItems="center"
@@ -182,7 +185,7 @@ const GasSlider = (props: {
                 disabled={props.disabled}
                 value={percentage}
                 baseColor={theme.palette.primary.main}
-                railColor={theme.palette.background.default}
+                railColor={theme.palette.secondary.main}
                 step={1}
                 min={0}
                 max={100}

wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx

@@ -631,14 +631,17 @@ const SingleRoute = (props: Props) => {
             {warningMessages}
           </CardContent>
           {showGasSlider && (
-            <Collapse in={showGasSlider}>
-              <GasSlider
-                destinationGasDrop={
-                  receiveNativeAmount || amount.fromBaseUnits(0n, 8)
-                }
-                disabled={isGasSliderDisabled}
-              />
-            </Collapse>
+            <>
+              <Divider flexItem sx={{ margin: '0px 16px' }} />
+              <Collapse in={showGasSlider}>
+                <GasSlider
+                  destinationGasDrop={
+                    receiveNativeAmount || amount.fromBaseUnits(0n, 8)
+                  }
+                  disabled={isGasSliderDisabled}
+                />
+              </Collapse>
+            </>
           )}
         </CardActionArea>
       </Card>