suplement: minor layouting

README.md

@@ -50,6 +50,7 @@ This is the open source project of Google Drive/OneDrive/iCloud/Dropbox alternat
     | PAYPAL_CLIENT_SECRET   | yes      | Client secret for PayPal subscription       |
     | PAYPAL_PLAN_PREMIUM_ID | yes      | Product ID for premium plan                 |
     | REDIS_URI              | yes      | Cache some responses from external services |
+    | UTILS_API_KEY          | yes      | Token key for make all servers communicate  |
 
   - Web variables
 

web/src/pages/Contact.tsx

@@ -51,7 +51,7 @@ const Contact: React.FC<Props> = ({ me }) => {
   return <>
     <Layout.Content className="container">
       <Row style={{ marginTop: '80px' }}>
-        <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
+        <Col xxl={{ span: 8, offset: 8 }} xl={{ span: 8, offset: 8 }} lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={20} offset={2}>
           <Typography.Title>
             Contact Us
           </Typography.Title>

web/src/pages/Login.tsx

@@ -218,7 +218,7 @@ const Login: React.FC<Props> = ({ me }) => {
   return <>
     <Layout.Content className="container">
       <Row style={{ marginTop: '30px' }}>
-        <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={22} offset={1}>
+        <Col xxl={{ span: 8, offset: 8 }} xl={{ span: 8, offset: 8 }} lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={22} offset={1}>
           <Collapse>
             <Collapse.Panel key="1" showArrow={false} header={<Typography.Text>
               <GlobalOutlined /> Data center region

web/src/pages/Pricing.tsx

@@ -74,7 +74,7 @@ const Pricing: React.FC<Props> = ({ me }) => {
     <ul style={{ textAlign: 'center', listStyleType: 'none' }}>
       <li><strong>Unlimited</strong> total files</li>
       <li><strong>Unlimited</strong> total files size</li>
-      <li><strong>Unlimited</strong> bandwidth usage</li>
+      <li><strong>Unlimited</strong> bandwidth</li>
       <li><strong>Unlimited</strong> upload &amp; download</li>
       <li><strong>All features</strong></li>
     </ul>
@@ -103,7 +103,7 @@ const Pricing: React.FC<Props> = ({ me }) => {
   return <>
     <Layout.Content className="container" style={{ marginTop: '80px' }}>
       <Row>
-        <Col md={{ span: 20, offset: 2 }} span={24}>
+        <Col xxl={{ span: 14, offset: 5 }} xl={{ span: 16, offset: 4 }} lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
           <Typography.Title level={4} style={{ textAlign: 'center', marginBottom: '70px' }}>
             USD &#127482;&#127480; &nbsp; <Switch onChange={e => setIsIDR(e)} /> &nbsp; IDR &#127470;&#127465;
           </Typography.Title>

web/src/pages/Settings.tsx

@@ -77,7 +77,7 @@ const Settings: React.FC<Props> = ({ me, mutate, error }) => {
   return <>
     <Layout.Content>
       <Row style={{ margin: '50px 12px 100px' }}>
-        <Col lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={24}>
+        <Col xxl={{ span: 8, offset: 8 }} xl={{ span: 8, offset: 8 }} lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} span={24}>
           <Typography.Title>
             Settings
           </Typography.Title>

web/src/pages/dashboard/index.tsx

@@ -304,7 +304,7 @@ const Dashboard: React.FC<PageProps & { me?: any, errorMe?: any }> = ({ match })
         }
       }}>
         <Row style={{ minHeight: '80vh', marginBottom: '100px', padding: '0 12px' }}>
-          <Col lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
+          <Col xxl={{ span: 14, offset: 5 }} xl={{ span: 16, offset: 4 }} lg={{ span: 18, offset: 3 }} md={{ span: 20, offset: 2 }} span={24}>
             <Typography.Paragraph>
               <Menu mode="horizontal" selectedKeys={[params?.shared ? 'shared' : 'mine']} onClick={({ key }) => changeTab(key)}>
                 <Menu.Item disabled={!files} key="mine">My Files</Menu.Item>