5htp 0.3.6 → 0.3.9

package/skeleton/src/client/assets/theme.less

@@ -1,278 +1,231 @@
 /*----------------------------------
-- SIZES
+- GLOBAL THEMES
 ----------------------------------*/
 
-@import (reference) "@client/assets/css/theme.less";
-
-/*
-    WARN: ALL MEASURES SHOULD BE IN EM
-*/
+:root {
 
-// Text
-@sTxtPage: calc(16px + 0.10vw);
-@sIcon: 1.3em;
+    --bgOverlay: fade(@c1 + #666, 70%);
 
-// Components
-@radius: 0.75rem;
-@layoutRadius: @radius * 2rem;
-@sizeComponent: 3.8em;
-@sizeActiveIndicator: 6px;
+    --cSuccess: @cSuccess;
+    --cError: @cError;
+}   
 
-// Spacing
-@spacing: 1.2em;
-@spacing: @spacing;
-@spacingLayout: @spacing * 2;
 
-// Responsive
-@layoutWidth: 60rem;
-@pageWidth: 30rem;
-@focusWidth: 40rem;
+body {
 
-@responsive1: 50em;
-@responsive2: 46em;
-@responsive3: 36em;
-@responsive4: 36em;
+    ::selection {
+        background: @cDark;
+        color: #fff;
+    }
+}
 
 /*----------------------------------
-- COLORS
+- BASIC THEMES
 ----------------------------------*/
 
-@cBgPage: #fff;
+@whiteTheme: {
+    background: #FFF;
+    foreground: #8E8E8E;
+    accent1: @c1;
+    accent2: @c2;
+}
+
+@greyTheme: {
+    background: #F5F5F5;
+    foreground: #8E8E8E;
+    accent1: @c1;
+    accent2: @c2;
+}
+
+@silverTheme: {
+    background: #eee;
+    foreground: #777;
+    accent1: @c1;
+    accent2: @c2;
+}
 
-@c1: #9125FF;
-@c1Light: #FFB169; // #64feda
-@c1SuperLight: #FFEBD9;
-@c2: #9125FF;
-@c3: #f2eee9;
-@c4: #f1dfde;
+@darkTheme: {
+    background: #050505;
+    foreground: #999;
+    accent1: #E17DB2;
+    accent2: @c2;
+}
 
-@cSuccess: #16f7e8 - #333;
-@cError: #f67273;
-@cWarn: #FFBA7B;
-@cInfo: #4abdff;
+@darkerTheme: {
+    background: #181818;
+    foreground: #bbb;
+    accent1: #fff;
+    accent2: @c2;
+}
 
-@cDark: #333;//#2C0653;
+@darkestTheme: {
+    background: #242424;
+    foreground: #ddd;
+    accent1: #fff;
+    accent2: @c2;
+}
 
-:root {
+body,
+.bg.grey {
+    .apply-theme(@greyTheme, @whiteTheme);
+}
 
-    --pageWidth: @pageWidth;
-    --focusWidth: @focusWidth;
+.card,
+.bg.white {
+    .apply-theme(@whiteTheme, @greyTheme);
 
-    --cAccent: @c1;
-    --cAccent2: @c2;
+    // TODO: incliude these params in the theme map
+    box-shadow: 0 3px 2px fade(#000, 10%);
+    border: 1px solid fade(#000, 10%);
+}
 
-    --bgOverlay: fade(@c1 + #666, 70%);
+.bg.silver {
+    .apply-theme(@silverTheme, @whiteTheme);
 
-    --cSuccess: @cSuccess;
-    --cError: @cError;
-}   
+    box-shadow: inset 0 0 20px fade(#000, 5%)
+}
 
-#githubRibbon {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 149px;
-    height: 149px;
-    background: url(https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149);
+.bg.dark {
+    .apply-theme(@darkTheme, @darkerTheme);
+}
 
+.bg.darker {
+    .apply-theme(@darkerTheme, @darkestTheme);
 }
 
 /*----------------------------------
-- SKINS: PRIMARY COLORS
+- COLOR THEMES
 ----------------------------------*/
 
-// Light silver
-body {
-    // Background
-    @cBgPage2: @cBgPage - #090909;
-    --cBg: @cBgPage;
-    --cBg2: @cBgPage2;
-    --cBgControl: #fff;
-    --cBgHover: #f5f5f5;
-
-    // Other
-    @cLine: #eee;
-    @cLine2: @cBgPage - #191919;
-    --cLine: @cLine;
-    --cLine2: @cLine2;
-
-    // Text
-    @cTxtBase: #8E8E8E;
-    @cTxtDesc: #B1B1B1;
-    @cTxtDiscret: #D6D6D6;
-    @cTxtImportant: @cDark;
-
-    --cTxtDiscret: @cTxtDiscret;
-    --cTxtDesc: @cTxtDesc;
-    --cTxtBase: @cTxtBase;
-    --cTxtImportant: @cTxtImportant;
-
-    ::selection {
-        background: @cDark;
-        color: #fff;
-    }
+@primaryTheme: {
+    background: #111;
+    foreground: #fff;
+    accent1: #FFF;
+    accent2: #FFF;
+}
 
+@secondaryTheme: {
+    background: #F5F5F5;
+    foreground: #8E8E8E;
+    accent1: @c1;
+    accent2: @c2;
 }
 
-// White
-.white,
-.corpsChamp,
-.input,
-.card,
-i.solid { 
-
-    // Background
-    --cBg: #fff;
-    --cBgControl: #fff;
-    --cBgHover: #f5f5f5;
-
-    // Other
-    @cLine: #eee;
-    @cLine2: #fff - #191919;
-    --cLine: @cLine;
-    --cLine2: @cLine2;
-
-    // Text
-    @cTxtBase: #8E8E8E;
-    @cTxtDesc: #B1B1B1;
-    @cTxtDiscret: #D6D6D6;
-    @cTxtImportant: @cDark;
-
-    --cTxtDiscret: @cTxtDiscret;
-    --cTxtDesc: @cTxtDesc;
-    --cTxtBase: @cTxtBase;
-    --cTxtImportant: @cTxtImportant;
-
-    border-radius: @radius;
+@accentTheme: {
+    background: @c1;
+    foreground: #fff;
+    accent1: #fff;
+    accent2: #fff;;
 }
 
-&.c1, 
-&.primary { 
-    .build-theme-bg(@c1, @c1 + #aaa);
+.bg.primary {
 
-    @cBgHighlight: @c1 + #111;
-    --cBgHighlight: @cBgHighlight;
+    .apply-theme(@primaryTheme);
+    
+    &.btn:hover {
+        
+    }
+}
 
-    &.card {
-        border-bottom: solid 3px @c1 - #222;
-        box-shadow: 0 2px 50px fade(@c1 + #333, 100%);
+.bg.secondary {
+    .apply-theme(@secondaryTheme); 
+}
 
-        .btn {
-            border: solid 1px fade(#fff, 20%);
-        }
-    }
+.bg.accent {
+    .apply-theme(@accentTheme); 
 }
 
-.btn.secondary {
-    border: solid 2px fade(#000, 10%);
-    color: @c1 - #222;
-    &:hover {
-        border-color: @c1;
-        background: transparent !important;
-    }
+.color-theme( @color ) {
+    .apply-theme({ 
+        background: @color; 
+        foreground: #111;
+        accent1: #111;
+        accent2: #111;
+    });
 }
 
-// Color
-.color {
-
-    &.c1, 
-    &.primary { 
-         // Background
-         @cBgHighlight: @c1 + #333;
-         --cBg: @c1;
-         --cBgHighlight: @cBgHighlight;
-         --cBgControl: #fff;
- 
-         // Other
-         @cLine: fade(#fff, 20%);
-         @cLine2: fade(#fff, 40%);
-         --cLine: @cLine;
-         --cLine2: @cLine2;
- 
-         // Text
-         @cTxtDiscret: @c1 + #666;
-         @cTxtDesc: @c1 + #888;
-         @cTxtBase: @c1 + #888;
-         @cTxtImportant: #fff;
- 
-         --cTxtDiscret: @cTxtDiscret;
-         --cTxtDesc: @cTxtDesc;
-         --cTxtBase: @cTxtBase;
-         --cTxtImportant: @cTxtImportant;
-    }
-    &.c2 { --color: @c2; }
-    &.c3 { --color: @c3; }
-    &.c4 { --color: @c4; }
-
-    &.dark { 
-        // Background
-        --cBg: @cDark;
-        --cBgControl: #fff;
-
-        // Other
-        @cLine: fade(#fff, 20%);
-        @cLine2: fade(#fff, 40%);
-        --cLine: @cLine;
-        --cLine2: @cLine2;
-
-        // Text
-        @cTxtDiscret: fade(#fff, 30%);
-        @cTxtDesc: fade(#fff, 50%);
-        @cTxtBase: fade(#fff, 70%);
-        @cTxtImportant: #fff;
-
-        --cTxtDiscret: @cTxtDiscret;
-        --cTxtDesc: @cTxtDesc;
-        --cTxtBase: @cTxtBase;
-        --cTxtImportant: @cTxtImportant;
-    }
+.bg.light1 { .color-theme(#cce0fe ); }
+.bg.light2 { .color-theme(#c7f0ee ); }
+.bg.light3 { .color-theme(#cef5d2 ); }
+.bg.light4 { .color-theme(#feeab6 ); }
+.bg.light5 { .color-theme(#ffdccc ); }
+.bg.light6 { .color-theme(#fcccf0 ); }
+.bg.light7 { .color-theme(#e2d5f7 ); }
+
+.bg.success {
+    box-shadow: none;
+    border: none;
+    .apply-theme({ 
+        background: lighten( @cSuccess, 30% ); 
+        foreground: darken( @cSuccess, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+}
+
+.bg.error {
+    box-shadow: none;
+    border: none;
+    .apply-theme({ 
+        background: lighten( @cError, 20% ); 
+        foreground: darken( @cError, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+}
 
-    &.success { --color: @cSuccess; }
-    &.info { --color: @cInfo; }
-    &.warn { --color: @cWarn; }
-    &.error { --color: @cError; }
+.bg.warn { 
+    box-shadow: none;
+    border: none;
+    .apply-theme({ 
+        background: lighten( @cWarn, 20% ); 
+        foreground: darken( @cWarn, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
+}
 
-    
+.bg.info {
+    box-shadow: none;
+    border: none;
+    .apply-theme({ 
+        background: lighten( @cInfo, 50% ); 
+        foreground: darken( @cInfo, 50% );
+        accent1: #111;
+        accent2: #111;
+    });
 }
 
 /*----------------------------------
-- APPLY SKINS TO ELEMENTS
+- GRADIENT & IMG THEMES
 ----------------------------------*/
-i {
-    &.color {
-        color: var(--color);
-        text-shadow: 0 0 20px var(--color);
+
+.bg.img {
+
+    &.blur {
+        background: url("./img/background/header-blur.png") center;
+        background-size: cover;
+        box-shadow: 0 10px 20px fade(#000, 10%);
     }
 }
 
-.card {
-    box-shadow: 0 2px 4px fade(#000, 10%);
+/*----------------------------------
+- FOREGROUND THEMES
+----------------------------------*/
+
+// Color themes
+.primary.fg { 
+    .build-theme-fg(@c1, #fff); 
 }
 
-.card {
-    &.color {
-        background: var(--color);
-        
-        &.gray {
-            @cBgGray: @cBgPage - #060606;
-            --color: @cBgGray;
-            background-color: var(--color);
-            box-shadow: inset 0 0 30px fade(#000, 10%);
-            
-            @cTxtBase: @cBgGray - #666;
-            --cTxtBase: @cTxtBase;
-            color: var(--cTxtBase);
-        }
-
-        &.glass {
-            --color: fade(#000, 85%);
-            background-color: var(--color);
-            box-sizing: 0;
-            backdrop-filter: blur(10px) saturate(180%);
-
-            h2 {
-                font-weight: 400;
-            }
-        }
+.fg {
+    &.success { .build-theme-fg( @cSuccess ); }
+    &.error { .build-theme-fg( @cError ); }
+    &.warn { .build-theme-fg( @cWarn ); }
+
+    &.gold { .build-theme-fg( #FFD700 - #222 ); }
+
+    &.gradient {
+        color: #B4C77C;
     }
 }

package/skeleton/src/client/assets/vars.less

@@ -0,0 +1,54 @@
+/*----------------------------------
+- SIZES
+----------------------------------*/
+
+@componentsSelector: ~".card, .btn, .input.text, .input.select, i.solid, .logo";
+
+/*
+    WARN: ALL MEASURES SHOULD BE IN EM
+*/
+
+// Text
+@sTxtPage: calc(12px + 0.10vw);
+@sIcon: 1.3em;
+
+// Components
+@radius: 0.75rem;
+@sizeComponent: 4em;
+// Spacing
+@spacing: 1.2em;
+@pageWidth: 30rem;
+
+@cardPadding: @spacing * 1.5;
+@cardPaddingLong: @spacing * 1.8;
+
+@h1Size: 1.7em;
+@h2Size: 1.5em;
+@h3Size: 1.16em;
+
+/*----------------------------------
+- COLORS
+----------------------------------*/
+
+/* TO BE REMOVED */@cBgPage: #fff;
+
+// Primary colors palette
+@c1: #7A32B3; // Should be darker than c1
+@c2: #61288F;//#3bffb1 // Should be lighter than c2
+@c3: red;
+
+@cDark: #333;//#2C0653;
+
+// Status colors
+@cSuccess: #16f7e8 - #333;
+@cError: #f67273;
+@cWarn: #FFBA7B;
+@cInfo: @c1;
+
+/*----------------------------------
+- LAYOUT
+----------------------------------*/
+
+@layoutWidth: 150em;
+@navigSidebarWidth: 20em;
+@userSidebarWidth: 23em;

package/skeleton/src/client/context.ts

@@ -0,0 +1,23 @@
+// TODO: move it into core (but how to make sure usecontext returns CrossPath's context ?)
+import React from 'react';
+
+import type CrossPathServer from '@/server/app';
+import type { TRouterContext as TServerRouterRequestContext } from '@server/services/router/response';
+import type { TRouterContext as TClientRouterRequestContext } from '@client/services/router/response';
+import type CrossPathClient from '.';
+
+// TO Fix: TClientRouterRequestContext is unable to get the right type of CrossPathClient["router"]
+    //    (it gets ClientApplication instead of CrossPathClient)
+type ClientRequestContext = TClientRouterRequestContext<CrossPathClient["router"], CrossPathClient>;
+type ServerRequestContext = TServerRouterRequestContext<CrossPathServer["router"]>
+type UniversalServices = ClientRequestContext | ServerRequestContext
+
+// Non-universla services are flagged as potentially undefined
+export type ClientContext = (
+    UniversalServices 
+    & 
+    Partial<Omit<ClientRequestContext, keyof UniversalServices>>
+)
+
+export const ReactClientContext = React.createContext<ClientContext>({} as ClientContext);
+export default (): ClientContext => React.useContext<ClientContext>(ReactClientContext);

package/skeleton/src/client/index.ts

@@ -0,0 +1,59 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Core
+import ClientApplication from '@client/app';
+import type { CoreError } from '@common/errors';
+
+// Core Services
+import Router from '@client/services/router';
+
+// App Services
+import MetricsService from '@/client/services/metrics';
+
+// Config
+import { domains } from '@/common/config/router';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+/*----------------------------------
+- APPLICATION
+----------------------------------*/
+export class CrossPathCSM extends ClientApplication {
+
+    public Router = new Router(this, {
+        preload: [],
+
+        domains: __DEV__ ? {
+            ...domains.local,
+            current: domains.local.recruiters,
+        } : {
+            ...domains.prod,
+            current: domains.prod.recruiters,
+        },
+
+        context: (context, router) => ({
+            user: context.user || router.ssrContext.user
+        })
+    })
+
+    public metrics = new MetricsService(this);
+
+    public boot(): void {
+        // Tracking
+        this.Router.on('page.changed', () => {
+            this.metrics.event('pageview');
+        });
+    }
+
+    public handleError( error: CoreError | Error, httpCode?: number ) {
+        this.toast.error( error.message, undefined, null, { autohide: false });
+        // TODO: modal with conffeti
+    }
+}
+
+export default CrossPathCSM

package/skeleton/src/client/pages/_messages/400.tsx

@@ -0,0 +1,45 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { Router } from '@app';
+import { Button } from '@client/components';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+Router.error( 400, {}, ({ data }) => {
+
+    useHeader({
+        title: 'Bad request',
+        subtitle: data.message
+    });
+
+    return (
+        <div class="card w-3-4 col pd-2">
+
+            <div class="col al-center">
+
+                <i src="times-circle" class="fg error xxl" />
+
+                <h1>Bad Request</h1>
+
+                <p>{data.message}</p>
+
+                Do you think this is not normal?
+
+            </div>
+
+            <Button type="primary" link="https://crosspathworkspace.slack.com/archives/C04L2TGR5J6">
+                Report to the dev team
+            </Button>
+        </div>
+    )
+});

package/skeleton/src/client/pages/_messages/401.tsx

@@ -0,0 +1,39 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import { Router } from '@app';
+import { Button } from '@client/components';
+
+// App
+import useHeader from '@client/pages/useHeader';
+
+/*----------------------------------
+- RESSOURCES
+----------------------------------*/
+
+/*----------------------------------
+- CONTROLEUR
+----------------------------------*/
+Router.error( 401, {}, ({ message, request, page }) => {
+
+    useHeader({
+        title: 'Authentication Required',
+        subtitle: message
+    });
+
+    return (
+        <div class="card w-3-4 col al-center pd-2">
+
+            <i src="times-circle" class="fg error xxl" />
+
+            <h1>Authentication Required</h1>
+
+            <p>{message}</p>
+        </div>
+    )
+});