diff --git a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx index 59edc420..58b7f5a1 100644 --- a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx +++ b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx @@ -50,7 +50,7 @@ const StyledNav = styled("nav")` justify-content: flex-start; align-items: center; align-content: center; - gap: 5px; + gap: 2px; li { &, & > a, diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index 2a514bb4..53fb76ad 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -19,7 +19,7 @@ const ModeTypes = { GRAY: "gray", } as const; -type ModeProp = (typeof ModeTypes)[keyof typeof ModeTypes]; +type ModeProp = typeof ModeTypes[keyof typeof ModeTypes]; export interface ButtonProps extends React.ButtonHTMLAttributes, diff --git a/src/components/atoms/Link/Link.tsx b/src/components/atoms/Link/Link.tsx index a4c09107..37dececa 100644 --- a/src/components/atoms/Link/Link.tsx +++ b/src/components/atoms/Link/Link.tsx @@ -29,6 +29,7 @@ const StyledAnchor = styled("a")` & > * { vertical-align: middle; + transition: color 0.3s ease-out; } & > svg { margin: 0 0.5em; @@ -38,22 +39,27 @@ const StyledAnchor = styled("a")` content: ""; position: absolute; width: 100%; - transform: ${(props) => (props.underline ? "scaleX(1)" : "scaleX(0)")}; + /* transform: ${(props) => + props.underline ? "scaleX(1)" : "scaleX(0)"}; */ height: 1px; bottom: 0; left: 0; - background-color: ${({ theme }) => - getStylesBasedOnTheme(theme.mode, theme.gray5, theme.gray1, "black")}; - transform-origin: ${(props) => + /* background-color: ${({ theme }) => + getStylesBasedOnTheme(theme.mode, theme.gray5, theme.gray1, "black")}; */ + /* transform-origin: ${(props) => props.underline ? "bottom left" : "bottom right"}; - transition: transform 0.25s ease-out; + transition: transform 0.25s ease-out; */ } &:hover, &:active { + * { + color: ${({ theme }) => theme.primaryColor}; + } + &:after { - transform: ${(props) => (props.underline ? "scaleX(0)" : "scaleX(1)")}; - transform-origin: bottom left; + /* transform: ${(props) => (props.underline ? "scaleX(0)" : "scaleX(1)")}; + transform-origin: bottom left; */ } } `; diff --git a/src/components/molecules/DropdownMenu/DropdownMenu.tsx b/src/components/molecules/DropdownMenu/DropdownMenu.tsx index a463f978..0a5af370 100644 --- a/src/components/molecules/DropdownMenu/DropdownMenu.tsx +++ b/src/components/molecules/DropdownMenu/DropdownMenu.tsx @@ -122,7 +122,7 @@ const DropdownMenu: FC = ({ onClick={() => onListItemClick(index)} onKeyDown={closeMenu} > - + {content} diff --git a/src/components/molecules/Search/Search.tsx b/src/components/molecules/Search/Search.tsx index b60df3b9..4ff0a735 100644 --- a/src/components/molecules/Search/Search.tsx +++ b/src/components/molecules/Search/Search.tsx @@ -108,6 +108,7 @@ const StyledSearch = styled("div")` box-shadow: 0px 10px 15px #00000019; > * { + font-weight: 400; padding: 15px; cursor: pointer; transition: background-color 0.2s ease-in-out; diff --git a/src/components/organisms/SearchCourses/SearchCourses.tsx b/src/components/organisms/SearchCourses/SearchCourses.tsx index b24b5a3a..ba3047aa 100644 --- a/src/components/organisms/SearchCourses/SearchCourses.tsx +++ b/src/components/organisms/SearchCourses/SearchCourses.tsx @@ -13,6 +13,9 @@ const SearchWrapper = styled.div` border-radius: 21px !important; background-color: ${({ theme }) => theme.gray4} !important; } + .fieldset { + border-radius: 21px !important; + } `; const ItemButton = styled(Button)`