@qwickapps/react-framework 1.3.0

package/src/components/QwickApp.css

@@ -0,0 +1,257 @@
+/**
+ * Global Theme Variables - Modular Palette-based Color System
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * 
+ * This file implements a modular two-tier color system:
+ * 1. Palette Variables: Define the core color values (--palette-*) in separate files
+ * 2. Theme Variables: Semantic colors that reference palette values (--theme-*)
+ * 
+ * Benefits:
+ * - Modular palette files for easy organization
+ * - Easy theme customization by switching palettes
+ * - Consistent color usage across components
+ * - Reduced duplication and easier maintenance
+ * - Semantic naming for better understanding
+ * 
+ * Available palettes:
+ * - default: Classic blue and neutral (original QwickApps palette)
+ * - winter: Cool blues, icy whites, and frosty grays
+ * - autumn: Warm oranges, golden yellows, and earthy browns
+ * - spring: Fresh greens, soft pinks, and bright yellows
+ * - ocean: Deep blues, aqua teals, and seafoam greens
+ */
+
+/* Import all available color palettes */
+@import '../palettes/index.css';
+
+/* ===== THEME VARIABLES (derived from palette) ===== */
+/* These variables reference palette variables and adapt automatically */
+:root {
+  /* Primary brand colors */
+  --theme-primary: var(--palette-primary-main);
+  --theme-primary-light: var(--palette-primary-light);
+  --theme-primary-dark: var(--palette-primary-dark);
+  --theme-on-primary: var(--palette-on-primary);
+
+  /* Secondary brand colors */
+  --theme-secondary: var(--palette-secondary-main);
+  --theme-secondary-light: var(--palette-secondary-light);
+  --theme-secondary-dark: var(--palette-secondary-dark);
+  --theme-on-secondary: var(--palette-on-secondary);
+
+  /* Accent colors */
+  --theme-accent: var(--palette-accent-main);
+  --theme-accent-light: var(--palette-accent-light);
+  --theme-accent-dark: var(--palette-accent-dark);
+  --theme-on-accent: var(--palette-on-accent);
+
+  /* Status colors */
+  --theme-success: var(--palette-success-main);
+  --theme-success-light: var(--palette-success-light);
+  --theme-success-dark: var(--palette-success-dark);
+  --theme-on-success: var(--palette-on-success);
+  --theme-success-border: var(--palette-success-border);
+
+  --theme-warning: var(--palette-warning-main);
+  --theme-warning-light: var(--palette-warning-light);
+  --theme-warning-dark: var(--palette-warning-dark);
+  --theme-on-warning: var(--palette-on-warning);
+  --theme-warning-border: var(--palette-warning-border);
+
+  --theme-error: var(--palette-error-main);
+  --theme-error-light: var(--palette-error-light);
+  --theme-error-dark: var(--palette-error-dark);
+  --theme-on-error: var(--palette-on-error);
+  --theme-error-border: var(--palette-error-border);
+
+  --theme-info: var(--palette-info-main);
+  --theme-info-light: var(--palette-info-light);
+  --theme-info-dark: var(--palette-info-dark);
+  --theme-on-info: var(--palette-on-info);
+  --theme-info-border: var(--palette-info-border);
+
+  /* Background colors */
+  --theme-background: var(--palette-background-main);
+  --theme-background-dark: var(--palette-background-dark);
+  --theme-background-overlay: var(--palette-background-overlay);
+  --theme-on-background: var(--palette-on-background);
+
+  /* Surface colors */
+  --theme-surface: var(--palette-surface-main);
+  --theme-surface-variant: var(--palette-surface-variant);
+  --theme-surface-elevated: var(--palette-surface-elevated);
+  --theme-on-surface: var(--palette-on-surface);
+
+  /* Border colors */
+  --theme-border-main: var(--palette-border-main);
+  --theme-border-light: var(--palette-border-light);
+  --theme-border-lighter: var(--palette-border-lighter);
+  --theme-border-medium: var(--palette-border-medium);
+  --theme-border-dark: var(--palette-border-medium);
+
+  /* Text colors */
+  --theme-text-primary: var(--palette-text-primary);
+  --theme-text-secondary: var(--palette-text-secondary);
+  --theme-text-disabled: var(--palette-text-disabled);
+  --theme-text-inverted: var(--palette-text-inverted);
+
+  /* Control colors */
+  --theme-control-bg: var(--palette-control-main);
+  --theme-control-text: var(--palette-control-text);
+  --theme-control-border: var(--palette-control-border);
+  --theme-control-hover-bg: var(--palette-control-light);
+  --theme-control-hover-text: var(--palette-text-inverted);
+  --theme-control-hover-border: var(--palette-control-border);
+
+  /* Panel colors */
+  --theme-panel-bg-start: var(--palette-control-main);
+  --theme-panel-bg-end: var(--palette-surface-elevated);
+  --theme-panel-border: var(--palette-control-border);
+  --theme-panel-shadow: rgba(0, 0, 0, 0.6);
+
+  /* Floating surface colors */
+  --theme-floating-bg: var(--palette-background-overlay);
+  --theme-floating-border: var(--palette-border-light);
+
+  /* Option/Choice colors */
+  --theme-option-bg: var(--palette-surface-variant);
+  --theme-option-text: var(--palette-text-primary);
+  --theme-option-border: var(--palette-border-main);
+  --theme-option-hover-bg: var(--palette-surface-variant);
+  --theme-option-selected-bg: var(--palette-primary-light);
+  --theme-option-selected-border: var(--palette-primary-main);
+  --theme-option-selected-text: var(--palette-on-primary);
+  --theme-option-correct-bg: var(--palette-success-light);
+  --theme-option-correct-border: var(--palette-success-border);
+  --theme-option-correct-text: var(--palette-success-dark);
+  --theme-option-incorrect-bg: var(--palette-error-light);
+  --theme-option-incorrect-border: var(--palette-error-border);
+  --theme-option-incorrect-text: var(--palette-error-dark);
+
+  /* Explanation/Info colors */
+  --theme-explanation-bg: var(--palette-info-light);
+  --theme-explanation-border: var(--palette-info-main);
+
+  /* Link colors */
+  --theme-link-color: var(--palette-info-main);
+  --theme-link-hover: var(--palette-info-dark);
+
+  /* Code colors */
+  --theme-code-bg: var(--palette-surface-variant);
+  --theme-code-text: var(--palette-text-primary);
+
+  /* MUI integration */
+  --theme-mui-label-bg: var(--palette-surface-main);
+
+  /* Additional semantic colors for Material Design components */
+  --theme-outline: var(--palette-border-main);
+  --theme-outline-variant: var(--palette-border-light);
+
+  /* Design tokens for consistent dimensions */
+  --theme-border-radius: 12px;
+  --theme-border-radius-small: 8px;
+  --theme-border-radius-large: 16px;
+  
+  /* Elevation shadows */
+  --theme-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --theme-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.15);
+  --theme-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.2);
+  --theme-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.25);
+}
+
+/* ===== THEME-SPECIFIC ADAPTATIONS ===== */
+/* Light theme specific adjustments */
+html[data-theme="light"] {
+  /* Header/Surface colors with transparency - use palette-specific header colors */
+  --theme-header-bg-start: var(--palette-header-bg-start);
+  --theme-header-bg-end: var(--palette-header-bg-end);
+  --theme-header-collapsed-bg-start: var(--palette-header-collapsed-bg-start);
+  --theme-header-collapsed-bg-end: var(--palette-header-collapsed-bg-end);
+  
+  /* Control hover colors */
+  --theme-control-hover-text: var(--palette-text-inverted);
+  --theme-control-hover-border: #555;
+  
+  /* Panel colors */
+  --theme-panel-bg-end: #252525;
+  --theme-panel-shadow: rgba(0, 0, 0, 0.6);
+  
+  /* Floating surface colors */
+  --theme-floating-border: rgba(255, 255, 255, 0.5);
+  
+  /* Option colors for light theme */
+  --theme-option-text: #222;
+  --theme-option-hover-bg: #e0e0e0;
+  --theme-option-selected-bg: #d0e0ff;
+  --theme-option-selected-text: var(--palette-primary-dark);
+  
+  /* Code colors */
+  --theme-code-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* Dark theme specific adjustments */
+html[data-theme="dark"] {
+  /* Header/Surface colors with transparency - use palette-specific header colors */
+  --theme-header-bg-start: var(--palette-header-bg-start);
+  --theme-header-bg-end: var(--palette-header-bg-end);
+  --theme-header-collapsed-bg-start: var(--palette-header-collapsed-bg-start);
+  --theme-header-collapsed-bg-end: var(--palette-header-collapsed-bg-end);
+  
+  /* Control hover colors */
+  --theme-control-hover-text: var(--palette-text-primary);
+  --theme-control-hover-border: #777;
+  
+  /* Panel colors */
+  --theme-panel-bg-end: var(--palette-surface-elevated);
+  --theme-panel-shadow: rgba(0, 0, 0, 0.8);
+  
+  /* Floating surface colors */
+  --theme-floating-border: rgba(255, 255, 255, 0.2);
+  
+  /* Option colors for dark theme */
+  --theme-option-text: var(--palette-text-secondary);
+  --theme-option-hover-bg: var(--palette-surface-elevated);
+  --theme-option-selected-bg: var(--palette-primary-dark);
+  --theme-option-selected-text: var(--palette-primary-light);
+  
+  /* Code colors */
+  --theme-code-bg: rgba(255, 255, 255, 0.1);
+  --theme-code-text: var(--palette-text-secondary);
+  
+  /* MUI integration */
+  --theme-mui-label-bg: rgb(41, 41, 41);
+
+  /* Dark theme elevation shadows */
+  --theme-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --theme-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.3);
+  --theme-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.4);
+  --theme-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.5);
+}
+
+/* ===== SMOOTH TRANSITIONS ===== */
+/* Apply smooth transitions for theme/palette changes */
+* {
+  transition: 
+    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Disable transitions for interactive elements to maintain responsiveness */
+*:focus,
+*:hover,
+*:active,
+input:focus,
+textarea:focus,
+select:focus,
+button:focus,
+.MuiButton-root:focus,
+.MuiIconButton-root:focus,
+.MuiMenuItem-root:hover,
+.MuiFab-root:hover {
+  transition: none;
+}
+
+

package/src/components/QwickApp.tsx

@@ -0,0 +1,157 @@
+/**
+ * QwickApp - Main application wrapper with routing support
+ * 
+ * This component eliminates the need to manually set up provider hierarchy.
+ * Provides theme system, app context, optional scaffolding, and routing.
+ * 
+ * Example usage:
+ * ```tsx
+ * import { BrowserRouter } from 'react-router-dom';
+ * import { QwickApp, AuthProvider, JsonDataProvider } from '@qwickapps/react-framework';
+ * 
+ * function App() {
+ *   const dataSource = {
+ *     dataProvider: new JsonDataProvider({ data: { company: [...] } }),
+ *     cacheProvider: true, // Use default MemoryCacheProvider
+ *     enableLogging: false
+ *   };
+ * 
+ *   return (
+ *     <QwickApp appName="My App" appId="my.app" dataSource={dataSource}>
+ *       <AuthProvider router={<BrowserRouter />} user={user}>
+ *         <Route path="/" component={HomePage} />
+ *         <Route path="/admin" component={AdminPage} requiresRole="admin" />
+ *       </AuthProvider>
+ *     </QwickApp>
+ *   );
+ * }
+ * ```
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import React, { cloneElement, useState } from 'react';
+import { DataProvider, ThemeProvider, type ThemeMode } from '../contexts';
+import { QwickAppContext, type QwickAppContextValue, type QwickAppProps } from '../contexts/QwickAppContext';
+import { type TemplateResolverConfig } from '../types';
+import './QwickApp.css';
+import Scaffold from './Scaffold';
+// Auth logic moved to AuthProvider - QwickApp now focuses on app infrastructure
+
+// RouteConfig moved to AuthProvider for auth-specific routing
+
+interface QwickAppComponentProps extends QwickAppProps {
+  /** Child components to render when no routing is used */
+  children?: React.ReactNode;
+  /** CSS class name to apply to the root element */
+  className?: string;
+  /** Inline styles to apply to the root element */
+  style?: React.CSSProperties;
+  /** Additional content to show in footer */
+  footerContent?: React.ReactNode;
+  /** Theme mode preference (light/dark/auto) */
+  defaultTheme?: ThemeMode;
+  /** Optional router component to wrap the app (e.g., <BrowserRouter />, <HashRouter />) */
+  router?: React.ReactElement;
+  /** Data source configuration for content management and template resolution */
+  dataSource?: TemplateResolverConfig;
+  // Auth-related props moved to AuthProvider for better separation of concerns
+}
+
+export const QwickApp: React.FC<QwickAppComponentProps> = ({
+  children,
+  className,
+  style,
+  defaultTheme,
+  defaultPalette,
+  appName,
+  logo,
+  appId = true,
+  enableScaffolding = false,
+  navigationItems = [],
+  appBar,
+  showAppBar = true,
+  appBarHeight = 64,
+  showThemeSwitcher = false,
+  showPaletteSwitcher = false,
+  onLogoClick,
+  router,
+  dataSource,
+}) => {
+  // State for app configuration that can be updated via useQwickApp
+  const [appConfig, setAppConfig] = useState({
+    logo,
+    enableScaffolding,
+    navigationItems,
+    appBar,
+    showAppBar,
+    appBarHeight,
+    showThemeSwitcher,
+    showPaletteSwitcher,
+  });
+
+  const updateConfig = (updates: Partial<typeof appConfig>) => {
+    setAppConfig(prev => ({ ...prev, ...updates }));
+  };
+
+  const contextValue: QwickAppContextValue = {
+    appName,
+    appId,
+    ...appConfig,
+    onLogoClick,
+    updateConfig,
+    // Navigation removed - now handled by AuthProvider when routing needed
+  };
+
+  const content = appConfig.enableScaffolding ? (
+    <Scaffold
+      appName={appName}
+      navigationItems={appConfig.navigationItems}
+      appBar={appConfig.appBar}
+      showAppBar={appConfig.showAppBar}
+      appBarHeight={appConfig.appBarHeight}
+      showThemeSwitcher={appConfig.showThemeSwitcher}
+      showPaletteSwitcher={appConfig.showPaletteSwitcher}
+      onLogoClick={onLogoClick}
+    >
+      {children}
+    </Scaffold>
+  ) : children;
+
+  // Wrap with DataProvider if dataSource is provided (FIRST wrapper)
+  const wrappedContent = dataSource ? (
+    <DataProvider dataSource={dataSource}>
+      {content}
+    </DataProvider>
+  ) : content;
+
+  const appContent = (
+    <div className={`qwick-app ${className || ''}`} style={style}>
+      <ThemeProvider 
+        appId={appId} 
+        defaultTheme={defaultTheme} 
+        defaultPalette={defaultPalette}
+      >
+        <QwickAppContext.Provider value={contextValue}>
+          {wrappedContent}
+        </QwickAppContext.Provider>
+      </ThemeProvider>
+    </div>
+  );
+
+  // If router is provided, wrap the entire app with it
+  if (router) {
+    return cloneElement(router, {}, appContent);
+  }
+
+  return appContent;
+};
+
+export const useQwickApp = (): QwickAppContextValue => {
+  const context = React.useContext(QwickAppContext);
+  if (!context) {
+    throw new Error('useQwickApp must be used within a QwickApp provider');
+  }
+  return context;
+};
+
+export default QwickApp;

