Skymoon/initial branding

SKYMOON-BRANDING.md

@@ -0,0 +1,56 @@
+# SkyMoon Cloud visual identity
+
+SkyMoon Cloud is built on a fork of Apache CloudStack. This initial change applies
+SkyMoon branding to the existing Vue UI without changing CloudStack's API,
+virtualization, networking, or resource management internals.
+
+## Brand source
+
+Existing, user-supplied brand files and design tokens were reused from the
+private `SkyMoonTechnologies/SkyMoonTech` repository.
+
+| Asset | Original SkyMoonTech source | Destination |
+| --- | --- | --- |
+| Full SkyMoon logo | `public/skymoonlogo.png` | `ui/public/assets/skymoon/skymoonlogo.png` |
+| Square product mark | `public/icon-192.png` | `ui/public/assets/skymoon/icon-192.png` |
+| Small favicon | `public/favicon.png` | `ui/public/assets/skymoon/favicon.png` |
+| 48px favicon | `public/favicon-48.png` | `ui/public/assets/skymoon/favicon-48.png` |
+
+Theme colors originate from the CSS HSL design tokens in
+`SkyMoonTech/app/globals.css`. In particular:
+
+- Primary blue: `#0B4B6F` (202 82% 24%)
+- Canvas background: `#F5F7FA` (210 29% 97%)
+- Dark background: `#101419` (214 24% 8%)
+- Body ink: `#0C0F13` (214 24% 6%)
+- Muted text: `#44516A` (219 22% 34%)
+- Border: `#E1E5EA` (213 18% 90%)
+
+No AI-generated images, artwork, or icons were used.
+
+## Changed UI files
+
+- `ui/public/config.json`: resource references, UI titles, light-theme tokens
+- `ui/public/index.html` and `ui/index.html`: page title and favicon
+- `ui/src/components/header/Logo.vue`: responsive existing-logo wordmark
+- `ui/src/layouts/UserLayout.vue`: branded login identity
+- `ui/src/style/vars.less`: matching fallback theme values
+
+## Run and test
+
+```bash
+cd ui
+npm ci
+npm run lint
+npm run build
+```
+
+See `ui/README.md` for details on running the frontend against a
+CloudStack management server. Branding edits do not automatically configure
+customer sign-up or multi-tenant product provisioning.
+
+## Attribution and licensing
+
+Apache CloudStack remains governed by its Apache License 2.0, with upstream
+copyright notices, license files, and attribution retained. SkyMoon brand
+artwork is derived from SkyMoonTech; do not mistake it for ASF artwork.

compose.demo.yml

@@ -0,0 +1,9 @@
+services:
+  skymoon-ui:
+    build:
+      context: ./ui
+      dockerfile: Dockerfile.demo
+    container_name: skymoon-ui-demo
+    restart: unless-stopped
+    ports:
+      - "5080:80"

ui/Dockerfile.demo

@@ -0,0 +1,18 @@
+FROM node:24-bookworm AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci --legacy-peer-deps --no-audit --no-fund
+
+COPY . .
+
+ENV NODE_OPTIONS=--openssl-legacy-provider
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=build /app/dist/ /usr/share/nginx/html/
+COPY nginx/demo.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80

ui/index.html

@@ -21,7 +21,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <title>Apache CloudStack</title>
+        <title>SkyMoon Cloud</title>
     </head>
     <body>
         <p>You're in developer mode, please build and run UI using npm.</p>

ui/nginx/demo.conf

@@ -0,0 +1,20 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /client/ {
+        proxy_pass https://qa.cloudstack.cloud;
+        proxy_ssl_server_name on;
+        proxy_set_header Host qa.cloudstack.cloud;
+        proxy_cookie_domain qa.cloudstack.cloud $host;
+        proxy_redirect https://qa.cloudstack.cloud/ /;
+        add_header Cache-Control "no-store" always;
+    }
+}

ui/public/config.json

@@ -8,51 +8,51 @@
     }
   ],
   "docBase": "http://docs.cloudstack.apache.org/en/latest",
-  "appTitle": "CloudStack",
+  "appTitle": "SkyMoon Cloud",
   "footer": "Licensed under the <a href='http://www.apache.org/licenses/' target='_blank'>Apache License</a>, Version 2.0.",
