Merge pull request #532 from captain-Akshay/master

feat(btn): fix dynamic
layer5io · Mar 4, 2024 · 4c85209 · 4c85209
2 parents 6797248 + b457921
commit 4c85209
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/custom/Feedback/style.tsx b/src/custom/Feedback/style.tsx
@@ -8,6 +8,7 @@ import {
   CHINESE_SILVER,
   CULTURED,
   DARK_JUNGLE_GREEN,
+  DARK_KEPPEL,
   DARK_PRIMARY_COLOR,
   DARK_SLATE_GRAY,
   KEPPEL,
@@ -61,7 +62,7 @@ const containerPositionMap: Record<
       right: '10px'
     },
     closed: {
-      bottom: '-42%',
+      bottom: '-448px',
       right: '10px'
     }
   },
@@ -71,7 +72,7 @@ const containerPositionMap: Record<
       left: '10px'
     },
     closed: {
-      bottom: '-42%',
+      bottom: '-448px',
       left: '10px'
     }
   },
@@ -82,7 +83,7 @@ const containerPositionMap: Record<
     },
     closed: {
       top: '0px',
-      right: '-42%'
+      right: '-448px'
     }
   },
   'right-middle': {
@@ -93,7 +94,7 @@ const containerPositionMap: Record<
     },
     closed: {
       top: '50%',
-      right: '-42%',
+      right: '-448px',
       transform: 'translateY(-50%)'
     }
   },
@@ -104,7 +105,7 @@ const containerPositionMap: Record<
     },
     closed: {
       bottom: '0px',
-      right: '-42%'
+      right: '-448px'
     }
   }
 };
@@ -144,7 +145,10 @@ export const FeedbackSubmitButton = styled(Button)<SubmitProp>(({ isOpen }) => (
   height: '2.25rem',
   textTransform: 'none',
   boxShadow: '0px 1px 8px rgba(0, 0, 0, 0.25)',
-  backgroundColor: isOpen ? buttonDisabled.main : KEPPEL
+  backgroundColor: isOpen ? buttonDisabled.main : KEPPEL,
+  '&:hover': {
+    backgroundColor: DARK_KEPPEL
+  }
 }));
 
 export const FeedbackButton = styled(Button)<RenderPositionType>(({ theme, renderPosition }) => ({
@@ -180,17 +184,17 @@ const positionMap: Record<
   },
   'right-top': {
     top: '8%',
-    right: '-4%',
+    right: '-45px',
     transform: 'rotate(-90deg)'
   },
   'right-middle': {
     top: '50%',
-    right: '-6%',
+    right: '-70px',
     transform: 'rotate(-90deg) translateY(-50%)'
   },
   'right-bottom': {
-    bottom: '5%',
-    right: '-4%',
+    bottom: '10%',
+    right: '-45px',
     transform: 'rotate(-90deg)'
   }
 };

diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
@@ -4,6 +4,7 @@ import { alpha } from '@mui/material';
  * Define the base common colors to derive from
  */
 export const KEPPEL = '#00B39F';
+export const DARK_KEPPEL = '#00A18F';
 export const CARIBBEAN_GREEN = '#00D3A9';
 export const TEAL_BLUE = '#477E96';
 export const CHARCOAL = '#3C494F';