Dashboard css fixed

Author: sametkabay

reactjs/src/components/Header/index.less

@@ -1,45 +1,51 @@
 .trigger {
-    font-size: 18px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color 0.3s;
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
 }
 
 .trigger:hover {
-    color: #1890ff;
+  color: #1890ff;
 }
 
 .logo {
-    height: 32px;
-    background: rgba(255, 255, 255, 0.2);
-    margin: 16px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
 }
 
 /* Let's get this party started */
 ::-webkit-scrollbar {
-    width: 12px;
+  width: 12px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    background: #455A64;
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background: #455a64;
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
 }
 
 ::-webkit-scrollbar-thumb:window-inactive {
-    background: #455A64;
+  background: #455a64;
 }
 
 .sidebar {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 3px 10px 30px 3px rgba(0, 0, 0, 0.19);
-}
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 3px 10px 30px 3px rgba(0, 0, 0, 0.19);
+}
+
+.header-container {
+  -webkit-box-shadow: 0px 6px 50px -18px rgba(0, 0, 0, 0.81);
+  -moz-box-shadow: 0px 6px 50px -18px rgba(0, 0, 0, 0.81);
+  box-shadow: 0px 6px 50px -18px rgba(0, 0, 0, 0.81);
+}

reactjs/src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Col, Icon, Avatar, Menu, Dropdown, Badge } from 'antd';
+import { Col, Icon, Avatar, Menu, Dropdown, Badge, Row } from 'antd';
 import { Link } from 'react-router-dom';
 import LanguageSelect from '../LanguageSelect';
 import './index.less';
@@ -24,7 +24,7 @@ const userDropdownMenu = (
 export class Header extends React.Component<IHeaderProps> {
   render() {
     return (
-      <React.Fragment>
+      <Row className={'header-container'}>
         <Col style={{ textAlign: 'left' }} span={12}>
           <Icon className="trigger" type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.props.toggle} />
         </Col>
@@ -36,7 +36,7 @@ export class Header extends React.Component<IHeaderProps> {
             </Badge>
           </Dropdown>
         </Col>
-      </React.Fragment>
+      </Row>
     );
   }
 }

reactjs/src/components/Layout/AppLayout.less

@@ -32,14 +32,18 @@
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
-  background: #455A64;
+  background: #455a64;
   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
 }
 
 ::-webkit-scrollbar-thumb:window-inactive {
-  background: #455A64;
+  background: #455a64;
 }
 
 .sidebar {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 3px 10px 30px 3px rgba(0, 0, 0, 0.19);
-}
+}
+
+.TableCardContainer {
+  margin: 25px 0px 0px 0px;
+}

reactjs/src/components/Layout/AppLayout.tsx

@@ -43,7 +43,7 @@ class AppLayout extends React.Component<any> {
           <Layout.Header style={{ background: '#fff', minHeight: 52, padding: 0 }}>
             <Header collapsed={this.state.collapsed} toggle={this.toggle} />
           </Layout.Header>
-          <Content style={{ margin: '0 16px' }}>
+          <Content style={{ margin: 16 }}>
             <Switch>
               {appRouters
                 .filter((item: any) => !item.isLayout)

reactjs/src/scenes/Dashboard/index.less

@@ -1,7 +1,3 @@
-.dashboardCard {
-  margin-top: 16px;
-}
-
 .dasboardCard-task {
   background-color: #e91e63;
   border-radius: 5px;

reactjs/src/scenes/Dashboard/index.tsx

@@ -112,12 +112,10 @@ export class Dashboard extends React.Component<any> {
           </Col>
         </Row>
 
-        <Row gutter={16}>
-          <Col className={'dashboardBox'}>
-            <Card title="Visit Statistics" loading={lineChartLoading} bordered={false}>
-              <LineChartExample />
-            </Card>
-          </Col>
+        <Row>
+          <Card className={'dashboardBox'} title="Visit Statistics" loading={lineChartLoading} bordered={false}>
+            <LineChartExample />
+          </Card>
         </Row>
 
         <Row gutter={16}>

reactjs/src/scenes/Roles/index.tsx

@@ -1,5 +1,4 @@
 import { Card, Col, Row, Button, Table, Dropdown, Menu, Modal } from 'antd';
-import 'antd/dist/antd.css';
 import * as React from 'react';
 import { EntityDto } from 'src/services/dto/entityDto';
 import CreateOrUpdateRole from './components/createOrUpdateRole';

reactjs/src/scenes/Tenants/index.tsx

@@ -1,5 +1,4 @@
 import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
-import 'antd/dist/antd.css';
 import * as React from 'react';
 import { EntityDto } from 'src/services/dto/entityDto';
 import CreateOrUpdateTenant from './components/createOrUpdateTenant';

reactjs/src/scenes/Users/index.tsx

@@ -1,5 +1,4 @@
 import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
-import 'antd/dist/antd.css';
 import * as React from 'react';
 import CreateOrUpdateUser from './components/createOrUpdateUser';
 import { EntityDto } from 'src/services/dto/entityDto';