Cleanup UI & improve homepage

UdaraJay · May 13, 2024 · c0ad9c5 · c0ad9c5
1 parent a9640a1
commit c0ad9c5
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 184 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "description": "Pile",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "keywords": [
     "pile"
   ],

diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pile",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Pile: Everyday journal and thought companion.",
   "license": "MIT",
   "author": {

diff --git a/src/renderer/App.scss b/src/renderer/App.scss
@@ -21,15 +21,15 @@
   --base-red: #e64d4d;
   --base-red-light: #ffdbdb;
 
-  --active: #c69100;
-  --active-hover: #946d00;
+  --active: #4d80e6;
+  --active-hover: #2b5bbb;
   --active-text: #fff;
 
   --border: #e4e4e4;
 
   --bg: #fff;
   --bg-secondary: rgb(246, 246, 246);
-  --bg-tertiary: rgb(220, 220, 220);
+  --bg-tertiary: #dedede;
   --bg-color-secondary-hover: rgb(226, 226, 226);
 }
 
@@ -50,10 +50,6 @@
     --base-red: #cb1d1d;
     --base-red-light: #3d2323;
 
-    --active: #c69100;
-    --active-hover: #946d00;
-    --active-text: #fff;
-
     --border: #565656;
 
     --bg: #171717;
@@ -196,20 +192,20 @@
     --nav-height: 52px;
     --primary: #ffe9ff;
     --secondary: #ab92ae;
-    --base: #d014e1;
+    --base: #ab13b9;
     --base-text: hsl(295, 100%, 93%);
     --base-hover: #df38e5;
     --base-yellow: #776b0e;
     --base-green: #128212;
     --base-red: rgb(255, 116, 85);
     --base-red-light: #3d2323;
-    --active: #ccf263;
+    --active: #a6b776;
     --active-hover: #ecffb8;
     --active-text: #251b24;
     --border: #5f4263;
     --bg: #251b24;
-    --bg-secondary: #481e51;
-    --bg-tertiary: #5a1a5f;
+    --bg-secondary: #45264d;
+    --bg-tertiary: #4d2750;
     --bg-color-secondary-hover: rgb(114, 95, 122);
     --bg-translucent: rgba(32, 10, 35, 0.45);
   }
@@ -257,7 +253,7 @@
     --border: #635342;
     --bg: #25201b;
     --bg-secondary: #51371e;
-    --bg-tertiary: #5f3b1a;
+    --bg-tertiary: #3b2a1a;
     --bg-color-secondary-hover: rgb(122, 115, 95);
     --bg-translucent: rgba(32, 10, 35, 0.45);
   }
@@ -269,10 +265,10 @@
   --sidebar-width: 250px;
   --nav-height: 52px;
   --primary: #1b4109;
-  --secondary: #40881e;
+  --secondary: #306915;
   --base: #22ff00;
   --base-text: hsl(118, 66%, 22%);
-  --base-hover: #c5751f;
+  --base-hover: #21ed0a;
   --base-yellow: #e6e04d;
   --base-green: #4de64d;
   --base-red: #ff3512;
@@ -282,8 +278,8 @@
   --active-text: #fff;
   --border: #81f646;
   --bg: #eeffee;
-  --bg-secondary: rgb(75, 196, 69);
-  --bg-tertiary: rgb(178, 225, 180);
+  --bg-secondary: rgb(155, 230, 151);
+  --bg-tertiary: rgb(151, 198, 154);
   --bg-color-secondary-hover: rgb(226, 226, 226);
 
   @media (prefers-color-scheme: dark) {

diff --git a/src/renderer/pages/Home/Home.module.scss b/src/renderer/pages/Home/Home.module.scss
@@ -44,28 +44,43 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    // border: 1px solid var(--border);
+    flex-direction: column;
     border-radius: 22px;
     height: 72px;
     width: 72px;
     margin: 0 auto;
-    margin-bottom: 44px;
-    background: rgba(0, 0, 0, 0.25);
-    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5);
+    margin-bottom: 64px;
+    gap: 12px;
 
-    @media (prefers-color-scheme: dark) {
-      background: rgba(0, 0, 0, 0.25);
-      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
+    .name {
+      font-family: 'Porpora';
+      font-size: 1.6em;
+      text-align: center;
+      color: var(--primary);
     }
-  }
 
