mirror of
https://github.com/logto-io/logto.git
synced 2025-03-10 22:22:45 -05:00
style(ui): web ui refinement (#879)
* style(ui): web ui refinement web ui refinement * style(ui): shadow update shadow update
This commit is contained in:
parent
85e475d85e
commit
243426882e
14 changed files with 81 additions and 27 deletions
|
@ -69,5 +69,7 @@ body {
|
|||
min-height: 640px;
|
||||
position: relative;
|
||||
padding: _.unit(6);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-3);
|
||||
}
|
||||
}
|
||||
|
|
30
packages/ui/src/components/Button/IconButton.module.scss
Normal file
30
packages/ui/src/components/Button/IconButton.module.scss
Normal file
|
@ -0,0 +1,30 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.iconButton {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
border-color: none;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s ease-in-out;
|
||||
padding: _.unit(1);
|
||||
@include _.flex-column;
|
||||
cursor: pointer;
|
||||
|
||||
> svg {
|
||||
color: var(--color-icon);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:global(body.desktop) {
|
||||
.iconButton {
|
||||
&:active {
|
||||
background: var(--color-pressed);
|
||||
}
|
||||
|
||||
&:hover:not(:active) {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
}
|
16
packages/ui/src/components/Button/IconButton.tsx
Normal file
16
packages/ui/src/components/Button/IconButton.tsx
Normal file
|
@ -0,0 +1,16 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { HTMLProps, forwardRef, Ref } from 'react';
|
||||
|
||||
import * as styles from './IconButton.module.scss';
|
||||
|
||||
export type Props = Omit<HTMLProps<HTMLButtonElement>, 'type'>;
|
||||
|
||||
const IconButton = ({ children, className, ...rest }: Props, ref: Ref<HTMLButtonElement>) => {
|
||||
return (
|
||||
<button ref={ref} type="button" className={classNames(styles.iconButton, className)} {...rest}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef<HTMLButtonElement, Props>(IconButton);
|
|
@ -5,6 +5,7 @@ import ReactModal from 'react-modal';
|
|||
|
||||
import CloseIcon from '@/assets/icons/close-icon.svg';
|
||||
import Button from '@/components/Button';
|
||||
import IconButton from '@/components/Button/IconButton';
|
||||
|
||||
import * as modalStyles from '../../scss/modal.module.scss';
|
||||
import * as styles from './Acmodal.module.scss';
|
||||
|
@ -32,7 +33,9 @@ const AcModal = ({
|
|||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
{t('description.reminder')}
|
||||
<CloseIcon onClick={onClose} />
|
||||
<IconButton onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={styles.content}>{children}</div>
|
||||
<div className={styles.footer}>
|
||||
|
|
|
@ -15,8 +15,8 @@
|
|||
|
||||
.container {
|
||||
background: var(--color-dialogue);
|
||||
border-radius: var(--radius);
|
||||
border: _.border(var(--color-divider));
|
||||
border-radius: 16px;
|
||||
padding: _.unit(6);
|
||||
}
|
||||
|
||||
|
@ -27,8 +27,7 @@
|
|||
justify-content: space-between;
|
||||
margin-bottom: _.unit(4);
|
||||
|
||||
> svg {
|
||||
color: var(--color-icon);
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
@ -49,6 +48,6 @@
|
|||
}
|
||||
|
||||
> button:first-child {
|
||||
margin-right: _.unit(4);
|
||||
margin-right: _.unit(3);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
align-items: center;
|
||||
margin-bottom: _.unit(4);
|
||||
|
||||
> svg {
|
||||
svg {
|
||||
color: var(--color-icon);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
|
@ -5,6 +5,7 @@ import ReactModal from 'react-modal';
|
|||
import CloseIcon from '@/assets/icons/close-icon.svg';
|
||||
|
||||
import * as modalStyles from '../../scss/modal.module.scss';
|
||||
import IconButton from '../Button/IconButton';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
|
@ -28,7 +29,9 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
|
|||
>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<CloseIcon onClick={onClose} />
|
||||
<IconButton onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -9,9 +9,10 @@
|
|||
}
|
||||
|
||||
.expandIcon {
|
||||
color: var(--color-icon);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
> svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(180deg);
|
||||
|
|
|
@ -2,6 +2,7 @@ import classNames from 'classnames';
|
|||
import React, { useState, useMemo } from 'react';
|
||||
|
||||
import ExpandIcon from '@/assets/icons/expand-icon.svg';
|
||||
import IconButton from '@/components/Button/IconButton';
|
||||
import SocialLinkButton from '@/components/Button/SocialLinkButton';
|
||||
import useSocial from '@/hooks/use-social';
|
||||
|
||||
|
@ -42,12 +43,14 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac
|
|||
/>
|
||||
))}
|
||||
{!fullDisplay && (
|
||||
<ExpandIcon
|
||||
<IconButton
|
||||
className={classNames(styles.expandIcon, showAll && styles.expanded)}
|
||||
onClick={() => {
|
||||
setShowAll(!showAll);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<ExpandIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -13,15 +13,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.moreButton {
|
||||
border-radius: 50%;
|
||||
@include _.flex-column;
|
||||
|
||||
> svg {
|
||||
color: var(--color-icon);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.moreButton {
|
||||
> svg {
|
||||
|
|
|
@ -2,6 +2,7 @@ import classNames from 'classnames';
|
|||
import React, { useMemo, useState, useRef } from 'react';
|
||||
|
||||
import MoreSocialIcon from '@/assets/icons/more-social-icon.svg';
|
||||
import IconButton from '@/components/Button/IconButton';
|
||||
import SocialIconButton from '@/components/Button/SocialIconButton';
|
||||
import usePlatform from '@/hooks/use-platform';
|
||||
import useSocial from '@/hooks/use-social';
|
||||
|
@ -20,7 +21,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
|
|||
const { socialConnectors, invokeSocialSignIn } = useSocial();
|
||||
const isOverSize = socialConnectors.length > defaultSize;
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const moreButtonRef = useRef<HTMLElement>(null);
|
||||
const moreButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const { isMobile } = usePlatform();
|
||||
|
||||
const displayConnectors = useMemo(() => {
|
||||
|
@ -45,7 +46,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
|
|||
/>
|
||||
))}
|
||||
{isOverSize && (
|
||||
<span
|
||||
<IconButton
|
||||
ref={moreButtonRef}
|
||||
className={styles.moreButton}
|
||||
onClick={() => {
|
||||
|
@ -53,7 +54,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
|
|||
}}
|
||||
>
|
||||
<MoreSocialIcon />
|
||||
</span>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
{isOverSize && isMobile && (
|
||||
|
|
|
@ -52,6 +52,10 @@
|
|||
margin-bottom: _.unit(12);
|
||||
}
|
||||
|
||||
.placeHolder {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
|
|
|
@ -35,7 +35,7 @@ $font-family: -apple-system,
|
|||
}
|
||||
|
||||
@mixin colors-dark-theme {
|
||||
--color-base: #25272b;
|
||||
--color-base: #191c1d;
|
||||
--color-surface: #2a2c32;
|
||||
--color-text: #f7f8f8;
|
||||
--color-text-disabled: #5c5f60;
|
||||
|
@ -65,7 +65,8 @@ $font-family: -apple-system,
|
|||
--color-toast: #34353f;
|
||||
--color-overlay: rgba(0, 0, 0, 30%);
|
||||
// shadows
|
||||
--shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
|
||||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
--shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
|
||||
}
|
||||
|
||||
@mixin fonts {
|
||||
|
|
|
@ -48,7 +48,7 @@ $font-family: -apple-system,
|
|||
--color-toast: #34353f;
|
||||
--color-overlay: rgba(0, 0, 0, 30%);
|
||||
// shadows
|
||||
--shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
|
||||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
}
|
||||
|
||||
@mixin fonts {
|
||||
|
|
Loading…
Add table
Reference in a new issue