Merge branch 'main' of github.com:cyclops-ui/cyclops-ui.github.io

Author: KaradzaJuraj

src/components/Comparison/index.js

@@ -112,30 +112,22 @@ class Comparison extends React.Component {
 
         return (
             <div className={styles.all}>
-                <div className={styles.yaml}>
-                    <CodeBlock
-                        language={'yaml'}
-                        showLineNumbers={true}
-                    >
-                        {getManifest()}
-                    </CodeBlock>
-                </div>
                 <div className={styles.ui}>
-                    <h1 className="hero__title">Simple deployment</h1>
+                    <h1 className="hero__title uiText">Simple deployment</h1>
                     <p className="hero__subtitle">Cyclops gives you a UI containing fields you define yourself to manage your
                         K8s workloads</p>
-                    <Form labelAlign={"left"}>
+                    <Form labelCol={{span: '6'}}>
                         <Form.Item
                             label="Name"
-                            style={{display: 'block'}}
+                            style={{ flexDirection: 'row' }}
                         >
                             <Input defaultValue={'nginx'} onChange={onNameChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Replicas"
                             style={{display: 'block'}}
                         >
-                            <InputNumber defaultValue={'3'} onChange={onReplicasChange}/>
+                            <InputNumber style={{width: '100%'}} defaultValue={'3'} onChange={onReplicasChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Version"
@@ -147,16 +139,24 @@ class Comparison extends React.Component {
                             label="Port"
                             style={{display: 'block'}}
                         >
-                            <InputNumber defaultValue={'80'} onChange={onPortChange}/>
+                            <InputNumber style={{width: '100%'}} defaultValue={'80'} onChange={onPortChange}/>
                         </Form.Item>
                         <Form.Item
                             label="Need service"
-                            style={{display: 'block'}}
+                            style={{display: 'block', textAlign: 'left'}}
                         >
                             <Switch defaultValue={'false'} onChange={onNeedService}/>
                         </Form.Item>
                     </Form>
                 </div>
+                <div className={styles.yaml}>
+                    <CodeBlock
+                        language={'yaml'}
+                        showLineNumbers={true}
+                    >
+                        {getManifest()}
+                    </CodeBlock>
+                </div>
             </div>
         );
     }

src/components/Comparison/styles.module.css

@@ -12,13 +12,16 @@
 }
 
 .yaml {
-  float: right;
+  float: left;
   width: 50%;
-  padding-right: 10%;
-  padding-top: 10px;
+  padding-left: 10%;
+  padding-top: 30px;
+  padding-bottom: 30px;
 }
 
 .ui {
+  padding-top: 30px;
+  padding-bottom: 30px;
   float: left;
   width: 30%;
 }
@@ -31,9 +34,11 @@
   }
 
   .ui {
+    text-align: center;
     width: 100%;
     padding-right: 5px;
     padding-left: 5px;
+    padding-bottom: 0;
   }
 }
 

src/pages/index.js

@@ -30,7 +30,7 @@ function HomepageHeader() {
                 <div className={styles.support}>
                     <p style={{padding: 0, margin: 0}}>Supported by</p>
                     <Link to="https://nuqleus.io/">
-                        <img src={nuqleus} />
+                        <img src={nuqleus}/>
                     </Link>
                 </div>
             </div>
@@ -44,10 +44,10 @@ export default function Home() {
         <Layout
             title={`Hello from ${siteConfig.title}`}
             description="Description will go into a meta tag in <head />">
-            <HomepageHeader />
+            <HomepageHeader/>
             <main>
-                <HomepageFeatures />
-                <Comparison />
+                <HomepageFeatures/>
+                <Comparison/>
             </main>
         </Layout>
     );