Skip to content

Commit

Permalink
wip: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ElaBosak233
ElaBosak233 committed Nov 26, 2024
1 parent e6ee29a commit f6a268b
Show file tree
Hide file tree
Showing 16 changed files with 52 additions and 65 deletions.
12 changes: 8 additions & 4 deletions src/components/core/Box/Box.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { ComponentProps } from "react";
import { ComponentProps, forwardRef } from "react";

export interface BoxProps extends ComponentProps<"div"> {}

export function Box(props: BoxProps) {
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
const { children, ...rest } = props;

return <div {...rest}>{children}</div>;
}
return (
<div {...rest} ref={ref}>
{children}
</div>
);
});
25 changes: 10 additions & 15 deletions src/components/core/Button/Button.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
@use "@/styles/mixins";

$width: var(--button-width);
$height: var(--button-height);
$bg-color: var(--button-bg-color);
$text-color: var(--button-text-color);

.root {
width: $width;
height: $height;
width: auto;
height: var(--button-height);
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
color: transparent;
border-radius: 12px;
border: 2.75px solid transparent;
gap: 12px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
@include mixins.transition;
transition: all 0.2s ease-in-out;
padding: 0.5rem 1.375rem;
white-space: nowrap;
font-size: 1.125rem;
Expand All @@ -26,17 +21,17 @@ $text-color: var(--button-text-color);
cursor: pointer;

&[data-variant="solid"] {
background-color: $bg-color;
background-color: var(--button-bg-color);
}

&[data-variant="outlined"] {
background-color: var(--bg-2-color);
border-color: $bg-color;
background-color: var(--bg-2nd-color);
border-color: var(--button-bg-color);
}

&[data-variant="ghost"] {
background-color: transparent;
color: $bg-color;
color: var(--button-bg-color);
}

&:disabled,
Expand Down Expand Up @@ -64,7 +59,7 @@ $text-color: var(--button-text-color);
}

.content {
color: $text-color;
color: var(--button-text-color);
font-size: 0.875rem;
font-weight: 600;
line-height: 21.6px;
Expand All @@ -76,7 +71,7 @@ $text-color: var(--button-text-color);
}

