feat: interact with user settings/profile (#9)

This commit is contained in:
Divlo
2022-02-19 23:20:33 +01:00
committed by GitHub
parent 48debe8638
commit 7ac4f86cd5
101 changed files with 6705 additions and 9777 deletions

View File

@ -1,6 +1,6 @@
import { Meta, Story } from '@storybook/react'
import { Header as Component } from './'
import { Header as Component } from '.'
const Stories: Meta = {
title: 'Header',

View File

@ -1,9 +1,9 @@
import { render } from '@testing-library/react'
import { Header } from './'
import { Header } from '.'
describe('<Header />', () => {
it('should render', async () => {
it('should render', () => {
const { getByText } = render(<Header />)
expect(getByText('Thream')).toBeInTheDocument()
})

View File

@ -6,7 +6,7 @@ import { SwitchTheme } from './SwitchTheme'
export const Header: React.FC = () => {
return (
<header className='bg-white flex justify-center sticky top-0 z-50 w-full px-6 py-2 border-b-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
<header className='sticky top-0 z-50 flex w-full justify-center border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
<div className='container flex justify-between'>
<Link href='/'>
<a>
@ -17,7 +17,7 @@ export const Header: React.FC = () => {
src='/images/icons/Thream.png'
alt='Thream'
/>
<span className='ml-1 font-medium font-headline hidden xs:block text-green-800 dark:text-green-400'>
<span className='ml-1 hidden font-headline font-medium text-green-800 dark:text-green-400 xs:block'>
Thream
</span>
</div>

View File

@ -33,10 +33,10 @@ export const Language: React.FC = () => {
}
return (
<div className='relative flex flex-col justify-center items-center cursor-pointer'>
<div className='relative flex cursor-pointer flex-col items-center justify-center'>
<div
data-cy='language-click'
className='flex items-center mr-5'
className='mr-5 flex items-center'
onClick={handleHiddenMenu}
>
<LanguageFlag language={currentLanguage} />
@ -46,7 +46,7 @@ export const Language: React.FC = () => {
<ul
data-cy='languages-list'
className={classNames(
'flex flex-col justify-center items-center absolute p-0 -bottom-16 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black',
'absolute -bottom-16 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-light dark:bg-black dark:shadow-dark',
{ hidden: hiddenMenu }
)}
>
@ -57,7 +57,7 @@ export const Language: React.FC = () => {
return (
<li
key={index}
className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
onClick={async () => await handleLanguage(language)}
>
<LanguageFlag language={language} />

View File

@ -24,13 +24,13 @@ export const SwitchTheme: React.FC = () => {
data-cy='switch-theme-click'
onClick={handleClick}
>
<div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
<div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
<div className='toggle-track'>
<div
data-cy='switch-theme-dark'
className='toggle-track-check absolute'
>
<span className='toggle_Dark flex justify-center items-center relative'>
<span className='toggle_Dark relative flex items-center justify-center'>
🌜
</span>
</div>
@ -38,7 +38,7 @@ export const SwitchTheme: React.FC = () => {
data-cy='switch-theme-light'
className='toggle-track-x absolute'
>
<span className='toggle_Light flex justify-center items-center relative'>
<span className='toggle_Light relative flex items-center justify-center'>
🌞
</span>
</div>