From 4946fa7a7fa56f7b538b07d585880506ef27b799 Mon Sep 17 00:00:00 2001
From: Saelmala <sandra.larsson@eyevinn.se>
Date: Mon, 16 Dec 2024 09:26:55 +0100
Subject: [PATCH] fix: ui fixes

---
 src/assets/icons/minus.svg                    |  2 +-
 src/assets/icons/plus.svg                     |  2 +-
 .../production-line/exit-call-button.tsx      |  2 +
 .../volume-slider/volume-slider.tsx           | 78 +++++++++++--------
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/assets/icons/minus.svg b/src/assets/icons/minus.svg
index 8b013dde..eacef25a 100644
--- a/src/assets/icons/minus.svg
+++ b/src/assets/icons/minus.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#32383B">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white">
   <path d="M200-440v-80h560v80H200Z"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
index b343ee36..be10a07a 100644
--- a/src/assets/icons/plus.svg
+++ b/src/assets/icons/plus.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#32383B">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white">
   <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
 </svg>
\ No newline at end of file
diff --git a/src/components/production-line/exit-call-button.tsx b/src/components/production-line/exit-call-button.tsx
index 94b4370f..0c3c5480 100644
--- a/src/components/production-line/exit-call-button.tsx
+++ b/src/components/production-line/exit-call-button.tsx
@@ -6,6 +6,8 @@ const StyledBackBtn = styled(PrimaryButton)`
   padding: 0;
   margin: 0;
   width: 4rem;
+  background: #32383b;
+  border: 0.2rem solid #6d6d6d;
 `;
 
 export const ExitCallButton = ({
diff --git a/src/components/volume-slider/volume-slider.tsx b/src/components/volume-slider/volume-slider.tsx
index 23971b3c..d7dbf44f 100644
--- a/src/components/volume-slider/volume-slider.tsx
+++ b/src/components/volume-slider/volume-slider.tsx
@@ -8,13 +8,13 @@ import {
   PlusIcon,
 } from "../../assets/icons/icon";
 import { isMobile } from "../../bowser";
-import { PrimaryButton } from "../landing-page/form-elements";
+import { ActionButton } from "../landing-page/form-elements";
 
 const SliderWrapper = styled.div`
   width: 100%;
   margin: 2rem 0;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   position: relative;
 `;
@@ -51,19 +51,29 @@ const SliderThumb = styled.div<{ position: number }>`
   cursor: pointer;
 `;
 
-const VolumeButton = styled(PrimaryButton)`
+const VolumeButton = styled(ActionButton)`
+  background-color: #32383b;
   width: 7rem;
   align-items: center;
   height: 4.5rem;
   padding: 1.5rem;
   cursor: pointer;
   margin-top: 1rem;
+  border: 0.2rem solid #6d6d6d;
 `;
 
 const VolumeButtonContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  width: 100%;
+`;
+
+const VolumeWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
 `;
 
 type TVolumeSliderProps = {
@@ -123,36 +133,38 @@ export const VolumeSlider: FC<TVolumeSliderProps> = ({
 
   return (
     <SliderWrapper>
-      <VolumeContainer>
-        <IconWrapper>
-          <NoSoundIcon />
-        </IconWrapper>
-      </VolumeContainer>
-      <SliderTrack>
-        <SliderThumb position={thumbPosition} />
-        <input
-          id="volumeSlider"
-          type="range"
-          min={0}
-          max={1}
-          step={0.05}
-          value={value}
-          onChange={handleInputChange}
-          style={{
-            width: "100%",
-            position: "absolute",
-            top: 0,
-            height: "0.4rem",
-            opacity: 0,
-            pointerEvents: "all",
-          }}
-        />
-      </SliderTrack>
-      <VolumeContainer>
-        <IconWrapper>
-          <FullSoundIcon />
-        </IconWrapper>
-      </VolumeContainer>
+      <VolumeWrapper>
+        <VolumeContainer>
+          <IconWrapper>
+            <NoSoundIcon />
+          </IconWrapper>
+        </VolumeContainer>
+        <SliderTrack>
+          <SliderThumb position={thumbPosition} />
+          <input
+            id="volumeSlider"
+            type="range"
+            min={0}
+            max={1}
+            step={0.05}
+            value={value}
+            onChange={handleInputChange}
+            style={{
+              width: "100%",
+              position: "absolute",
+              top: 0,
+              height: "0.4rem",
+              opacity: 0,
+              pointerEvents: "all",
+            }}
+          />
+        </SliderTrack>
+        <VolumeContainer>
+          <IconWrapper>
+            <FullSoundIcon />
+          </IconWrapper>
+        </VolumeContainer>
+      </VolumeWrapper>
       {isMobile && (
         <VolumeButtonContainer>
           <VolumeButton onClick={() => handleVolumeButtonClick("decrease")}>