2531 fix starter project layout (#2535)

* cosmetic changes in staterproject layout

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* increased width size of the card

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

* adjust margin of title and description text

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

Signed-off-by: msivasubramaniaan <msivasub@redhat.com>

Author: msivasubramaniaan

src/webview/devfile-registry/app/cardItem.style.tsx

@@ -104,7 +104,7 @@ export default (theme: Theme) =>
             border: '1px solid',
             borderColor: 'inherit',
             maxHeight: '40rem',
-            maxWidth: '50rem',
+            width: '65rem',
             margin: 'auto',
             overflow: 'auto'
         },
@@ -127,13 +127,11 @@ export default (theme: Theme) =>
             marginTop: '0.5rem'
         },
         cardButton: {
-            display: 'block',
-            marginTop: '0.3rem',
-            marginBottom: '0.5rem'
+            display: 'inline-block'
         },
         button: {
             width: 'auto',
-            maxHeight: '2rem',
+            height: '2rem',
             textAlign: 'center',
             outline: '0.0625rem solid transparent',
             outlineOffset: '0.125rem!important',
@@ -176,27 +174,21 @@ export default (theme: Theme) =>
             color: 'var(--vscode-foreground)',
             backgroundColor: 'var(--vscode-editor-background)',
             height: 'auto',
-            width: '40rem',
-            zIndex: 1
+            width: '65rem'
         },
         devPageCardHeader: {
             display: 'block',
             height: '3rem',
             margin: '0.5rem'
         },
-        devPageCardBody: {
-            paddingLeft: '0.5rem!important',
-            width: '100%'
-        },
         starterProjectCard: {
             color: 'var(--vscode-foreground)',
             backgroundColor: 'var(--vscode-editor-background)',
             fontSize: 'var(--vscode-font-size)',
             fontFamily: 'var(--vscode-font-family)',
-            maxWidth: '25rem',
+            width: '60rem',
             maxHeight: '18rem',
-            margin: 'auto',
-            overflow: 'hidden',
+            overflow: 'auto',
             border: '1px solid',
             borderColor: 'inherit'
         },
@@ -206,6 +198,7 @@ export default (theme: Theme) =>
             margin: '0.5rem'
         },
         starterProjectCardBody: {
+            width: 'auto',
             display: 'flex',
             borderTop: '1px solid',
             borderTopColor: 'inherit',
@@ -233,7 +226,7 @@ export default (theme: Theme) =>
             color: 'var(--vscode-list-activeSelectionForeground)',
             paddingLeft: '0.5rem',
             paddingTop: '0.2rem',
-            paddingBottom: '0.2rem',
+            paddingBottom: '0.5rem',
             cursor: 'default',
             border: '0.5px solid',
             borderColor: 'var(--vscode-focusBorder)'
@@ -242,7 +235,7 @@ export default (theme: Theme) =>
             width: '95%',
             paddingLeft: '0.5rem',
             paddingTop: '0.2rem',
-            paddingBottom: '0.2rem',
+            paddingBottom: '0.5rem',
             cursor: 'default',
             backgroundColor: 'var(--vscode-list-focusBackground)',
             color: 'var(--vscode-list-focusForeground)',
@@ -252,7 +245,7 @@ export default (theme: Theme) =>
             }
         },
         display: {
-            width: '40%',
+            width: '50%',
             alignItems: 'center',
             marginLeft: 'auto',
             marginRight: 'auto',

src/webview/devfile-registry/app/cardItem.tsx

@@ -190,32 +190,31 @@ export class CardItem extends React.Component<DevFileProps, {
                                     </Text>
                                 </TextContent>
                             </Button>
-                        </CardActions>
-                        {this.props.hasGitLink && <><CardActions className={this.props.cardItemStyle.cardButton}>
-                            <Button
-                                color='default'
-                                component='span'
-                                className={this.props.cardItemStyle.button}
-                                onClick={this.cloneToWorkSpace}>
-                                <TextContent>
-                                    <Text component={TextVariants.h6}>
-                                        Clone to Workspace
-                                    </Text>
-                                </TextContent>
-                            </Button>
-                        </CardActions><CardActions className={this.props.cardItemStyle.cardButton}>
-                                <Button
+                            {this.props.hasGitLink &&
+                                <><Button
                                     color='default'
+                                    variant='contained'
                                     component='span'
                                     className={this.props.cardItemStyle.button}
-                                    onClick={this.openInBrowser}>
+                                    onClick={this.cloneToWorkSpace}>
                                     <TextContent>
-                                        <Text component={TextVariants.h1}>
-                                            Open in Browser
+                                        <Text component={TextVariants.h6}>
+                                            Clone to Workspace
                                         </Text>
                                     </TextContent>
-                                </Button>
-                            </CardActions></>}
+                                </Button><Button
+                                    color='default'
+                                    variant='contained'
+                                    component='span'
+                                    className={this.props.cardItemStyle.button}
+                                    onClick={this.openInBrowser}>
+                                        <TextContent>
+                                            <Text component={TextVariants.h6}>
+                                                Open in Browser
+                                            </Text>
+                                        </TextContent>
+                                    </Button></>}
+                        </CardActions>
                     </div>
                 </div>
             </CardBody>
@@ -253,9 +252,7 @@ export class CardItem extends React.Component<DevFileProps, {
                                 </TextContent>
                             </div>
                         </CardHeader>
-                        <CardBody className={this.props.cardItemStyle.devPageCardBody}>
-                            {starterProjectCard}
-                        </CardBody>
+                        {starterProjectCard}
                     </Card>
                 </CardHeader>
                 <CardBody className={this.props.cardItemStyle.yamlCardBody}>

src/webview/devfile-registry/app/starterProjectDisplay.style.tsx

@@ -8,11 +8,11 @@ import { Theme, createStyles } from '@material-ui/core/styles';
 export default (theme: Theme) =>
     createStyles({
         displayedName: {
-            margin: '0rem',
+            margin: '0rem 0.5rem',
             marginBottom: '0rem!important'
         },
         displayedDescription: {
-            margin: '0rem',
+            margin: '0rem 0.5rem',
             marginBottom: '0rem',
             color: '#adabae'
         }