diff --git a/.gitignore b/.gitignore index ba091b1..a508a3f 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,4 @@ access/token.json # Misc .DS_Store *.log +.idea \ No newline at end of file diff --git a/.stylelintrc.js b/.stylelintrc.js index 732d944..7ba839b 100644 --- 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)", + }, + ], + }, } diff --git a/src/app/__tests__/App.tsx b/src/app/__tests__/App.tsx deleted file mode 100755 index 1b5b1fd..0000000 --- a/src/app/__tests__/App.tsx +++ /dev/null @@ -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("", () => { - it("renders", () => { - const mockStore = { - default: () => null, - subscribe: () => null, - dispatch: () => null, - getState: () => ({ home: () => null }), - } - const mockRoute = { - routes: [ - { - path: "/", - exact: true, - component: () => ( -
-

Welcome Home!

-
- ), - }, - ], - } - - const tree = renderer - .create( - // @ts-expect-error - - - - - - ) - .toJSON() - - expect(tree).toMatchSnapshot() - }) -}) diff --git a/src/app/__tests__/__snapshots__/App.tsx.snap b/src/app/__tests__/__snapshots__/App.tsx.snap deleted file mode 100644 index 90c3d5a..0000000 --- a/src/app/__tests__/__snapshots__/App.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders 1`] = ` -
- - Logo -

- - REACT COOL STARTER - -

- -
-
-

- Welcome Home! -

-
-
-
-`; diff --git a/src/app/img/logo-mini.png b/src/app/img/logo-mini.png new file mode 100644 index 0000000..106a142 Binary files /dev/null and b/src/app/img/logo-mini.png differ diff --git a/src/app/img/logo.png b/src/app/img/logo.png new file mode 100644 index 0000000..cf2e2de Binary files /dev/null and b/src/app/img/logo.png differ diff --git a/src/app/index.tsx b/src/app/index.tsx index 5cf734e..cddecaf 100755 --- 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 => ( -
- - - Logo -

- {config.APP.title} +
+ + + +
+
+

+ {config.APP.title}

- -
+
{config.APP.description}
+
{/* Child routes won't render without this */} {renderRoutes(route.routes)} diff --git a/src/app/styles.module.scss b/src/app/styles.module.scss index 725e368..65a04e6 100755 --- 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; } diff --git a/src/config/default.ts b/src/config/default.ts index 23a1b47..02d551c 100755 --- 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", diff --git a/src/static/logo.png b/src/static/logo.png new file mode 100644 index 0000000..cf2e2de Binary files /dev/null and b/src/static/logo.png differ diff --git a/src/static/logo.svg b/src/static/logo.svg deleted file mode 100755 index b2204ca..0000000 --- a/src/static/logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/theme/fonts.scss b/src/theme/fonts.scss new file mode 100644 index 0000000..4026fc7 --- /dev/null +++ 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"); +} diff --git a/src/theme/fonts/GROBOLD.eot b/src/theme/fonts/GROBOLD.eot new file mode 100644 index 0000000..c351a86 Binary files /dev/null and b/src/theme/fonts/GROBOLD.eot differ diff --git a/src/theme/fonts/GROBOLD.ttf b/src/theme/fonts/GROBOLD.ttf new file mode 100644 index 0000000..4340bde Binary files /dev/null and b/src/theme/fonts/GROBOLD.ttf differ diff --git a/src/theme/fonts/GROBOLD.woff b/src/theme/fonts/GROBOLD.woff new file mode 100644 index 0000000..243e672 Binary files /dev/null and b/src/theme/fonts/GROBOLD.woff differ diff --git a/src/theme/form.scss b/src/theme/form.scss new file mode 100644 index 0000000..2277313 --- /dev/null +++ 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; +} diff --git a/src/theme/main.scss b/src/theme/main.scss new file mode 100644 index 0000000..884be4c --- /dev/null +++ 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; +} diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss new file mode 100644 index 0000000..e0f6664 --- /dev/null +++ b/src/theme/mixins.scss @@ -0,0 +1,5 @@ +@mixin desktop { + @media (min-width: 800px) { + @content; + } +} diff --git a/src/theme/reset.scss b/src/theme/reset.scss new file mode 100644 index 0000000..6aa717e --- /dev/null +++ b/src/theme/reset.scss @@ -0,0 +1,7 @@ +body, +h1, +div, +input, +button { + box-sizing: border-box; +} diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 6aefd7e..9f42039 100755 --- 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";