style: update button and icon UX

reearth · Sep 2, 2022 · 75e6f49 · 75e6f49
1 parent ce29a50
commit 75e6f49
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
@@ -43,7 +43,7 @@ const Button: React.FC<Props> = ({
 
   const WrappedIcon = icon ? (
     <IconWrapper text={hasText} iconRight={iconRight} large={large}>
-      <Icon icon={icon} size={iSize} />
+      <Icon icon={icon} size={iSize} noTransition />
     </IconWrapper>
   ) : null;
 
@@ -123,6 +123,8 @@ const StyledButton = styled.button<ButtonProps>`
   align-items: center;
   display: flex;
   align-items: center;
+  transition: all 0.4s;
+
   &:hover {
     background: ${({ buttonType, disabled, theme }) =>
       disabled

diff --git a/src/components/atoms/Icon/index.tsx b/src/components/atoms/Icon/index.tsx
@@ -17,6 +17,7 @@ export type Props = {
   color?: string;
   style?: CSSProperties;
   role?: AriaRole;
+  noTransition?: boolean;
   onClick?: () => void;
 } & AriaAttributes;
 
@@ -28,6 +29,7 @@ const Icon: React.FC<Props> = ({
   color,
   size,
   role,
+  noTransition,
   onClick,
   ...props
 }) => {
@@ -48,6 +50,7 @@ const Icon: React.FC<Props> = ({
         style={style}
         role={role}
         size={sizeStr}
+        noTransition={noTransition}
         onClick={onClick}
         {...aria}
       />
@@ -62,23 +65,26 @@ const Icon: React.FC<Props> = ({
       role={role}
       color={color}
       size={sizeStr}
+      noTransition={noTransition}
       onClick={onClick}
       {...aria}
     />
   );
 };
 
-const StyledImg = styled.img<{ size?: string }>`
+const StyledImg = styled.img<{ size?: string; noTransition?: boolean }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
+  ${({ noTransition }) => !noTransition && "transition: all 0.4s;"}
 `;
 
-const StyledSvg = styled(SVG)<{ color?: string; size?: string }>`
+const StyledSvg = styled(SVG)<{ color?: string; size?: string; noTransition?: boolean }>`
   font-size: 0;
   display: inline-block;
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   color: ${({ color }) => color};
+  ${({ noTransition }) => !noTransition && "transition: all 0.4s;"}
 `;
 
 export default memo(Icon);