.icon {
color: $text-color;
color: var(--button-text-color);

@include mixins.dark {
color: #ffffff;
Expand Down
12 changes: 5 additions & 7 deletions src/components/core/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { ComponentPropsWithRef, forwardRef } from "react";
import React, { ComponentPropsWithRef, CSSProperties, forwardRef } from "react";
import useThemeColor from "@/hooks/useThemeColor";
import styles from "./Button.module.scss";
import Loading from "../../icons/Loading";
import clsx from "clsx";
import { Icon } from "../Icon";
import { Box } from "../Box";

export interface ButtonProps extends ComponentPropsWithRef<"button"> {
width?: string;
height?: string;
color?: string;
variant?: "solid" | "outlined" | "ghost";
Expand All @@ -15,14 +15,13 @@ export interface ButtonProps extends ComponentPropsWithRef<"button"> {
loading?: boolean;
disabled?: boolean;
icon?: React.ReactElement;
style?: React.CSSProperties;
style?: CSSProperties;
children?: React.ReactNode;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
const {
width = "fit-content",
height = "auto",
color = "primary",
variant = "solid",
Expand All @@ -38,11 +37,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
const baseColor = useThemeColor(color);

const variables = {
"--button-width": width,
"--button-height": height,
"--button-bg-color": baseColor,
"--button-text-color": variant === "solid" ? "#fff" : baseColor,
} as React.CSSProperties;
} as CSSProperties;

return (
<button
Expand All @@ -61,7 +59,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
icon={loading ? <Loading /> : icon}
/>
)}
<div className={styles["content"]}>{children}</div>
<Box className={styles["content"]}>{children}</Box>
</button>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/core/Checkbox/Checkbox.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $bg-color: var(--checkbox-bg-color);
position: relative;
height: 24px;
width: 24px;
background-color: var(--bg-2-color);
background-color: var(--bg-2nd-color);
border: 2px solid $bg-color;
border-radius: 8px;
transition: all 200ms ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion src/components/core/DatetimePicker/DatetimePicker.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $border-color: var(--dtp-border-color);
}

.wrapper {
background-color: var(--bg-2-color);
background-color: var(--bg-2nd-color);
border: 2.75px solid $border-color;
border-radius: 12px;
padding: 16px;
Expand Down
Empty file added src/components/core/IconButton/IconButton.module.scss
View file
Empty file.
13 changes: 13 additions & 0 deletions src/components/core/IconButton/IconButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { ComponentProps, forwardRef } from "react";

export interface IconButtonProps extends ComponentProps<"button"> {
variant?: "solid" | "outlined" | "subtle" | "transparent";
}

export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
(props, ref) => {
const { children, ...rest } = props;

return <button ref={ref}>{children}</button>;
}
);
1 change: 1 addition & 0 deletions src/components/core/IconButton/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { IconButton, type IconButtonProps } from "./IconButton";
4 changes: 2 additions & 2 deletions src/components/core/InputBase/InputBase.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,14 @@ $border-color: var(--input-border-color);
border: 2.75px solid $border-color;
border-radius: 12px;
padding: 6.75px 12px;
@include mixins.transition;
transition: all 0.2s ease-in-out;

&[data-variant="solid"] {
background-color: $bg-color;
}

&[data-variant="outlined"] {
background-color: var(--bg-2-color);
background-color: var(--bg-2nd-color);
}

&:focus,
Expand Down
5 changes: 3 additions & 2 deletions src/components/core/Popover/Popover.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { cloneElement, useEffect, useMemo, useRef, useState } from "react";
import styles from "./Popover.module.scss";
import { CSSTransition } from "react-transition-group";
import { Box } from "../Box";

export interface PopoverProps {
/**
Expand Down Expand Up @@ -111,13 +112,13 @@ export function Popover(props: PopoverProps) {
exitActive: styles["exit-active"],
}}
>
<div
<Box
className={styles["content"]}
style={positionStyle}
ref={contentRef}
>
{content}
</div>
</Box>
</CSSTransition>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/core/Textarea/Textarea.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}

&[data-variant="outlined"] {
background-color: var(--bg-2-color);
background-color: var(--bg-2nd-color);

.icon {
color: var(--input-border-color);
Expand Down
2 changes: 1 addition & 1 deletion src/components/modals/ChallengeModal/ChallengeModal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ $icon-color: var(--challenge-modal-icon-color);
min-height: 20rem;
max-height: 35rem;

background-color: var(--bg-2-color);
background-color: var(--bg-2nd-color);
border-radius: 0 0 12px 12px;
border: 2.75px dotted $border-color;
border-top: none;
Expand Down
6 changes: 3 additions & 3 deletions src/components/widgets/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export function Navbar() {
width: "10rem",
height: "100px",
borderRadius: "8px",
backgroundColor: "var(--bg-2-color)",
backgroundColor: "var(--bg-2nd-color)",
color: "var(--text-color)",
boxShadow:
"0px 4px 20px rgba(0, 0, 0, 0.1)",
Expand All @@ -173,7 +173,7 @@ export function Navbar() {
</Box>
}
>
<div
<Box
className={styles["avatar"]}
onClick={() => {
setDropdownMenuOpen((r) => !r);
Expand All @@ -185,7 +185,7 @@ export function Navbar() {
fallback={<>E</>}
color={"transparent"}
/>
</div>
</Box>
</Popover>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/layouts/Default/Default.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
min-height: 100vh;
width: 100%;
padding-top: 64px;
// padding-left: 4.25em;
z-index: 0;
@include mixins.transition;
transition: all 0.2s ease-in-out;
}
24 changes: 0 additions & 24 deletions src/styles/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,3 @@
}
}
}

@mixin transition {
transition: all 150ms ease-in-out;
}

@mixin grid-background($grid-color) {
background-image: linear-gradient(
to right,
$grid-color 1px,
transparent 1px
),
linear-gradient(to bottom, $grid-color 1px, transparent 1px);

background-size: 20px 20px;

@include dark {
background-image: linear-gradient(
to right,
#ffffff0d 1px,
transparent 1px
),
linear-gradient(to bottom, #ffffff0d 1px, transparent 1px);
}
}
4 changes: 2 additions & 2 deletions src/styles/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@
:root[data-theme="light"] {
color-scheme: light;
--bg-color: var(--color-light);
--bg-2nd-color: #f8f8f8;
--text-color: var(--color-dark);
--bg-2-color: #f8f8f8;
}

:root[data-theme="dark"] {
color-scheme: dark;
--bg-color: var(--color-dark);
--bg-2nd-color: #1f2a2f;
--text-color: var(--color-light);
--bg-2-color: #1f2a2f;
}

0 comments on commit f6a268b

Please sign in to comment.