package/src/components/QwickAppsLogo.tsx

@@ -0,0 +1,77 @@
+/**
+ * QwickAppsLogo - Official QwickApps brand logo
+ * 
+ * Features the official QwickApps logo SVG with proper brand colors
+ * and consistent sizing. This component should be used instead of the 
+ * generic Logo component when displaying the QwickApps brand.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import { WithBaseProps, useBaseProps } from '../hooks/useBaseProps';
+
+export type QwickAppsLogoSize = 'small' | 'medium' | 'large';
+
+export interface QwickAppsLogoProps extends WithBaseProps, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height' | 'className' | 'style' | 'onClick' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'role'> {
+  /** Size variant of the logo */
+  size?: QwickAppsLogoSize;
+  /** Click handler for the logo */
+  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+const QwickAppsLogo: React.FC<QwickAppsLogoProps> = (props) => {
+  const { styleProps, htmlProps, restProps } = useBaseProps(props);
+  const {
+    size = 'medium',
+    ...svgProps
+  } = restProps;
+
+  // Get size dimensions
+  const getSizeConfig = (size: QwickAppsLogoSize) => {
+    switch (size) {
+      case 'small': return { width: 32, height: 32 };
+      case 'large': return { width: 80, height: 80 };
+      default: return { width: 48, height: 48 }; // medium
+    }
+  };
+
+  const { width, height } = getSizeConfig(size);
+
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 225 225"
+      {...htmlProps}
+      {...styleProps}
+      className={`qwickapps-logo qwickapps-logo-${size} ${styleProps.className || ''}`.trim()}
+      style={{ 
+        cursor: htmlProps.onClick ? 'pointer' : 'default',
+        ...styleProps.style 
+      }}
+      role="img"
+      aria-label="QwickApps Logo"
+      {...svgProps}
+    >
+      <g transform="translate(-128,-60)">
+        <path 
+          d="M0 0 C1.3480925 -0.00788544 1.3480925 -0.00788544 2.72341919 -0.01593018 C5.67419172 -0.02905871 8.62441792 -0.02041442 11.57519531 -0.01025391 C13.64251813 -0.0122774 15.70984025 -0.01519113 17.77716064 -0.01895142 C22.10443943 -0.02336572 26.43153199 -0.01697508 30.75878906 -0.00292969 C36.2773468 0.01411856 41.79546534 0.00434284 47.31400681 -0.01364708 C51.5831018 -0.02454577 55.85209467 -0.02101006 60.12119293 -0.0132637 C62.15435082 -0.01127624 64.18751828 -0.01366927 66.22066498 -0.02070236 C76.73689794 -0.04908929 86.57929633 -0.04924466 96.65332031 3.38818359 C97.54098083 3.67795074 98.42864136 3.9677179 99.34320068 4.26626587 C114.15399949 9.31896076 126.4675764 21.76744512 133.65332031 35.38818359 C137.44514211 43.9738112 139.81630642 51.43992278 139.7668457 60.84057617 C139.76699173 61.5728241 139.76713776 62.30507202 139.76728821 63.05950928 C139.76659444 65.46727515 139.75882723 67.87496257 139.75097656 70.28271484 C139.74911048 71.95708677 139.74768747 73.63145924 139.74668884 75.30583191 C139.74287867 79.7034558 139.73306121 84.10104644 139.72198486 88.49865723 C139.71173847 92.9898229 139.70718431 97.48099397 139.70214844 101.97216797 C139.69143757 110.77752174 139.6743792 119.58284852 139.65332031 128.38818359 C138.53702723 127.43704375 137.42154262 126.48495501 136.30639648 125.5324707 C135.68512375 125.002379 135.06385101 124.47228729 134.42375183 123.9261322 C132.20679827 122.00029626 130.09344729 119.97434276 127.96582031 117.95068359 C121.3544337 111.96606452 113.93765643 107.63396094 105.65332031 104.38818359 C105.64397461 103.07736816 105.63462891 101.76655273 105.625 100.41601562 C105.58487807 95.51415049 105.51905854 90.61289839 105.44580078 85.71142578 C105.41771934 83.59724858 105.39644155 81.4829689 105.38232422 79.36865234 C105.36071633 76.31473808 105.31397548 73.26203954 105.26269531 70.20849609 C105.26085236 68.80943527 105.26085236 68.80943527 105.25897217 67.3821106 C105.05613797 58.12249123 102.35361677 49.9326592 95.65332031 43.38818359 C93.37687152 41.83978825 91.12212389 40.64502905 88.65332031 39.38818359 C88.0702562 39.02808197 87.48719208 38.66798035 86.88645935 38.29696655 C83.71010797 37.00434036 80.90937194 37.11787995 77.4855957 37.09765625 C76.41412041 37.08758041 76.41412041 37.08758041 75.32099915 37.07730103 C72.96425383 37.05833326 70.60779341 37.05439768 68.25097656 37.05224609 C66.60957218 37.04581795 64.96816895 37.03908958 63.32676697 37.03207397 C59.88782087 37.02010475 56.44897522 37.01639285 53.01000977 37.01757812 C48.60705215 37.01778144 44.20473906 36.99046492 39.80193424 36.95603371 C36.41239981 36.93377976 33.02302096 36.92974009 29.63342094 36.93079758 C28.01032729 36.9284399 26.38722945 36.91960691 24.76420784 36.90413284 C22.49249412 36.88449971 20.22217644 36.89029871 17.95043945 36.90234375 C16.65900528 36.89949371 15.36757111 36.89664368 14.03700256 36.89370728 C10.0894619 37.47058336 8.4533178 38.60386481 5.65332031 41.38818359 C4.36488826 43.96504769 4.49328598 45.87037118 4.44799805 48.75585938 C4.42805283 49.87687042 4.4081076 50.99788147 4.38755798 52.15286255 C4.36248924 53.97477615 4.36248924 53.97477615 4.33691406 55.83349609 C4.31613297 57.07364471 4.29535187 58.31379333 4.27394104 59.59152222 C4.21954326 62.88930182 4.16931936 66.18711079 4.12109375 69.48498535 C4.07086797 72.84991002 4.01524033 76.21474503 3.95996094 79.57958984 C3.85188552 86.18238589 3.75285167 92.78523103 3.65332031 99.38818359 C-7.89667969 99.38818359 -19.44667969 99.38818359 -31.34667969 99.38818359 C-31.54722373 80.32312956 -31.54722373 80.32312956 -31.59082031 72.14990234 C-31.6206242 66.58894779 -31.65574998 61.02840778 -31.72387695 55.46777344 C-31.77850048 50.98085383 -31.80816368 46.4943792 -31.8210659 42.00715256 C-31.83025168 40.30161924 -31.84818881 38.59610823 -31.87532997 36.89076614 C-32.04228479 25.95844515 -31.41983501 17.49965078 -24.17089844 8.76708984 C-23.46578125 8.16767578 -22.76066406 7.56826172 -22.03417969 6.95068359 C-21.33679688 6.33322266 -20.63941406 5.71576172 -19.92089844 5.07958984 C-13.46479327 0.83756627 -7.52553047 -0.0549708 0 0 Z " 
+          fill="#FE6D0F" 
+          transform="translate(185.3466796875,71.61181640625)"
+        />
+        <path 
+          d="M0 0 C11.55 0 23.1 0 35 0 C35.04125 3.25875 35.0825 6.5175 35.125 9.875 C35.47125788 19.41754586 36.68077925 25.86440869 43.74900818 32.68862915 C50.89908532 38.23277376 58.35470598 37.77209826 66.97265625 37.5859375 C68.50677317 37.57472707 70.04091178 37.56619562 71.57505798 37.56021118 C75.58524366 37.53745715 79.59409585 37.47865487 83.60375977 37.4119873 C87.70635953 37.3502711 91.80917779 37.32313407 95.91210938 37.29296875 C103.94201372 37.2288942 111.97084033 37.12668322 120 37 C117.59324168 34.57863654 115.18359847 32.1601637 112.7734375 29.7421875 C111.75527954 28.71774536 111.75527954 28.71774536 110.71655273 27.67260742 C106.8829741 23.82970702 102.99745284 20.13165615 98.8515625 16.625 C95.05012274 13.28871531 91.43825451 9.70885787 88 6 C88 5.67 88 5.34 88 5 C110.75508023 4.37644173 110.75508023 4.37644173 121 8 C122.051875 8.35191406 123.10375 8.70382813 124.1875 9.06640625 C147.22737862 17.29881571 164.80240124 33.21278198 175.41943359 55.15429688 C179.68328916 64.37125249 183.15018908 73.71312925 183.09765625 83.95703125 C183.09443359 85.06884766 183.09121094 86.18066406 183.08789062 87.32617188 C183.07951172 88.47666016 183.07113281 89.62714844 183.0625 90.8125 C183.05798828 91.98232422 183.05347656 93.15214844 183.04882812 94.35742188 C183.0370693 97.23833358 183.02063426 100.11914044 183 103 C180.55229893 100.57810948 178.13689836 98.15012289 175.81640625 95.60546875 C164.49520711 83.46019619 148.63443632 75.12990963 131.85790539 74.44966316 C128.34721591 74.38623286 124.84006559 74.37663155 121.32896042 74.40841484 C118.45052331 74.43424814 115.57348925 74.42890466 112.69497681 74.41651917 C106.58815705 74.39596309 100.48178961 74.41534647 94.375 74.4375 C87.28101821 74.45873236 80.18749777 74.46298673 73.09352493 74.43699837 C70.28119532 74.43367673 67.46978403 74.45471435 64.65756226 74.47740173 C46.51926055 74.50804771 31.73862671 70.07462761 18.28125 57.27734375 C17.5284375 56.52582031 16.775625 55.77429688 16 55 C15.02546875 54.04287109 15.02546875 54.04287109 14.03125 53.06640625 C3.06105089 41.49477078 -0.55499727 26.82435381 -0.1875 11.3125 C-0.125625 7.579375 -0.06375 3.84625 0 0 Z " 
+          fill="#03BBCA" 
+          transform="translate(154,171)"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default QwickAppsLogo;