Remove block.tsx

Author: BenjaBobs

src/AppHost.tsx

@@ -1,18 +1,17 @@
 import './AppHost.scss';
 
-import { Col, Layout, Result, Row, Typography } from 'antd';
+import { Col, Layout, Result, Row } from 'antd';
 import ErrorBoundary from 'antd/lib/alert/ErrorBoundary';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { LoadingOutlined } from '@ant-design/icons';
 
 import { s_apps, s_currentApp } from './apps/Apps';
-import Block from './apps/components/block/block';
 import Link from './Link';
+import { Flex } from '@src/utils/components/flex';
 
 const { Header, Content } = Layout;
-const { Title } = Typography;
 
 export default function AppHost() {
   const apps = useRecoilValue(s_apps);
@@ -21,33 +20,24 @@ export default function AppHost() {
   return (
     <Layout>
       <Header>
-        <Block
-          baseColumns={1}
-          tablet={{ baseColumns: 3 }}
-          laptop={{ baseColumns: Math.min(apps.length, 6) }}
-          align="center"
-          gap={0.5}
-        >
+        <Flex height={64} justifySelf="center" align="stretch" gap={16}>
           {apps.map(app => (
             <Link
               key={app.absolutePath}
               to={app.overrideLink ?? app.absolutePath}
               absolute
             >
-              <Block
-                align="center"
-                textAlign="center"
+              <div
                 className={`animate textglow-hover ${
                   app === currentApp?.app ? 'underglow' : 'underglow-hover'
                 }`}
-                padding={{ left: 0.5, right: 0.5 }}
-                height={4}
+                style={{ padding: '0 8px', alignContent: 'center' }}
               >
-                <Title level={4}>{app.name}</Title>
-              </Block>
+                <h4>{app.name}</h4>
+              </div>
             </Link>
           ))}
-        </Block>
+        </Flex>
       </Header>
       <Content>
         <Row justify="center">

src/apps/about/about-app.tsx

@@ -2,7 +2,7 @@ import Markdown from 'markdown-to-jsx';
 
 import readmeMD from '../../../README.md?raw';
 import { AppDefinition } from '../AppDefinition';
-import Block from '../components/block/block';
+import { Flex } from '@src/utils/components/flex';
 
 const AboutApp: AppDefinition = {
   name: 'About',
@@ -14,13 +14,8 @@ export default AboutApp;
 
 function AboutPage() {
   return (
-    <Block
-      className="markdown"
-      mobile={{ width: '100%' }}
-      tablet={{ width: '75%' }}
-      laptop={{ width: '50%' }}
-    >
+    <Flex down className="markdown">
       <Markdown children={readmeMD} />
-    </Block>
+    </Flex>
   );
 }

src/apps/changelog/changelog-app.tsx

@@ -1,9 +1,9 @@
-import { Card, Col, Row, Timeline, Typography } from 'antd';
+import { Card, Timeline, Typography } from 'antd';
 import React from 'react';
 
 import { AppDefinition } from '../AppDefinition';
-import Block from '../components/block/block';
 import changeLog from './changelog';
+import { Flex } from '@src/utils/components/flex';
 
 const ChangeLogApp: AppDefinition = {
   name: 'ChangeLog',
@@ -15,32 +15,30 @@ export default ChangeLogApp;
 
 function ChangeLogPage() {
   return (
-    <Row style={{ paddingTop: 16 }} justify="center">
-      <Col xs={24} lg={{ span: 16 }}>
-        <Timeline mode="left" style={{ width: '100%' }}>
-          {changeLog.map((item, idx) => (
-            <Timeline.Item style={{ paddingBottom: 60 }} key={idx}>
-              <Card
-                style={{ padding: 16, paddingBottom: 16 }}
-                title={
-                  <Typography.Title level={2}>
-                    {item.date.toDateString()}
-                  </Typography.Title>
-                }
-              >
-                <Block>
-                  <RenderCategory name="Added" data={item.added} />
-                  <RenderCategory name="Changed" data={item.changed} />
-                  <RenderCategory name="Fixed" data={item.fixed} />
-                  <RenderCategory name="Removed" data={item.removed} />
-                  <RenderCategory name="Code" data={item.code} />
-                </Block>
-              </Card>
-            </Timeline.Item>
-          ))}
-        </Timeline>
-      </Col>
-    </Row>
+    <Flex down justifySelf="center" align="center" maxWidth={1000}>
+      <Timeline mode="left" style={{ width: '100%' }}>
+        {changeLog.map((item, idx) => (
+          <Timeline.Item style={{ paddingBottom: 60 }} key={idx}>
+            <Card
+              style={{ padding: 16, paddingBottom: 16 }}
+              title={
+                <Typography.Title level={2}>
+                  {item.date.toDateString()}
+                </Typography.Title>
+              }
+            >
+              <Flex down>
+                <RenderCategory name="Added" data={item.added} />
+                <RenderCategory name="Changed" data={item.changed} />
+                <RenderCategory name="Fixed" data={item.fixed} />
+                <RenderCategory name="Removed" data={item.removed} />
+                <RenderCategory name="Code" data={item.code} />
+              </Flex>
+            </Card>
+          </Timeline.Item>
+        ))}
+      </Timeline>
+    </Flex>
   );
 }
 

src/apps/components/block/block.scss

@@ -1,7 +1,7 @@
 import { Avatar } from 'antd';
 
 import { Hero } from '../../../api/heroes/heroes';
-import Block from '../block/block';
+import { Flex } from '@src/utils/components/flex';
 
 export default function HeroAvatar(props: {
   hero: Hero;
@@ -14,12 +14,12 @@ export default function HeroAvatar(props: {
   else if (props.onClick) classes.push('hoverable');
 
   return (
-    <Block onClick={props.onClick} className={classes.join(' ')}>
+    <Flex slim onClick={props.onClick} className={classes.join(' ')}>
       <Avatar
         className={classes.join(' ')}
         style={{ height: props.size ?? 80, width: props.size ?? 80 }}
         src={props.hero.icon}
       />
-    </Block>
+    </Flex>
   );
 }