From 7d96cfddedb633c37a1e83c7bf88ddb0e316a797 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Wed, 15 Jan 2025 17:36:19 +0200
Subject: [PATCH] enlarge app icons

---
 src/components/Apps/AppInfoSnippet.tsx     |  4 ++--
 src/components/Apps/Apps-styles.tsx        | 15 +++++++++------
 src/components/Apps/AppsHomeDesktop.tsx    |  2 +-
 src/components/Apps/AppsLibraryDesktop.tsx | 12 +++++++-----
 src/components/Apps/SortablePinnedApps.tsx |  7 +++----
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx
index f141222..4870474 100644
--- a/src/components/Apps/AppInfoSnippet.tsx
+++ b/src/components/Apps/AppInfoSnippet.tsx
@@ -59,8 +59,8 @@ export const AppInfoSnippet = ({ app, myName, isFromCategory, parentStyles = {}
           >
             <Avatar
               sx={{
-                height: "31px",
-                width: "31px",
+                height: "42px",
+                width: "42px",
                 '& img': { 
                   objectFit: 'fill',
                 }
diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx
index c6cb485..ea77d22 100644
--- a/src/components/Apps/Apps-styles.tsx
+++ b/src/components/Apps/Apps-styles.tsx
@@ -94,13 +94,16 @@ import {
     
   }));
   export const AppCircleLabel = styled(Typography)(({ theme }) => ({
-    fontSize: '12px',
+    fontSize: '14px',
     fontWeight: 500,
     lineHeight: 1.2,
-    whiteSpace: 'nowrap',   
+    // whiteSpace: 'nowrap',   
   overflow: 'hidden',     
   textOverflow: 'ellipsis', 
-  width: '100%'
+  width: '120%',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+  'display': '-webkit-box'
   }));
   export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({
     fontSize: '16px',
@@ -109,9 +112,9 @@ import {
   }));
   export const AppCircle = styled(Box)(({ theme }) => ({
     display: "flex",
-      width: "60px",
-      flexDirection: "column",
-      height: "60px",
+    width: "75px",
+    flexDirection: "column",
+    height: "75px",
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: '50%',
diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx
index 3edbbb4..8fe2663 100644
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -116,7 +116,7 @@ export const AppsHomeDesktop = ({
       <Spacer height="45px" />
       <AppsContainer
         sx={{
-          gap: "75px",
+          gap: "50px",
           justifyContent: "flex-start",
         }}
       >
diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx
index 7c084c2..71f823e 100644
--- a/src/components/Apps/AppsLibraryDesktop.tsx
+++ b/src/components/Apps/AppsLibraryDesktop.tsx
@@ -297,13 +297,15 @@ export const AppsLibraryDesktop = ({
                 Official Apps
               </AppLibrarySubTitle>
               <Spacer height="45px" />
-              <AppsContainer>
+              <AppsContainer sx={{
+                gap: '50px',
+                justifyContent: 'flex-start'
+              }}>
                 {officialApps?.map((qapp) => {
                   return (
                     <ButtonBase
                       sx={{
-                        height: "80px",
-                        width: "60px",
+                        width: "80px",
                       }}
                       onClick={() => {
                         // executeEvent("addTab", {
@@ -326,8 +328,8 @@ export const AppsLibraryDesktop = ({
                         >
                           <Avatar
                             sx={{
-                              height: "31px",
-                              width: "31px",
+                              height: "42px",
+                              width: "42px",
                             }}
                             alt={qapp?.name}
                             src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
diff --git a/src/components/Apps/SortablePinnedApps.tsx b/src/components/Apps/SortablePinnedApps.tsx
index 1a44a2f..15f54b9 100644
--- a/src/components/Apps/SortablePinnedApps.tsx
+++ b/src/components/Apps/SortablePinnedApps.tsx
@@ -31,8 +31,7 @@ const SortableItem = ({ id, name, app, isDesktop }) => {
         <ButtonBase
         ref={setNodeRef} {...attributes} {...listeners}
               sx={{
-                height: "80px",
-                width: "60px",
+                width: "80px",
                 transform: CSS.Transform.toString(transform),
                 transition,
               }}
@@ -53,8 +52,8 @@ const SortableItem = ({ id, name, app, isDesktop }) => {
                 >
                   <Avatar
                     sx={{
-                      height: "31px",
-                      width: "31px",
+                      height: "42px",
+                      width: "42px",
                       '& img': { 
                         objectFit: 'fill',
                       }