v0.2.2

client/package.json

 {
   "name": "pardus-kataliz",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Emincan Ozcan <emincan@emincanozcan.com>",
   "homepage": "https://github.com/emincanozcan/kataliz",
   "private": true,

client/preload.js

 import { ipcRenderer } from "electron";
 window.ipcRenderer = ipcRenderer;
-console.log("here");

client/public/index.html

@@ -6,7 +6,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"
           rel="stylesheet">
     <title>Pardus Kataliz</title>
 </head>

client/src/components/AlternativeAppSuggestionRow.vue

@@ -16,10 +16,14 @@
         :key="pardusApp.id"
         v-for="pardusApp in pardusAlternatives"
       >
-        <img class="w-10 h-10 mr-2" :src="pardusApp.image_url" alt="" />
+        <img
+          class="w-10 h-10 mr-4 rounded-full"
+          :src="pardusApp.image_url"
+          alt=""
+        />
         <span class="font-medium mr-4"> {{ pardusApp.name }}</span>
         <button
-          class="bg-pardus-yellow px-2 py-1 font-medium rounded-lg shadow-lg text-gray-900"
+          class="bg-pardus-yellow px-4 h-8 rounded-md shadow-md text-gray-900 text-sm"
           @click="addToBucket(pardusApp.id)"
           v-if="!isInBucket(pardusApp.id)"
         >

client/src/components/Bucket.vue

 <template>
-  <div class="px-4 border-t-2 border-gray-600 py-6">
-    <h2 class="mb-8 text-xl font-medium flex items-center justify-center">
-      Uygulama Sepeti <span class="text-base ml-2">({{ apps.length }})</span>
+  <div class="px-6 border-t-2 border-gray-600 py-6">
+    <h2 class="mb-8 text-xl font-medium">
+      Uygulama Sepeti <span class="ml-1">({{ apps.length }})</span>
     </h2>
     <div class="flex-1">
       <div class="relative mr-2" v-for="app in apps" :key="app.id">
@@ -13,7 +13,7 @@
           class="absolute px-1 py-1 transform top-1/2 -translate-y-1/2 bg-red-500 text-white -right-2 rounded-md"
           @click="removeFromBucket(app.id)"
         >
-          <IconCross class="w-2 h-2" />
+          <IconCross class="w-5 h-5" />
         </button>
       </div>
     </div>

client/src/components/Logo.vue

+<template>
+  <div class="flex justify-center items-center py-6 space-x-4">
+    <div
+      class="bg-pardus-yellow text-gray-900 flex items-center h-20 relative overflow-hidden rounded-lg"
+    >
+      <PardusMascot class="h-24 w-24 w-auto absolute -left-12 opacity-40" />
+      <h2
+        class="ml-16 mr-6 font-medium font-ubuntu text-5xl tracking-wider text-gray-900"
+      >
+        Kataliz
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import PardusMascot from "../icons/pardus-mascot.svg";
+
+export default {
+  name: "Logo",
+  components: {
+    PardusMascot,
+  },
+};
+</script>
+
+<style scoped></style>

client/src/components/Sidebar.vue

 <template>
   <aside class="h-full overflow-y-auto flex flex-col justify-between">
     <div class="flex-shrink-0 mb-8">
-      <div class="flex justify-center items-center py-6 space-x-4">
-        <IconPardusLogo class="h-20 w-20" />
-        <h1
-          class="text-2xl tracking-wider leading-none mt-0 text-pardus-yellow font-semibold text-center"
-        >
-          Pardus<br />Kataliz
-        </h1>
-      </div>
+      <Logo />
       <div class="flex flex-col space-y-2 mt-2 px-4">
         <router-link
           class="px-4 block py-3 text-gray-200 font-bold w-full rounded-lg"
@@ -32,10 +25,10 @@
 
 <script>
 import Bucket from "./Bucket";
-import IconPardusLogo from "../icons/icon-pardus-logo.svg";
+import Logo from "./Logo";
 export default {
   name: "Sidebar",
-  components: { Bucket, IconPardusLogo },
+  components: { Logo, Bucket },
 };
 </script>
 

client/src/global-state/store.js

@@ -21,11 +21,14 @@ async function fetchData() {
   }
 }
 
