Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Layout polish - rename: The Cloud

Browse Source
This commit is contained in:
Zakaria
2026-10-01 15:06:55 -04:00
parent 7f0d707578
commit 7f08f5b668
5 changed files with 119 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TheCloud.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 896 KiB

docker/Dockerfile
+1
View File
@@ -8,6 +8,7 @@ COPY packages/frontend/package.json packages/frontend/package.json
RUN pnpm install --frozen-lockfile --filter @floci/frontend RUN pnpm install --frozen-lockfile --filter @floci/frontend
COPY packages/frontend/ packages/frontend/ COPY packages/frontend/ packages/frontend/
COPY aws-icons-svg/ aws-icons-svg/ COPY aws-icons-svg/ aws-icons-svg/
COPY TheCloud.png TheCloud.png
COPY OS_img/ OS_img/ COPY OS_img/ OS_img/
RUN pnpm --filter @floci/frontend run build RUN pnpm --filter @floci/frontend run build
packages/api/src/cloud-spi/serviceCatalog.ts
+8 -6
View File
@@ -16,6 +16,7 @@ import type {CloudAvailability, CloudProvider} from './types'
/** Sidebar grouping. A flat list stops being usable past ~12 services. */ /** Sidebar grouping. A flat list stops being usable past ~12 services. */
export type ServiceGroup = export type ServiceGroup =
| 'Compute' | 'Compute'
| 'Developer Tools'
| 'Storage' | 'Storage'
| 'Databases' | 'Databases'
| 'Networking' | 'Networking'
@@ -26,6 +27,7 @@ export type ServiceGroup =
export const SERVICE_GROUP_ORDER: ServiceGroup[] = [ export const SERVICE_GROUP_ORDER: ServiceGroup[] = [
'Compute', 'Compute',
'Developer Tools',
'Storage', 'Storage',
'Databases', 'Databases',
'Networking', 'Networking',
@@ -80,20 +82,20 @@ export const SERVICE_CATALOG = {
codebuild: { codebuild: {
displayName: 'CodeBuild', displayName: 'CodeBuild',
iconKey: 'codebuild', iconKey: 'codebuild',
group: 'Compute', group: 'Developer Tools',
order: 50, order: 10,
}, },
codepipeline: { codepipeline: {
displayName: 'CodePipeline', displayName: 'CodePipeline',
iconKey: 'codepipeline', iconKey: 'codepipeline',
group: 'Integration', group: 'Developer Tools',
order: 25, order: 20,
}, },
codedeploy: { codedeploy: {
displayName: 'CodeDeploy', displayName: 'CodeDeploy',
iconKey: 'codedeploy', iconKey: 'codedeploy',
group: 'Integration', group: 'Developer Tools',
order: 26, order: 30,
}, },
storage: {displayName: 'Storage', iconKey: 'storage', group: 'Storage', order: 10}, storage: {displayName: 'Storage', iconKey: 'storage', group: 'Storage', order: 10},
ecr: { ecr: {
packages/frontend/src/components/Layout.tsx
+4 -7
View File
@@ -1,10 +1,7 @@
import {NavLink, Outlet, useLocation, useSearchParams} from 'react-router-dom' import {NavLink, Outlet, useLocation, useSearchParams} from 'react-router-dom'
import {AlertTriangle, ChevronsLeft, ChevronsRight, LayoutDashboard, Moon, Search, Sun} from 'lucide-react' import {AlertTriangle, ChevronsLeft, ChevronsRight, LayoutDashboard, Moon, Search, Sun} from 'lucide-react'
import {useCallback, useEffect, useRef, useState} from 'react' import {useCallback, useEffect, useRef, useState} from 'react'
import flociWhite from '@/assets/floci-white.svg' import theCloud from '../../../../TheCloud.png'
import flociBlack from '@/assets/floci-black.svg'
import flociMarkWhite from '@/assets/floci-mark-white.svg'
import flociMarkBlack from '@/assets/floci-mark-black.svg'
import {useTheme} from '@/lib/useTheme' import {useTheme} from '@/lib/useTheme'
import {useSidebar} from '@/lib/useSidebar' import {useSidebar} from '@/lib/useSidebar'
import {useQuery} from '@tanstack/react-query' import {useQuery} from '@tanstack/react-query'
@@ -179,9 +176,9 @@ export function Layout() {
<aside className="sidebar"> <aside className="sidebar">
<div className="sidebar-inner"> <div className="sidebar-inner">
<div className="brand"> <div className="brand">
<img className="brand-logo" src={isDark ? flociWhite : flociBlack} alt="Floci"/> <img className="brand-logo" src={theCloud} alt="The Cloud"/>
<img className="brand-mark" src={isDark ? flociMarkWhite : flociMarkBlack} alt="" aria-hidden="true"/> <img className="brand-mark" src={theCloud} alt="" aria-hidden="true"/>
<p>Local Cloud</p> <p>The Cloud</p>
</div> </div>
<nav className="nav" aria-label="Console"> <nav className="nav" aria-label="Console">
packages/frontend/src/index.css
+106 -86
View File
@@ -1,57 +1,55 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
/* ── Floci dark palette ── */ /* ── AWS dark palette ── */
--bg: #0f1117; --bg: #0f141a;
--surface: #1a1d2e; --surface: #161d26;
--elevated: #12152b; --elevated: #1b232d;
--raised: #1e2245; --raised: #232b37;
--raised-hover: #252b52; --raised-hover: #333843;
--border: rgba(92, 107, 192, 0.25); --border: #424650;
--border-faint: rgba(92, 107, 192, 0.15); --border-faint: rgba(101, 104, 113, 0.55);
--border-lighter: rgba(92, 107, 192, 0.08); --border-lighter: rgba(101, 104, 113, 0.3);
--border-hover: rgba(92, 107, 192, 0.45); --border-hover: #75cfff;
--active-nav-bg: rgba(92, 107, 192, 0.18); --active-nav-bg: #001129;
--text: #e8eaf6; --text: #c6c6cd;
--text-bright: #ffffff; --text-bright: #f9f9fa;
--text-2: #9fa8c7; --text-2: #b4b4bb;
/* 4.5:1 vs raised-hover (#252b52) so muted labels pass WCAG AA. */ --text-3: #a4a4ad;
--text-3: #9098c4;
--text-muted: var(--text-3); --text-muted: var(--text-3);
--text-nav: #b0b8d8; --text-nav: #c6c6cd;
--status-ok: #4ade80; --status-ok: #2bb534;
--status-warn: #fbbf24; --status-warn: #fbd332;
--status-error: #f87171; --status-error: #ff7a7a;
/* Floci brand indigo (floci.io) */ --accent: #42b4ff;
--accent: #7a7fd6; --accent-tint: rgba(66, 180, 255, 0.16);
--accent-tint: rgba(122, 127, 214, 0.16); --accent-tint-faint: rgba(66, 180, 255, 0.07);
--accent-tint-faint: rgba(122, 127, 214, 0.07); --accent-tint-border: rgba(66, 180, 255, 0.35);
--accent-tint-border: rgba(122, 127, 214, 0.28);
/* Floci indigo interactive */ --link: #42b4ff;
--link: #7986cb; --link-tint: rgba(66, 180, 255, 0.08);
--link-tint: rgba(121, 134, 203, 0.08); --link-tint-hover: rgba(66, 180, 255, 0.14);
--link-tint-hover: rgba(121, 134, 203, 0.14); --link-tint-border: rgba(66, 180, 255, 0.3);
--link-tint-border: rgba(121, 134, 203, 0.22);
--hover: rgba(255, 255, 255, 0.04); --hover: rgba(255, 255, 255, 0.04);
--hover-md: rgba(255, 255, 255, 0.06); --hover-md: rgba(255, 255, 255, 0.06);
--hover-lg: rgba(255, 255, 255, 0.07); --hover-lg: rgba(255, 255, 255, 0.07);
/* 3:1 vs raised so inputs/buttons meet non-text contrast. */ /* 3:1 vs raised so inputs/buttons meet non-text contrast. */
--input-border: rgba(255, 255, 255, 0.38); --input-border: #656871;
--input-bg: rgba(255, 255, 255, 0.06); --input-bg: #161d26;
--connection-bg: rgba(255, 255, 255, 0.03); --connection-bg: #131920;
--kbd-border: rgba(255, 255, 255, 0.1); --kbd-border: #424650;
--scrollbar-thumb: rgba(92, 107, 192, 0.3); --scrollbar-thumb: #656871;
--service-card-bg: rgba(15, 17, 23, 0.92); --service-card-bg: #161d26;
--service-card-hover: rgba(26, 29, 46, 0.96); --service-card-hover: #1b232d;
--fn-card-hover: rgba(30, 34, 69, 0.9); --fn-card-hover: #232b37;
--bulk-bar-bg: rgba(57, 73, 171, 0.35); --bulk-bar-bg: #001129;
--bulk-bar-border: #5c6bc0; --bulk-bar-border: #42b4ff;
--bulk-bar-text: #e8eaf6; --bulk-bar-text: #f9f9fa;
--code-bg: #282c34;
/* Workflow Studio: keep canvas surfaces readable independently of state accents. */ /* Workflow Studio: keep canvas surfaces readable independently of state accents. */
--workflow-save-border: #4e628f; --workflow-save-border: #4e628f;
@@ -106,55 +104,76 @@
[data-theme="light"] { [data-theme="light"] {
color-scheme: light; color-scheme: light;
/* ── Floci light palette ── */ /* ── Warm paper light palette ── */
--bg: #f4f6fc; --paper: #efe7d2;
--surface: #ffffff; --paper-warm: #ece4cf;
--elevated: #ffffff; --paper-dark: #ddd2b6;
--raised: #eef0f8; --ink: #15140f;
--raised-hover: #e4e7f5; --ink-soft: #2a2620;
--border: rgba(92, 107, 192, 0.22); --ink-mute: #5a5448;
--border-faint: rgba(92, 107, 192, 0.14); --ink-faint: #8b8676;
--border-lighter: rgba(92, 107, 192, 0.08); --coral: #ed6f5c;
--border-hover: rgba(92, 107, 192, 0.45); --coral-soft: #f08e7c;
--active-nav-bg: rgba(57, 73, 171, 0.09); --mustard: #e9b94a;
--olive: #6e7448;
--bone: #f7f1de;
--line: rgba(21, 20, 15, 0.16);
--line-soft: rgba(21, 20, 15, 0.08);
--line-faint: rgba(21, 20, 15, 0.05);
--shadow: 0 30px 60px -30px rgba(21, 20, 15, 0.18);
--serif: 'Playfair Display', 'Times New Roman', serif;
--sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--body: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
--text: #263052; --bg: var(--paper);
--text-bright: #12173e; --surface: var(--bone);
--text-2: #4a5296; --elevated: #fffaf0;
/* 4.5:1 vs raised-hover (#e4e7f5). Light-theme muted indigo was 4.14:1. */ --raised: var(--paper-warm);
--text-3: #545c88; --raised-hover: var(--paper-dark);
--text-nav: #4a5296; --border: var(--line);
--border-faint: var(--line-soft);
--border-lighter: var(--line-faint);
--border-hover: var(--coral);
--active-nav-bg: rgba(233, 185, 74, 0.2);
--status-ok: #166534; --text: var(--ink-soft);
--status-warn: #92400e; --text-bright: var(--ink);
--status-error: #b91c1c; --text-2: var(--ink-mute);
--text-3: var(--ink-faint);
--text-nav: var(--ink-mute);
/* Floci brand indigo (floci.io, light) */ --status-ok: #16803a;
--accent: #5559a7; --status-warn: #9a6b00;
--accent-tint: rgba(85, 89, 167, 0.12); --status-error: #bd3f30;
--accent-tint-faint: rgba(85, 89, 167, 0.06);
--accent-tint-border: rgba(85, 89, 167, 0.25);
/* Floci indigo interactive (light) */ --accent: var(--coral);
--link: #3949ab; --accent-tint: rgba(237, 111, 92, 0.14);
--link-tint: rgba(57, 73, 171, 0.07); --accent-tint-faint: rgba(237, 111, 92, 0.07);
--link-tint-hover: rgba(57, 73, 171, 0.12); --accent-tint-border: rgba(237, 111, 92, 0.3);
--link-tint-border: rgba(57, 73, 171, 0.22);
--link: #9d4133;
--link-tint: rgba(237, 111, 92, 0.08);
--link-tint-hover: rgba(237, 111, 92, 0.14);
--link-tint-border: rgba(237, 111, 92, 0.24);
--hover: rgba(0, 0, 0, 0.04); --hover: rgba(0, 0, 0, 0.04);
--hover-md: rgba(0, 0, 0, 0.05); --hover-md: rgba(0, 0, 0, 0.05);
--hover-lg: rgba(0, 0, 0, 0.06); --hover-lg: rgba(0, 0, 0, 0.06);
--input-border: rgba(38, 48, 82, 0.55); --input-border: rgba(21, 20, 15, 0.35);
--input-bg: rgba(0, 0, 0, 0.04); --input-bg: rgba(247, 241, 222, 0.72);
--connection-bg: rgba(0, 0, 0, 0.02); --connection-bg: rgba(21, 20, 15, 0.025);
--kbd-border: rgba(0, 0, 0, 0.15); --kbd-border: var(--line);
--scrollbar-thumb: rgba(92, 107, 192, 0.3); --scrollbar-thumb: var(--paper-dark);
--service-card-bg: #ffffff; --service-card-bg: var(--bone);
--service-card-hover: #f5f7ff; --service-card-hover: #fffaf0;
--fn-card-hover: #eff1ff; --fn-card-hover: var(--paper-warm);
--bulk-bar-bg: rgba(57, 73, 171, 0.1); --bulk-bar-bg: rgba(233, 185, 74, 0.18);
--bulk-bar-border: #3949ab; --bulk-bar-border: #b77810;
--bulk-bar-text: #1a237e; --bulk-bar-text: var(--ink-soft);
--code-bg: #282c34;
font-family: var(--body);
--workflow-save-border: #5565a7; --workflow-save-border: #5565a7;
--workflow-save-bg: #e7ecff; --workflow-save-bg: #e7ecff;
@@ -415,17 +434,17 @@ pre,
.brand { .brand {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
gap: 4px; gap: 4px;
padding: 14px 16px; padding: 14px 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.brand-logo { .brand-logo {
width: 100%; width: 72px;
max-width: 150px; height: 72px;
height: auto;
display: block; display: block;
object-fit: contain;
} }
/* Shown only in the rail — see the collapsible sidebar section. */ /* Shown only in the rail — see the collapsible sidebar section. */
@@ -457,6 +476,7 @@ pre,
margin: 0; margin: 0;
font-size: 11px; font-size: 11px;
color: var(--text-2); color: var(--text-2);
text-align: center;
} }
.nav { .nav {