Styling cards

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/install.module.scss

@@ -3,14 +3,94 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-.ExtensionCard {
-  margin-bottom: 10px;
-  list-style-type: none;
-  font-size: 1.2em;
-  border-radius: 6px;
+ .hr {
+   padding: 80px 0;
+ }
+
+.extensionCard {
+  margin-bottom: 16px;
+  border-radius: 4px;
   border: 1px solid #181a1f;
   background-color: #333842;
   overflow: hidden;
   cursor: pointer;
-  padding: var(--padding);
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+
+  &:hover {
+    background-color: #373d48;
+  }
+}
+
+.contents {
+  flex: 1;
+}
+
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.nameAndVersion {
+  display: flex;
+  gap: var(--padding);
+  margin-bottom: var(--padding);
+
+  .name {
+    font-weight: bolder;
+    color: #d7dae0;
+    font-size: larger;
+  }
+
+  .version {
+    font-size: .8em;
+  }
+}
+
+.downloads {
+  display: flex;
+  align-items: center;
+  gap: var(--padding);
+}
+
+.description {
+  line-height: 1.4;
+  margin-bottom: var(--padding);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.author a {
+  color: rgba(157, 165, 180, 0.6)!important;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.icon {
+  height: 50px;
+  border-radius: 4px;
+  min-width: 50px;
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-color: #3a404c;
+}
+
+.install button {
+  display: flex;
+  align-items: center;
+}
+
+.installButtonIco {
+  margin-right: var(--margin);
 }

src/renderer/components/+preferences/install.tsx

@@ -39,17 +39,15 @@ export function Install() {
 
   return (
     <section>
-      <h2><Icon material="add"/> Install Extensions</h2>
+      <h2><Icon material="add" style={{ opacity: ".3" }}/> Install Extensions</h2>
 
       <div className="mt-4">
         <SearchInput/>
       </div>
 
-      <div className="mx-7">
-        <hr />
-      </div>
+      <hr />
 
-      <h2><Icon material="star"/> Featured Extensions</h2>
+      <h2 style={{ marginTop: "30px" }}><Icon material="star" small style={{ opacity: ".3" }}/> Featured Extensions</h2>
       {renderExtensionsOrSpinner()}
     </section>
   );
@@ -64,31 +62,34 @@ function ExtensionList({ extensions }: { extensions: Extension[] }) {
 }
 
 function ExtensionCard({ extension }: { extension: Extension }) {
-  const { name, version, totalNumberOfInstallations, shortDescription, publisher } = extension;
+  const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
 
   return (
-    <div className={styles.ExtensionCard}>
-      <div className="head">
-        <div className="nameAndVersion">
-          <div className="name">{name}</div>
-          <div className="version">{version}</div>
+    <div className={styles.extensionCard}>
+      <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
+      <div className={styles.contents}>
+        <div className={styles.head}>
+          <div className={styles.nameAndVersion}>
+            <div className={styles.name}>{name}</div>
+            <div className={styles.version}>{version}</div>
+          </div>
+
+          <div className={styles.downloads}>
+            <Icon material="cloud_download"/> {totalNumberOfInstallations}
+          </div>
         </div>
 
-        <div className="downloads">
-          <Icon material="cloud_download"/> {totalNumberOfInstallations}
+        <div className={styles.description}>
+          {shortDescription}
         </div>
-      </div>
 
-      <div className="description">
-        {shortDescription}
-      </div>
-
-      <div className="footer">
-        <div className="author">
-          <img src="https://avatars.githubusercontent.com/u/455844?v=4"/> {publisher.username}
-        </div>
-        <div className="install">
-          <Button primary><Icon material="cloud_download"/> Install</Button>
+        <div className={styles.footer}>
+          <div className={styles.author}>
+            <a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
+          </div>
+          <div className={styles.install}>
+            <Button primary><Icon className={styles.installButtonIco} material="cloud_download"/> Install</Button>
+          </div>
         </div>
       </div>
     </div>