-  "loginTitle": "CloudStack",
-  "loginFavicon": "assets/logo.svg",
+  "loginTitle": "SkyMoon Cloud",
+  "loginFavicon": "assets/skymoon/favicon.png",
   "loginFooter": "",
   "resetPasswordFooter": "",
-  "logo": "assets/logo.svg",
-  "minilogo": "assets/mini-logo.svg",
-  "banner": "assets/banner.svg",
-  "favicon": "cloud.ico",
+  "logo": "assets/skymoon/icon-192.png",
+  "minilogo": "assets/skymoon/icon-192.png",
+  "banner": "assets/skymoon/skymoonlogo.png",
+  "favicon": "assets/skymoon/favicon.png",
   "error": {
     "403": "assets/403.png",
     "404": "assets/404.png",
     "500": "assets/500.png"
   },
   "theme": {
     "@layout-mode": "light",
-    "@logo-background-color": "#ffffff",
-    "@mini-logo-background-color": "#ffffff",
+    "@logo-background-color": "#F5F7FA",
+    "@mini-logo-background-color": "#F5F7FA",
     "@navigation-background-color": "#ffffff",
-    "@project-nav-background-color": "#001529",
+    "@project-nav-background-color": "#131920",
     "@project-nav-text-color": "rgba(255, 255, 255, 0.65)",
-    "@navigation-text-color": "rgba(0, 0, 0, 0.65)",
-    "@primary-color": "#1890ff",
-    "@link-color": "#1890ff",
-    "@link-hover-color": "#40a9ff",
-    "@loading-color": "#1890ff",
-    "@processing-color": "#1890ff",
+    "@navigation-text-color": "#44516A",
+    "@primary-color": "#0B4B6F",
+    "@link-color": "#0B4B6F",
+    "@link-hover-color": "#146B9B",
+    "@loading-color": "#0B4B6F",
+    "@processing-color": "#0B4B6F",
     "@success-color": "#52c41a",
     "@warning-color": "#faad14",
     "@error-color": "#f5222d",
     "@font-size-base": "14px",
-    "@heading-color": "rgba(0, 0, 0, 0.85)",
-    "@text-color": "rgba(0, 0, 0, 0.65)",
+    "@heading-color": "#0C0F13",
+    "@text-color": "#44516A",
     "@text-color-secondary": "rgba(0, 0, 0, 0.45)",
     "@disabled-color": "rgba(0, 0, 0, 0.25)",
-    "@border-color-base": "#d9d9d9",
-    "@border-radius-base": "4px",
+    "@border-color-base": "#E1E5EA",
+    "@border-radius-base": "8px",
     "@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)",
-    "@logo-width": "256px",
+    "@logo-width": "196px",
     "@logo-height": "64px",
-    "@mini-logo-width": "80px",
+    "@mini-logo-width": "64px",
     "@mini-logo-height": "64px",
-    "@banner-width": "700px",
-    "@banner-height": "110px",
+    "@banner-width": "104px",
+    "@banner-height": "104px",
     "@error-width": "256px",
     "@error-height": "256px"
   },

ui/public/index.html

@@ -22,12 +22,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link id="favicon" rel="icon" href="<%= BASE_URL %>cloud.ico">
-    <title id="title" >Apache CloudStack</title>
+    <link id="favicon" rel="icon" href="<%= BASE_URL %>assets/skymoon/favicon.png">
+    <title id="title" >SkyMoon Cloud</title>
     <style>
       .loader {
         border: 16px solid #F3F3F3;
-        border-top: 16px solid #39A7DE;
+        border-top: 16px solid #0B4B6F;
         border-radius: 50%;
         width: 80px;
         height: 80px;
@@ -48,7 +48,7 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but CloudStack UI needs JavaScript enabled. Please enable it to continue.</strong>
+      <strong>SkyMoon Cloud requires JavaScript. Please enable it to continue.</strong>
     </noscript>
     <div id="app">
       <div class="loader"></div>

ui/src/components/header/Logo.vue

@@ -16,21 +16,12 @@
 // under the License.
 
 <template>
-  <div v-if="collapsed && $config.minilogo">
+  <div v-if="$config.logo" class="skymoon-brand" :class="{ 'skymoon-brand-collapsed': collapsed }">
     <img
-      :style="{
-        width: $config.theme['@mini-logo-width'],
-        height: $config.theme['@mini-logo-height']
-      }"
-      :src="$config.minilogo" />
-  </div>
-  <div v-else-if="$config.logo">
-    <img
-      :style="{
-        width: $config.theme['@logo-width'],
-        height: $config.theme['@logo-height']
-      }"
-      :src="$config.logo" />
+      class="skymoon-brand-mark"
+      :src="collapsed ? ($config.minilogo || $config.logo) : $config.logo"
+      alt="SkyMoon Cloud" />
+    <span v-if="!collapsed" class="skymoon-brand-name">SkyMoon <strong>Cloud</strong></span>
   </div>
 </template>
 
