Change class names

Author: balthild

src/components/Article.tsx

@@ -102,7 +102,7 @@ export default class Article extends React.Component<ArticleProps, ArticleState>
                 </div>
 
                 <div className="container main">
-                    <WithSidebar className="news">
+                    <WithSidebar>
                         <Card key={article.id} bordered={false} className="article">
                             <div
                                 className="markdown-body"

src/components/Home.scss

@@ -47,19 +47,19 @@
     }
 }
 
-.news {
+.main-content {
     position: relative;
+}
 
-    .article-card {
-        margin-bottom: 12px;
+.article-card {
+    margin-bottom: 12px;
 
-        .ant-card-head-title {
-            font-size: 18px;
+    .ant-card-head-title {
+        font-size: 18px;
 
-            a {
-                color: inherit;
-                text-decoration: none;
-            }
+        a {
+            color: inherit;
+            text-decoration: none;
         }
     }
 }

src/components/Home.tsx

@@ -101,7 +101,7 @@ export default class Home extends React.Component<HomeProps, HomeState> {
                 </div>
 
                 <div className="container main">
-                    <WithSidebar className="news">
+                    <WithSidebar>
                         {this.state.articles && this.state.articles.map((article: Article) => {
                             return (
                                 <Card

src/components/Join.tsx

@@ -169,7 +169,7 @@ class Join extends React.Component<JoinProps, JoinState> {
                 </div>
 
                 <div className="container main">
-                    <WithSidebar className="news">
+                    <WithSidebar>
                         <Card bordered={false}>
                             <Form onSubmit={this.onSubmit} className="join-form">
                                 <p>请如实认真地填写该表格，这将有助于我们更好地组织和调配战争资源，为我们共同的目标赢得更大的优势！</p>

src/components/Profile.tsx

@@ -120,7 +120,7 @@ class Profile extends React.Component<ProfileProps, ProfileState> {
                 </div>
 
                 <div className="container main">
-                    <WithSidebar className="news profile" sidebar={<ProfileSidebar />}>
+                    <WithSidebar className="profile" sidebar={<ProfileSidebar />}>
                         {this.state.articles.map((article: Article) => {
                             const prefix = article.publishedAt.getTime() === 0 ? '[草稿] ' : '';
                             return (

src/components/parts/WithSidebar.tsx

@@ -6,12 +6,12 @@ import DefaultSidebar from './DefaultSidebar';
 interface WithSidebarProps {
     children?: React.ReactNode;
     sidebar?: React.ReactNode;
-    className: string;
+    className?: string;
 }
 
 const WithSidebar = (props: WithSidebarProps) => (
     <Row>
-        <Col span={16} className={props.className + ' main-content'}>
+        <Col span={16} className={(props.className || '') + ' main-content'}>
             {props.children}
         </Col>