Design Changes

Author: AttAditya

src/assets/GraphScript.png

@@ -14,6 +14,6 @@
 }
 
 .glass-input:focus {
-  outline: 0.25rem solid var(--color-primary);
+  border-color: var(--color-secondary);
 }
 

src/components/commons/Input/style.css

@@ -4,9 +4,14 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
+  padding: 0.5rem;
   padding-top: 0.5rem;
-  background: var(--window-background);
+  background: linear-gradient(
+    to bottom right,
+    var(--color-primary),
+    var(--color-secondary),
+    var(--color-tertiary)
+  );
   gap: 0.5rem;
 }
 

src/components/window/AppWindow/style.css

@@ -28,6 +28,7 @@ export function Pallete({
     >
       <Input
         value={query}
+        placeholder="App Pallete"
         onChange={(e) => setQuery(e.target.value)}
       />
 

src/components/window/Pallete/index.tsx

@@ -37,9 +37,10 @@
   background-color: var(--color-black);
   display: flex;
   align-items: center;
-  padding: 0.25rem;
-  gap: 0.125rem;
-  height: 1.5rem;
+  padding: 0.5rem;
+  gap: 0.5rem;
+  height: 2.5rem;
+  opacity: 0.5;
   border-radius: 0.5rem;
   cursor: pointer;
   width: 100%;
@@ -48,6 +49,7 @@
 
 .suggestion:hover {
   scale: 1.05;
+  opacity: 1;
 }
 
 .suggestion-icon {
@@ -69,3 +71,11 @@
   font-size: 0.75rem;
 }
 
+.root-app-window:not(.is-desktop) .app-navigator input {
+  background: var(--color-black);
+}
+
+.root-app-window:not(.is-desktop) .app-navigator .suggestion {
+  border: 0.1rem solid var(--color-white);
+}
+

src/components/window/Pallete/style.css

@@ -1,15 +1,16 @@
 :root {
-  --window-background: #1a1a1f;
+  --color-primary: #A15EFF;
+  --color-secondary: #D65EBA;
+  --color-tertiary: #FF7E47;
 
-  --color-background: #2a2a30;
-  --color-primary: #FF9800;
-
   --color-black: #000000;
   --color-white: #FFFFFF;
   --color-gray: #808080;
-
+  
   --color-danger: #FF4C4C;
   --color-success: #4CAF50;
   --color-warning: #FF9800;
+
+  --color-background: #111111;
 }
 

src/styles/variables.css

@@ -26,6 +26,7 @@
     /* Add these: */
     "baseUrl": ".",
     "paths": {
+      "@assets/*": ["src/assets/*"],
       "@components/*": ["src/components/*"],
       "@defs/*": ["src/defs/*"],
       "@utils/*": ["src/utils/*"],

tsconfig.app.json

@@ -11,6 +11,7 @@
     "target": "esnext",
     "baseUrl": ".",
     "paths": {
+      "@assets/*": ["src/assets/*"],
       "@components/*": ["src/components/*"],
       "@defs/*": ["src/defs/*"],
       "@utils/*": ["src/utils/*"],

tsconfig.json

@@ -16,6 +16,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@assets': path.resolve(__dirname, 'src/assets'),
       '@components': path.resolve(__dirname, 'src/components'),
       '@defs': path.resolve(__dirname, 'src/defs'),
       '@utils': path.resolve(__dirname, 'src/utils'),