update(app): started dashboard. WIP

Author: vmc08

src/components/layout/AppLayout.tsx

@@ -29,9 +29,9 @@ const StyledHeader = styled(Header)`
 `;
 
 const StyledContent = styled(Content)`
-  padding: 24px;
   margin-top: 56px;
-  @media only screen and (max-width: 600px) {
+  @media (max-width: 577px) and (orientation: portrait),
+  (max-width: 824px) and (orientation: landscape) {
     margin-right: ${(props: { collapsed: number }) => {
       return `${props.collapsed ? 0 : '-225px'}`;
     }};
@@ -56,7 +56,7 @@ const AppLayout = (props: IAppLayoutProps) => {
             onClick={toggleCollapse}
           />
         </StyledHeader>
-        <StyledContent collapsed={collapsed ? 1 : 0}>
+        <StyledContent className="p-2 p-sm-3" collapsed={collapsed ? 1 : 0}>
           {/* <AppBreadcrumb /> */}
           {children}
         </StyledContent>

src/components/pages/dashboard/HeatMap.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class HeatMap extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/MarketCap.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class MarketCap extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/Portfolio.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class Portfolio extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/TopGainers.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class TopGainers extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/TopLosers.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class TopLosers extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/TopVolume.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class TopVolume extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-sm-3" loading/>
     );
   }
 }

src/components/pages/dashboard/Watchlist.tsx

@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
 class Watchlist extends React.Component {
   render() {
     return (
-      <Card loading/>
+      <Card className="mb-2 mb-lg-0" loading/>
     );
   }
 }

src/components/pages/register/Quiz.tsx

@@ -27,20 +27,20 @@ const QuizWrapper = styled.div`
   height: 100vh;
   .root-row {
     padding-top: 50px;
-    @media only screen and (max-width: 600px) {
+    @media (max-width: 577px) {
       padding-top: 0;
     }
     &.main {
       padding-top: 100px;
     }
     .root-col {
       padding: 24px;
-      @media only screen and (max-width: 600px) {
+      @media (max-width: 577px) {
         padding: 24px 0;
       }
       &:nth-child(2) {
         padding: 12px 24px;
-        @media only screen and (max-width: 600px) {
+        @media (max-width: 577px) {
           padding: 12px;
         }
         }

src/pages/Dashboard.tsx

@@ -21,15 +21,15 @@ class Dashboard extends React.Component<{ requireAuth: boolean }> {
           {(value) => {
             return (
               <>
-                <Row gutter={24}>
+                <Row gutter={16}>
                   <Col xs={24} xl={12}>
                     <MarketCap />
                   </Col>
                   <Col xs={24} xl={12}>
                     <HeatMap />
                   </Col>
                 </Row>
-                <Row gutter={24}>
+                <Row gutter={16}>
                   <Col xs={24} xl={8}>
                     <TopGainers />
                   </Col>
@@ -40,17 +40,17 @@ class Dashboard extends React.Component<{ requireAuth: boolean }> {
                     <TopLosers />
                   </Col>
                 </Row>
-                <Row type="flex" gutter={24}>
+                <Row type="flex" gutter={16}>
                   <Col xs={{ span: 24, order: 2 }} xl={{ span: 16, order: 1 }}>
                     Insights here
                   </Col>
                   <Col xs={{ span: 24, order: 1 }} xl={{ span: 8, order: 2 }}>
-                    <Row gutter={24}>
+                    <Row gutter={16}>
                       <Col>
                         <Portfolio />
                       </Col>
                     </Row>
-                    <Row gutter={24}>
+                    <Row gutter={16}>
                       <Col>
                         <Watchlist />
                       </Col>