update: icon button colors

Brahmware · Aug 29, 2023 · 2be583a · 2be583a
1 parent c9ceb1a
commit 2be583a
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 34 deletions.
diff --git a/src/components/Button/IconButton/index.tsx b/src/components/Button/IconButton/index.tsx
@@ -3,15 +3,26 @@ import { styled } from '@mui/material';
 import { IconButtonProps } from '@interfaces/ButtonProps';
 import Button from '..';
 
-const IconButton = ({ children, ...props }: IconButtonProps) => {
+const IconButton = ({ children, flippedTheme, ...props }: IconButtonProps) => {
   return (
     <Button {...props} >
       {children}
     </Button>
   )
 };
 
-export default styled(IconButton)(({ theme }) => ({
+export default styled(IconButton)(({ theme, flippedTheme }) => ({
   padding: theme.Spaces.xs,
   minWidth: 'auto',
+
+  '& path': {
+    fill: flippedTheme ? theme.palette.primary.contrastText : theme.palette.primary.contrastText,
+  },
+
+  '&:hover': {
+    backgroundColor: flippedTheme ? theme.palette.secondary.contrastText : theme.palette.secondary.main,
+    '& path': {
+      fill: flippedTheme ? theme.palette.text.primary : theme.palette.secondary.contrastText,
+    },
+  },
 }));
diff --git a/src/components/Button/TextButton/index.tsx b/src/components/Button/TextButton/index.tsx
@@ -3,19 +3,18 @@ import { styled } from '@mui/material';
 import { TextButtonProps } from '@interfaces/ButtonProps';
 import Button from '..';
 
-const StyledButton = styled(Button)(({ theme }) => ({
-  padding: `${theme.Spaces.xs} ${theme.Spaces.lg}`,
-  textTransform: 'none',
-}));
-
 const TextButton = ({ children, ...props }: TextButtonProps) => {
   return (
-    <StyledButton
+    <Button
       variant='text'
       {...props}
     >
       {children}
-    </StyledButton>
+    </Button>
   )
-}
-export default TextButton;
+};
+
+export default styled(TextButton)(({ theme }) => ({
+  padding: `${theme.Spaces.xs} ${theme.Spaces.lg}`,
+  textTransform: 'none',
+}));
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -4,13 +4,35 @@ import { ButtonProps } from '@interfaces/ButtonProps';
 
 const StyledButton = styled(MuiButton)(({ theme }) => ({
   backgroundColor: theme.palette.primary.main,
-  '& svg path': {
-    stroke: theme.palette.primary.contrastText,
-    transition: theme.Transitions.createTransition({
-      property: 'stroke',
+  color: theme.palette.primary.contrastText,
+
+  transition: theme.Transitions.createTransition([
+    {
+      property: 'background-color',
       duration: 'shorter',
       easing: 'easeInOut'
-    }),
+    },
+    {
+      property: 'color',
+      duration: 'shorter',
+      easing: 'easeInOut'
+    }
+  ]),
+
+  '& svg path': {
+    stroke: theme.palette.primary.contrastText,
+    transition: theme.Transitions.createTransition([
+      {
+        property: 'stroke',
+        duration: 'shorter',
+        easing: 'easeInOut'
+      },
+      {
+        property: 'fill',
+        duration: 'shorter',
+        easing: 'easeInOut'
+      }
+    ]),
   },
 
   '&:hover': {

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -14,16 +14,7 @@ const SearchWrapper = styled(Box)(({ theme }) => ({
 }));
 
 const SearchIcon = styled(Icon)(({ theme }) => ({
-
   ...theme.Sizes.icon.small,
-  '& path': {
-    stroke: theme.palette.primary.contrastText,
-    transition: theme.Transitions.createTransition({
-      property: 'stroke',
-      duration: 'shorter',
-      easing: 'easeInOut'
-    }),
-  },
 }));
 
 const SearchIconBtn = styled(IconButton)(({ theme }) => ({
@@ -36,6 +27,7 @@ const Search = () => {
     <SearchWrapper>
       <InputSearch />
       <SearchIconBtn
+        flippedTheme
         aria-label="search"
         vocab='Search in IMS'
         onClick={() => window.alert('search button was clicked')}

diff --git a/src/components/navigation/NavMenu/Megamenu/NavGroups/GroupCard.tsx b/src/components/navigation/NavMenu/Megamenu/NavGroups/GroupCard.tsx
@@ -17,8 +17,8 @@ const GroupCard = ({ children, ...props }: CardProps) => {
 
 export default styled(GroupCard)(({ theme }) => ({
   position: 'absolute',
-  height: '100%',
-  width: '100%',
+  height: 'calc(100% + 2px)',
+  width: 'calc(100% + 2px)',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-start',

diff --git a/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx b/src/components/navigation/NavMenu/Megamenu/NavGroups/index.tsx
@@ -43,7 +43,7 @@ const Navgroup = styled('ul')<NavgroupProps>(({ theme, active, show }) => ({
   ]),
 
   '& .nav__group-card': {
-    transform: `translateX(0) ${!active ? '!important' : ''}`,
+    transform: `translateX(-1px) ${!active ? '!important' : ''}`,
   },
 
   '&:hover': {
@@ -59,7 +59,7 @@ const Navgroup = styled('ul')<NavgroupProps>(({ theme, active, show }) => ({
 
     '&:hover': {
       '& .nav__group-card': {
-        transform: `translateX(0)`,
+        transform: `translateX(-1px)`,
       },
     },
   },

diff --git a/src/icons/utility/SearchIcon.tsx b/src/icons/utility/SearchIcon.tsx
@@ -8,19 +8,26 @@ const SearchIcon = ({ hovered, ...props }: UtilityIconProps) => {
     <svg
       {...svgCommonProps}
       data-name='Search Icon'
-      width='24'
-      height='24'
+      width='800'
+      height='800'
       fill='none'
-      viewBox='0 0 24 24'
+      viewBox='0 0 800 800'
       {...props}
     >
-      <path d='M17 17L21 21' stroke='#323232' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
-      <path d='M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='#323232' strokeWidth='2' />
+      <defs>
+        {`
+          .search__icon-path {
+            fill: #323232;
+          }
+        `}
+      </defs>
+      <path className="search__icon-path" d="M725.45605,674.54492,604.64087,553.72974A302.6814,302.6814,0,0,0,152.64893,152.64893,302.68342,302.68342,0,0,0,553.72974,604.64087L674.54492,725.45605ZM366.6665,597.333c-127.18994,0-230.666-103.47656-230.666-230.66651s103.47607-230.666,230.666-230.666S597.333,239.47656,597.333,366.6665,493.85645,597.333,366.6665,597.333Z" transform="translate(-64.00049 -64.00049)"/>
     </svg>
   )
 };
 
 export default styled(SearchIcon)(({ theme }) => ({
+  transform: 'translate(2px, 1.33px)',
   '& path': {
     stroke: theme.palette.text.primary,
     strokeWidth: theme.Strokes.thin,

diff --git a/src/interfaces/ButtonProps.ts b/src/interfaces/ButtonProps.ts
@@ -9,6 +9,7 @@ export interface ContainedButtonProps extends ButtonProps {
 
 export interface IconButtonProps extends ButtonProps {
   target?: string;
+  flippedTheme?: boolean;
 };
 
 export interface OutlinedButtonProps extends ButtonProps {