change to moon icon

README.md

@@ -16,7 +16,7 @@ Pretzel is Mac desktop app that shows and search keyboard shortcuts based on you
 
 ## Download for Mac
 
-[Download the latest release](https://github.com/amiechen/pretzel/releases/tag/v0.5.0)
+[Download the latest release](https://github.com/amiechen/pretzel/releases)
 
 ## Run it locally (if you are curious):
 
@@ -25,6 +25,12 @@ npm install
 npm start
 ```
 
+Compile Scss
+
+```
+sass --watch sass/main.ss:main.css
+```
+
 To compile:
 
 ```

index.html

@@ -49,10 +49,17 @@ <h1 class="app-name"></h1>
         <ul>
           <li class="flexbox">
             <label>Night Mode</label>
-            <div class="toggle-container">
-              <div class="toggle">
-                <div class="ball"></div>
-              </div>
+            <div class="mode">
+              <?xml version="1.0" encoding="UTF-8"?>
+              <svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+                  <title>Artboard</title>
+                  <desc>Created with Sketch.</desc>
+                  <defs></defs>
+                  <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <path d="M13,8.43888889 C12.7568615,11.0698936 10.5086225,13.057575 7.86765359,12.9764268 C5.22668467,12.8952786 3.10472138,10.7733153 3.02357317,8.13234641 C2.94242496,5.49137749 4.93010644,3.24313846 7.56111111,3 C6.41686774,4.54802873 6.57736477,6.70025177 7.9385565,8.0614435 C9.29974823,9.42263523 11.4519713,9.58313226 13,8.43888889 Z" id="moon" stroke="#000000"></path>
+                  </g>
+              </svg>
             </div>
           </li>
           <li class="flexbox flexbox--column">

index.js

@@ -15,7 +15,7 @@ const assetsDirectory = path.join(__dirname, "assets");
 const shortcutsDirectory = path.join(__dirname, "shortcuts");
 const mb = menubar({
   icon: path.join(__dirname, "/assets/icon.png"),
-  width: 800,
+  width: 300,
   height: 400,
   resizable: false,
   showDockIcon: false,
@@ -47,7 +47,7 @@ function toggleWindow() {
 }
 
 mb.on("ready", function ready() {
-  mb.window.webContents.toggleDevTools();
+  // mb.window.webContents.toggleDevTools();
   // settings.deleteAll();
   autoUpdater.checkForUpdatesAndNotify();
   globalShortcut.register(

package.json

@@ -1,25 +1,26 @@
 {
   "name": "pretzel",
   "productName": "Pretzel",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "a contextual shortcuts finder",
   "author": "Amie Chen",
   "main": "index.js",
   "scripts": {
     "start": "electron .",
     "package": "build",
     "publish": "build -p always",
-    "build:mac": "electron-packager . Pretzel --platform=darwin --arch=x64 --asar  --icon='./build/icon.icns' --osx-sign",
-    "build:win": "electron-packager . Pretzel --platform=win32 --arch=x64 --asar  --icon=icon.ico",
-    "build:linux": "electron-packager . Pretzel --platform=linux --arch=x64 --asar  --icon=icon.ico"
+    "build:mac":
+      "electron-packager . Pretzel --platform=darwin --arch=x64 --asar  --icon='./build/icon.icns' --osx-sign",
+    "build:win":
+      "electron-packager . Pretzel --platform=win32 --arch=x64 --asar  --icon=icon.ico",
+    "build:linux":
+      "electron-packager . Pretzel --platform=linux --arch=x64 --asar  --icon=icon.ico"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/amiechen/pretzel.git"
   },
-  "keywords": [
-    "shortcuts"
-  ],
+  "keywords": ["shortcuts"],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/amiechen/pretzel/issues"
@@ -40,11 +41,7 @@
   },
   "build": {
     "appId": "com.Hyperyolo.Pretzel",
-    "files": [
-      "**/*",
-      "!screenshot/${/*}",
-      "!docs${/*}"
-    ],
+    "files": ["**/*", "!screenshot/${/*}", "!docs${/*}"],
     "copyright": "Copyright © Amie Chen"
   }
 }

renderer.js

@@ -13,7 +13,7 @@ const search = get("#search");
 const allAppsBtn = get("#show-all-apps");
 const quitAppBtn = get("#quit-app");
 const settingAppBtn = get("#setting-app");
-const toggleBtn = get(".toggle-container");
+const modeBtn = get(".mode");
 const cancelSettingBtn = get(".cancel");
 const body = get("body");
 const saveAndRelaunchBtn = get(".save-and-relaunch");
@@ -79,7 +79,7 @@ function setPretzelTheme() {
   const theme = setting.getTheme() || "dark";
   body.classList = "";
   body.classList.add(theme);
-  theme === "dark" ? get(".toggle").classList.add("active") : null;
+  theme === "dark" ? get(".mode").classList.add("active") : null;
 }
 
 ipcRenderer.on("noShortcuts", (event, name) => {
@@ -165,13 +165,13 @@ saveAndRelaunchBtn.addEventListener("click", () => {
   remote.app.exit(0);
 });
 
-toggleBtn.addEventListener("click", event => {
-  if (event.target.classList.contains("active")) {
+modeBtn.addEventListener("click", event => {
+  if (event.currentTarget.classList.contains("active")) {
     body.classList.remove("dark");
     body.classList.add("light");
-    event.target.classList.remove("active");
+    event.currentTarget.classList.remove("active");
   } else {
-    event.target.classList.add("active");
+    event.currentTarget.classList.add("active");
     body.classList.remove("light");
     body.classList.add("dark");
   }

sass/toggle.scss

@@ -1,25 +1,12 @@
-.toggle-container {
-  transition: all 0.2s;
+.mode {
+  margin-top: -0.3rem;
   cursor: pointer;
-  width: 32px;
-  .ball {
-    height: 1rem;
-    width: 1rem;
-    margin-left: 0;
-    border-radius: 2.5rem;
-    box-shadow: 0 3px 6px 0 rgba(0, 35, 11, 0.2);
-    background-color: #fff;
-    transition: all 0.3s ease-out;
+  #moon {
+    stroke: #68a1f3;
   }
-  .toggle {
-    border-radius: 3rem;
-    background-color: $light-gray;
-    transition: all 0.2s;
-    &.active {
-      background-color: $medium-blue-1;
-      .ball {
-        margin-left: 1rem;
-      }
+  &.active {
+    #moon {
+      fill: #68a1f3;
     }
   }
 }

sass/usersettings.scss

@@ -14,7 +14,7 @@
     padding: 2rem;
   }
   li {
-    margin-bottom: 1.5rem;
+    margin-bottom: 0.5rem;
   }
   label {
     flex-grow: 1;