improve tutorial

src/components/AddReview/index.tsx

@@ -141,13 +141,20 @@ const AddReview: React.FC<AddReviewProps> = ({ claim, closeModal, reviewsNum })
  }}
  >
  <Col span={24}>
- <Paragraph style={{ color: 'white' }}>
- {claim.text}
+ <Paragraph style={{ color: 'white', fontWeight: 'bold' }}>
+ <p style={{
+ display: 'inline', color: 'white', fontStyle: 'italic', fontSize: '1.0em',
+ }}
+ >
+ „
+ {claim.text}
+ “
+ </p>
  </Paragraph>
  </Col>
  </Row>
  <Divider style={{ backgroundColor: 'white', width: '5%' }} />
- <Title level={5} className="defaultForm" style={{ color: 'white', whiteSpace: 'pre-line', textDecoration: 'none' }}>My review :</Title>
+ <Title level={5} className="defaultForm" style={{ color: '#d86e3d', whiteSpace: 'pre-line', textDecoration: 'none' }}>{t('my_review')}</Title>
  <Form
  form={claimForm}
  name="basic"

src/components/TabExample/index.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+
+interface Props {
+ element: ReactNode,
+}
+
+const TabExample: React.FC<Props> = ({ element }) => (
+ <div className="osx-window tutorial">
+ <div className="osx-title-bar">
+ <div className="osx-buttons">
+ <div className="osx-button osx-close" />
+ <div className="osx-button osx-minimize" />
+ <div className="osx-button osx-maximize" />
+ </div>
+ </div>
+ <div className="osx-content">
+ {element}
+ </div>
+ </div>
+);
+
+export default TabExample;

src/components/Tutorial/addarticle.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable max-len */
+import React from 'react';
+import {
+ Carousel,
+} from 'antd';
+
+const contentStyle: React.CSSProperties = {
+ color: '#fff',
+ lineHeight: '160px',
+ textAlign: 'center',
+ background: '#364d79',
+};
+
+const CreateArticleTutorial: React.FC = () => (
+ <Carousel dotPosition="bottom" autoplay>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_article_1.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_article_2.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_article_3.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ </Carousel>
+);
+
+export default CreateArticleTutorial;

src/components/Tutorial/addclaim.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+ Carousel,
+} from 'antd';
+
+const contentStyle: React.CSSProperties = {
+ color: '#fff',
+ lineHeight: '160px',
+ textAlign: 'center',
+ background: '#364d79',
+};
+
+const CreateClaimTutorial : React.FC = () => (
+ <Carousel dotPosition="bottom" autoplay>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_article_3.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_claim_1.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_claim_2.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ </Carousel>
+);
+
+export default CreateClaimTutorial;

src/components/Tutorial/addreview.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { } from 'react';
+import {
+ Carousel,
+} from 'antd';
+
+const contentStyle: React.CSSProperties = {
+ color: '#fff',
+ lineHeight: '160px',
+ textAlign: 'center',
+ background: '#364d79',
+};
+
+const AddReviewTutorial: React.FC = () => (
+ <Carousel dotPosition="bottom" autoplay>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_review_1.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_review_2.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ <div>
+ <div style={contentStyle}>
+ <img
+ alt=""
+ src={`${process.env.PUBLIC_URL}/pictures/tutorial/add_review_3.png`}
+ width="100%"
+ height="fit-content"
+ />
+ </div>
+ </div>
+ </Carousel>
+);
+
+export default AddReviewTutorial;