Fixes Dashboard. Cleanup

caprover · Nov 30, 2023 · a4be530 · a4be530
1 parent 8426fff
commit a4be530
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -42,6 +42,7 @@ function App() {
                 algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
                 token: {
                     colorPrimary: '#1b8ad3',
+                    colorLink: '#1b8ad3',
                     fontFamily: `QuickSand, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
                         'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,

diff --git a/src/containers/apps/Apps.tsx b/src/containers/apps/Apps.tsx
@@ -81,16 +81,14 @@ export default class Apps extends ApiComponent<
                         self.onCreateNewAppClicked(appName, hasPersistency)
                     }}
                 />
-                {apiData.appDefinitions.length > 0 ? (
+                {apiData.appDefinitions.length > 0 && (
                     <AppsTable
                         search={self.props.location.search}
                         history={self.props.history}
                         defaultNginxConfig={apiData.defaultNginxConfig}
                         apps={apiData.appDefinitions}
                         rootDomain={apiData.rootDomain}
                     />
-                ) : (
-                    <div />
                 )}
             </div>
         )

diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -8,7 +8,7 @@ import {
 import { Card, Input, Row, Table, Tag, Tooltip } from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { History } from 'history'
-import React, { Component, Fragment } from 'react'
+import { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { IMobileComponent } from '../../models/ContainerProps'
@@ -257,16 +257,21 @@ class AppsTable extends Component<
             <Card
                 extra={!self.props.isMobile && searchAppInput}
                 title={
-                    <React.Fragment>
-                        <span>
+                    <div
+                        style={{
+                            paddingTop: 18,
+                            paddingBottom: 18,
+                        }}
+                    >
+                        <div>
                             <CodeOutlined />
                             &nbsp;&nbsp;&nbsp;Your Apps
-                        </span>
-                        <br />
+                        </div>
+
                         {self.props.isMobile && (
                             <div style={{ marginTop: 8 }}>{searchAppInput}</div>
                         )}
-                    </React.Fragment>
+                    </div>
                 }
             >
                 <Row justify="center">

diff --git a/src/containers/apps/CreateNewApp.tsx b/src/containers/apps/CreateNewApp.tsx
@@ -1,5 +1,5 @@
 import { PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons'
-import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd'
+import { Button, Card, Checkbox, Col, Divider, Input, Row, Tooltip } from 'antd'
 import { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
@@ -40,9 +40,13 @@ class CreateNewApp extends Component<
                     </span>
                 }
             >
-                <Row justify="center">
-                    <Col lg={{ span: 12 }}>
-                        <Row>
+                <Row align="middle">
+                    <Col md={{ span: 11 }} xs={{ span: 24 }}>
+                        <Row
+                            style={{
+                                marginBottom: 20,
+                            }}
+                        >
                             {self.props.isMobile ? (
                                 <Fragment>
                                     <Input
@@ -73,13 +77,12 @@ class CreateNewApp extends Component<
                                             appName: e.target.value,
                                         })
                                     }
-                                    onSearch={(value) =>
+                                    onSearch={() =>
                                         self.onCreateNewAppClicked()
                                     }
                                 />
                             )}
                         </Row>
-                        <br />
                         <Row justify={self.props.isMobile ? 'start' : 'end'}>
                             <Checkbox
                                 onChange={(e: any) =>
@@ -100,13 +103,22 @@ class CreateNewApp extends Component<
                             </Tooltip>
                         </Row>
                     </Col>
-                    <Col lg={{ span: 12 }}>
-                        <div style={{ textAlign: 'center' }}>
-                            <p>Or Select From</p>
-                            <Link to="/apps/oneclick/" className="ant-btn">
-                                One-Click Apps/Databases
-                            </Link>
-                        </div>
+                    {self.props.isMobile ? (
+                        <Divider type="horizontal" style={{ width: 100 }} />
+                    ) : (
+                        <Col md={{ span: 2 }} style={{ textAlign: 'center' }}>
+                            <Divider type="vertical" style={{ height: 100 }} />
+                        </Col>
+                    )}
+                    <Col
+                        md={{ span: 11 }}
+                        xs={{ span: 24 }}
+                        style={{ textAlign: 'center' }}
+                    >
+                        <p style={{ marginTop: 0 }}>Or Select From</p>
+                        <Link to="/apps/oneclick/">
+                            <Button>One-Click Apps/Databases</Button>
+                        </Link>
                     </Col>
                 </Row>
             </Card>

diff --git a/src/containers/apps/appDetails/deploy/AppLogsView.tsx b/src/containers/apps/appDetails/deploy/AppLogsView.tsx
@@ -129,7 +129,13 @@ export default class AppLogsView extends ApiComponent<
 
                 <div>
                     <div>
-                        <Row justify="space-between" align="middle">
+                        <Row
+                            justify="space-between"
+                            align="middle"
+                            style={{
+                                marginBottom: 10,
+                            }}
+                        >
                             <span>
                                 <Row justify="start" align="middle">
                                     <span>
@@ -138,7 +144,7 @@ export default class AppLogsView extends ApiComponent<
                                                 self.onExpandLogClicked()
                                             }}
                                         >
-                                            <h4 className="unselectable-span">
+                                            <span className="unselectable-span">
                                                 {this.state.expandedLogs ? (
                                                     <UpCircleOutlined />
                                                 ) : (
@@ -149,7 +155,7 @@ export default class AppLogsView extends ApiComponent<
                                                     ? 'View'
                                                     : 'Hide'}{' '}
                                                 App Logs
-                                            </h4>
+                                            </span>
                                         </ClickableLink>
                                     </span>
 
@@ -180,14 +186,14 @@ export default class AppLogsView extends ApiComponent<
                                         })
                                     }}
                                 >
-                                    <h4 className="unselectable-span">
+                                    <span className="unselectable-span">
                                         <MenuFoldOutlined />
                                         &nbsp;&nbsp;{' '}
                                         {this.state.isWrapped
                                             ? "Don't wrap logs"
                                             : 'Wrap logs'}
                                         &nbsp;&nbsp;
-                                    </h4>
+                                    </span>
                                 </ClickableLink>
                             </span>
                         </Row>

diff --git a/src/containers/apps/appDetails/deploy/BuildLogsView.tsx b/src/containers/apps/appDetails/deploy/BuildLogsView.tsx
@@ -167,7 +167,7 @@ export default class BuildLogsView extends ApiComponent<
                                 self.onExpandLogClicked()
                             }}
                         >
-                            <h4 className="unselectable-span">
+                            <span className="unselectable-span">
                                 {this.state.expandedLogs ? (
                                     <UpCircleOutlined />
                                 ) : (
@@ -178,7 +178,7 @@ export default class BuildLogsView extends ApiComponent<
                                     ? 'View'
                                     : 'Hide'}{' '}
                                 Build Logs
-                            </h4>
+                            </span>
                         </ClickableLink>
                     </div>
 

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -43,11 +43,6 @@ hr {
     opacity: 0.4;
 }
 
-/* .ant-card {
-    -webkit-box-shadow: var(--shadow-2);
-    box-shadow: var(--shadow-2);
-} */
-
 .unselectable-span {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -109,21 +104,6 @@ hr {
     opacity: 0.8;
 }
 
-/* .inner-card {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--skeleton-color);
-} */
-
 .pre-line-content {
     white-space: pre-wrap;
 }
-
-/* .ant-checkbox {
-    border-radius: 3px;
-} */
-
-/* .ant-checkbox-inner,
-.ant-checkbox-checked::after {
-    border-radius: var(--checkbox-border-radius);
-} */