Merge pull request #316 from EscolaLMS/feature/red-theme/button-input

red theme navigation changes
EscolaLMS · Feb 15, 2024 · 298253f · 298253f
2 parents ce75454 + a1cb39d
commit 298253f
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 53 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -199,7 +199,7 @@ const StyledButton = styled("button")<ButtonProps>`
     }};
     border: ${(props) => {
       if (props.mode && props.mode.includes("outline")) {
-        return `1px solid ${chroma(props.theme.primaryColor).alpha(0.8).hex()}`;
+        return `2px solid ${chroma(props.theme.primaryColor).alpha(0.4).hex()}`;
       }
     }};
 
@@ -277,6 +277,26 @@ const StyledButton = styled("button")<ButtonProps>`
     }};
   }
 
+  &.dropdown {
+    all: unset;
+    font-family: ${(props) => getFontFromTheme(props.theme).fontFamily};
+    transition: background 0.2s ease-in, color 0.2s ease-in;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 11px 13px;
+    font-size: 13px;
+    .profileIcon {
+      width: 30px;
+      height: 30px;
+    }
+    &:hover {
+      background-color: #f8f8f8;
+    }
+  }
+
   /* &:focus,
   &:active {
     ${(props) => {

diff --git a/src/components/atoms/Icon/_components/IconsDictionary.tsx b/src/components/atoms/Icon/_components/IconsDictionary.tsx
@@ -15,6 +15,22 @@ const Chevron: React.FC = () => (
   </svg>
 );
 
+const Hamburger: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="19"
+    height="16"
+    viewBox="0 0 19 16"
+  >
+    <path
+      id="Union_83"
+      data-name="Union 83"
+      d="M1.058,16a1.059,1.059,0,0,1,0-2.118H17.941a1.059,1.059,0,0,1,0,2.118Zm0-6.942a1.059,1.059,0,0,1,0-2.118H17.941a1.059,1.059,0,0,1,0,2.118Zm0-6.941A1.059,1.059,0,0,1,1.058,0H17.941a1.059,1.059,0,0,1,0,2.118Z"
+      fill="#333"
+    />
+  </svg>
+);
+
 const Program: React.FC = () => (
   <svg
     width="16"
@@ -138,4 +154,5 @@ export const ICONS_DICTIONARY = {
   editAlt: EditAlt,
   copy: Copy,
   note: Note,
+  hamburger: Hamburger,
 } as const;
diff --git a/src/components/molecules/CourseCard/CourseCard.tsx b/src/components/molecules/CourseCard/CourseCard.tsx
@@ -86,9 +86,6 @@ const StyledCourseCard = styled("div")<StyledCourseCardProps>`
     }
   }
   .information-in-image {
-    position: absolute;
-    top: 0;
-    left: 0;
     height: 100%;
     width: 100%;
     display: flex;
@@ -372,30 +369,6 @@ export const CourseCard: React.FC<CourseCardProps> = (props) => {
     >
       {!hideImage && (
         <div className="image-section">
-          <div className="information-in-image">
-            <div className="badges">
-              {React.isValidElement(tags)
-                ? tags
-                : Array.isArray(tags) &&
-                  tags.map((tag: Tag) => (
-                    <Badge
-                      className="tag"
-                      key={tag.id}
-                      onClick={(e) => tagClick(e, tag.title)}
-                      color={theme.gray2}
-                    >
-                      {tag.title}
-                    </Badge>
-                  ))}
-            </div>
-            {props.subtitle && (
-              <div className="card">
-                <Card wings="small">
-                  <div className={"card-subtitle"}>{props.subtitle}</div>
-                </Card>
-              </div>
-            )}
-          </div>
           <ImgWrapper>
             <RatioBox ratio={mobile ? 66 / 100 : 1}>
               {React.isValidElement(image) ? (
@@ -412,6 +385,32 @@ export const CourseCard: React.FC<CourseCardProps> = (props) => {
           </ImgWrapper>
         </div>
       )}
+      {!hideImage && (
+        <div className="information-in-image">
+          <div className="badges">
+            {React.isValidElement(tags)
+              ? tags
+              : Array.isArray(tags) &&
+                tags.map((tag: Tag) => (
+                  <Badge
+                    className="tag"
+                    key={tag.id}
+                    onClick={(e) => tagClick(e, tag.title)}
+                    color={theme.gray2}
+                  >
+                    {tag.title}
+                  </Badge>
+                ))}
+          </div>
+          {/* {props.subtitle && (
+              <div className="card">
+                <Card wings="small">
+                  <div className={"card-subtitle"}>{props.subtitle}</div>
+                </Card>
+              </div>
+            )} */}
+        </div>
+      )}
       {hideImage ? (
         <Card wings="large">{renderCourseSection()}</Card>
       ) : (

diff --git a/src/components/molecules/DropdownMenu/DropdownMenu.tsx b/src/components/molecules/DropdownMenu/DropdownMenu.tsx
@@ -1,20 +1,23 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { FC, useRef, useState, cloneElement } from "react";
+import React, { FC, useRef, useState, cloneElement, useCallback } from "react";
 import { CSSTransition } from "react-transition-group";
 import styled, { withTheme } from "styled-components";
 import { useOnClickOutside } from "../../../hooks/useOnClickOutside";
-import { getStylesBasedOnTheme } from "../../../utils/utils";
 
-interface DropdownMenuItem {
-  id: number;
+import Text from "components/atoms/Typography/Text";
+
+export interface DropdownMenuItem {
+  id: number | string;
   content: React.ReactNode;
+  redirect?: string;
 }
 
 interface Props {
   child: React.ReactElement<{ onClick?: () => void; $isMenuOpen?: boolean }>;
   menuItems: DropdownMenuItem[];
   isInitiallyOpen?: boolean;
   onClick?: () => void;
+  onChange?: (listItem: DropdownMenuItem) => void;
 }
 
 const Wrapper = styled.div`
@@ -24,16 +27,19 @@ const Wrapper = styled.div`
 `;
 
 const DropdownMenuWrapper = styled.ul`
+  top: 30px;
   position: absolute;
-  padding: 0px;
-  right: 0;
+  left: 0;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   width: max-content;
-  box-shadow: 0 24px 34px rgba(66, 66, 66, 5%),
-    0 -2px 8px rgba(255, 255, 255, 4%);
-
+  box-shadow: 0px 10px 15px #00000019;
+  min-width: 175px;
+  padding: 6px;
+  border: 1px solid ${({ theme }) => theme.gray3};
+  background: ${({ theme }) => theme.white};
+  border-radius: ${({ theme }) => theme.buttonRadius}px;
   &.fade-enter {
     opacity: 0;
   }
@@ -54,22 +60,18 @@ const DropdownMenuWrapper = styled.ul`
 `;
 const MenuItem = styled.li`
   list-style: none;
-  width: 100%;
+
   display: flex;
-  background: ${({ theme }) =>
-    getStylesBasedOnTheme(theme.mode, theme.dm__background, theme.white)};
-  color: ${({ theme }) =>
-    getStylesBasedOnTheme(
-      theme.mode,
-      theme.dm__primaryColor,
-      theme.primaryColor,
-      theme.primaryColor
-    )};
+  width: 100%;
+  color: ${({ theme }) => theme.textColor};
   transition: 0.3s;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: 700;
   cursor: pointer;
 
   &:hover {
-    background: ${({ theme }) => theme.dm__colorBackground};
+    background: #f8f8f8;
   }
 
   & p {
@@ -82,19 +84,31 @@ const DropdownMenu: FC<Props> = ({
   child,
   menuItems,
   isInitiallyOpen,
-
   onClick,
+  onChange,
 }) => {
+  const [currID, setCurrID] = useState(0);
   const dropdownMenuRef = useRef<HTMLUListElement | null>(null);
   const [isOpen, setIsOpen] = useState(isInitiallyOpen);
   const closeMenu = () => setIsOpen(false);
   useOnClickOutside(dropdownMenuRef, () => closeMenu());
 
+  const onListItemClick = useCallback(
+    (ind: number) => {
+      setCurrID(ind);
+      onChange?.(menuItems[ind]);
+      closeMenu();
+    },
+    [menuItems, onChange]
+  );
+  console.log({ currID });
+
   return (
     <Wrapper onClick={onClick}>
-      {cloneElement(child, {
+      {cloneElement(child as React.ReactElement, {
         onClick: () => setIsOpen((prev) => !prev),
         $isMenuOpen: isOpen,
+        // children: isOpen ? "currID" : "Menu",
       })}
       <CSSTransition
         in={isOpen}
@@ -104,9 +118,15 @@ const DropdownMenu: FC<Props> = ({
         unmountOnExit
       >
         <DropdownMenuWrapper ref={dropdownMenuRef}>
-          {menuItems.map(({ id, content }) => (
-            <MenuItem key={id} onClick={closeMenu} onKeyDown={closeMenu}>
-              {content}
+          {menuItems.map(({ id, content }, index) => (
+            <MenuItem
+              key={id}
+              onClick={() => onListItemClick(index)}
+              onKeyDown={closeMenu}
+            >
+              <Text size="14" noMargin bold>
+                {content}
+              </Text>
             </MenuItem>
           ))}
         </DropdownMenuWrapper>

diff --git a/src/theme/red.ts b/src/theme/red.ts
@@ -12,6 +12,7 @@ export const redTheme: DefaultTheme = {
   buttonRadius: 5,
   inputRadius: 5,
   checkboxRadius: 5,
+  cardRadius: 10,
   gray1: "#333333",
   gray2: "#AFAFAF",
   gray3: colors.disabled,

diff --git a/src/types/AvatarTypes.ts b/src/types/AvatarTypes.ts
@@ -1,5 +1,6 @@
 export type AvatarTypesStr =
   | "extraSmall"
+  | "superSmall"
   | "small"
   | "medium"
   | "large"

diff --git a/src/utils/components/primitives/avatarUtils.ts b/src/utils/components/primitives/avatarUtils.ts
@@ -4,6 +4,8 @@ export const setAvatarBySize = (size?: AvatarTypesStr): string => {
   switch (size) {
     case "extraSmall":
       return "22px";
+    case "superSmall":
+      return "30px";
     case "small":
       return "40px";
     case "medium":