Refactor CSS (#116)

Refactor CSS files and structure. Also refactors some html and React components for a smarter use of CSS classes.
This commit is contained in:
Riccardo Graziosi
2022-06-08 10:20:36 +02:00
committed by GitHub
parent 35c427d9f6
commit 8e75a85873
61 changed files with 329 additions and 262 deletions

View File

@@ -1,8 +1,9 @@
import * as React from 'react';
import I18n from 'i18n-js';
import Button from '../shared/Button';
import { BoxTitleText, SmallMutedText } from '../shared/CustomTexts';
import { SmallMutedText } from '../common/CustomTexts';
import SidebarBox from '../common/SidebarBox';
import Switch from '../common/Switch';
interface Props {
followed: boolean;
@@ -12,23 +13,22 @@ interface Props {
}
const ActionBox = ({followed, submitFollow, isLoggedIn}: Props) => (
<div className="actionBoxContainer">
<div className="actionBoxFollow">
<BoxTitleText>{I18n.t('post.action_box.title')}</BoxTitleText>
<br />
<Button onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'} outline>
{ followed ? I18n.t('post.action_box.unfollow_button') : I18n.t('post.action_box.follow_button') }
</Button>
<br />
<SmallMutedText>
{ followed ?
I18n.t('post.action_box.following_description')
:
I18n.t('post.action_box.not_following_description')
}
</SmallMutedText>
</div>
</div>
<SidebarBox title={I18n.t('post.action_box.title')} customClass="actionBoxContainer">
<Switch
onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'}
label={I18n.t('post.action_box.follow_button')}
checked={followed}
htmlId="followSwitch"
/>
<SmallMutedText>
{ followed ?
I18n.t('post.action_box.following_description')
:
I18n.t('post.action_box.not_following_description')
}
</SmallMutedText>
</SidebarBox>
);
export default ActionBox;