@@ -43,7 +34,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'CloudStack',
+      default: 'SkyMoon Cloud',
       required: false
     },
     showTitle: {
@@ -59,3 +50,40 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.skymoon-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 64px;
+  padding: 4px 7px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.skymoon-brand-mark {
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+.skymoon-brand-name {
+  color: #0B4B6F;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.skymoon-brand-name strong {
+  font-weight: 750;
+}
+
+.skymoon-brand-collapsed {
+  padding: 4px;
+}
+</style>

ui/src/layouts/UserLayout.vue

@@ -33,7 +33,9 @@
           }"
           :src="$config.banner"
           class="user-layout-logo"
-          alt="logo">
+          alt="SkyMoon Cloud logo">
+        <h1 class="skymoon-login-title">SkyMoon Cloud</h1>
+        <p class="skymoon-login-subtitle">Manage your cloud resources in one place.</p>
       </div>
       <route-view></route-view>
     </div>
@@ -117,6 +119,7 @@ export default {
   }
 
   &-logo {
+    object-fit: contain;
     border-style: none;
     margin: 0 auto 2rem;
     display: block;
@@ -127,6 +130,21 @@ export default {
     }
   }
 
+  .skymoon-login-title {
+    margin: 0 0 0.25rem;
+    color: #0B4B6F;
+    font-weight: 700;
+    font-size: 1.75rem;
+    text-align: center;
+  }
+
+  .skymoon-login-subtitle {
+    margin: 0 0 1.75rem;
+    color: #44516A;
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
   &-footer {
     display: flex;
     flex-direction: column;

ui/src/style/vars.less

@@ -17,33 +17,33 @@
 
 @import "common/function";
 
-@logo-width: 256px;
+@logo-width: 196px;
 @logo-height: 64px;
-@banner-width: 450px;
-@banner-height: 110px;
+@banner-width: 104px;
+@banner-height: 104px;
 @error-width: 256px;
 @error-height: 256px;
 
-@logo-background-color: #ffffff;
+@logo-background-color: #F5F7FA;
 @navigation-background-color: #ffffff;
-@project-nav-background-color: #001529;
+@project-nav-background-color: #131920;
 @project-nav-text-color: rgba(255, 255, 255, 0.65);
-@navigation-text-color:  rgba(0, 0, 0, 0.65);
-@primary-color: #1890ff;
+@navigation-text-color: #44516A;
+@primary-color: #0B4B6F;
 @primary-color-light: tint(@primary-color, 90);
 @link-color: @primary-color;
-@link-hover-color: #40a9ff;
+@link-hover-color: #146B9B;
 @processing-color: @primary-color;
 @success-color: #52c41a;
 @warning-color: #faad14;
 @error-color: #f5222d;
 @font-size-base: 14px;
-@heading-color: rgba(0, 0, 0, 0.85);
-@text-color: rgba(0, 0, 0, 0.65);
+@heading-color: #0C0F13;
+@text-color: #44516A;
 @text-color-secondary: rgba(0, 0, 0, 0.45);
 @disabled-color: rgba(0, 0, 0, 0.25);
-@border-color-base: #d9d9d9;
-@border-radius-base: 4px;
+@border-color-base: #E1E5EA;
+@border-radius-base: 8px;
 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
 @loading-color: @primary-color;
 
@@ -102,6 +102,11 @@ a {
   background-color: @project-nav-background-color;
 }
 
+// Keep SkyMoon's wordmark legible when CloudStack switches to dark navigation.
+.sider.dark .skymoon-brand-name {
+  color: #F5F7FA;
+}
+
 .sider.light {
   background: @navigation-background-color;