styling of library items

Author: svenefftinge

.gitignore

@@ -6,4 +6,5 @@ build/
 !electron/build/
 src-gen/
 arduino-ide-*/webpack.config.js
-.DS_Store
+.DS_Store
+/workspace/static

arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx

@@ -22,13 +22,12 @@ export class ComponentListItem extends React.Component<ComponentListItem.Props>
         const style = ComponentListItem.Styles;
         const name = <span className={style.NAME_CLASS}>{item.name}</span>;
         const author = <span className={style.AUTHOR_CLASS}>{item.author}</span>;
-        const installedVersion = !!item.installedVersion && <React.Fragment>
+        const installedVersion = !!item.installedVersion && <div className={style.VERSION_INFO_CLASS}>
             <span className={style.VERSION_CLASS}>Version {item.installedVersion}</span>
             <span className={style.INSTALLED_CLASS}>INSTALLED</span>
-        </React.Fragment>;
+        </div>;
 
         const summary = <div className={style.SUMMARY_CLASS}>{item.summary}</div>;
-        const description = !!item.description && <div className={style.DESCRIPTION_CLASS}>{item.description}</div>;
 
         const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
         const install = this.props.install && item.installable && !item.installedVersion &&
@@ -41,7 +40,6 @@ export class ComponentListItem extends React.Component<ComponentListItem.Props>
             </div>
             <div className={style.CONTENT_CLASS}>
                 {summary}
-                {description}
             </div>
             <div className={style.FOOTER_CLASS}>
                 {moreInfo}
@@ -63,6 +61,7 @@ export namespace ComponentListItem {
     export namespace Styles {
         export const LIST_ITEM_CLASS = 'component-list-item';
         export const HEADER_CLASS = 'header';
+        export const VERSION_INFO_CLASS = 'version-info';
         export const CONTENT_CLASS = 'content';
         export const FOOTER_CLASS = 'footer';
         export const INSTALLED_CLASS = 'installed';

arduino-ide-extension/src/browser/components/component-list/search-bar.tsx

@@ -8,15 +8,14 @@ export class SearchBar extends React.Component<SearchBar.Props> {
     }
 
     render(): React.ReactNode {
-        return <form className={SearchBar.Styles.SEARCH_BAR_CLASS}>
-            <input
+        return <input
+                className={SearchBar.Styles.SEARCH_BAR_CLASS}
                 type='text'
                 placeholder='Search'
                 size={1}
                 value={this.props.filterText}
                 onChange={this.handleFilterTextChange}
-            />
-        </form>;
+            />;
     }
 
     private handleFilterTextChange(event: React.ChangeEvent<HTMLInputElement>): void {

arduino-ide-extension/src/browser/style/list-widget.css

@@ -9,11 +9,18 @@
 
 .arduino-list-widget .search-bar > input {
     margin: 0px 5px 0px 5px;
-    width: 100%;
+    width: 95%;
+}
+
+.filterable-list-container {
+    padding: 0 10px 0 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 }
 
 .component-list-item {
-    padding: 10px;
+    padding: 10px 0 10px 0;
     font-size: var(--theia-ui-font-size1);
 }
 
@@ -33,6 +40,13 @@
 .component-list-item .header {
     padding-bottom: 2px;
     display: flex;
+    flex-direction: column;
+}
+
+.component-list-item .header .version-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .component-list-item .header .name {
@@ -45,23 +59,22 @@
 }
 
 .component-list-item .header .version {
-    margin-left: auto;
-    justify-self: end;
     color: var(--theia-ui-font-color2);
 }
 
 .component-list-item .header .installed {
     margin-left: 4px;
     justify-self: end;
     background-color: var(--theia-accent-color2);
-    padding: 4px;
+    padding: 2px 4px 2px 4px;
     font-size: 10px;
     font-weight: bold;
     max-height: calc(1em + 4px);
-    color: var(--theia-layout-color0);
+    color: var(--theia-inverse-ui-font-color0);
 }
 
 .component-list-item .footer {
+    padding-top: 5px;
     display: flex;
 }