From 97083c48e174e6f67886163cc914b5cd969b6c27 Mon Sep 17 00:00:00 2001 From: Przemek Date: Tue, 13 Feb 2024 15:24:55 +0100 Subject: [PATCH 1/3] red theme reconfig --- src/components/atoms/Typography/Text.tsx | 2 +- src/styleguide/ThemeCustomizer.tsx | 2 +- src/theme/provider.tsx | 8 +++++++- src/theme/red.ts | 20 ++++++++++++------- src/utils/components/primitives/titleUtils.ts | 10 +++++----- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/components/atoms/Typography/Text.tsx b/src/components/atoms/Typography/Text.tsx index 6ccdc9c2..8e6d0057 100644 --- a/src/components/atoms/Typography/Text.tsx +++ b/src/components/atoms/Typography/Text.tsx @@ -11,7 +11,7 @@ export interface TextProps ExtendableStyledComponent { noMargin?: boolean; bold?: boolean; - size?: "16" | "14" | "12"; + size?: "16" | "14" | "13" | "12"; type?: "primary" | "secondary" | "warning" | "danger"; className?: string; } diff --git a/src/styleguide/ThemeCustomizer.tsx b/src/styleguide/ThemeCustomizer.tsx index f9a62253..15b48e05 100644 --- a/src/styleguide/ThemeCustomizer.tsx +++ b/src/styleguide/ThemeCustomizer.tsx @@ -110,7 +110,7 @@ export const ThemeCustomizer: React.FC<{ Customize: folder( { font: { - options: ["Inter", "Mulish", "Titillium"], + options: ["Inter", "Mulish", "Titillium", "Lato"], value: initData.font || "Inter", }, "Main Colors": folder({ diff --git a/src/theme/provider.tsx b/src/theme/provider.tsx index 8134f843..6a2ce921 100644 --- a/src/theme/provider.tsx +++ b/src/theme/provider.tsx @@ -35,7 +35,7 @@ declare module "styled-components" { extends SharedDefaultTheme, Record { mode?: "light" | "dark"; - font: "Inter" | "Mulish" | "Titillium"; + font: "Inter" | "Mulish" | "Titillium" | "Lato"; radius?: number; textColor: string; dm__textColor: string; @@ -89,6 +89,12 @@ export const Fonts: Record< ], fontFamily: "'Titillium Web', sans-serif;", }, + Lato: { + links: [ + "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap", + ], + fontFamily: "'Lato', sans-serif;", + }, }; export const getFontFromTheme = ( diff --git a/src/theme/red.ts b/src/theme/red.ts index df8267ea..1ad4943c 100644 --- a/src/theme/red.ts +++ b/src/theme/red.ts @@ -1,15 +1,21 @@ import { DefaultTheme } from "styled-components"; -import { blend } from "chroma-js"; +// import { blend } from "chroma-js"; import { sharedTheme } from "./shared"; export const redTheme: DefaultTheme = { ...sharedTheme, - font: "Titillium", - primaryColor: "#E60037", - dm__primaryColor: "#E60037", - - secondaryColor: blend("#E60037", "#BDBDBD", "multiply").hex(), - dm__secondaryColor: blend("#E60037", "#BDBDBD", "multiply").hex(), + buttonRadius: 5, + gray1: "#333333", + gray2: "#AFAFAF", + gray3: "#EAEAEA", + gray4: "#F8F8F8", + positive: "#2CBE69", + font: "Lato", + primaryColor: "#EE312F", + dm__primaryColor: "#EE312F", + + secondaryColor: "#FFFF00", + dm__secondaryColor: "#FFFF00", // blend("#E60037", "#BDBDBD", "multiply").hex(), headerColor: "#111111", diff --git a/src/utils/components/primitives/titleUtils.ts b/src/utils/components/primitives/titleUtils.ts index df92047c..7f8d1ce7 100644 --- a/src/utils/components/primitives/titleUtils.ts +++ b/src/utils/components/primitives/titleUtils.ts @@ -6,14 +6,14 @@ export const setFontSizeByHeaderLevel = ( ): string => { switch (level) { case 1: - return mobile ? "20px" : "50px"; + return mobile ? "20px" : "30px"; case 2: - return mobile ? "20px" : "40px"; + return mobile ? "20px" : "24px"; case 3: - return mobile ? "20px" : "36px"; + return mobile ? "20px" : "18px"; case 4: - return "20px"; - default: return "16px"; + default: + return "13px"; } }; From 222219f75be65ce40d9a735822ced6e8fffc3bfe Mon Sep 17 00:00:00 2001 From: Przemek Date: Tue, 13 Feb 2024 16:58:49 +0100 Subject: [PATCH 2/3] button input and login page for new red theme --- src/components/atoms/Button/Button.tsx | 45 ++++++++++++------- src/components/atoms/Input/Input.tsx | 8 ++-- src/components/atoms/Typography/Text.tsx | 2 +- src/components/molecules/Banner/Banner.tsx | 2 +- .../organisms/LoginForm/LoginForm.tsx | 18 +++++--- src/theme/red.ts | 20 +++++++-- 6 files changed, 63 insertions(+), 32 deletions(-) diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index beae3f63..c5ff2c01 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -44,14 +44,14 @@ const StyledButton = styled("button")` props.theme.mode, props.theme.dm__outlineButtonInvertColor, props.theme.outlineButtonInvertColor, - props.theme.primaryColor + props.theme.textColor ); } return getStylesBasedOnTheme( props.theme.mode, props.theme.dm__outlineButtonColor, - props.theme.outlineButtonColor, - props.theme.primaryColor + props.theme.textColor, + props.theme.textColor ); } @@ -67,9 +67,10 @@ const StyledButton = styled("button")` if (props.mode) { switch (props.mode) { case "primary": - return "18px"; case "secondary": case "outline": + return "16px"; + case "white": default: return "14px"; @@ -84,13 +85,14 @@ const StyledButton = styled("button")` return "1.55em"; }}; cursor: pointer; + padding: "9xp 16px"; padding: ${(props) => { - if (props.mode === "primary") { - return "0.75em 2em"; - } else if (props.mode === "icon") { + if (props.mode === "icon") { return "4px"; + } else if (props.mode === "secondary") { + return "4px 13px"; } - return "0.65em 1.3em"; + return "9px 16px"; }}; border-radius: ${(props) => props.theme?.buttonRadius || 2}px; -webkit-font-smoothing: antialiased; @@ -146,9 +148,10 @@ const StyledButton = styled("button")` if (props.mode) { switch (props.mode) { case "primary": - return "18px"; case "secondary": case "outline": + return "18px"; + default: return "14px"; } @@ -184,7 +187,12 @@ const StyledButton = styled("button")` return props.theme.primaryColor; } }}; - border-color: transparent; + border: ${(props) => { + if (props.mode === "outline") { + return `1px solid ${chroma(props.theme.primaryColor).alpha(0.8).hex()}`; + } + }}; + ${(props) => { if (props.theme) { if (props.invert) { @@ -215,21 +223,22 @@ const StyledButton = styled("button")` background: ${getStylesBasedOnTheme( props.theme.mode, props.theme.white, - props.theme.black + "transparent" )}; color: ${getStylesBasedOnTheme( props.theme.mode, props.theme.black, - props.theme.white + props.theme.textColor )}; `; } return ` - background: ${chroma(props.theme.primaryColor).alpha(0.3).hex()}; + color: ${chroma(props.theme.white).alpha(0.85).hex()}; + background: ${chroma(props.theme.primaryColor).alpha(0.85).hex()}; `; } } - }} + }}; } &:disabled { @@ -249,9 +258,15 @@ const StyledButton = styled("button")` if (props.invert) { return `color: ${props.theme.white};`; } + if (props.mode === "outline") { + return `color: ${props.theme.textColor}; + background: ${props.theme.white}; + border: 1px solid ${props.theme.primaryButtonDisabled}; + `; + } }}; } - &:hover, + &:focus, &:active { ${(props) => { diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx index 25d81bfe..668b421e 100644 --- a/src/components/atoms/Input/Input.tsx +++ b/src/components/atoms/Input/Input.tsx @@ -68,11 +68,11 @@ const StyledDiv = styled("div")` input { font-family: ${(props) => getFontFromTheme(props.theme).fontFamily}; border: 0px; - font-size: 14px; + font-size: 13px; box-sizing: content-box; display: block; width: 100%; - padding: 11px 12px 13px; + padding: 14px 18px; caret-color: #e60037; border-radius: ${(props) => props.theme.inputRadius}px; background: ${(props) => { @@ -179,8 +179,8 @@ const StyledDiv = styled("div")` position: absolute; left: 0px; top: 0px; - transform: translate(12px, 12px) scale(1); - font-size: 12px; + transform: translate(18px, 14px) scale(1); + font-size: 13px; z-index: 1; transition: 0.2s all; color: ${({ theme, error, disabled }) => { diff --git a/src/components/atoms/Typography/Text.tsx b/src/components/atoms/Typography/Text.tsx index 8e6d0057..2800da9a 100644 --- a/src/components/atoms/Typography/Text.tsx +++ b/src/components/atoms/Typography/Text.tsx @@ -11,7 +11,7 @@ export interface TextProps ExtendableStyledComponent { noMargin?: boolean; bold?: boolean; - size?: "16" | "14" | "13" | "12"; + size?: "16" | "14" | "13" | "12" | "11"; type?: "primary" | "secondary" | "warning" | "danger"; className?: string; } diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx index 6a4b884f..4eff9b6d 100644 --- a/src/components/molecules/Banner/Banner.tsx +++ b/src/components/molecules/Banner/Banner.tsx @@ -66,7 +66,7 @@ export const Banner: React.FC = (props) => { {title} )} ); }; diff --git a/src/theme/red.ts b/src/theme/red.ts index 1ad4943c..9910e505 100644 --- a/src/theme/red.ts +++ b/src/theme/red.ts @@ -2,16 +2,23 @@ import { DefaultTheme } from "styled-components"; // import { blend } from "chroma-js"; import { sharedTheme } from "./shared"; +const colors = { + primary: "#EE312F", + disabled: "#EAEAEA", +}; + export const redTheme: DefaultTheme = { ...sharedTheme, buttonRadius: 5, + inputRadius: 5, + checkboxRadius: 5, gray1: "#333333", gray2: "#AFAFAF", - gray3: "#EAEAEA", + gray3: colors.disabled, gray4: "#F8F8F8", positive: "#2CBE69", font: "Lato", - primaryColor: "#EE312F", + primaryColor: colors.primary, dm__primaryColor: "#EE312F", secondaryColor: "#FFFF00", @@ -19,7 +26,7 @@ export const redTheme: DefaultTheme = { headerColor: "#111111", - background: "#F2F2F2", + background: "#FFF", dm__background: "#232225", colorBackground: "#E60037", @@ -28,8 +35,13 @@ export const redTheme: DefaultTheme = { cardBackgroundColor: sharedTheme.gray5, dm__cardBackgroundColor: sharedTheme.gray1, + outlineButtonColor: colors.primary, + dm__textColor: "#FFF", - textColor: "#000", + textColor: "#333", + + primaryButtonDisabled: colors.disabled, + inputBg: sharedTheme.white, }; export default redTheme; From a951574c028ec0dbc5bf71b26575007d2da15f68 Mon Sep 17 00:00:00 2001 From: Przemek Date: Wed, 14 Feb 2024 15:16:04 +0100 Subject: [PATCH 3/3] auth and search --- src/components/atoms/Button/Button.tsx | 86 +++++++++++-------- src/components/atoms/Input/Input.tsx | 7 +- src/components/atoms/Link/Link.tsx | 2 +- src/components/atoms/Typography/Text.tsx | 2 +- src/components/molecules/Search/Search.tsx | 15 +++- .../organisms/RegisterForm/RegisterForm.tsx | 30 ++++--- .../ResetPasswordForm/ResetPasswordForm.tsx | 14 ++- .../organisms/SearchCourses/SearchCourses.tsx | 56 +++++++----- 8 files changed, 125 insertions(+), 87 deletions(-) diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index c5ff2c01..ec491381 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -16,50 +16,56 @@ export interface ButtonProps invert?: boolean; loading?: boolean; block?: boolean; - mode?: "primary" | "secondary" | "outline" | "white" | "icon"; + mode?: + | "primary" + | "secondary" + | "outline" + | "white" + | "icon" + | "secondary outline"; as?: React.ElementType; "aria-label"?: string; } const StyledButton = styled("button")` - background: ${(props) => { - if (props.mode === "outline") { + background: ${({ mode, theme, invert }) => { + if (mode && mode.includes("outline")) { return "transparent"; } - if (props.invert) { - return props.theme.invertColor; + if (invert) { + return theme.invertColor; } - if (props.mode === "white") { - return props.theme.white; + if (mode === "white") { + return theme.white; } - if (props.mode === "icon") { + if (mode === "icon") { return "transparent"; } - return props.theme?.primaryColor || "black"; + return theme?.primaryColor || "black"; }}; - color: ${(props) => { - if (props.mode === "outline" || props.mode === "icon") { - if (props.invert) { + color: ${({ theme, mode, invert }) => { + if ((mode && mode.includes("outline")) || mode === "icon") { + if (invert) { return getStylesBasedOnTheme( - props.theme.mode, - props.theme.dm__outlineButtonInvertColor, - props.theme.outlineButtonInvertColor, - props.theme.textColor + theme.mode, + theme.dm__outlineButtonInvertColor, + theme.outlineButtonInvertColor, + theme.textColor ); } return getStylesBasedOnTheme( - props.theme.mode, - props.theme.dm__outlineButtonColor, - props.theme.textColor, - props.theme.textColor + theme.mode, + theme.dm__outlineButtonColor, + theme.textColor, + theme.textColor ); } - if (props.mode === "white") { - return props.theme.black; + if (mode === "white") { + return theme.black; } - return props.theme.white; + return theme.white; }}; font-family: ${(props) => getFontFromTheme(props.theme).fontFamily}; font-weight: bold; @@ -69,6 +75,7 @@ const StyledButton = styled("button")` case "primary": case "secondary": case "outline": + case "secondary outline": return "16px"; case "white": @@ -89,7 +96,10 @@ const StyledButton = styled("button")` padding: ${(props) => { if (props.mode === "icon") { return "4px"; - } else if (props.mode === "secondary") { + } else if ( + props.mode === "secondary" || + props.mode === "secondary outline" + ) { return "4px 13px"; } return "9px 16px"; @@ -100,7 +110,7 @@ const StyledButton = styled("button")` border-style: solid; border-width: 2px; border-color: ${({ theme, mode, invert }) => { - if (mode === "outline") { + if (mode?.includes("outline")) { if (invert) { return getStylesBasedOnTheme( theme.mode, @@ -150,6 +160,7 @@ const StyledButton = styled("button")` case "primary": case "secondary": case "outline": + case "secondary outline": return "18px"; default: @@ -178,7 +189,6 @@ const StyledButton = styled("button")` } return props.theme.white; }}; - box-shadow: none !important; } &:hover { @@ -188,7 +198,7 @@ const StyledButton = styled("button")` } }}; border: ${(props) => { - if (props.mode === "outline") { + if (props.mode && props.mode.includes("outline")) { return `1px solid ${chroma(props.theme.primaryColor).alpha(0.8).hex()}`; } }}; @@ -196,7 +206,7 @@ const StyledButton = styled("button")` ${(props) => { if (props.theme) { if (props.invert) { - if (props.mode === "outline") { + if (props.mode && props.mode.includes("outline")) { return ` background: ${props.theme.white}; color: ${props.theme.gray1}; @@ -218,7 +228,7 @@ const StyledButton = styled("button")` opacity: 0.6; `; } else { - if (props.mode === "outline") { + if (props.mode && props.mode.includes("outline")) { return ` background: ${getStylesBasedOnTheme( props.theme.mode, @@ -258,7 +268,7 @@ const StyledButton = styled("button")` if (props.invert) { return `color: ${props.theme.white};`; } - if (props.mode === "outline") { + if (props.mode && props.mode.includes("outline")) { return `color: ${props.theme.textColor}; background: ${props.theme.white}; border: 1px solid ${props.theme.primaryButtonDisabled}; @@ -267,17 +277,17 @@ const StyledButton = styled("button")` }}; } - &:focus, + /* &:focus, &:active { ${(props) => { - if (props.theme) { - return `background: rgba(${chroma(props.theme.gray1) - .rgb() - .join(",")}, 0.2);`; - } - }} + if (props.theme) { + return `background: rgba(${chroma(props.theme.gray1) + .rgb() + .join(",")}, 0.2);`; + } + }} color: ${(props) => props.theme.white} - } + } */ `; // Main button with styles diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx index 668b421e..1b6dc7f1 100644 --- a/src/components/atoms/Input/Input.tsx +++ b/src/components/atoms/Input/Input.tsx @@ -57,7 +57,12 @@ const StyledDiv = styled("div")` } .helper { - font-size: 12px; + font-size: 11px; + width: 100%; + display: block; + text-align: center; + margin-top: 1px; + opacity: 0.55; } .input-and-fieldset { diff --git a/src/components/atoms/Link/Link.tsx b/src/components/atoms/Link/Link.tsx index 65bcaae6..a4c09107 100644 --- a/src/components/atoms/Link/Link.tsx +++ b/src/components/atoms/Link/Link.tsx @@ -19,7 +19,7 @@ const StyledAnchor = styled("a")` font-family: ${(props) => props.theme ? getFontFromTheme(props.theme).fontFamily : "sans-serif"}; font-weight: 500; - font-size: 14px; + font-size: 16px; line-height: 1.55em; cursor: pointer; -webkit-font-smoothing: antialiased; diff --git a/src/components/atoms/Typography/Text.tsx b/src/components/atoms/Typography/Text.tsx index 2800da9a..4a58c459 100644 --- a/src/components/atoms/Typography/Text.tsx +++ b/src/components/atoms/Typography/Text.tsx @@ -28,7 +28,7 @@ const StyledP = styled.p` return getStylesBasedOnTheme( props.theme.mode, props.theme.white, - "#111" + props.theme.textColor ); } }}; diff --git a/src/components/molecules/Search/Search.tsx b/src/components/molecules/Search/Search.tsx index dc9f6483..b60df3b9 100644 --- a/src/components/molecules/Search/Search.tsx +++ b/src/components/molecules/Search/Search.tsx @@ -91,8 +91,7 @@ const StyledSearch = styled("div")` max-height: ${({ isFocused }) => (isFocused ? "250px" : "0")}; overflow-y: auto; display: ${({ isFocused }) => (isFocused ? "block" : "none")}; - background-color: ${({ theme }) => - getStylesBasedOnTheme(theme.mode, theme.gray1, theme.gray5)}; + background-color: ${({ theme }) => theme.white}; border-width: 0.5px; border-style: solid; border-color: ${({ theme }) => @@ -103,9 +102,10 @@ const StyledSearch = styled("div")` )}; border-top: none; box-sizing: border-box; - border-bottom-left-radius: ${({ theme }) => theme.inputRadius}px; - border-bottom-right-radius: ${({ theme }) => theme.inputRadius}px; + border-radius: ${({ theme }) => theme.buttonRadius}px; + padding: 0px 6px; z-index: 1; + box-shadow: 0px 10px 15px #00000019; > * { padding: 15px; @@ -126,6 +126,13 @@ const StyledSearch = styled("div")` )}; } } + + ::-webkit-scrollbar { + width: 1px; + } + ::-webkit-scrollbar-thumb { + background-color: ${({ theme }) => theme.primaryColor}; + } } `; diff --git a/src/components/organisms/RegisterForm/RegisterForm.tsx b/src/components/organisms/RegisterForm/RegisterForm.tsx index 1e805cf2..c55a1b2c 100644 --- a/src/components/organisms/RegisterForm/RegisterForm.tsx +++ b/src/components/organisms/RegisterForm/RegisterForm.tsx @@ -50,7 +50,6 @@ const StyledDiv = styled.div<{ mobile: boolean }>` margin: 0; } a { - font-size: 14px; color: ${({ theme }) => getStylesBasedOnTheme( theme.mode, @@ -71,6 +70,18 @@ const StyledDiv = styled.div<{ mobile: boolean }>` } `; +const GotAccount = styled.div` + margin-top: 70px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + a { + margin-top: 11px; + font-weight: 700; + } +`; + type FormValues = { first_name: string; last_name: string; @@ -358,23 +369,20 @@ export const RegisterForm: React.FC = ({ /> ))} - )} - - {t("RegisterForm.Already have an account")}{" "} - onLoginLink && onLoginLink()}> + + + {t("RegisterForm.Already have an account")}{" "} + {" "} + onLoginLink && onLoginLink()}> {t("Login.Signin")} - + ); }; diff --git a/src/components/organisms/ResetPasswordForm/ResetPasswordForm.tsx b/src/components/organisms/ResetPasswordForm/ResetPasswordForm.tsx index b3387cdd..9bb9235b 100644 --- a/src/components/organisms/ResetPasswordForm/ResetPasswordForm.tsx +++ b/src/components/organisms/ResetPasswordForm/ResetPasswordForm.tsx @@ -40,7 +40,7 @@ const StyledDiv = styled.div<{ mobile: boolean }>` } form { width: 100%; - max-width: 440px; + min-width: 440px; margin-bottom: 15px; } `; @@ -179,7 +179,7 @@ export const ResetPasswordForm: React.FC = ({ /> )} - @@ -192,12 +192,10 @@ export const ResetPasswordForm: React.FC = ({ {t("ResetForm.BackToLogin")} - - {t("Login.NoAccount")}{" "} - onRegisterLink && onRegisterLink()}> - {t("Login.Signup")} - - + {t("Login.NoAccount")} + onRegisterLink && onRegisterLink()}> + {t("Login.Signup")} + )} diff --git a/src/components/organisms/SearchCourses/SearchCourses.tsx b/src/components/organisms/SearchCourses/SearchCourses.tsx index aa1861b0..b8ecd370 100644 --- a/src/components/organisms/SearchCourses/SearchCourses.tsx +++ b/src/components/organisms/SearchCourses/SearchCourses.tsx @@ -6,15 +6,23 @@ import { EscolaLMSContext } from "@escolalms/sdk/lib/react"; import { Button, Search as InputSearch } from "../../.."; import styled from "styled-components"; +const SearchWrapper = styled.div` + min-width: 300px; + input { + border-radius: 21px !important; + background-color: ${({ theme }) => theme.gray4} !important; + } +`; + const ItemButton = styled(Button)` padding: 10px !important; justify-content: flex-start; - border: inherit; - border-radius: 0; + border: none; + border-radius: ${({ theme }) => theme.buttonRadius}px; &:hover { - text-decoration: underline; - background-color: ${({ theme }) => theme.white} !important; + background-color: ${({ theme }) => theme.gray4} !important; color: ${({ theme }) => theme.textColor}; + border-radius: ${({ theme }) => theme.buttonRadius}px; } `; @@ -66,25 +74,27 @@ export const SearchCourses: React.FC<{ const onSubmit = useCallback((val: string) => onInputSubmitted(val), []); const { t } = useTranslation(); return ( - ("Search.Placeholder")} - > - {foundCourses.map((course) => ( - { - onItemSelected(course); - }} - > - {course.title} - - ))} - + + ("Search.Placeholder")} + > + {foundCourses.map((course) => ( + { + onItemSelected(course); + }} + > + {course.title} + + ))} + + ); };