-function addToBucket(pardusAppId) {
-  if (bucket.value.includes(pardusAppId)) {
+function addToBucket(app) {
+  if (Array.isArray(app)) {
+    return app.forEach((a) => addToBucket(a));
+  }
+  if (bucket.value.includes(app)) {
     return;
   }
-  bucket.value.push(pardusAppId);
+  bucket.value.push(app);
 }
 
 function removeFromBucket(pardusAppId) {

client/src/icons/icon-cross.svg

-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 </svg>
\ No newline at end of file

client/src/icons/icon-plus.svg

-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-</svg>
+</svg>
\ No newline at end of file

client/src/views/AppPackages.vue

@@ -26,45 +26,59 @@
       <div
         v-for="pkg in filteredAppPackages"
         :key="pkg.id"
-        class="bg-gray-700 bg-opacity-50 rounded-xl shadow-xg pt-4 pb-8 overflow-hidden relative"
+        class="bg-gray-700 bg-opacity-50 rounded-xl pt-4 pb-10 overflow-hidden relative px-4"
       >
         <button
           class="absolute rounded-tl-lg right-0 bottom-0 px-2 py-2 text-gray-900 bg-pardus-yellow flex items-center"
           v-if="!isInBucket(pkg['pardus_apps'])"
           @click="addToBucket(pkg['pardus_apps'])"
         >
-          <IconPlus class="w-4 h-4" />
-          <span class="font-medium text-sm">Sepete Ekle</span>
+          <span class="font-medium text-sm">Tümünü Sepete Ekle</span>
         </button>
         <span
           class="absolute rounded-tl-lg right-0 bottom-0 bg-green-600"
           v-else
         >
-          <IconCheck class="h-12 w-12 text-white" />
+          <IconCheck class="h-8 w-8 text-white" />
         </span>
-        <div class="mb-4">
-          <img class="w-full object-contain h-24" :src="pkg.image_url" />
-          <h3 class="font-medium text-gray-200 mx-4 text-xl mt-4">
+        <div class="mb-4 flex items-center justify-start">
+          <img
+            class="object-contain h-12 w-12 mr-4 rounded-full"
+            :src="pkg.image_url"
+          />
+          <h3 class="font-semibold text-gray-100 text-xl flex-1">
             {{ pkg.name }}
           </h3>
         </div>
-        <ul class="ml-8 mr-4 mt-4 list-decimal">
-          <li
-            v-for="app in getPardusAppsById(pkg['pardus_apps'])"
-            :key="app.id"
-            class="text-gray-300 text-sm"
-          >
-            <div class="flex items-center">
-              <span>{{ app.name }}</span>
-              <span
-                class="ml-1 flex items-center text-green-500"
-                v-if="isInBucket(app.id)"
-              >
-                <IconCheck class="h-6 w-6" />
-              </span>
+        <div
+          v-for="app in getPardusAppsById(pkg['pardus_apps'])"
+          :key="app.id"
+          class="bg-gray-700 my-3 px-4 py-3 rounded-lg shadow-md"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center mr-2">
+              <img
+                :src="app.image_url"
+                class="w-10 h-10 mr-4 rounded-full"
+                alt=""
+              />
+              <span class="text-gray-300 font-medium">{{ app.name }}</span>
             </div>
-          </li>
-        </ul>
+            <span
+              class="text-white bg-green-500 rounded-md px-1 py-1"
+              v-if="isInBucket(app.id)"
+            >
+              <IconCheck class="h-6 w-6" />
+            </span>
+            <button
+              v-else
+              class="text-gray-900 bg-pardus-yellow rounded-md px-1 py-1"
+              @click="addToBucket(app.id)"
+            >
+              <IconPlus class="h-6 w-6" />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -103,17 +117,12 @@ export default {
         pardusAppIds.includes(item.id)
       );
     }
-
-    function addToBucket(pardusAppIds) {
-      pardusAppIds.forEach((id) => store.addToBucket(id));
-    }
-
     return {
       search,
       filteredAppPackages,
       isInBucket: store.isInBucket,
       getPardusAppsById,
-      addToBucket,
+      addToBucket: store.addToBucket,
     };
   },
 };

client/tailwind.config.js

 const defaultTheme = require("tailwindcss/defaultTheme");
+const colors = require("tailwindcss/colors");
 module.exports = {
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
+    colors: {
+      ...defaultTheme.colors,
+      gray: colors.trueGray,
+      // gray: {
+      //   50: "#f9fafb",
+      //   100: "#f3f4f6",
+      //   200: "#e5e7eb",
+      //   300: "#d1d5db",
+      //   400: "#9ca3af",
+      //   500: "#6b7280",
+      //   600: "#4b5563",
+      //   700: "#4e4e4e",
+      //   800: "#3f3f3f",
+      //   900: "#2b2b2b",
+      // },
+    },
     extend: {
       // spacing: {
       //   128: "36rem",
       // },
       fontFamily: {
-        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        sans: ["Roboto", ...defaultTheme.fontFamily.sans],
+        ubuntu: ["Ubuntu"],
       },
       colors: {
-        "pardus-yellow": "#ffcb01",
+        "pardus-yellow": "#FFCC00",
       },
     },
   },