0
Fork 0
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:
simeng-li 2022-05-19 14:21:38 +08:00 committed by GitHub
parent 85e475d85e
commit 243426882e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 81 additions and 27 deletions

View file

@ -69,5 +69,7 @@ body {
min-height: 640px;
position: relative;
padding: _.unit(6);
border-radius: var(--radius);
box-shadow: var(--shadow-3);
}
}

View 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);
}
}
}

View 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);

View file

@ -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}>

View file

@ -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);
}
}

View file

@ -13,7 +13,7 @@
align-items: center;
margin-bottom: _.unit(4);
> svg {
svg {
color: var(--color-icon);
width: 20px;
height: 20px;

View file

@ -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>

View file

@ -9,9 +9,10 @@
}
.expandIcon {
color: var(--color-icon);
width: 20px;
height: 20px;
> svg {
width: 20px;
height: 20px;
}
&.expanded {
transform: rotate(180deg);

View file

@ -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>
);

View file

@ -13,15 +13,6 @@
}
}
.moreButton {
border-radius: 50%;
@include _.flex-column;
> svg {
color: var(--color-icon);
}
}
:global(body.mobile) {
.moreButton {
> svg {

View file

@ -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 && (

View file

@ -52,6 +52,10 @@
margin-bottom: _.unit(12);
}
.placeHolder {
flex: 0;
}
.divider {
margin-bottom: _.unit(4);
}

View file

@ -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 {

View file

@ -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 {