Merge pull request #11 from forceoranj/design-pel

Set PEL design on app
2025-06-08 08:34:20 +02:00 · 2021-11-27 14:30:03 +01:00 · 2021-11-27 14:30:03 +01:00 · b906f80d4e
commit b906f80d4e
parent acdae94b31 ac90f88915
20 changed files with 125 additions and 127 deletions
--- a/.gitignore
+++ b/.gitignore
@ -18,3 +18,4 @@ access/token.json
 # Misc
 .DS_Store
 *.log
+.idea
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -6,4 +6,14 @@ module.exports = {
        "stylelint-config-prettier",
    ],
    ignoreFiles: ["public/assets/**/*.css", "coverage/**/*.css"],
+    rules: {
+        "order/properties-alphabetical-order": undefined,
+        "selector-class-pattern": [
+            "^[A-Za-z0-9\\-]+$",
+            {
+                message:
+                    "Selector should be written with alphanumeric characters only (selector-class-pattern)",
+            },
+        ],
+    },
 }
--- a/src/app/tests/App.tsx
+++ b/src/app/tests/App.tsx
@ -1,42 +0,0 @@
-import renderer from "react-test-renderer"
-import { Provider } from "react-redux"
-import { MemoryRouter } from "react-router-dom"
-
-import App from ".."
-
-describe("<App />", () => {
-    it("renders", () => {
-        const mockStore = {
-            default: () => null,
-            subscribe: () => null,
-            dispatch: () => null,
-            getState: () => ({ home: () => null }),
-        }
-        const mockRoute = {
-            routes: [
-                {
-                    path: "/",
-                    exact: true,
-                    component: () => (
-                        <div>
-                            <h1>Welcome Home!</h1>
-                        </div>
-                    ),
-                },
-            ],
-        }
-
-        const tree = renderer
-            .create(
-                // @ts-expect-error
-                <Provider store={mockStore}>
-                    <MemoryRouter>
-                        <App route={mockRoute} />
-                    </MemoryRouter>
-                </Provider>
-            )
-            .toJSON()
-
-        expect(tree).toMatchSnapshot()
-    })
-})
--- a/src/app/tests/snapshots/App.tsx.snap
+++ b/src/app/tests/snapshots/App.tsx.snap
@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<App /> renders 1`] = `
-<div
-  className="app"
->
-  <a
-    className="header"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="Logo"
-      role="presentation"
-      src="IMAGE_MOCK"
-    />
-    <h1>
-      <em>
-        REACT COOL STARTER
-      </em>
-    </h1>
-  </a>
-  <hr />
-  <div>
-    <h1>
-      Welcome Home!
-    </h1>
-  </div>
-  <div
-    className="Toastify"
-  />
-</div>
-`;
--- a/src/app/img/logo-mini.png
+++ b/src/app/img/logo-mini.png
--- a/src/app/img/logo.png
+++ b/src/app/img/logo.png
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@ -3,7 +3,6 @@ import { RouteConfig, renderRoutes } from "react-router-config"
 import { Helmet } from "react-helmet"
 import { ToastContainer } from "react-toastify"

-import logo from "../static/logo.svg"
 import config from "../config"
 // Import your global styles here
 import "normalize.css/normalize.css"
@ -15,15 +14,20 @@ interface Route {
 }

 const App = ({ route }: Route): JSX.Element => (
-    <div className={styles.app}>
-        <Helmet {...config.APP} />
-        <Link to="/" className={styles.header}>
-            <img src={logo} alt="Logo" role="presentation" />
-            <h1>
-                <em>{config.APP.title}</em>
+    <div>
+        <Helmet {...config.APP}>
+            <meta
+                name="viewport"
+                content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+            />
+        </Helmet>
+        <header className={styles.header}>
+            <div className={styles.logo} />
+            <h1 className={styles.siteName}>
+                <Link to="/">{config.APP.title}</Link>
            </h1>
-        </Link>
-        <hr />
+            <div className={styles.siteDescription}>{config.APP.description}</div>
+        </header>
        {/* Child routes won't render without this */}
        {renderRoutes(route.routes)}
        <ToastContainer />
--- a/src/app/styles.module.scss
+++ b/src/app/styles.module.scss
@ -1,30 +1,56 @@
@import "../theme/variables";
-
-body {
-    background-color: $color-dark-gray;
-    font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
-}
-
-.app {
-    color: $color-white;
-
-    img {
-        float: left;
-        height: 70px;
-        margin-right: 1em;
-    }
-
-    hr {
-        margin-bottom: 0;
-        margin-top: 0;
-        opacity: 0.15;
-    }
-}
+@import "../theme/mixins";
+@import "../theme/main";

 .header {
-    color: inherit;
-    display: block;
-    overflow: auto;
-    padding: 15px;
-    text-decoration: none;
+    position: relative;
+    margin: 10px 0 20px;
+    padding: 4px 0 4px 125px;
+    background-color: $color-white;
+    border-top: $border-large;
+    border-bottom: $border-large;
+
+    @include desktop {
+        margin: 20px 0 35px;
+        padding: 10px 0 10px 220px;
+    }
+}
+
+.logo {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    width: 100px;
+    height: 60px;
+    background: url("../app/img/logo-mini.png") no-repeat center center;
+    background-size: cover;
+
+    @include desktop {
+        width: 181px;
+        height: 118px;
+        background: url("../app/img/logo.png") no-repeat;
+    }
+}
+
+.siteName {
+    margin: 0;
+    padding: 0;
+    font-family: $font-pel;
+    font-size: 1.8em;
+
+    @include desktop {
+        font-size: 2em;
+    }
+
+    a {
+        font-weight: 400;
+        text-decoration: none;
+        color: $color-orange;
+        text-shadow: 2px 2px 2px $color-black;
+    }
+}
+
+.siteDescription {
+    font-size: 14px;
+    color: #555;
 }
--- a/src/config/default.ts
+++ b/src/config/default.ts
@ -5,8 +5,9 @@ export default {
    GOOGLE_SHEET_ID: "1pMMKcYx6NXLOqNn6pLHJTPMTOLRYZmSNg2QQcAu7-Pw",
    APP: {
        htmlAttributes: { lang: "en" },
-        title: "REACT COOL STARTER",
-        titleTemplate: "REACT COOL STARTER - %s",
+        title: "Force Orange",
+        description: "Le site des bénévoles",
+        titleTemplate: "Force Orange - %s",
        meta: [
            {
                name: "description",
--- a/src/static/logo.png
+++ b/src/static/logo.png
--- a/src/static/logo.svg
+++ b/src/static/logo.svg
@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="570" height="510" viewBox="0, 0, 570, 510">
-  <g id="Background">
-    <rect x="0" y="0" width="570" height="510" fill="#000000" fill-opacity="0"/>
-  </g>
-  <g id="Layer_1">
-    <path d="M334.696,254.628 C334.696,282.334 312.235,304.795 284.529,304.795 C256.823,304.795 234.362,282.334 234.362,254.628 C234.362,226.922 256.823,204.461 284.529,204.461 C312.235,204.461 334.696,226.922 334.696,254.628 z" fill="#00D8FF"/>
-    <path d="M284.529,152.628 C351.885,152.628 414.457,162.293 461.636,178.535 C518.48,198.104 553.43,227.768 553.43,254.628 C553.43,282.619 516.389,314.131 455.347,334.356 C409.196,349.647 348.468,357.628 284.529,357.628 C218.975,357.628 156.899,350.136 110.239,334.187 C51.193,314.005 15.628,282.084 15.628,254.628 C15.628,227.986 48.998,198.552 105.043,179.012 C152.398,162.503 216.515,152.628 284.529,152.628 z" fill-opacity="0" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10"/>
-    <path d="M195.736,203.922 C229.385,145.574 269.017,96.198 306.656,63.442 C352.006,23.976 395.163,8.519 418.431,21.937 C442.679,35.92 451.473,83.751 438.498,146.733 C428.688,194.351 405.264,250.945 373.322,306.334 C340.573,363.122 303.072,413.153 265.945,445.606 C218.964,486.674 173.545,501.535 149.76,487.819 C126.681,474.509 117.854,430.898 128.926,372.586 C138.281,323.316 161.758,262.841 195.736,203.922 z" fill-opacity="0" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10"/>
-    <path d="M195.821,306.482 C162.075,248.19 139.09,189.195 129.509,140.227 C117.965,81.228 126.127,36.118 149.373,22.661 C173.597,8.637 219.428,24.905 267.513,67.601 C303.869,99.881 341.201,148.438 373.236,203.774 C406.08,260.507 430.697,317.983 440.272,366.356 C452.389,427.569 442.581,474.34 418.819,488.096 C395.762,501.444 353.57,487.312 308.58,448.597 C270.567,415.886 229.898,365.344 195.821,306.482 z" fill-opacity="0" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10"/>
-  </g>
-</svg>
--- a/src/theme/fonts.scss
+++ b/src/theme/fonts.scss
@ -0,0 +1,6 @@
+@font-face {
+    font-family: "Grobold";
+    src: url("../theme/fonts/GROBOLD.eot?") format("eot"),
+        url("../theme/fonts/GROBOLD.woff") format("woff"),
+        url("../theme/fonts/GROBOLD.ttf") format("truetype");
+}
--- a/src/theme/fonts/GROBOLD.eot
+++ b/src/theme/fonts/GROBOLD.eot
--- a/src/theme/fonts/GROBOLD.ttf
+++ b/src/theme/fonts/GROBOLD.ttf
--- a/src/theme/fonts/GROBOLD.woff
+++ b/src/theme/fonts/GROBOLD.woff
--- a/src/theme/form.scss
+++ b/src/theme/form.scss
@ -0,0 +1,10 @@
+@import "./variables";
+
+button {
+    padding: 5px 20px;
+    background-color: $color-orange;
+    border: 0;
+    color: $color-white;
+    border-radius: 14px;
+    font-weight: bold;
+}
--- a/src/theme/main.scss
+++ b/src/theme/main.scss
@ -0,0 +1,10 @@
+@import "./variables";
+@import "./fonts";
+@import "./reset";
+@import "./form";
+
+body {
+    padding: 0;
+    font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
+    background-color: $color-orange;
+}
--- a/src/theme/mixins.scss
+++ b/src/theme/mixins.scss
@ -0,0 +1,5 @@
+@mixin desktop {
+    @media (min-width: 800px) {
+        @content;
+    }
+}
--- a/src/theme/reset.scss
+++ b/src/theme/reset.scss
@ -0,0 +1,7 @@
+body,
+h1,
+div,
+input,
+button {
+    box-sizing: border-box;
+}
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@ -1,2 +1,8 @@
-$color-dark-gray: #333;
-$color-white: #eee;
+$color-white: #fff;
+$color-black: #000;
+$color-orange: #ea4d0a;
+
+$border-large: 4px solid $color-black;
+$border-thin: 2px solid $color-black;
+
+$font-pel: "Grobold";