-  .icon {
-    display: block;
-    margin: 0 auto;
-    color: #fff;
-    fill: var(--secondary);
-    width: 45px;
-    height: 45px;
+    .iconHolder {
+      align-items: center;
+      background: #222;
+      border-radius: 32px;
+      display: flex;
+      justify-content: center;
+      margin: 0 auto;
+      height: 87px;
+      width: 87px;
+      min-height: 87px;
+      min-width: 87px;
+    }
+
+    .icon {
+      display: block;
+      margin: 0 auto;
+      flex: 0 0 55px;
+      width: 55px;
+      height: 55px;
+      color: #fff;
+      fill: #999;
+    }
   }
 
   .logoLine {
@@ -89,14 +104,6 @@
     margin-bottom: 32px;
   }
 
-  .name {
-    font-family: 'Porpora';
-    font-size: 1.6em;
-    text-align: center;
-    margin-top: 16px;
-    color: var(--primary);
-  }
-
   .version {
     text-align: center;
     color: var(--secondary);
@@ -113,23 +120,23 @@
   display: block;
   text-align: center;
   font-size: 0.8em;
-  padding: 9px 12px;
+  padding: 10px 18px;
   font-weight: 500;
-  color: var(--secondary);
-  background: Var(--bg);
-  border-radius: 12px;
+  background: Var(--active);
+  color: var(--active-text);
+  border-radius: 90px;
   margin: 32px auto;
   user-select: none;
   transition: all ease-in-out 120ms;
 
   &:hover {
     cursor: pointer;
-    color: var(--base);
-    background: var(--bg);
+    background: var(--active-hover);
   }
 
   &:active {
-    background: var(--bg);
+    color: var(--secondary);
+    background: var(--active);
   }
 }
 
@@ -141,22 +148,34 @@
   user-select: none;
 }
 
+.noPiles {
+  text-align: center;
+  max-width: 200px;
+  margin: 0 auto;
+  border-radius: 12px;
+  padding: 8px 12px;
+  line-height: 1.35;
+  background: var(--bg);
+  color: var(--secondary);
+}
+
 .piles {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   font-size: 0.8em;
   border-radius: 12px;
-  gap: 1px;
+  gap: 2px;
 
   .pile {
     width: 270px;
     -webkit-app-region: none;
     display: flex;
     justify-content: space-between;
     background: var(--bg);
-    padding: 7px 7px 7px 12px;
+    padding: 7px 7px 7px 14px;
     color: var(--primary);
+    border-radius: 4px;
 
     &:first-child {
       border-top-left-radius: 12px;
@@ -205,8 +224,8 @@
   }
 
   .button {
-    background: var(--active);
-    color: var(--active-text);
+    background: var(--base);
+    color: var(--base-text);
     font-size: 0.95em;
     padding: 0 14px;
     height: 28px;
@@ -218,7 +237,7 @@
 
     &:hover {
       cursor: pointer;
-      background: var(--active-hover);
+      background: var(--base-hover);
     }
 
     &:active {

diff --git a/src/renderer/pages/Home/index.tsx b/src/renderer/pages/Home/index.tsx
@@ -28,10 +28,19 @@ export default function Home() {
   }, []);
 
   const renderPiles = () => {
+    if (piles.length == 0)
+      return (
+        <div className={styles.noPiles}>
+          No existing piles.
+          <br />
+          Start by creating a new pile.
+        </div>
+      );
+
     return piles.map((pile: any) => {
       return (
         <div
-          className={`${pile.theme && pile.theme + 'Thee'} ${styles.pile}`}
+          className={`${pile.theme && pile.theme + 'Theme'} ${styles.pile}`}
           key={pile.path}
         >
           <div className={styles.left}>
@@ -52,11 +61,13 @@ export default function Home() {
 
   return (
     <div className={styles.frame}>
-      {/* <div className={styles.bg}></div> */}
       <div className={styles.wrapper}>
         <div className={styles.header}>
           <div className={styles.holder}>
-            <Logo className={styles.icon} />
+            <div className={styles.iconHolder}>
+              <Logo className={styles.icon} />
+            </div>
+            <div className={styles.name}>Pile</div>
           </div>
         </div>