styles: fix styles icon button (#98)

* chore: rename files

* styles: fix styles icon button

* chore: remove commented lines

ui/src/components/core/button/button-content.tsx

@@ -4,7 +4,7 @@ import { ButtonProps } from '.';
 import {
   StyledButtonContentFlex,
   StyledButtonContentGrid,
-} from './button-content.styled';
+} from './button-content.styles';
 import { ButtonIcon } from './button-icon';
 
 export type ButtonContentProps = Pick<

ui/src/components/core/button/button-icon.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   ButtonIconSpanProps,
   StyledButtonIconSpan,
-} from './button-icon.styled';
+} from './button-icon.styles';
 
 export const ButtonIcon: React.FC<ButtonIconSpanProps> = (props) => {
   const { children, className, ...rest } = props;

ui/src/components/core/button/button-spinner.tsx

@@ -6,7 +6,7 @@ import {
   StyledButtonSpinnerBox,
   StyledButtonSpinnerDot,
   StyledButtonSpinnerDotsBox,
-} from './button-spinner.styled';
+} from './button-spinner.styles';
 
 export const ButtonSpinner: React.FC<ButtonSpinnerProps> = (props) => {
   const {

ui/src/components/core/button/button.styles.ts

@@ -243,7 +243,7 @@ export const StyledButton = styled('button', {
   ],
   defaultVariants: {
     colorScheme: 'gray',
-    variant: 'solid',
+    variant: 'outline',
     size: 'md',
   },
 });

ui/src/components/core/button/icon-button.tsx

@@ -54,15 +54,12 @@ export const IconButton = forwardRef<IconButtonProps, 'button'>(
     const { minWidth, fontSize } = useMemo(() => {
       const props = {
         sm: {
-          minWidth: '$8',
           fontSize: '$lg',
         },
         md: {
-          minWidth: '$11',
           fontSize: '$xl',
         },
         lg: {
-          minWidth: '$14',
           fontSize: '$2xl',
         },
       };

ui/src/components/core/button/index.ts

@@ -1,2 +1,3 @@
 export * from './button.styles';
 export * from './button';
+export * from './icon-button';

ui/src/components/core/index.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './icon';

ui/src/components/layout/flex.styled.tsx

@@ -1,10 +0,0 @@
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
-import React from 'react';
-
-const { styled } = dripStitches;
-
-export const Flex = styled('div', {
-  display: 'flex',
-});
-
-export type FlexProps = React.ComponentProps<typeof Flex>;

ui/src/components/layout/index.ts

@@ -1,2 +1,3 @@
 export * from './grid.styles';
 export * from './flex.styles';
+export * from './stepper';

ui/src/components/layout/stepper/stepper.stories.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../../core';
 import { Stepper } from './stepper';
-import { Flex } from '../flex.styled';
+import { Flex } from '../../layout';
 
 export default {
   title: 'Components/Layout/Stepper',
@@ -21,7 +21,7 @@ const StepperButton: React.FC = () => {
 export const Default = () => {
   return (
     <>
-      <Stepper.Root initialStep={1} totalSteps={4}>
+      <Stepper.Root initialStep={1}>
         <Stepper.Container>
           <Stepper.Step>
             {/* Step 1 */}

ui/src/components/layout/stepper/stepper.tsx

@@ -1,6 +1,6 @@
+import { Flex } from '@/components';
 import React, { useMemo, useState } from 'react';
-import { createContext } from '../../..//utils';
-import { Flex } from '../flex.styled';
+import { createContext } from '../../../utils';
 import { StepperStyles } from './stepper.styles';
 
 export type SelectContext = {

ui/src/views/mint/mint-stepper.tsx

@@ -1,8 +1,4 @@
-import { Button, Flex } from '@/components';
-import { IconButton } from '@/components/core/button/icon-button';
-import { Icon } from '@/components/core/icon';
-import React from 'react';
-import { Stepper } from '@/components/layout/stepper/stepper';
+import { Button, Flex, IconButton, Icon, Stepper } from '@/components';
 
 // TODO remove after flow integration
 const StepperButton: React.FC = () => {